/* FIRSTPROF 2026-10-14 / Desktop compact trial V1.
 * Desktop only, screens >= 1180 CSS px and NOT Webasyst physical mobile.
 * No zoom/transform/viewport changes. No selectors inside Checkout 2.
 * To revert: remove this stylesheet link from head.html.
 */
@media screen and (min-width: 1180px) {
  /* Denser vertical rhythm in storefront sections. Excludes cart/checkout.
     CSS variable is scoped to main; Webasyst theme-level settings remain intact. */
  html:not(.fp-mobile-device) main.content {
    --frame-padding: 40px;
  }
  html:not(.fp-mobile-device) main.content > .frame:not(.layout-order):not(.layout-checkout) > .frame__container,
  html:not(.fp-mobile-device) main.content .layout-category > .frame__container,
  html:not(.fp-mobile-device) main.content .layout-product > .frame > .frame__container {
    padding-left: clamp(28px, 3.6vw, 64px);
    padding-right: clamp(28px, 3.6vw, 64px);
  }
  /* Larger named paddings in blocks use absolute CSS pixel values. */
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-top-50,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-top-60,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-top-70,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-top-80,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-top-90 {
    padding-top: 38px;
  }
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-bottom-50,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-bottom-60,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-bottom-70,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-bottom-80,
  html:not(.fp-mobile-device) main.content .frame:not(.layout-order):not(.layout-checkout) > .frame__container > .frame__center.is-bottom-90 {
    padding-bottom: 38px;
  }
  /* Typography only within main storefront, not overlay dialogs or cart form. */
  html:not(.fp-mobile-device) main.content .layout-category h1,
  html:not(.fp-mobile-device) main.content .layout-product h1 { font-size: clamp(25px, 2.35vw, 31px); line-height: 1.3; }
  html:not(.fp-mobile-device) main.content .fp-product-crossselling h2 { font-size: 23px; }

  /* Current Orion header template: six. Tighten spaces, keep logo natural. */
  html:not(.fp-mobile-device) .header-six__top { padding-top: 9px; }
  html:not(.fp-mobile-device) .header-six__middle { padding-top: 9px; padding-bottom: 9px; }
  html:not(.fp-mobile-device) .header-six__bottom { padding-bottom: 9px; }
  html:not(.fp-mobile-device) .header-six__middle > :not(:first-child),
  html:not(.fp-mobile-device) .header-six__top-column,
  html:not(.fp-mobile-device) .header-six__bottom-column { margin-left: 20px; }

  /* Category: narrower desktop sidebar and less space lost between cards. */
  html:not(.fp-mobile-device) .layout-category__grid.has-sidebar {
    grid-template-columns: minmax(230px, 275px) minmax(0, 1fr);
    gap: 16px;
  }
  html:not(.fp-mobile-device) .layout-category__grid { margin-top: 20px; }
  html:not(.fp-mobile-device) .layout-category__controls {
    padding: 11px 13px;
    margin-bottom: 12px;
  }
  html:not(.fp-mobile-device) .layout-thumbs__thumbs.is-thumbs {
    gap: 12px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Product cards: 3 columns with sidebar, 4 when there is no sidebar.
     The stock template's 240px minimum kept the previous cards oversized. */
  html:not(.fp-mobile-device) .layout-thumbs__thumbs.is-thumbs.has-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html:not(.fp-mobile-device) .layout-thumbs__thumbs.is-thumbs:not(.has-sidebar) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html:not(.fp-mobile-device) .layout-thumbs__thumbs.is-thumbs > * { min-width: 0; max-width: 100%; }
  html:not(.fp-mobile-device) .layout-thumbs .product-two__content { padding: 11px 12px 8px; }
  html:not(.fp-mobile-device) .layout-thumbs .product-two__content > :not(.is-hidden):not(:last-child) { margin-bottom: 7px; }
  html:not(.fp-mobile-device) .layout-thumbs .product-two__form { padding: 0 12px 11px; }
  html:not(.fp-mobile-device) .layout-thumbs .product-three__content { padding-top: 8px; }
  html:not(.fp-mobile-device) .layout-thumbs .product-three__form { margin-top: 8px; }
  html:not(.fp-mobile-device) .layout-thumbs :is(.product-two__image.is-margins, .product-three__image.is-margins) { padding: 1rem; }

  /* Homepage sections: slightly smaller decorative categories; tighter grids. */
  html:not(.fp-mobile-device) .shop_categories__list { gap: 12px; }
  html:not(.fp-mobile-device) .shop_categories__list:not(:first-child),
  html:not(.fp-mobile-device) .shop_products__list:not(:first-child) { margin-top: 18px; }
  html:not(.fp-mobile-device) .shop_categories__list .categorycard-two__image-wrapper {
    width: 126px;
    height: 126px;
  }
  html:not(.fp-mobile-device) .shop_categories__list .categorycard-two { max-width: 145px; }
  html:not(.fp-mobile-device) .shop_products__list { gap: 12px; }
  html:not(.fp-mobile-device) .shop_products__list .product-two__content { padding: 11px 12px 8px; }
  html:not(.fp-mobile-device) .shop_products__list .product-two__form { padding: 0 12px 12px; }

  /* Product view: less white space, same purchase buttons and pricing logic. */
  html:not(.fp-mobile-device) .layout-product .product__grid { gap: 24px; }
  html:not(.fp-mobile-device) .layout-product .product__card > :not(:last-child) { margin-bottom: 18px; }
  html:not(.fp-mobile-device) .layout-product .product-purchase__purchase { padding: 16px; }
  html:not(.fp-mobile-device) .layout-product .product-purchase__purchase > :not(:last-child) { margin-bottom: 12px; }
  html:not(.fp-mobile-device) .layout-product .fp-bodysite { margin-top: 12px; }
}

@media screen and (min-width: 1320px) {
  /* Wider desktop catalog: one extra product card per row with a sidebar.
     This is experimental; the Webasyst product price widgets need live QA. */
  html:not(.fp-mobile-device) .layout-thumbs__thumbs.is-thumbs.has-sidebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1300px) {
  /* Orion's normal product rail is 380px; reduce without affecting cart. */
  html:not(.fp-mobile-device) .layout-product .product__grid {
    grid-template-columns: minmax(0, 1fr) 352px;
  }
}