/* ==========================================================================
   Shop pages in the quiet-luxury direction: product page and collection page.
   Loads after kusho-luxe.css on every page.
   ========================================================================== */

/* ---------------------------------------------------------------- product page: big gallery, thumbs beneath */
@media screen and (min-width: 990px) {
  .kpdp .kpdp__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-9);
  }

  .kpdp .kgal {
    grid-template-columns: minmax(0, 1fr);
  }

  .kpdp .kgal__thumbs {
    order: 2;
    flex-direction: row;
    align-self: auto;
    contain: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.3rem 0;
  }
}

.kpdp .kgal__track {
  border: 0;
  background: var(--foam);
}

.kpdp .kgal__thumb {
  width: 8rem;
  height: 8rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--foam);
}

.kpdp .kgal__thumb[aria-current="true"],
.kpdp .kgal__thumb.is-active {
  border-color: var(--kusho-green);
}

.kpdp .kgal__arrow,
.kpdp .kgal__zoom,
.kpdp .kgal__lb-close {
  border: 0;
  background: rgba(255, 255, 255, 0.92);
}

.kpdp .kgal__counter {
  border-radius: 0;
}

.kpdp .kgal__caption {
  background: rgba(255, 255, 255, 0.92);
  font-weight: 400;
}

/* ---------------------------------------------------------------- buy column */
.kpdp .kpdp__info {
  gap: var(--sp-5);
}

.kpdp .kpdp__crumbs,
.kpdp .kpdp__crumb-list,
.kpdp .kpdp__crumb-list a {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
}

.kpdp .kpdp__crumb-list a {
  text-decoration: none;
}

.kpdp .kpdp__title {
  font-size: var(--fs-h1);
}

.kpdp .kpdp__tagline {
  color: var(--stone);
  font-size: var(--fs-body);
}

.kpdp .kpdp__rating {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}

.kpdp .kpdp__stars {
  color: var(--kusho-gold);
}

.kpdp .kprice--pdp {
  font-size: 2.4rem;
  font-weight: 400;
}

.kpdp .kprice--pdp .kprice__off {
  padding: 0;
  background: transparent;
  color: var(--kusho-green);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
}

.kpdp .kpdp__save {
  color: var(--kusho-green);
  font-weight: 600;
}

/* Highlights: gold check marks between hairlines */
.kpdp .kpdp__benefits {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.kpdp .kpdp__benefits li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: rgba(22, 33, 28, 0.85);
}

.kpdp .kpdp__check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--kusho-gold-mist);
  color: var(--kusho-gold-text);
}

.kpdp .kpdp__mini-title,
.kpdp .kopt__label,
.kpdp .kdeliv__label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.kpdp .kopt__pill {
  border-radius: 0;
  padding: 0.8rem 1.4rem;
  font-size: var(--fs-label);
}

.kpdp .kopt__pill[aria-checked="true"],
.kpdp .kopt__pill.is-selected {
  border-color: var(--kusho-green);
  background: var(--white);
  color: var(--kusho-green);
}

.kpdp .kqty {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--white);
}

.kpdp .kqty__btn {
  background: transparent;
}

.kpdp .kpdp__atc.button {
  --color-button: 4, 105, 56;
  --color-button-text: 255, 255, 255;
}

.kpdp .kpdp__buynow.button {
  margin-top: var(--sp-2);
}

/* Delivery check: inline, hairline, no box */
.kpdp .kdeliv {
  padding: var(--sp-4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.kpdp .kdeliv__label {
  color: var(--ink);
}

.kpdp .kdeliv__label .kusho-icon {
  color: var(--kusho-green);
}

.kpdp .kdeliv__input {
  border-radius: 0;
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

.kpdp .kdeliv__input:focus-visible {
  outline: 0;
  border-bottom-color: var(--kusho-green);
}

.kpdp .kdeliv__btn.button {
  --color-button: 22, 33, 28;
  --color-button-text: 22, 33, 28;
  min-height: 4.4rem;
  padding-inline: var(--sp-5);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink);
}

@media (hover: hover) {
  .kpdp .kdeliv__btn.button:hover {
    --color-button-text: 255, 255, 255;
    background: var(--ink);
  }
}

/* Promises: one quiet row, no boxes */
.kpdp .kpdp__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.kpdp .kpdp__trust li {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: rgba(22, 33, 28, 0.8);
}

.kpdp .kpdp__trust .kusho-icon {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--kusho-green);
}

@media screen and (min-width: 990px) {
  .kpdp .kpdp__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kpdp .kpdp__link-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--kusho-green);
}

