/* Tablet layout — desktop navigation/components with fluid dimensions.
   Loaded only at 768–1023 CSS pixels. Phone and desktop are unchanged. */

/* Desktop header needs a flexible search column at narrower tablet widths. */
.site-header--retail .container,
.site-header .container { width: min(calc(100% - 32px), 1400px); }
.site-header--retail .header-main__inner {
  grid-template-columns: 94px minmax(0, 1fr) auto;
  min-height: 0;
  gap: clamp(8px, 1.4vw, 16px);
  padding-block: clamp(8px, 1.3vw, 12px);
}
.site-header--retail .brand { min-width: 0; width: auto; }
.site-header--retail .brand__link,
.site-header--retail .brand__logo { width: 94px; max-width: 100%; }
.site-header--retail .header-search {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}
.site-header--retail .header-actions { gap: 5px; margin-inline-start: 0; }
.site-header--retail .header-action--phone,
.site-header--retail .header-action-separator { display: none; }
.site-header--retail .header-action--account {
  min-width: 0;
  width: auto;
  padding-inline: 8px;
}
.site-header--retail .header-action--account .header-action__label { font-size: 12px; }
.site-header--retail .header-nav,
.site-header--retail .header-nav__inner { height: auto; min-height: 40px; }
.site-header--retail .nav__list--desktop { flex-wrap: wrap; }
.site-header--retail .nav__list--desktop > li > .menu-item__link {
  min-height: 40px;
  height: auto;
  padding-inline: clamp(6px, 1vw, 10px);
  font-size: 12px;
}
.site-header--retail.is-header-compact .header-main__inner { gap: 9px; }
.site-header--retail.is-header-compact .header-search { min-width: 0; }

/* Product listings retain the desktop filter sidebar and usable card widths. */
.shop-layout.has-sidebar {
  grid-template-columns: clamp(178px, 23vw, 220px) minmax(0, 1fr);
  gap: 12px;
}
.product-grid--archive,
.product-grid:not(.product-grid--archive) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .product-grid--archive,
  .product-grid:not(.product-grid--archive) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Keep the homepage product presentation consistent at tablet widths. */
.home-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .home-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-hero__main {
  grid-template-columns: minmax(0, 1fr) minmax(200px, .8fr);
  min-height: 0;
  height: auto;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(20px, 2.5vw, 28px);
}
.home-hero__copy h1 { font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
.home-hero__product { width: 100%; max-width: none; }
.home-promo { min-height: clamp(140px, 18vw, 182px); height: auto; }
.home-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-benefits li { padding-inline: 8px; }
.home-benefits li:nth-child(n) { border-top: 0; }
.home-benefits li:nth-child(n) { border-inline-start: 1px solid var(--line-soft); }
.home-benefits li:first-child { border-inline-start: 0; }

/* Desktop-style article, checkout and account sidebars with flexible heights. */
.blog-layout,
.post-layout { grid-template-columns: minmax(0, 1fr) clamp(190px, 25vw, 240px); gap: 16px; }
.checkout__layout { grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 290px); gap: 16px; }
.cart-page__layout,
.woocommerce-cart .cart-page__layout {
  grid-template-columns: minmax(0, 1fr) clamp(230px, 29vw, 280px);
  gap: 16px;
}
.woocommerce-account .btrd-account-shell {
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 16px;
}

