/* Peptico preview gate — gated styles. Loaded only at tier >= 1.

   Scope every rule to the tier it belongs to, e.g.

     body.pp-tier-1 .peptico-search-trigger { ... }

   so tiers stay independent and earlier work is never overwritten by later
   work. Tier 0 loads nothing. */

/* ---- Tier 2: homepage sections from the Home-Tasklon draft ------------------
   The draft's own stylesheet (post-5730.css) styles these elements; the rules
   below are the tier's adjustments on top of it. Both loop carousels share the
   element id 2e064c2 on purpose, so one rule reaches bundles and Top Sellers. */

/* The emptied Top Sellers grid wrapper: nothing visible left in it. */
body.pp-tier-2 .elementor-element.elementor-element-e407f5d { display: none; }

/* Carousels: 4 per view on desktop and laptop, 8px gap, less air underneath.
   The CSS variables mirror the slides_to_show / image_spacing_custom settings
   set in PHP, per active Elementor breakpoint, so the layout before Swiper
   initialises is the same as after. */
body.pp-tier-2 .elementor-5730 .elementor-element.elementor-element-2e064c2 {
  --swiper-slides-to-display: 4;
  --swiper-slides-gap: 8px;
  margin-bottom: 24px;
}
@media (min-width: 2400px) {
  body.pp-tier-2 .elementor-5730 .elementor-element.elementor-element-2e064c2 { --swiper-slides-to-display: 5; }
}
@media (max-width: 1200px) {
  body.pp-tier-2 .elementor-5730 .elementor-element.elementor-element-2e064c2 { --swiper-slides-to-display: 3; }
}
@media (max-width: 1024px) {
  body.pp-tier-2 .elementor-5730 .elementor-element.elementor-element-2e064c2 { --swiper-slides-to-display: 2; }
}
@media (max-width: 767px) {
  body.pp-tier-2 .elementor-5730 .elementor-element.elementor-element-2e064c2 { --swiper-slides-to-display: 1; }
}
/* "Explore Bundles" heading sat 60px below the Top Sellers row. */
body.pp-tier-2 .elementor-5730 .elementor-element.elementor-element-78c10a5 { margin-top: 40px; }

/* The Peptico Experience on phones: two-up instead of one tall column, the
   fifth item centred on its own row, smaller icons and type. */
@media (max-width: 600px) {
  body.pp-tier-2 .pep-section { padding: 40px 16px 44px; }
  body.pp-tier-2 .pep-grid { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 22px; margin-top: 24px; }
  body.pp-tier-2 .pep-item { padding: 0 4px; gap: 10px; }
  body.pp-tier-2 .pep-item:last-child { grid-column: 1 / -1; max-width: 60%; margin: 0 auto; }
  body.pp-tier-2 .pep-icon { width: 48px; height: 48px; }
  body.pp-tier-2 .pep-item-title { min-height: 0; font-size: 13px; }
  body.pp-tier-2 .pep-item-desc { font-size: 13px; line-height: 1.5; }
}