/* Accordions: hairlines, thin uppercase titles */
.kpdp .kacc__summary,
.kpdp .kacc summary {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
}

.kpdp .kacc,
.kpdp .kacc__item,
.kpdp .kspecs__row {
  border-color: var(--line);
}

/* Reviews summary: no box */
.krev .krev__summary {
  padding: var(--sp-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.krev .krev__score {
  font-family: var(--font-display);
  font-weight: 600;
}

.krev .krev__stars,
.krev.krev .krating__star {
  color: var(--kusho-gold);
}

.ksticky.ksticky {
  border-top: 1px solid var(--line);
  box-shadow: none;
}

/* ---------------------------------------------------------------- collection page */
/* Compact band: title, one line, count, then the browse strip. No tall photo. */
.kcol.kph {
  padding-block: var(--sp-6) 0;
}

@media screen and (min-width: 990px) {
  .kcol.kph {
    padding-block: var(--sp-7) 0;
  }
}

.kcol .kph__crumbs ol {
  margin-bottom: var(--sp-4);
}

.kcol .kph__title {
  margin-bottom: 0;
  font-size: var(--fs-h1);
}

.kcol .kph__text {
  margin-top: var(--sp-3);
  max-width: 64ch;
}

.kcol .ksec-eyebrow {
  margin-bottom: var(--sp-3);
}

.kcol__count {
  margin: var(--sp-3) 0 0;
  color: var(--stone);
}

.kcol__photo {
  aspect-ratio: 16 / 10;
}

@media screen and (min-width: 990px) {
  .kcol__photo {
    aspect-ratio: 5 / 3.4;
  }
}

.kcol__nav {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kcol__nav-list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.kcol__nav-list::-webkit-scrollbar {
  display: none;
}

.kcol__nav-link {
  position: relative;
  display: inline-block;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) 0;
  margin-right: var(--sp-4);
  color: var(--stone);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-foam);
}

.kcol__nav-link::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: var(--sp-5);
  height: 1px;
  background: var(--kusho-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-foam);
}

.kcol__nav-link:hover,
.kcol__nav-link.is-current {
  color: var(--kusho-green);
}

.kcol__nav-link.is-current::after,
.kcol__nav-link:hover::after {
  transform: scaleX(1);
}

.facets-container {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Cards: the product photos are square, so show them whole */
.kcard__media {
  aspect-ratio: 1 / 1;
}

.kcard__img {
  object-fit: cover;
}

.kcard__body {
  padding-top: var(--sp-4);
}

.kcard__title {
  color: var(--ink);
}

/* ---------------------------------------------------------------- product page: see it in use (full-bleed clip) */
.kpvid {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 64svh;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}

@media screen and (min-width: 990px) {
  .kpvid {
    min-height: 76svh;
  }
}

.kpvid__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.kpvid__poster,
.kpvid__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

.kpvid__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 10, 0.82) 0%, rgba(8, 14, 10, 0.35) 45%, rgba(8, 14, 10, 0.1) 100%);
  pointer-events: none;
}

.kpvid__content {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-8) var(--sp-6);
}

@media screen and (min-width: 990px) {
  .kpvid__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--sp-9);
  }
}

.kpvid__title {
  max-width: 16ch;
  margin: 0;
  color: var(--white);
  font-size: var(--fs-h1);
}

