/*
 * YOKO Kids v3.3.2
 * Rey full-width alignment, typography, icon scale, forms and page corrections.
 */

/* ---------- Rey full-width alignment ---------- */
body.yoko-native-template,
body.yoko-pdp-php-template {
  --yoko-page-gutter: clamp(20px, 3vw, 56px);
  --yoko-content-max: 1520px;
  font-family: var(--yoko-font);
}

body.yoko-native-template :where(
  .rey-siteContainer,
  .rey-mainContent,
  .rey-siteContent,
  .rey-siteContent__inner,
  .rey-pageContent,
  .rey-pageContent > .container,
  .rey-siteContent > .container,
  .site-main
),
body.yoko-pdp-php-template :where(
  .rey-siteContainer,
  .rey-mainContent,
  .rey-siteContent,
  .rey-siteContent__inner,
  .rey-pageContent,
  .rey-pageContent > .container,
  .rey-siteContent > .container,
  .site-main
) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body.yoko-native-template :where(
  .yoko-shell,
  .yoko-container,
  .yoko-pdp__container,
  .yoko-pdp__shell,
  .yoko-seasonal-container,
  .yoko-dealer-shell,
  .yoko-content-shell,
  .yoko-about__shell,
  .yoko-archive__shell,
  .yoko-homepage__shell,
  .yoko-sales-policy__shell,
  .yoko-size-guide__shell,
  .yoko-reading-shell
),
body.yoko-pdp-php-template :where(
  .yoko-shell,
  .yoko-container,
  .yoko-pdp__container,
  .yoko-pdp__shell,
  .yoko-seasonal-container,
  .yoko-dealer-shell,
  .yoko-content-shell,
  .yoko-about__shell,
  .yoko-archive__shell,
  .yoko-homepage__shell,
  .yoko-sales-policy__shell,
  .yoko-size-guide__shell,
  .yoko-reading-shell
) {
  width: calc(100% - (var(--yoko-page-gutter) * 2)) !important;
  max-width: var(--yoko-content-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Keep the page edge aligned with the Rey header/footer instead of creating a card-like page container. */
body.yoko-native-template main,
body.yoko-pdp-php-template main {
  width: 100%;
  max-width: none;
}

/* Custom PHP templates own their vertical rhythm; remove the generic Rey/site-sync page padding. */
body.yoko-native-template.yoko-site-sync .rey-siteContent,
body.yoko-pdp-php-template.yoko-site-sync .rey-siteContent {
  padding-block: 0 !important;
}

body.yoko-native-template .rey-siteFooter,
body.yoko-pdp-php-template .rey-siteFooter {
  font-family: var(--yoko-font) !important;
}

/* ---------- Unified typography ---------- */
body.yoko-native-template main,
body.yoko-pdp-php-template main {
  color: var(--yoko-text-900);
  font-size: 16px;
  line-height: 1.65;
}

body.yoko-native-template main :where(h1,h2,h3,h4,h5,h6),
body.yoko-pdp-php-template main :where(h1,h2,h3,h4,h5,h6),
.yoko-modal :where(h1,h2,h3,h4) {
  font-family: var(--yoko-font) !important;
  color: var(--yoko-heading);
  font-weight: 700;
  letter-spacing: -.03em;
}

body.yoko-native-template main :where(
  .yoko-home-hero h1,
  .yoko-seasonal-hero h1,
  .yoko-dealer-hero h1,
  .yoko-size-hero h1,
  .yoko-contact-hero h1,
  .yoko-about-hero h1,
  .yoko-sales-hero h1,
  .yoko-thanks-hero h1,
  .yoko-archive-hero h1,
  .yoko-summary__title
),
body.yoko-pdp-php-template main .yoko-summary__title {
  font-size: clamp(46px, 3.65vw, 64px) !important;
  line-height: 1.08 !important;
}

body.yoko-native-template main :where(
  .yoko-section-heading h2,
  .yoko-content-page h2,
  .yoko-about h2,
  .yoko-dealer-page h2,
  .yoko-size-guide h2,
  .yoko-product-knowledge h2,
  .yoko-story-section h2,
  .yoko-section__head h2
),
body.yoko-pdp-php-template main :where(.yoko-product-knowledge h2,.yoko-story-section h2,.yoko-section__head h2) {
  font-size: clamp(30px, 2.5vw, 42px) !important;
  line-height: 1.2;
}

body.yoko-native-template main :where(p,li,dd,dt,input,select,textarea,button),
body.yoko-pdp-php-template main :where(p,li,dd,dt,input,select,textarea,button) {
  font-family: var(--yoko-font);
}

body.yoko-native-template main :where(p,li),
body.yoko-pdp-php-template main :where(p,li) {
  font-size: 16px;
}

/* ---------- Canonical icon scale ---------- */
body.yoko-native-template main img.yoko-icon,
body.yoko-pdp-php-template main img.yoko-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

body.yoko-native-template main :where(a,button) > img.yoko-icon,
body.yoko-pdp-php-template main :where(a,button) > img.yoko-icon,
.yoko-modal :where(a,button) > img.yoko-icon {
  width: 22px;
  height: 22px;
}

body.yoko-native-template main :where(
  .yoko-trust-card,
  .yoko-home-trust article,
  .yoko-seasonal-trust-item,
  .yoko-content-trust article,
  .yoko-about-trust > div
) > img.yoko-icon,
body.yoko-pdp-php-template main .yoko-trust-card > img.yoko-icon {
  width: 76px !important;
  height: 76px !important;
  margin-inline: auto;
}

body.yoko-native-template main :where(
  .yoko-dealer-card-icon,
  .yoko-dealer-right-icon,
  .yoko-dealer-step-icon,
  .yoko-dealer-metric-icon,
  .yoko-category-icon,
  .yoko-seasonal-category-icon
) {
  width: 72px !important;
  height: 72px !important;
}

body.yoko-native-template main :where(
  .yoko-dealer-mini-icon,
  .yoko-dealer-prep-icon,
  .yoko-contact-hero__benefits img.yoko-icon,
  .yoko-contact-support-grid img.yoko-icon,
  .yoko-size-service img.yoko-icon,
  .yoko-size-table__suggestion img.yoko-icon
) {
  width: 48px !important;
  height: 48px !important;
}

body.yoko-pdp-php-template main .yoko-quick-service__item > span {
  flex-basis: 62px !important;
}
body.yoko-pdp-php-template main .yoko-quick-service__item > span img.yoko-icon {
  width: 60px !important;
  height: 60px !important;
}
body.yoko-pdp-php-template main .yoko-trust-card > img.yoko-icon {
  width: 78px !important;
  height: 78px !important;
}

/* ---------- Dealer page and inline registration form ---------- */
.yoko-dealer-hero__grid {
  min-height: clamp(600px, 38vw, 760px);
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
}
.yoko-dealer-hero__copy { padding-block: clamp(54px, 5vw, 88px); }
.yoko-dealer-hero__media { min-height: clamp(600px, 38vw, 760px); }
.yoko-dealer-hero__mini { gap: 18px; }
.yoko-dealer-mini-icon { width: 46px !important; height: 46px !important; }
.yoko-dealer-intro-card { min-height: 190px; }
.yoko-dealer-right-card > span { width: 94px; height: 94px; }
.yoko-dealer-right-card { grid-template-columns: 94px 1fr; }
.yoko-dealer-step-icon { width: 58px !important; height: 58px !important; }
.yoko-dealer-prep-icon { width: 50px !important; height: 50px !important; }
.yoko-dealer-metric-icon { width: 62px !important; height: 62px !important; }

.yoko-dealer-lead__box {
  grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr) !important;
  gap: clamp(30px, 4vw, 64px) !important;
  padding: clamp(28px, 3vw, 48px) !important;
}
.yoko-dealer-lead__intro {
  grid-template-columns: minmax(120px, 180px) 1fr !important;
}
.yoko-dealer-lead__form,
.yoko-dealer-lead__form .yoko-email-dealer-form,
.yoko-dealer-lead__form .yoko-email-form {
  width: 100%;
  min-width: 0;
}

/* The direct-email shortcode has changed markup between releases. These rules
   support both form-as-root and nested-form variants. */
.yoko-dealer-lead__form form,
.yoko-modal__content form,
.yoko-v332-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 18px 20px !important;
  width: 100% !important;
  max-width: none !important;
}
.yoko-dealer-lead__form form > *,
.yoko-modal__content form > *,
.yoko-v332-form-grid > * {
  min-width: 0;
}
.yoko-dealer-lead__form :where(.yoko-v332-full,.is-wide,fieldset,.form-actions,.form-consent,.consent,.privacy,.newsletter-consent),
.yoko-modal__content :where(.yoko-v332-full,.is-wide,fieldset,.form-actions,.form-consent,.consent,.privacy,.newsletter-consent) {
  grid-column: 1 / -1 !important;
}
.yoko-dealer-lead__form :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels),
.yoko-modal__content :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  grid-column: 1 / -1 !important;
}
.yoko-dealer-lead__form label:has(input[type="checkbox"]),
.yoko-dealer-lead__form label:has(input[type="radio"]),
.yoko-modal__content label:has(input[type="checkbox"]),
.yoko-modal__content label:has(input[type="radio"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--yoko-border);
  border-radius: 10px;
  background: #fff;
  line-height: 1.35;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
}
.yoko-dealer-lead__form label:has(input[type="checkbox"]) span,
.yoko-dealer-lead__form label:has(input[type="radio"]) span,
.yoko-modal__content label:has(input[type="checkbox"]) span,
.yoko-modal__content label:has(input[type="radio"]) span {
  display: inline !important;
  width: auto !important;
  writing-mode: horizontal-tb !important;
  white-space: normal;
}
.yoko-dealer-lead__form :where(input[type="checkbox"],input[type="radio"]),
.yoko-modal__content :where(input[type="checkbox"],input[type="radio"]) {
  width: 22px !important;
  height: 22px !important;
  min-height: 0 !important;
  flex: 0 0 22px;
}
.yoko-dealer-lead__form :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.yoko-modal__content :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  font-size: 15px !important;
}
.yoko-dealer-lead__form textarea,
.yoko-modal__content textarea { min-height: 130px !important; }
.yoko-dealer-lead__form button[type="submit"],
.yoko-modal__content button[type="submit"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 56px !important;
}

