/* ============================================================================
   Product page 2-column layout fix - 2026-07-07
   Scoped to body.catalog-product-view

   Root cause: the Hyva product template uses Tailwind utility classes that
   the compiled styles.css doesn't include (JIT purge did not detect them):
     - lg:flex-row  (outer container needs to switch flex-col -> flex-row)
     - md:grid-cols-[42%_minmax(0,_1fr)]  (gallery/info column split)
     - lg:grid-cols-2                     (equal columns on desktop)

   Without those, the outer container stays flex-col (vertical stack) and the
   inner container's flex-wrap collapses the gallery + product info into a
   single narrow column with the right half of the viewport empty.

   Fix: force the correct grid layout on desktop with plain CSS scoped to
   .product-info-main so the layout works regardless of the missing Tailwind
   utilities. Mobile (<=767px) keeps the intended vertical stack.
   ============================================================================ */


@media (min-width: 768px) {
    /* Outer container: switch from flex-col to flex-row at tablet+ */
    body.catalog-product-view .product-info-main > section > .flex.pb-6.flex-col {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Inner container: force a 2-column grid (42% gallery / 58% info) */
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap {
        display: grid !important;
        grid-template-columns: 42% minmax(0, 1fr);
        column-gap: 1.25rem;
        grid-template-rows: min-content minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    /* Desktop: equal-width columns with slightly larger gap */
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
}


/* --- Belt-and-braces: also register the missing Tailwind utilities under
   their original class names so any other page (or a future template) that
   uses them starts working immediately. Scoped to body.catalog-product-view
   only, so they can't leak to other pages. --- */
@media (min-width: 768px) {
    body.catalog-product-view .md\:grid-cols-\[42\%_minmax\(0\,_1fr\)\] {
        grid-template-columns: 42% minmax(0, 1fr);
    }
    body.catalog-product-view .md\:grid-rows-\[min-content_minmax\(0\,_1fr\)\] {
        grid-template-rows: min-content minmax(0, 1fr);
    }
    body.catalog-product-view .md\:gap-x-5 {
        column-gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    body.catalog-product-view .lg\:flex-row {
        flex-direction: row;
    }
    body.catalog-product-view .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.catalog-product-view .lg\:gap-x-10 {
        column-gap: 2.5rem;
    }
}


/* ============================================================
   v2 - fix cramped columns 2026-07-07

   The compiled Tailwind CSS is missing not just the outer layout
   utilities but ALL responsive utilities the product template
   uses (md:w-5/12, lg:w-1/2, md:h-auto, md:hidden, md:py-6, etc).
   Result: gallery and product-info both fall back to unprefixed
   "w-full" (100%), so even after grid kicks in the children still
   want to be 100% wide inside their column and content wraps.

   Also the outer  (missing
   lg:flex-row) is centering children on the cross axis and NOT
   letting them fill the row width naturally.

   Fix: explicit widths on the two children + explicit flex-row
   on the outer + hide the mobile-only h1.
   ============================================================ */

@media (min-width: 1024px) {
    /* Force the outer wrapper into a proper row */
    body.catalog-product-view .product-info-main > section > .flex.pb-6 {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Inner container: single child of the outer flex - make it full width
       and let its grid handle the actual split */
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 2.5rem !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Gallery = column 1, full width of that column */
    body.catalog-product-view #gallery {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 !important;
        order: initial !important;
    }

    /* Product info (everything AFTER gallery in the grid, except mobile h1)
       = column 2, full width of that column */
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap > .product.md\:hidden {
        display: none !important;   /* the mobile-only h1 duplicate - md:hidden was missing */
    }
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap > *:not(#gallery):not(.product) {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 2 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: same grid but with the 42%/58% split from the CMS intent */
    body.catalog-product-view .product-info-main > section > .flex.pb-6 {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap {
        display: grid !important;
        grid-template-columns: 42% minmax(0, 1fr) !important;
        column-gap: 1.25rem !important;
        width: 100% !important;
    }
    body.catalog-product-view #gallery {
        width: 100% !important;
        grid-column: 1 !important;
    }
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap > .product.md\:hidden {
        display: none !important;
    }
    body.catalog-product-view .product-info-main > section > .flex.pb-6 > .flex.flex-wrap > *:not(#gallery):not(.product) {
        width: 100% !important;
        grid-column: 2 !important;
    }
}

/* Also fix the columns wrapper - if .columns has an unintended max-width
   on product pages, expand it. */
@media (min-width: 1024px) {
    body.catalog-product-view .columns {
        max-width: 1440px !important;
    }
}