/*
 * YOKO Kids v3.4.17 — editorial media, CTA spacing and button consistency.
 * Loaded after legacy correction layers so these rules are the final UI contract.
 */

:root {
  --yoko-control-radius: 14px;
  --yoko-panel-radius: 20px;
  --yoko-editorial-ratio: 990 / 555;
}

/* One radius contract for native page actions and plugin-powered forms. */
body.yoko-native-template :where(
  .yoko-button,
  .yoko-dealer-button,
  .yoko-seasonal-button,
  .yoko-archive-dealer-button,
  form button[type="submit"],
  form input[type="submit"]
) {
  box-sizing: border-box;
  border-width: 1px !important;
  border-radius: var(--yoko-control-radius) !important;
}

body.yoko-native-template main :where(
  .yoko-button,
  .yoko-dealer-button,
  .yoko-seasonal-button,
  form button[type="submit"],
  form input[type="submit"]
) {
  min-width: 0;
  max-width: 100%;
}

body.yoko-native-template :where(.yoko-button, .yoko-dealer-button, .yoko-seasonal-button) {
  overflow: hidden;
}

/* About page collection CTA: keep content away from both edges. */
.yoko-about-cta {
  padding: clamp(24px, 2.4vw, 40px) clamp(28px, 3vw, 52px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}
.yoko-about-cta > div:nth-child(2) {
  min-width: 0;
  padding-inline: clamp(4px, 1vw, 18px);
}
.yoko-about-cta > div:nth-child(2) > div {
  flex-wrap: wrap;
}
.yoko-about-cta .yoko-button {
  border-radius: var(--yoko-control-radius) !important;
}

/* Product archive CTA and dealer card. */
.yoko-archive-dealer-card {
  padding: 24px 28px !important;
  border-radius: var(--yoko-panel-radius) !important;
}
.yoko-archive-dealer-card > div {
  min-width: 0;
}
.yoko-archive-dealer-button {
  width: fit-content;
  min-height: 48px;
  margin-top: 10px;
  padding-inline: 22px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.yoko-filter-actions .yoko-button,
.yoko-archive-collection-cta .yoko-button,
.yoko-archive-empty .yoko-button {
  border-radius: var(--yoko-control-radius) !important;
}

/* Size-guide consultation panel: fixed 30px title, balanced padding and stable columns. */
.yoko-size-support {
  box-sizing: border-box;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 2.18fr) !important;
  gap: clamp(24px, 3vw, 52px) !important;
  padding: clamp(30px, 3vw, 48px) clamp(30px, 3.4vw, 56px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}
.yoko-size-support__copy,
.yoko-size-support__actions {
  min-width: 0;
}
.yoko-size-support__title {
  margin: 0 0 12px;
  color: var(--yoko-heading, #18213a);
  font-family: var(--yoko-font, "Be Vietnam Pro", Arial, sans-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-transform: none;
}
.yoko-size-support__copy p {
  max-width: 520px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.yoko-size-support__actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.yoko-size-support__actions .yoko-button {
  min-height: 92px !important;
  gap: 14px;
  padding: 18px clamp(20px, 1.8vw, 30px) !important;
  border-radius: var(--yoko-control-radius) !important;
  white-space: normal;
}
.yoko-size-support__actions .yoko-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Contact form and information cards. */
.yoko-contact-form-card,
.yoko-contact-info,
.yoko-contact-locations {
  box-sizing: border-box;
}
.yoko-contact-form-card {
  padding: clamp(30px, 3vw, 48px) clamp(28px, 3.2vw, 52px) !important;
}
.yoko-contact-form button[type="submit"],
.yoko-contact-form input[type="submit"] {
  min-height: 54px;
  border-radius: var(--yoko-control-radius) !important;
}
.yoko-contact-info {
  padding: clamp(26px, 2.4vw, 38px) !important;
}
.yoko-contact-info section {
  padding: clamp(24px, 2vw, 34px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}
.yoko-contact-info dl div {
  grid-template-columns: minmax(108px, 126px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start;
}
.yoko-contact-info dt {
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}
.yoko-contact-info dd,
.yoko-contact-info dd a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.yoko-content-cta {
  box-sizing: border-box;
  padding: clamp(28px, 3vw, 44px) clamp(30px, 3.5vw, 58px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}
.yoko-content-cta > div:first-of-type,
.yoko-content-cta > div:nth-last-child(2) {
  min-width: 0;
}
.yoko-content-cta > div:last-child {
  flex-wrap: wrap;
}
.yoko-content-cta .yoko-button {
  border-radius: var(--yoko-control-radius) !important;
}

/* Newsletter controls: one connected rounded field without square button edges. */
.yoko-form--newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.yoko-form--newsletter input[type="email"] {
  min-width: 0;
  border-radius: var(--yoko-control-radius) 0 0 var(--yoko-control-radius) !important;
}
.yoko-form--newsletter button[type="submit"],
.yoko-form--newsletter input[type="submit"] {
  border-radius: 0 var(--yoko-control-radius) var(--yoko-control-radius) 0 !important;
}
.yoko-newsletter-card {
  padding: clamp(26px, 2.4vw, 38px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}

/* News cards: 990×555 proportional media, full-width images and h3 titles. */
.yoko-news-featured__image,
.yoko-news-card__image,
.yoko-news-card__media,
.yoko-news-topics a > img,
.yoko-article-related article > a > img {
  display: block;
  width: 100%;
  aspect-ratio: var(--yoko-editorial-ratio) !important;
  overflow: hidden;
  background: #f8f4fa;
}
.yoko-news-featured__image img,
.yoko-news-card__image img,
.yoko-news-card__media img,
.yoko-news-topics a > img,
.yoko-article-related article > a > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}
.yoko-news-card h3 {
  margin: 0;
  color: var(--yoko-heading, #18213a);
  font-size: clamp(24px, 2vw, 33px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.yoko-news-card h3 a {
  color: inherit;
}
.yoko-news-card__content {
  padding: clamp(22px, 2.2vw, 34px) !important;
}
.yoko-news-card {
  border-radius: var(--yoko-panel-radius) !important;
}

/* Archive and single-post dealer CTA: visible inner gutters and rounded action. */
.yoko-news-dealer-banner,
.yoko-article-interest {
  box-sizing: border-box;
  padding: clamp(28px, 3vw, 46px) clamp(30px, 3.5vw, 58px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}
.yoko-news-dealer-banner > div,
.yoko-article-interest > div {
  min-width: 0;
}
.yoko-news-dealer-banner .yoko-button,
.yoko-article-interest .yoko-button,
.yoko-article-dealer-card .yoko-button {
  border-radius: var(--yoko-control-radius) !important;
}

/* Single post: safe gutters, proportional hero media and rounded editorial blocks. */
body.yoko-native-template .yoko-article .yoko-content-shell {
  box-sizing: border-box;
  padding-inline: clamp(20px, 2vw, 32px) !important;
}
.yoko-article-hero__image {
  width: 100%;
  aspect-ratio: var(--yoko-editorial-ratio);
  overflow: hidden;
  border-radius: var(--yoko-panel-radius) !important;
  background: #f8f4fa;
}
.yoko-article-hero__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}
.yoko-article-content {
  max-width: none !important;
}
.yoko-article-related article {
  overflow: hidden;
  border-radius: var(--yoko-control-radius) !important;
}
.yoko-article-related article > a {
  display: block !important;
}
.yoko-article-related article > a > span {
  display: block;
  padding: 18px 20px !important;
}
.yoko-article-related h3 {
  margin: 6px 0;
  color: var(--yoko-heading, #18213a);
  font-size: 17px;
  line-height: 1.4;
}
.yoko-article-dealer-card {
  padding: clamp(24px, 2vw, 34px) !important;
  border-radius: var(--yoko-panel-radius) !important;
}

/* Dealer/contact plugin forms can arrive without the native button class. */
.yoko-modal form button[type="submit"],
.yoko-modal form input[type="submit"],
.yoko-dealer-form button[type="submit"],
.yoko-dealer-form input[type="submit"] {
  border-radius: var(--yoko-control-radius) !important;
}

@media (max-width: 1023px) {
  .yoko-size-support {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .yoko-size-support__copy p {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .yoko-about-cta,
  .yoko-content-cta,
  .yoko-news-dealer-banner,
  .yoko-article-interest {
    padding: 24px 20px !important;
  }
  .yoko-about-cta > div:nth-child(2) {
    padding-inline: 0;
  }
  .yoko-size-support {
    gap: 22px !important;
    padding: 26px 20px !important;
  }
  .yoko-size-support__title {
    font-size: 30px;
  }
  .yoko-size-support__actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .yoko-size-support__actions .yoko-button {
    min-height: 64px !important;
    justify-content: flex-start !important;
    padding-inline: 22px !important;
    text-align: left !important;
  }
  .yoko-contact-form-card,
  .yoko-contact-info,
  .yoko-contact-locations {
    padding: 22px 18px !important;
  }
  .yoko-contact-info section {
    padding: 22px 18px !important;
  }
  .yoko-contact-info dl div {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .yoko-form--newsletter {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .yoko-news-card h3 {
    font-size: 24px;
  }
  body.yoko-native-template .yoko-article .yoko-content-shell {
    width: calc(100% - 24px) !important;
    padding-inline: 0 !important;
  }
  .yoko-article-hero__image {
    aspect-ratio: var(--yoko-editorial-ratio) !important;
  }
}