/* Some Direct Email releases return a DIV as the visual form root. */
.yoko-v332-form-grid :where(.yoko-v332-full,.is-wide,fieldset,.form-actions,.form-consent,.consent,.privacy,.newsletter-consent,.yoko-email-dealer-form__head,.yoko-email-form__head,.form-header,.form-title,.form-description,.form-status){grid-column:1/-1!important}
.yoko-v332-form-grid :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;grid-column:1/-1!important}
.yoko-v332-form-grid label:has(input[type="checkbox"]),.yoko-v332-form-grid label:has(input[type="radio"]){display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;min-width:0;min-height:54px;padding:12px 14px;border:1px solid var(--yoko-border);border-radius:10px;background:#fff;line-height:1.35;writing-mode:horizontal-tb!important;word-break:normal!important}
.yoko-v332-form-grid label:has(input[type="checkbox"]) span,.yoko-v332-form-grid label:has(input[type="radio"]) span{display:inline!important;width:auto!important;writing-mode:horizontal-tb!important;white-space:normal}
.yoko-v332-form-grid :where(input[type="checkbox"],input[type="radio"]){width:22px!important;height:22px!important;min-height:0!important;flex:0 0 22px}
.yoko-v332-form-grid :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%!important;min-width:0!important;min-height:54px!important;font-size:15px!important}
.yoko-v332-form-grid textarea{min-height:130px!important}.yoko-v332-form-grid button[type="submit"]{grid-column:1/-1!important;width:100%!important;min-height:56px!important}

