/*
 * Kokando public page shell contract (2026-08-20)
 * SSOT for breadcrumb axis, page heading geometry and first-content start.
 * Transaction/PDP/account internals retain their route-specific layouts.
 */

:root {
  --kk-page-max: 1200px;
  --kk-page-gutter: 20px;
  --kk-page-gutter-sp: 16px;
  --kk-page-top: 20px;
  --kk-crumb-to-title: 24px;
  --kk-title-to-content: 32px;
  --kk-page-title-bar: 5px;
  --kk-page-title-gap: 16px;
  --kk-page-title-bar-sp: 4px;
  --kk-page-title-gap-sp: 13px;
  --kk-section-title-bar: 4px;
  --kk-section-title-gap: 14px;
  --kk-section-marker-width: 10px;
  --kk-section-marker-gap: 8px;
}

/* Simple public routes own their outer gutter; do not let breadcrumbs add a second gutter. */
body main:is(.gd,.plp-main,.ct,.bl,.kk-selection-page,.kk-legal-page) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--kk-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--kk-page-top) !important;
  padding-left: var(--kk-page-gutter) !important;
  padding-right: var(--kk-page-gutter) !important;
}

body main:is(.gd,.plp-main,.ct,.bl,.kk-selection-page,.kk-legal-page) > .p-breadcrumbs,
body main:is(.gd,.plp-main,.ct,.bl,.kk-selection-page,.kk-legal-page) > .t-crumbs {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--kk-crumb-to-title) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* One breadcrumb visual language. */
body main > .p-breadcrumbs .c-breadcrumbs,
body main > .t-crumbs .c-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: var(--font-sans, "Noto Sans JP", sans-serif) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  letter-spacing: .05em !important;
}
body main > .p-breadcrumbs .c-breadcrumbs__item,
body main > .t-crumbs .c-breadcrumbs__item {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body main > .p-breadcrumbs .c-breadcrumbs__item:not(:last-child)::after,
body main > .t-crumbs .c-breadcrumbs__item:not(:last-child)::after {
  content: none !important;
}
body main > .p-breadcrumbs .c-breadcrumbs__item + .c-breadcrumbs__item::before,
body main > .t-crumbs .c-breadcrumbs__item + .c-breadcrumbs__item::before {
  content: "›" !important;
  display: inline-block !important;
  margin: 0 9px !important;
  color: #CFCAC1 !important;
  font-size: 12px !important;
}
body main > .p-breadcrumbs .c-breadcrumbs__item__inner,
body main > .t-crumbs .c-breadcrumbs__item__inner {
  color: var(--t-ink-mute, #8C8880) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
}
body main > .p-breadcrumbs .c-breadcrumbs__item__inner.is-current,
body main > .t-crumbs .c-breadcrumbs__item__inner.is-current {
  color: var(--t-ink, #26231F) !important;
  font-weight: 500 !important;
}
body main > .p-breadcrumbs .c-breadcrumbs__item__inner:hover,
body main > .t-crumbs .c-breadcrumbs__item__inner:hover {
  color: var(--t-shu, #C4222A) !important;
}

/* Shared public-page H1 geometry. */
body main.gd > h1,
body main.plp-main > .plp-h > h1,
body main.ct > .bl-h > h1,
body main.bl > .bl-h > h1,
body main.kk-selection-page > .plp-h > h1,
body main.kk-legal-page > .bl-h > h1,
body main.kk-generic-page .p-page_header__inner__title {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 0 0 var(--kk-page-title-gap) !important;
  border: 0 !important;
  border-left: var(--kk-page-title-bar) solid var(--t-shu, var(--red, #C4222A)) !important;
  color: var(--t-ink, #26231F) !important;
  font-family: var(--font-serif, "Noto Serif JP", serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-align: left !important;
}

/* Head blocks end on the same vertical rhythm. */
body main:is(.plp-main,.ct,.bl,.kk-selection-page,.kk-legal-page) > :is(.plp-h,.bl-h) {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
  margin: 0 0 var(--kk-title-to-content) !important;
  padding: 0 !important;
}
body main:is(.plp-main,.ct,.bl,.kk-selection-page,.kk-legal-page) > :is(.plp-h,.bl-h) > span,
body main.gd > .sub {
  color: #B4AFA6 !important;
  font-family: var(--font-sans, "Noto Sans JP", sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: .22em !important;
}

/* gd has a direct H1/sub pair instead of a heading wrapper. */
body main.gd > h1 { margin-bottom: var(--kk-title-to-content) !important; }
body main.gd > h1 + .sub {
  margin-top: -24px !important;
  margin-bottom: var(--kk-title-to-content) !important;
  padding-left: calc(var(--kk-page-title-bar) + var(--kk-page-title-gap)) !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  body main:is(.gd,.plp-main,.ct,.bl,.kk-selection-page,.kk-legal-page) {
    padding-top: 16px !important;
    padding-left: var(--kk-page-gutter-sp) !important;
    padding-right: var(--kk-page-gutter-sp) !important;
  }
  body main.gd > h1,
  body main.plp-main > .plp-h > h1,
  body main.ct > .bl-h > h1,
  body main.bl > .bl-h > h1,
  body main.kk-selection-page > .plp-h > h1,
  body main.kk-legal-page > .bl-h > h1,
  body main.kk-generic-page .p-page_header__inner__title {
    padding-left: var(--kk-page-title-gap-sp) !important;
    border-left-width: var(--kk-page-title-bar-sp) !important;
    font-size: 20px !important;
    letter-spacing: .08em !important;
  }
}

/* PLP used a narrower 1180px shell plus 40px inner gutter. Align it to the same 1200/20 axis. */
#product-index-view .t-plp2 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--kk-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kk-page-gutter) !important;
  padding-right: var(--kk-page-gutter) !important;
}
#product-index-view .t-plp2__filterbar {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Editorial detail keeps a readable 760px measure, but starts on the common page axis. */
body main.bl > article.art {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  #product-index-view .t-plp2 {
    padding-left: var(--kk-page-gutter-sp) !important;
    padding-right: var(--kk-page-gutter-sp) !important;
  }
}

@media (max-width: 767px) {
  /* EC FORCE's legacy 18px row gutter caused a 2px drift from the 16px breadcrumb axis. */
  body main.l-container > .l-container__row {
    padding-left: var(--kk-page-gutter-sp) !important;
    padding-right: var(--kk-page-gutter-sp) !important;
  }
  body main.l-container > header.p-page_header.t-legal_hero {
    padding-left: var(--kk-page-gutter-sp) !important;
    padding-right: var(--kk-page-gutter-sp) !important;
  }
  body main.l-container > header.p-page_header.t-legal_hero .p-page_header__inner__title,
  #product-index-view .t-plp2__title {
    padding-left: var(--kk-page-title-gap-sp) !important;
    border-left-width: var(--kk-page-title-bar-sp) !important;
    font-size: 20px !important;
  }
}

/* 2026-08-20 heading geometry contract: same marker-to-text rhythm by hierarchy. */
body main.gd > section > h2,
body main.kk-legal-page .kk-admin-term > h2,
body main.kk-legal-page .terms > h2,
body main.kk-generic-page .p-page_content__inner > h2,
body main.kk-generic-page .p-page_content__inner > section > h2 {
  box-sizing: border-box !important;
  padding-left: var(--kk-section-title-gap) !important;
  border-left: var(--kk-section-title-bar) solid var(--t-shu, var(--red, #C4222A)) !important;
}
body main.gd > section > h3,
body main.kk-generic-page .p-page_content__inner > h3,
body main.kk-generic-page .p-page_content__inner > section > h3 {
  gap: var(--kk-section-marker-gap) !important;
}
body main.gd > section > h3::before,
body main.kk-generic-page .p-page_content__inner > h3::before,
body main.kk-generic-page .p-page_content__inner > section > h3::before {
  box-sizing: border-box !important;
  width: var(--kk-section-marker-width) !important;
  min-width: var(--kk-section-marker-width) !important;
  flex: 0 0 var(--kk-section-marker-width) !important;
}

/* PDP uses the same breadcrumb shell as other non-TOP pages; product title remains PDP-owned. */
#product-show-view > .kk-pdp-breadcrumbs {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--kk-page-max) !important;
  margin: 0 auto !important;
  padding: 16px var(--kk-page-gutter) 14px !important;
}
#product-show-view > .kk-pdp-breadcrumbs .c-breadcrumbs {
  margin: 0 !important;
}

@media (max-width: 767px) {
  body main.gd > h1 + .sub {
    padding-left: calc(var(--kk-page-title-bar-sp) + var(--kk-page-title-gap-sp)) !important;
  }
  #product-show-view > .kk-pdp-breadcrumbs {
    padding: 12px var(--kk-page-gutter-sp) 10px !important;
  }
}