/**
 * Puts the product's details beside its picture in the Quick View modal.
 *
 * The theme dequeues YITH's own stylesheet (framework/settings/enqueue.php),
 * which is where that plugin lays the modal out — its current version makes the
 * product a flex row. The theme replaces the plugin's styling wholesale but
 * never wrote the desktop half of the layout, so the picture and the details
 * were two ordinary blocks and the details fell underneath.
 *
 * Only one rule was actually missing, and the theme itself says which. On the
 * single-product page the two columns are `.woocommerce-product-gallery`, given
 * `370px` and a `30px` gap, and `.entry-summary`, given `calc(100% - 400px)` —
 * the same 400. The modal draws its picture as `div.images` instead, which no
 * width rule has ever matched, so it took the full width while `.entry-summary`
 * — matching, and correctly 435px wide — had nowhere to sit but below it. The
 * widths here are the theme's own numbers, at the theme's own breakpoints, so
 * the modal and the product page stay one design rather than two.
 *
 * Laid out with flex rather than the float the theme uses, for one reason: the
 * theme needs two stylesheets to float that gallery — left in style.css, right
 * in style-rtl.css — and this file is loaded in both directions. A flex row
 * follows `direction` by itself, so Hebrew gets the picture on the right
 * without a second copy of these rules to keep in step.
 *
 * Below 768px nothing here applies at all. The theme already stacks the two and
 * centres them there (style.css, `@media (max-width: 767px)`), and a flex
 * container would only get in the way of rules written for blocks.
 */
@media (min-width: 768px) {
    /*
     * The modal's product wrapper. YITH prints `id="product-<id>"` on it; the
     * outer `div.product` is a second, id-less wrapper, and matching on the id
     * is what keeps this rule off it.
     */
    #yith-quick-view-content div[id^="product-"] {
        display: flex;
        align-items: flex-start;
    }

    #yith-quick-view-content div.images {
        flex: 0 0 370px;
        max-width: 370px;
        margin-inline-end: 30px;
    }

    /*
     * The image carries width/height attributes, so the aspect ratio is known
     * and the height follows the narrower column on its own.
     */
    #yith-quick-view-content div.images img {
        max-width: 100%;
        height: auto;
    }

    /*
     * `.entry-summary` brings its own `calc(100% - 400px)` from the theme and
     * needs no width here — and that is a dependency worth stating rather than
     * relying on. The theme's rule is written for the product page but scoped
     * to nothing, so it reaches the modal only because YITH happens to print
     * `class="summary entry-summary"`. Half of the arithmetic above is
     * therefore somebody else's: 370 + 30 comes from this file, the 400 they
     * are subtracted from does not. Scope that rule to the product page — a
     * reasonable thing for someone to do — and the modal breaks again, with
     * nothing in the diff to say why. If it ever happens, the fix is to give
     * the summary its width here too.
     *
     * `min-width` only lets the summary shrink rather than push the picture out
     * of the modal when something inside it does not wrap — a long article
     * number in `.product_meta` is the likely one.
     */
    #yith-quick-view-content div.summary {
        min-width: 0;
    }
}

/* The theme's own 768–991 step: a narrower picture and a narrower gap. */
@media (min-width: 768px) and (max-width: 991px) {
    #yith-quick-view-content div.images {
        flex-basis: 330px;
        max-width: 330px;
        margin-inline-end: 20px;
    }
}