/* Product photo sized to the screen (8 Nov 2026), every product page on desktop.
   Every product's main photo is 3:4 (the editor writes 1100x1467), so the frame is 3:4 too: the main
   photo is no longer cropped (some colour and gallery photos are 2:3 or 4:5 and keep a light crop;
   earrings stay uncropped). The frame's height follows the window, so the whole photo shows next to
   the name, price and add-to-cart without scrolling; photo and purchase column are centred together.
   Loaded after every other product stylesheet. :not(#pdp-fit) lifts these rules above the layout
   rules of product-maison/charm/clothing/earring.css and purchase-first.css (some use !important).
   Phones and tablets (860 px and below) keep their swipe gallery unchanged. */
@media (min-width: 861px) {
  body.maison-product:not(#pdp-fit) {
    --pdp-pad: 64px;          /* page side padding */
    --pdp-info: 460px;        /* purchase column */
    --pdp-gap: 40px;          /* photo to purchase column */
    --pdp-thumbs: 64px;       /* thumbnail column */
    --pdp-thumbs-gap: 40px;   /* thumbnails to photo */
    /* On first load the photo starts 166 px down (announcement 30 + header 112 + 24) and keeps a
       24 px margin at the bottom of the window. */
    --pdp-media-h: max(420px, calc(100vh - 190px));
    /* 20 px covers the scrollbar. */
    --pdp-media-w: min(calc(var(--pdp-media-h) * 3 / 4),
      calc(min(100vw, 1720px) - 2 * var(--pdp-pad) - var(--pdp-info) - var(--pdp-gap) - var(--pdp-thumbs) - var(--pdp-thumbs-gap) - 20px));
  }
  body.maison-product:not(#pdp-fit) .product--cg {
    grid-template-columns: auto var(--pdp-info) !important;
    justify-content: center;
    column-gap: var(--pdp-gap) !important;
    padding-left: var(--pdp-pad) !important;
    padding-right: var(--pdp-pad) !important;
  }
  body.maison-product:not(#pdp-fit) .product--cg .gallery {
    display: grid !important;
    grid-template-columns: var(--pdp-thumbs) var(--pdp-media-w) !important;
    grid-template-rows: auto !important;
    column-gap: var(--pdp-thumbs-gap) !important;
    align-items: start !important;
    min-height: 0 !important;
    width: auto !important;
  }
  body.maison-product:not(#pdp-fit) .product--cg .gallery__main {
    grid-column: 2; grid-row: 1;
    width: var(--pdp-media-w) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
  }
  body.maison-product:not(#pdp-fit) .product--cg .gallery__thumbs:not([hidden]) {
    display: flex;
    grid-column: 1; grid-row: 1;
    flex-direction: column;
    width: var(--pdp-thumbs);
    max-height: calc(var(--pdp-media-w) * 4 / 3);
    margin: 0;
    padding: 0;
    gap: 14px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.maison-product:not(#pdp-fit) .product--cg .gallery__thumb { flex: 0 0 84px; height: 84px; }
}
@media (min-width: 861px) and (max-width: 1250px) {
  /* The narrower purchase column bags and charms already used on these widths, now for every
     product, so clothing and earring photos are not squeezed. */
  body.maison-product:not(#pdp-fit) { --pdp-pad: 32px; --pdp-info: 380px; --pdp-gap: 28px; --pdp-thumbs: 50px; --pdp-thumbs-gap: 20px; }
}