/* =============================================================================
   Single Crop — preview overlay for ?preview=crop-v2
   =============================================================================
   Two targeted modifications to the live single-crop layout, scoped under
   body.crop-v2-preview so nothing leaks to pages without the flag.

   Change 1 — Swap gallery/text sides (text on inline-start, gallery on
              inline-end) at the lg breakpoint.
   Change 2 — Render #cropThumbGallery as a vertical column on the
              inline-start side of #cropMainGallery (instead of a
              horizontal strip below main, XL-only).

   Below lg: no overrides — the live layout (stacked) is kept as-is.
   No typography, color, or section-spacing changes. Deliberately small.
   ========================================================================== */

@media (min-width: 992px) {

    /* ---- Page breathing room + content width cap ----------------------- */
    /* Live container is max-width 1792px — on 15.6" laptops the text
       column becomes uncomfortably wide and specs rows / HRs stretch
       beyond a readable measure. Cap tighter for the preview. */
    body.crop-v2-preview .container.cropsSingleContent {
        max-width: 1340px;
        padding-left: 48px;
        padding-right: 48px;
    }

    /* Explicit gap between the text column and the gallery column so they
       don't visually touch each other. Bootstrap's default gutters are
       suppressed by the col-lg-auto/col-lg flex behavior. */
    body.crop-v2-preview #draggable-container.row {
        column-gap: 40px;
    }

    /* ---- Hide Slick arrows + dots on the main gallery (lg+) ----------- */
    /* Navigation on desktop happens via the vertical thumbnail column;
       the arrows and dots would just add clutter. Mobile keeps them
       (this rule lives inside @media min-width 992px, so below lg the
       default Slick controls stay visible). */
    body.crop-v2-preview #cropMainGallery .slick-prev,
    body.crop-v2-preview #cropMainGallery .slick-next,
    body.crop-v2-preview #cropMainGallery .slick-dots {
        display: none !important;
    }

    /* ---- Change 1: swap sides (text left, gallery right) ---------------- */
    /* Uses `order` on the flex children of #draggable-container.row. The
       breadcrumb row (col-12) stays at the default order 0 and wraps
       naturally onto its own line; the gallery and text columns sit on
       the second flex line with their order flipped. No flex-direction:
       row-reverse, so RTL still mirrors the layout automatically. */
    body.crop-v2-preview #draggable-container.row > .col-12.col-lg-auto { order: 2; }
    body.crop-v2-preview #draggable-container.row > .col-12.col-lg      { order: 1; }

    /* ---- Change 2: vertical thumb column on inline-start of main ------ */
    /* The gallery column (col-lg-auto) already contains #cropMainGallery
       and #cropThumbGallery as siblings. Make the column itself a flex
       row so they sit side-by-side, with order putting thumbs first. */
    body.crop-v2-preview .draggable.col-12.col-lg-auto {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    /* Main image: narrower than the live 600×300 so the overall gallery
       column doesn't dominate the row. Height is unchanged so the
       vertical thumb column (4 × 72 ≈ 288) stays aligned.
       order:1 = inline-start side of the gallery column (left in LTR,
       right in RTL via flex logical direction). */
    body.crop-v2-preview #cropMainGallery {
        order: 1;
        flex: 0 0 auto;
        width: 500px;
    }

    /* Thumb strip: narrow vertical column on the inline-end side of the
       gallery column (right in LTR, left in RTL). Beats the
       .d-none.d-xl-block utility from lg up (Bootstrap shows it only
       at xl by default). */
    body.crop-v2-preview #cropThumbGallery {
        order: 2;
        flex: 0 0 96px;
        width: 96px;
        max-width: 96px;
        display: block !important;
        margin: 0;
    }

    /* Slick's vertical mode sets track-height = slidesToShow × slide-height.
       We define the slide box (96×72) to keep the column aligned with the
       main image height (~300px ≈ 4 × 72 + gaps). */
    body.crop-v2-preview #cropThumbGallery .slick-list {
        width: 96px;
        max-width: 96px;
    }
    body.crop-v2-preview #cropThumbGallery .slick-slide {
        width: 96px !important;
        height: 72px;
        padding: 2px 0;
        margin: 0;
    }
    body.crop-v2-preview #cropThumbGallery .slick-slide > div {
        width: 100%;
        height: 100%;
    }
    body.crop-v2-preview #cropThumbGallery .modalGalleryImageWrapperPc,
    body.crop-v2-preview #cropThumbGallery .item {
        width: 96px;
        max-width: 96px;
        height: 68px;
        margin: 0;
    }
    body.crop-v2-preview #cropThumbGallery .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Active-thumb indicator stays from existing theme styles; just make
       sure the current slide's border sits inside the narrower box. */
    body.crop-v2-preview #cropThumbGallery .slick-current .item {
        outline: 2px solid #20805E;
        outline-offset: -2px;
    }
}