.kpvid__text {
  max-width: 44ch;
  margin: var(--sp-4) 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.kpvid__facts {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kpvid__facts li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.kpvid__num {
  grid-row: span 2;
  padding-top: 0.3rem;
  color: var(--kusho-gold);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
}

.kpvid__fact-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
}

.kpvid__fact-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.kpvid .kusho-video__toggle {
  right: auto;
  left: var(--sp-4);
  bottom: var(--sp-4);
}

/* ---------------------------------------------------------------- vertical gallery (product.stacked template)
   Thumbnails in a column on the left at every size; the big photo moves up and down with snap. */
.kpdp .kgal--rail {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
}

@media screen and (min-width: 990px) {
  .kpdp .kgal--rail {
    grid-template-columns: 8.8rem minmax(0, 1fr);
    gap: var(--sp-3);
  }
}

.kpdp .kgal--rail .kgal__thumbs {
  order: -1;
  flex-direction: column;
  align-self: stretch;
  contain: size;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.kpdp .kgal--rail .kgal__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.kpdp .kgal--rail .kgal__stage {
  min-width: 0;
}

.kpdp .kgal--rail .kgal__track {
  flex-direction: column;
  height: auto;
  aspect-ratio: var(--kgal-ratio, 1);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}

.kpdp .kgal--rail .kgal__slide {
  flex: 0 0 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* Arrows become up and down, centred top and bottom */
.kpdp .kgal--rail .kgal__stage .kgal__arrow {
  top: auto;
  left: 50%;
  margin: 0;
  transform: translateX(-50%) rotate(90deg);
}

.kpdp .kgal--rail .kgal__stage .kgal__arrow--prev {
  top: var(--sp-3);
}

.kpdp .kgal--rail .kgal__stage .kgal__arrow--next {
  bottom: var(--sp-3);
  right: auto;
}

@media screen and (max-width: 749px) {
  .kpdp .kgal--rail .kgal__stage .kgal__arrow {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------- product page: before / after */
.kpcmp .kcmp__intro {
  max-width: 44rem;
}

.kpcmp__legend {
  display: flex;
  gap: var(--sp-5);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
}

.kpcmp__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.kpcmp__swatch {
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--line);
}

.kpcmp__swatch--before {
  background: var(--foam);
}

.kpcmp__swatch--after {
  background: var(--kusho-green);
  border-color: var(--kusho-green);
}

/* ---------------------------------------------------------------- product page: Kusho vs regular (ticks and crosses) */
.kvs__table {
  max-width: 84rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.kvs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem 8rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

@media screen and (min-width: 750px) {
  .kvs__row {
    grid-template-columns: minmax(0, 1fr) 16rem 16rem;
  }
}

.kvs__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: var(--sp-4) var(--sp-2);
}

.kvs__cell--label {
  display: grid;
  gap: 0.2rem;
  align-content: center;
  justify-content: start;
  padding-left: 0;
  text-align: left;
}

.kvs__feature {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.kvs__detail {
  color: var(--stone);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.kvs__cell--kusho {
  background: var(--kusho-green-mist);
}

.kvs__row--head .kvs__cell {
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-align: center;
  text-transform: uppercase;
}

.kvs__row--head .kvs__cell--kusho {
  color: var(--kusho-green);
}

.kvs__row--head .kvs__cell--rival {
  color: var(--stone);
}

.kvs__mark {
  width: 2.4rem;
  height: 2.4rem;
}

.kvs__yes,
.kvs__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}

.kvs__yes {
  background: var(--kusho-green);
  color: var(--white);
}

.kvs__no {
  background: #f3e3e1;
  color: #a33a2f;
}

.kvs__note {
  max-width: 84rem;
  margin: var(--sp-4) auto 0;
  color: var(--stone);
  font-size: var(--fs-micro);
  text-align: center;
}

/* Portrait (4:5) product photos: keep the whole photo and its thumbnails on screen on desktop by capping
   the stage to the viewport height. The width follows the photo's own ratio, so nothing is cropped or boxed. */
@media screen and (min-width: 990px) {
  .kpdp .kgal__stage,
  .kpdp .kgal:not(.kgal--rail) .kgal__thumbs {
    max-width: min(100%, calc(78svh * var(--kgal-ratio, 1)));
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------- phones: photos open as a full screen you scroll
   Tapping a photo fills the screen with every photo stacked top to bottom, a sticky Back bar and a counter.
   The phone's own back button closes it too (kusho-product.js pushes one history entry). */
.kgal__lb-bar {
  display: none;
}

@media screen and (max-width: 989px) {
  .kgal__lightbox[open] {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--white);
    box-shadow: none;
  }

  .kgal__lb-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding-inline: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .kgal__lb-back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--tap);
    padding-inline: var(--sp-2);
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .kgal__lb-count {
    margin: 0;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
  }

  .kgal__lb-stack {
    display: grid;
    gap: 0.4rem;
    height: calc(100% - var(--tap));
    margin: 0;
    padding: 0 0 var(--sp-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    background: var(--foam);
  }

  .kgal__lb-stack img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* the desktop single-photo view and its controls stay out of the way */
  .kgal__lightbox .kgal__lb-figure,
  .kgal__lightbox .kgal__arrow--lb,
  .kgal__lightbox .kgal__lb-close {
    display: none;
  }
}

@media screen and (min-width: 990px) {
  .kgal__lb-stack {
    display: none;
  }
}