/* Large product photos (Admin > Settings > "Large product photos"). Loaded only when the setting is ON; everything here hangs on body.photos-large.
   Every list of products then shows each photo at the size of the big photo on the Edit Product page: a large 4:5 portrait frame on that page's soft background,
   with the whole photo in it (nothing is trimmed, no blurred backdrop). The frame is about 20rem (320px) wide or more, whatever the screen gives it. */

body.photos-large { --lp-bg: #f6f0ec; --lp-min: 20rem; }

/* ======================================================== the store */
/* the product list, the home page's products and the related products: big cards, as many to a row as fit */
body.photos-large .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-min)), 1fr)); gap: 1.6rem 1.25rem; margin: 0; }
body.photos-large .lp-grid > * { width: auto; max-width: none; margin: 0; padding: 0; }
body.photos-large .pc-media { background: var(--lp-bg); }
body.photos-large .pc-media::before { display: none; }
body.photos-large .pc-img { object-fit: contain; }

/* the home page's collections: each collection takes a whole row and shows its products as big photos */
body.photos-large .shelf-grid { grid-template-columns: 1fr; }
body.photos-large .shelf-tiles,
body.photos-large .shelf-tiles.n1,
body.photos-large .shelf-tiles.n3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-min)), 1fr)); gap: 1rem; }
body.photos-large .shelf-tiles.n3 .tile:nth-child(3) { grid-column: auto; }
body.photos-large .tile-img,
body.photos-large .shelf-tiles.n1 .tile-img,
body.photos-large .shelf-tiles.n3 .tile:nth-child(3) .tile-img { aspect-ratio: 4 / 5; background: var(--lp-bg); }
body.photos-large .tile-img::before { display: none; }
body.photos-large .tile-name { font-size: .92rem; }
body.photos-large .tile-price { font-size: 1.1rem; }

/* ======================================================== the admin */
/* Products: the cards of a category */
body.photos-large .ac-grid.big { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-min)), 1fr)); gap: 1.6rem 1.25rem; }
body.photos-large .ac-grid.big .ac-ph { background: var(--lp-bg); }
body.photos-large .ac-grid.big .ac-ph img { object-fit: contain; }

/* Organize: the tiles (the size slider starts at this size and reaches further) */
body.photos-large .og-ph { background: var(--lp-bg); }
body.photos-large .og-ph img { object-fit: contain; }

/* Add products from photos: the photos waiting, and the ones placed in a category */
body.photos-large .bulk-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-min)), 1fr)); }
body.photos-large .bulk-thumb { background: var(--lp-bg); }
body.photos-large .bulk-thumb img { object-fit: contain; }
body.photos-large .bulk-looms { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }

/* Share links: the builder (New / Edit share link) - the products to pick from and the products chosen for the link */
body.photos-large .sl .ac-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-min)), 1fr)); gap: 1.6rem 1.25rem; }
body.photos-large .sl .ac-ph { background: var(--lp-bg); }
body.photos-large .sl .ac-ph img { object-fit: contain; }
body.photos-large .slb-sel { max-height: 46rem; }
body.photos-large .slb-row { grid-template-columns: 1fr auto; row-gap: .6rem; }
body.photos-large .slb-row img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: var(--lp-bg); border-radius: 1rem; }

/* Share links: the page a customer opens - the same big photos */
body.photos-large .product-card .card-img-top { height: auto; aspect-ratio: 4 / 5; padding: 0; object-fit: contain; background: var(--lp-bg); }

/* The warehouse picklist (an order's Pick page): the photos of the things to pick, and the back-order list */
body.photos-large .pk-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-min)), 1fr)); gap: 1.4rem 1.1rem; }
body.photos-large .pk-img { background: var(--lp-bg); }
body.photos-large .pk-img img { object-fit: contain; }
body.photos-large .pk-laterlist li { flex-direction: column; align-items: stretch; gap: .5rem; }
body.photos-large .pk-laterlist img { width: min(100%, var(--lp-min)); height: auto; aspect-ratio: 4 / 5; border-radius: 1rem; object-fit: contain; background: var(--lp-bg); }