/* Tablet-only layout layer. Phone and wide-desktop rules remain in their source files. */

@media (min-width: 600px) and (max-width: 1100px) and (min-height: 800px) and (orientation: portrait) {
  .nav,
  .section__inner,
  .footer__inner,
  .page-title__inner {
    width: min(var(--max), calc(100% - 48px));
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .section--tight {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .page-title {
    padding-top: 112px;
    padding-bottom: 50px;
  }

  .section__heading {
    align-items: start;
    margin-bottom: 30px;
  }

  .section__heading h2,
  .page-title h1 {
    font-size: clamp(2.15rem, 5vw, 2.8rem);
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 26px;
  }

  .footer__inner > div:first-child {
    grid-column: 1 / -1;
  }

  /* Home and Hero */
  .hero__bg--main,
  .hero__bg--project,
  .hero__bg--product {
    background-image: var(--kai-hero-bg-mobile, var(--kai-hero-bg-desktop));
  }

  .hero__slide {
    align-items: stretch;
  }

  .hero__inner,
  .hero__inner--product {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(760px, calc(100% - 48px));
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(64px, 8vh, 92px) 0 92px;
  }

  .hero h1 {
    font-size: clamp(3.7rem, 8.4vw, 4.8rem);
    line-height: 0.98;
  }

  .hero__lead {
    max-width: 58ch;
    margin-top: 22px;
    font-size: 1.08rem;
  }

  .hero__bottom {
    margin-top: auto;
    padding-top: 24px;
  }

  .hero__actions {
    margin-top: 22px;
  }

  .hero__meta {
    margin-top: 24px;
    padding-top: 18px;
    font-size: 0.7rem;
    letter-spacing: 0.11em;
  }

  .hero__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
    margin-top: 18px;
  }

  .hero__specs div {
    padding: 12px 14px;
  }

  .hero-product-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    margin-top: 14px;
  }

  .hero-product-card {
    min-height: 94px;
    padding: 7px 8px;
    text-align: center;
  }

  .hero-product-card__media {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .hero-product-card h2 {
    font-size: 0.78rem;
  }

  .hero-product-card p {
    margin-top: 5px;
    font-size: 0.74rem;
    line-height: 1.35;
    text-align: center;
  }

  .steps,
  .inspire-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .communities,
  .about {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Services */
  .services-grid,
  .material-grid,
  .finish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .table-wrap,
  .data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Process */
  .process-columns {
    grid-template-columns: 1fr;
  }

  .status-flow {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .status-flow::before {
    top: 8px;
    bottom: 8px;
    left: 18px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(192, 116, 63, 0.22), var(--copper), rgba(192, 116, 63, 0.22));
  }

  .status-flow li {
    min-height: 96px;
    padding: 0 0 26px 58px;
    text-align: left;
  }

  .status-flow li::before,
  .status-flow li::after {
    left: 18px;
    transform: translateX(-50%);
  }

  .status-flow li::before {
    top: 3px;
  }

  .status-flow li::after {
    top: -4px;
  }

  /* Custom project, FAQ and contact */
  .request-layout,
  .faq-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .request-summary,
  .faq-panel {
    position: static;
  }

  .quote-measurements__grid,
  .faq-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Closed and open shop states */
  .shop-coming__panel,
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-coming__visual,
  .shop-coming__visual img {
    min-height: 380px;
  }

  .shop-filters {
    position: static;
    grid-template-columns: 1fr;
  }

  .shop-filters__heading {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 18px;
  }

  .shop-filters__hint,
  .shop-filters__reset {
    grid-column: 1;
  }

  .woocommerce ul.products,
  .woocommerce :is(ul.grid[data-products-grid], ul.grid[data-kai-product-grid]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-modal__dialog {
    grid-template-columns: 1fr;
  }

  .wc-block-components-sidebar-layout {
    display: block !important;
  }

  .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100% !important;
  }
}

@media (min-width: 700px) and (max-width: 1180px) and (min-height: 600px) and (orientation: landscape) {
  .nav,
  .section__inner,
  .footer__inner,
  .page-title__inner {
    width: min(var(--max), calc(100% - 64px));
  }

  .section {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .page-title {
    padding-top: 104px;
    padding-bottom: 46px;
  }

  .section__heading h2,
  .page-title h1 {
    font-size: clamp(2.1rem, 3.7vw, 2.8rem);
  }

  .hero__inner,
  .hero__inner--product {
    width: min(760px, calc(100% - 64px));
    margin-left: 32px;
    padding-top: clamp(66px, 10vh, 90px);
    padding-bottom: 72px;
  }

  .hero h1 {
    font-size: clamp(4rem, 7vw, 5rem);
  }

  .hero__lead {
    margin-top: 20px;
    font-size: 1.08rem;
  }

  .hero__actions {
    margin-top: 24px;
  }

  .hero__meta {
    margin-top: 28px;
    padding-top: 18px;
  }

  .hero__specs {
    margin-top: 20px;
  }

  .hero-product-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .hero-product-card {
    min-height: 104px;
    padding: 8px 10px;
    text-align: center;
  }

  .hero-product-card p {
    text-align: center;
  }

  .shop-coming,
  .shop-coming__panel,
  .shop-coming__visual {
    max-width: 100%;
  }

  .table-wrap,
  .data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 700px) and (max-width: 940px) and (min-height: 600px) and (orientation: landscape) {
  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .footer__inner > div:first-child {
    grid-column: 1 / -1;
  }

  .services-grid,
  .material-grid,
  .finish-grid,
  .inspire-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .equipment-grid,
  .process-columns,
  .request-layout,
  .faq-layout,
  .contact-layout,
  .shop-coming__panel,
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .request-summary,
  .faq-panel,
  .shop-filters {
    position: static;
  }

  .quote-measurements__grid,
  .faq-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce ul.products,
  .woocommerce :is(ul.grid[data-products-grid], ul.grid[data-kai-product-grid]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Large touch tablets such as a 12.9-inch iPad in landscape. */
@media (min-width: 1181px) and (max-width: 1366px) and (min-height: 700px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .nav,
  .section__inner,
  .footer__inner,
  .page-title__inner {
    width: min(var(--max), calc(100% - 72px));
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .page-title {
    padding-top: 108px;
    padding-bottom: 48px;
  }

  .hero__inner,
  .hero__inner--product {
    margin-left: 36px;
    padding-top: 84px;
    padding-bottom: 76px;
  }

  .hero h1 {
    font-size: 5rem;
  }
}