/* ==========================================================================
   R&M Rug Grid — catalog page image framing
   --------------------------------------------------------------------------
   Loaded automatically by the "R&M Rug Grid" plugin. Nothing to paste anywhere;
   edit this file and the change is live (the stylesheet is versioned by file
   modification time, so no cache purge is needed).

   The plugin already switches the product loop to the uncropped image, so this
   stylesheet is only responsible for how that image is framed. There is no
   Customizer setting to change and no thumbnails to regenerate.

   TUNING — the one value worth adjusting
   --------------------------------------
   --rug-tile-ratio sets the tile shape. object-fit:contain guarantees the whole
   rug is visible, but if the tile shape does not match the photo shape you get
   thick empty bars and the rug looks small inside its frame.

     empty bars above AND below  -> tile too tall  -> try 1 / 1
     empty bars left AND right   -> tile too short -> try 3 / 4

   ========================================================================== */

:root {
    --rug-tile-ratio: 4 / 5;   /* portrait tiles; see TUNING above */
    --rug-hover-scale: 1.06;   /* hover zoom; 1.04 subtler, 1.10 stronger */
    --rug-tile-bg: #fff;       /* letterbox colour — match your photo bg */
}

/* 1. Fixed-shape frame; the entire rug always fits inside it ------------- */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
ul.products li.product .woocommerce-LoopProduct-link img,
ul.products li.product img.attachment-woocommerce_thumbnail {
    aspect-ratio: var(--rug-tile-ratio);
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    background: var(--rug-tile-bg);
    transition: transform .35s ease;
}

/* 2. Clip the zoom so it cannot spill over neighbouring tiles ------------ */
.woocommerce ul.products li.product a,
ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    overflow: hidden;
    border-radius: 4px;
}

/* 3. Hover zoom — pointer devices only, so phones don't get a stuck zoom - */
@media (hover: hover) and (pointer: fine) {
    .woocommerce ul.products li.product:hover a img,
    ul.products li.product:hover .woocommerce-LoopProduct-link img {
        transform: scale(var(--rug-hover-scale));
    }
}

/* 4. Accessibility: honour reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product a img { transition: none; }
    .woocommerce ul.products li.product:hover a img { transform: none; }
}

/* 5. Phones: 2-up grid so each rug gets real width ---------------------- */
@media (max-width: 600px) {
    .woocommerce ul.products.columns-3 li.product,
    .woocommerce ul.products.columns-4 li.product {
        width: 48% !important;
        margin: 0 4% 2.5em 0 !important;
    }
    .woocommerce ul.products.columns-3 li.product:nth-child(2n),
    .woocommerce ul.products.columns-4 li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
}