/* =============================================================
   aaryans.cz — Mobile 2-Column Product Grid Fix
   =============================================================
   Platform : Shoptet
   Scope     : Homepage product blocks (.products-block)
   Problem   : On phones, products display as 1 column (100% width),
               causing very long scroll. Should be 2 columns.
   Fix       : Forces 2-per-row layout at ≤ 767px breakpoint.

   Compatible with:
     - on-board.cz styles (style-v1 through style-v6)
     - FV Studio (cdn.fv-studio.cz/aaryans/style.css)
     - Shoptet core (cdn.myshoptet.com main-11.less CSS)
     - dominikmartini coupon addon

   Upload via FileZilla to:
     /user/documents/upload/CSSkodyCLAUDE/
   and register it in Shoptet admin under
   Administration → Templates → Custom CSS.

   Written to avoid !important overuse — only used where
   on-board.cz rules with high specificity must be overridden.
   Does NOT touch desktop layout (768px and above).
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   2-COLUMN PRODUCT GRID — phones up to 767px
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {

  /* ── 1. Force 2 products per row ──────────────────────────── */
  .products-block .product {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding: 6px !important;          /* slightly tighter than desktop 10px */
  }

  /* ── 2. Inner card wrapper — fill the half-width cell ─────── */
  .products-block .product .p {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;          /* prevents flex blowout */
  }

  /* ── 3. Product image — scale to fit the narrower cell ─────── */
  .products-block .product .p a.image {
    width: 100% !important;
    display: block !important;
  }

  /* Main product photo and swap (hover) photo */
  .products-block .product .p a.image img,
  .products-block .product .p .swap-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* ── 4. Product info block — fill the cell width ──────────── */
  .products-block .product .p-in {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* ── 5. Inner info padding — tighten for compact 2-col grid ── */
  /*
     Desktop: .p-in-in has 15px padding each side (total 30px).
     At 50% width on a 390px screen that leaves ~140px content
     area — workable, but padding reduction keeps it comfortable.
  */
  .products-block .product .p-in-in {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* ── 6. Coupon / discount button — stay inside the cell ────── */
  /*
     dominikmartini coupon addon (.dm-coupon-div) can be wide.
     Constrain it so it doesn't overflow the narrow column.
  */
  .products-block .product .dm-coupon-div {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .products-block .product .dm-coupon-div .dm-coupon,
  .products-block .product .dm-coupon-div > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;   /* allow text to wrap if needed */
  }

}
/* ─────────────────────────────────────────────────────────────
   END aaryans-mobile-2col.css
   ───────────────────────────────────────────────────────────── */