/* Below 900px, retain the gallery + summary layout with the buybox below. */
@media (max-width: 899px) {
  .product-page__top { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .product-page__buy { grid-column: 1 / -1; }
  .product-page__gallery { border-inline-end: 1px solid var(--line-soft); }
}

/* Tablet-only refinements: header, archive filters, product purchase and
   viewport-aware sticky surfaces. Do not affect the phone or desktop sheets. */

/* 1 — Keep the live desktop header usable in both tablet orientations. */
.site-header--retail .header-main__inner {
  grid-template-columns: clamp(86px, 11vw, 104px) minmax(0, 1fr) auto;
  column-gap: clamp(8px, 1.2vw, 13px);
}
.site-header--retail .brand__link,
.site-header--retail .brand__logo { width: 100%; height: auto; max-height: 50px; }
.site-header--retail .header-search,
.site-header--retail .search-form { min-width: 0; }
.site-header--retail .header-search .search-form__input { min-width: 0; padding-inline: clamp(8px, 1.5vw, 14px); }
.site-header--retail .header-actions { flex: none; gap: clamp(4px, .7vw, 8px); }
.site-header--retail .header-action--account { padding-inline: 7px; min-height: 42px; }
.site-header--retail .header-action--cart,
.site-header--retail .header-action--saved { min-width: 42px; min-height: 42px; }
.site-header--retail .header-nav__inner { align-items: center; }
.site-header--retail .nav__list--desktop {
  align-content: center;
  row-gap: 0;
}
.site-header--retail .nav__list--desktop > li > .menu-item__link {
  min-height: 42px;
  line-height: 1.5;
}

/* Compact header: reserve a *fluid* column for search, rather than letting the
   fixed-width controls squeeze it out on a 768px portrait screen. */
.site-header--retail.is-header-compact .header-main__inner {
  display: grid;
  grid-template-columns: 86px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
.site-header--retail.is-header-compact .brand__link,
.site-header--retail.is-header-compact .brand__logo { width: 86px; height: auto; max-height: 38px; }
.site-header--retail.is-header-compact .header-search {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-inline-end: 0;
}
.site-header--retail.is-header-compact .header-actions { gap: 4px; }
.site-header--retail.is-header-compact .menu-toggle { white-space: nowrap; }
@media (max-width: 819px) {
  .site-header--retail .header-action--account { width: 42px; min-width: 42px; padding: 0; }
  .site-header--retail .header-action--account .header-action__label,
  .site-header--retail .header-action--account::after { display: none; }
  .site-header--retail .header-action--account::before { width: 24px; height: 24px; }
  .site-header--retail .search-form__submit { width: 42px; flex-basis: 42px; }
}

/* 4 and 8 — Desktop-type filters without stealing the product grid's width.
   The header script owns --sticky-top and updates it in compact mode. */
.shop-layout.has-sidebar {
  grid-template-columns: clamp(176px, 21.5vw, 212px) minmax(0, 1fr);
  gap: clamp(10px, 1.5vw, 15px);
}
.shop-layout.has-sidebar > .filters {
  position: sticky;
  top: calc(var(--sticky-top, 0px) + 12px);
  align-self: start;
  max-height: calc(100dvh - var(--sticky-top, 0px) - 24px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding-inline: 1px 3px;
}
.shop-layout.has-sidebar .filter-group__toggle { min-height: 44px; padding-inline: 11px; }
.shop-layout.has-sidebar .filter-group__body { padding-inline: 10px; }
.shop-layout.has-sidebar .filters__head { min-height: 46px; padding-inline: 11px; }
.shop-layout.has-sidebar .filters__title { font-size: 12.5px; }
.shop-layout.has-sidebar .filter-search input { width: 100%; }
.shop-layout.has-sidebar .price-filter__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.shop-layout.has-sidebar .price-filter__field input { height: 38px; text-align: start; }
.shop-layout.has-sidebar .filter-list--scroll { max-height: min(30dvh, 200px); }

/* 5 — On a tablet keep the gallery beside the choices, with the *actual*
   WooCommerce price/quantity/add-to-cart directly below the choices. No
   duplicated product form or alteration to variation/stock logic. */
.product-page__top {
  grid-template-columns: minmax(0, .90fr) minmax(0, 1.10fr);
  grid-template-rows: auto auto;
  align-items: start;
}
.product-page__gallery {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  border-inline-end: 1px solid var(--line-soft);
}
.product-page__summary { grid-column: 2; grid-row: 1; min-width: 0; }
.product-page__buy {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding-block-start: 0;
  align-self: start;
}
.product-page__gallery,
.product-page__summary,
.product-page__buy { padding-inline: clamp(12px, 1.8vw, 18px); }
.product-page__summary,
.product-page__gallery { padding-block: clamp(12px, 1.8vw, 18px); }
.product-page__title { overflow-wrap: anywhere; }
.product-page__summary .variation-group__options { gap: 7px; }
.product-page__summary .variation-option { min-height: 44px; padding: 8px 11px; }
.product-page__summary .catalog-highlights { gap: 6px; }
.product-page__summary .key-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.product-page__summary .key-spec { padding: 8px 9px; }
.product-page__buy .buybox { width: 100%; min-width: 0; }
.product-page__buy .buybox .price,
.product-page__buy .buybox__price-main { overflow-wrap: anywhere; }
.product-page__buy .buybox form.cart button[type='submit'] { min-height: 44px; }

/* 8 — On short tablets, reduce only the sticky bar footprint so both the
   gallery and purchase controls remain usable above the bar. The visibility
   remains controlled by the existing IntersectionObserver in shop.js. */
.buy-bar { padding-inline: clamp(12px, 2vw, 20px); }
.buy-bar .price { min-width: 0; overflow-wrap: anywhere; }
@media (max-height: 650px) {
  .site-header--retail.is-header-compact .header-main__inner { min-height: 48px; padding-block: 3px; }
  .shop-layout.has-sidebar > .filters { top: calc(var(--sticky-top, 0px) + 6px); max-height: calc(100dvh - var(--sticky-top, 0px) - 12px); }
  .product-page__summary .key-spec { padding-block: 6px; }
  .buy-bar { padding-block: 7px calc(7px + env(safe-area-inset-bottom)); }
  .buy-bar .btn { min-height: 40px; }
  .section-nav { top: calc(var(--sticky-top, 0px) + 6px); }
}