/*
 * YOKO Kids v3.3.9
 * Synchronise native PHP templates with Rey > Site Settings > Layout:
 * - Desktop container: Full Width
 * - Horizontal spacing: 70px
 * - Content remains aligned with Rey header/footer without 100vw breakouts.
 */

:root {
  --yoko-rey-desktop-gutter: 70px;
  --yoko-rey-tablet-gutter: 32px;
  --yoko-rey-mobile-gutter: 16px;
  --yoko-rey-content-top: 50px;
  --yoko-rey-content-bottom: 90px;
}

@media (min-width: 1200px) {
  body.yoko-native-template,
  body.yoko-product-archive-page,
  body.yoko-pdp-php-template {
    --yoko-page-gutter: var(--yoko-rey-desktop-gutter);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body.yoko-native-template,
  body.yoko-product-archive-page,
  body.yoko-pdp-php-template {
    --yoko-page-gutter: var(--yoko-rey-tablet-gutter);
  }
}

@media (max-width: 767px) {
  body.yoko-native-template,
  body.yoko-product-archive-page,
  body.yoko-pdp-php-template {
    --yoko-page-gutter: var(--yoko-rey-mobile-gutter);
  }
}

/* Rey owns the outer header/footer. Only remove limits from the content stage. */
body.yoko-native-template :where(
  .rey-siteContent,
  .rey-siteContent > .container,
  .rey-siteContent > .rey-mainContent,
  .rey-mainContent,
  .rey-pageContent,
  .rey-pageContent > .container,
  #main,
  .site-main
),
body.yoko-product-archive-page :where(
  .rey-siteContent,
  .rey-siteContent > .container,
  .rey-siteContent > .rey-mainContent,
  .rey-mainContent,
  .rey-pageContent,
  .rey-pageContent > .container,
  #main,
  .site-main
),
body.yoko-pdp-php-template :where(
  .rey-siteContent,
  .rey-siteContent > .container,
  .rey-siteContent > .rey-mainContent,
  .rey-mainContent,
  .rey-pageContent,
  .rey-pageContent > .container,
  #main,
  .site-main
) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* One layout equation for every custom page: viewport minus Rey's 70px gutters. */
body.yoko-native-template :where(
  .yoko-container,
  .yoko-shell,
  .yoko-pdp__container,
  .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
),
body.yoko-product-archive-page .yoko-archive__shell,
body.yoko-pdp-php-template .yoko-pdp__container {
  box-sizing: border-box;
  width: calc(100% - (var(--yoko-page-gutter) * 2)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* =========================
   Product catalogue / shop
   ========================= */
body.yoko-product-archive-page .yoko-archive {
  position: relative !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  overflow: clip;
}

body.yoko-product-archive-page :where(
  .yoko-archive-toolbar,
  .yoko-archive-resultsbar
) {
  width: calc(100% - (var(--yoko-page-gutter) * 2)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.yoko-product-archive-page .yoko-archive-layout {
  grid-template-columns: clamp(270px, 18vw, 330px) minmax(0, 1fr) !important;
  gap: clamp(28px, 2.4vw, 46px) !important;
}

body.yoko-product-archive-page .yoko-archive-products,
body.yoko-product-archive-page .yoko-archive-grid {
  min-width: 0;
  width: 100%;
}

body.yoko-product-archive-page .yoko-archive-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 1.55vw, 28px) !important;
}

@media (min-width: 1800px) {
  body.yoko-product-archive-page .yoko-archive-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* =========================
   Product detail page
   ========================= */
body.yoko-pdp-php-template .yoko-pdp,
body.yoko-pdp-php-template .yoko-pdp__container {
  width: 100%;
  max-width: none;
}

body.yoko-pdp-php-template .yoko-pdp__container {
  width: calc(100% - (var(--yoko-page-gutter) * 2)) !important;
}

body.yoko-pdp-php-template .yoko-pdp__hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, .92fr);
  gap: clamp(38px, 3.6vw, 72px);
}

body.yoko-pdp-php-template :where(
  .yoko-product-detail-panels,
  .yoko-product-faq
) {
  width: 100%;
  max-width: none !important;
}

body.yoko-pdp-php-template .yoko-product-detail-panel p {
  max-width: none;
}

/* =========================
   Blog archive and article
   ========================= */
body.yoko-native-template .yoko-news-archive .yoko-content-shell,
body.yoko-native-template .yoko-article .yoko-content-shell {
  width: calc(100% - (var(--yoko-page-gutter) * 2)) !important;
  max-width: none !important;
}

body.yoko-native-template .yoko-news-layout,
body.yoko-native-template .yoko-article-layout {
  grid-template-columns: minmax(0, 1fr) clamp(330px, 21vw, 410px) !important;
  gap: clamp(32px, 2.6vw, 52px) !important;
  align-items: start;
}

body.yoko-native-template .yoko-article-content {
  width: 100%;
  max-width: none !important;
  min-width: 0;
}

body.yoko-native-template .yoko-article-body {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body.yoko-native-template .yoko-article-body > :where(
  p,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  blockquote,
  figure,
  .wp-block-image,
  .wp-block-gallery,
  .wp-block-table,
  .wp-block-embed,
  .wp-block-columns
) {
  max-width: 100%;
}

body.yoko-native-template .yoko-article-body :where(
  figure,
  .wp-block-image,
  .wp-block-gallery,
  .wp-block-table,
  .wp-block-embed
) {
  box-sizing: border-box;
}

body.yoko-native-template .yoko-article-body :where(img, video, iframe) {
  max-width: 100%;
  height: auto;
}

body.yoko-native-template .yoko-article-body iframe {
  width: 100%;
  min-height: clamp(320px, 42vw, 720px);
}

body.yoko-native-template .yoko-article-sidebar,
body.yoko-native-template .yoko-news-sidebar {
  width: 100%;
  min-width: 0;
}

body.yoko-native-template .yoko-article-sidebar > section,
body.yoko-native-template .yoko-news-sidebar > section {
  width: 100%;
}

/* Avoid a huge empty right side caused by an old reading-width cap. */
body.yoko-native-template .yoko-article-layout > .yoko-article-content {
  justify-self: stretch;
}

/* Responsive layout follows Rey's safe spacing rather than desktop values. */
@media (max-width: 1199px) {
  body.yoko-product-archive-page .yoko-archive-layout {
    grid-template-columns: 250px minmax(0, 1fr) !important;
    gap: 26px !important;
  }
  body.yoko-product-archive-page .yoko-archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.yoko-pdp-php-template .yoko-pdp__hero {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  }
}

@media (max-width: 1023px) {
  body.yoko-native-template .yoko-news-layout,
  body.yoko-native-template .yoko-article-layout,
  body.yoko-product-archive-page .yoko-archive-layout,
  body.yoko-pdp-php-template .yoko-pdp__hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.yoko-native-template .yoko-article-sidebar,
  body.yoko-native-template .yoko-news-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.yoko-product-archive-page .yoko-archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.yoko-native-template :where(
    .yoko-container,
    .yoko-shell,
    .yoko-pdp__container,
    .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
  ),
  body.yoko-product-archive-page .yoko-archive__shell,
  body.yoko-pdp-php-template .yoko-pdp__container,
  body.yoko-product-archive-page :where(.yoko-archive-toolbar, .yoko-archive-resultsbar) {
    width: calc(100% - 32px) !important;
  }

  body.yoko-product-archive-page .yoko-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.yoko-native-template .yoko-article-sidebar,
  body.yoko-native-template .yoko-news-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.yoko-native-template .yoko-article-body iframe {
    min-height: 240px;
  }
}