/* ---------- Modal ---------- */
.yoko-modal { padding: clamp(10px, 2vw, 28px); }
.yoko-modal__dialog {
  width: min(100%, 1080px) !important;
  max-height: min(92vh, 980px) !important;
  padding: clamp(28px, 3vw, 48px) !important;
  border-radius: 26px !important;
}
.yoko-modal__close {
  position: sticky !important;
  z-index: 5;
  top: 0 !important;
  float: right;
  width: 58px !important;
  height: 58px !important;
  margin: -10px -10px -48px 0;
  border: 2px solid var(--yoko-line-strong) !important;
  box-shadow: 0 8px 24px rgb(34 20 42 / 12%);
  font-size: 36px !important;
  font-weight: 400;
}
.yoko-modal__header { padding-right: 74px !important; }
.yoko-modal__header h2 { font-size: clamp(38px, 4vw, 56px) !important; line-height: 1.08; }
.yoko-modal__header p { font-size: 18px; }

/* ---------- Size guide: canonical icons, never random media in measurement cards ---------- */
.yoko-size-main {
  grid-template-columns: minmax(0, 1.75fr) minmax(420px, .75fr) !important;
}
.yoko-size-subheading__icon {
  width: 58px !important;
  height: 58px !important;
}
.yoko-size-subheading__icon img.yoko-icon {
  width: 54px !important;
  height: 54px !important;
}
.yoko-size-measure-card {
  grid-template-columns: 132px 1fr !important;
  min-height: 164px !important;
  padding: 22px !important;
}
.yoko-size-measure-card__image.is-icon {
  height: 120px !important;
  overflow: visible !important;
  background: linear-gradient(145deg, #fbf7fe, #f2e8fa) !important;
}
.yoko-size-measure-card__image.is-icon span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
.yoko-size-measure-card__image.is-icon img.yoko-icon {
  width: 96px !important;
  height: 96px !important;
}
.yoko-size-table__suggestion img.yoko-icon {
  width: 46px !important;
  height: 46px !important;
}

/* ---------- About: horizontal brand-story image ---------- */
.yoko-about-story {
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr) !important;
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  padding: clamp(20px, 2vw, 32px);
  overflow: visible !important;
}
.yoko-about-story__image {
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: var(--yoko-surface);
}
.yoko-about-story__image :where(.yoko-about-visual,.yoko-about-collage) {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
}
.yoko-about-story__image img,
.yoko-about-story__image .yoko-about-collage img:only-child {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.yoko-about-story__copy { padding: clamp(12px, 2vw, 34px) !important; }
.yoko-about-story__copy h2 img.yoko-icon { width: 52px !important; height: 52px !important; }

/* ---------- Contact: attach hero directly to Rey header ---------- */
body.yoko-contact-page :where(.rey-siteContent,.rey-mainContent,.rey-pageContent) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.yoko-contact-page .yoko-contact,
body.yoko-contact-page .yoko-contact-hero {
  margin-top: 0 !important;
}
.yoko-contact-hero__grid {
  min-height: clamp(560px, 36vw, 720px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
}
.yoko-contact-hero__copy { padding-block: clamp(48px, 5vw, 86px); }
.yoko-contact-hero__visual { align-self: stretch; min-height: 560px; }
.yoko-contact-hero__visual > img,
.yoko-contact-hero__visual .yoko-content-product-collage { width: 100%; height: 100%; }
.yoko-contact-hero__visual img { object-fit: cover; }
.yoko-contact-hero__benefits img.yoko-icon { width: 52px !important; height: 52px !important; }
.yoko-contact-form-card header img.yoko-icon,
.yoko-contact-info h2 img.yoko-icon,
.yoko-contact-locations > header img.yoko-icon { width: 54px !important; height: 54px !important; }

/* ---------- Product actions ---------- */
body.yoko-pdp-php-template .yoko-pdp__container { padding-inline: 0 !important; }
body.yoko-pdp-php-template .yoko-button--buy-now,
body.yoko-pdp-php-template .yoko-button--quote {
  min-height: 58px;
  font-size: 16px;
  font-weight: 700;
}
body.yoko-pdp-php-template .yoko-button--quote {
  cursor: pointer;
}

@media (max-width: 1199px) {
  .yoko-dealer-lead__box { grid-template-columns: 1fr !important; }
  .yoko-size-main { grid-template-columns: 1fr !important; }
  .yoko-size-measurements__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yoko-size-measure-card { grid-template-columns: 1fr !important; text-align: center; }
  .yoko-about-story { grid-template-columns: 1fr !important; }
  .yoko-about-story__image { width: 100%; }
}

@media (max-width: 767px) {
  body.yoko-native-template,
  body.yoko-pdp-php-template { --yoko-page-gutter: 14px; }

  body.yoko-native-template main,
  body.yoko-pdp-php-template main { font-size: 15px; }

  body.yoko-native-template main :where(
    .yoko-home-hero h1,
    .yoko-seasonal-hero h1,
    .yoko-dealer-hero h1,
    .yoko-size-hero h1,
    .yoko-contact-hero h1,
    .yoko-about-hero h1,
    .yoko-sales-hero h1,
    .yoko-thanks-hero h1,
    .yoko-archive-hero h1,
    .yoko-summary__title
  ),
  body.yoko-pdp-php-template main .yoko-summary__title {
    font-size: clamp(32px, 9vw, 40px) !important;
	padding-top: 40px;
  }

  body.yoko-native-template main :where(p,li),
  body.yoko-pdp-php-template main :where(p,li) { font-size: 15px; }

  body.yoko-native-template main img.yoko-icon,
  body.yoko-pdp-php-template main img.yoko-icon { width: 46px; height: 46px; }

  body.yoko-native-template main :where(
    .yoko-trust-card,
    .yoko-home-trust article,
    .yoko-seasonal-trust-item,
    .yoko-content-trust article,
    .yoko-about-trust > div
  ) > img.yoko-icon,
  body.yoko-pdp-php-template main .yoko-trust-card > img.yoko-icon {
    width: 56px !important;
    height: 56px !important;
  }

  .yoko-dealer-hero__grid { min-height: 0; grid-template-columns: 1fr; }
  .yoko-dealer-hero__media { min-height: 390px; }
  .yoko-dealer-lead__intro { grid-template-columns: 78px 1fr !important; }
  .yoko-dealer-lead__form form,
  .yoko-modal__content form,
  .yoko-v332-form-grid {
    grid-template-columns: 1fr !important;
  }
  .yoko-dealer-lead__form :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels),
  .yoko-modal__content :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels),
  .yoko-v332-form-grid :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .yoko-modal { padding: 0; align-items: end; }
  .yoko-modal__dialog {
    max-height: 94vh !important;
    padding: 24px 16px 22px !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .yoko-modal__close {
    width: 52px !important;
    height: 52px !important;
    margin: -8px -4px -42px 0;
    font-size: 32px !important;
  }
  .yoko-modal__header { padding-right: 58px !important; }
  .yoko-modal__header h2 { font-size: 34px !important; }
  .yoko-modal__header p { font-size: 16px; }

  .yoko-size-measurements__list { grid-template-columns: 1fr; }
  .yoko-size-measure-card { grid-template-columns: 104px 1fr !important; text-align: left; }
  .yoko-size-measure-card__image.is-icon { height: 96px !important; }
  .yoko-size-measure-card__image.is-icon img.yoko-icon { width: 78px !important; height: 78px !important; }

  .yoko-about-story { padding: 14px; gap: 10px; }
  .yoko-about-story__image { aspect-ratio: 16 / 10; }
  .yoko-about-story__copy { padding: 18px 8px 10px !important; }

  .yoko-contact-hero__grid { min-height: 0; grid-template-columns: 1fr !important; }
  .yoko-contact-hero__copy { padding-block: 36px 12px; }
  .yoko-contact-hero__visual { min-height: 320px; }

  body.yoko-pdp-php-template main .yoko-quick-service__item > span { flex-basis: 46px !important; }
  body.yoko-pdp-php-template main .yoko-quick-service__item > span img.yoko-icon {
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 420px) {
  .yoko-dealer-lead__form :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels),
  .yoko-modal__content :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels),
  .yoko-v332-form-grid :where(.yoko-v332-choice-group,.checkbox-group,.radio-group,.channels,.sales-channels) {
    grid-template-columns: 1fr !important;
  }
}