/* Product master pages: additions to the approved Lip Products stylesheet (lip-products-pilot.css).
   Only item-count variants and image-in-preparation slots; the master design itself is not restyled. */

/* Image slot still in preparation (clearly identifiable, quiet, same footprint as the photograph). */
/* Makeup template (2026-10-16): all 12 Makeup pages render the Lip Products presentation from
   lip-products-pilot.css unchanged. Only rules the Lip reference itself receives live here — no
   per-page or per-product size patches. Generic item-count variants below exclude Makeup, so a
   page with fewer cards keeps the reference card size and leaves empty tracks empty. */
.product-master--makeup :is(.lip-tiles,.lip-results-grid) img{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:none;object-fit:contain;object-position:center;background:#f9eee6}
.product-master--makeup :is(.lip-tiles,.lip-results-grid){align-items:start}
.product-master--makeup .lip-shade-spectrum.pm-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-master--makeup .lip-hero__image img{object-position:right center}
.product-master--makeup :is(.lip-overview-photo,.lip-editorial-photo,.lip-final-photo,.lip-journey-grid,.lip-process-grid,.lip-shade-spectrum) img{object-fit:contain;object-position:center;background:#f9eee6}
.product-master--makeup :is(.lip-tiles,.lip-results-grid) figcaption h3{min-height:2lh}
@media(max-width:700px){.product-master--makeup .lip-hero.pm-hero--no-mobile .lip-hero__image img{aspect-ratio:auto;height:auto}}
@media(max-width:1100px){.product-master--makeup .lip-hero .lip-hero__image img{width:100%;height:auto;aspect-ratio:auto;object-position:center;max-height:none}}
/* Characteristics without the reference comparison image: the cards keep the reference 1fr track
   (2fr + 3 × 1fr, 24px gaps) instead of widening; below 900px the reference three-column grid applies. */
@media(min-width:901px){.product-master--makeup .lip-results-grid.pm-results--plain{grid-template-columns:repeat(3,calc((100% - 72px)/5))}}
/* Reference image frames: Overview, Private Label and Final RFQ are square (the Lip sources are exactly 1:1).
   The phone hero keeps its source's own ratio (Lip's source is 4:5), so a landscape crop gets no empty bands. */
.product-master--makeup :is([data-pm-section="overview"],[data-pm-section="private-label"],[data-pm-section="final-rfq"]) img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.product-master .pm-slot{display:grid;place-items:center;width:100%;aspect-ratio:var(--pm-ratio,1/1);background:#f7ece3 repeating-linear-gradient(135deg,rgba(201,167,146,.13) 0 1px,transparent 1px 14px);border:1px dashed #d8b8a4;border-radius:3px;color:#9a6a56;text-align:center;padding:14px;box-sizing:border-box}
.product-master .pm-slot span{display:grid;gap:6px;max-width:100%}
.product-master .pm-slot b{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.product-master .pm-slot small{font-size:11px;letter-spacing:.04em;color:#b08470;overflow-wrap:anywhere}
.product-master .lip-journey-grid .pm-slot,.product-master .lip-process-grid .pm-slot{background-color:#fff7ef}
.product-master .lip-fill-grid .pm-slot{aspect-ratio:auto;height:210px}
.product-master .lip-tiles--decoration-gallery .pm-slot{max-width:360px}
.product-master .lip-related-grid .pm-slot{padding:6px}
.product-master .lip-related-grid .pm-slot b{font-size:9px;letter-spacing:.1em}
.product-master .lip-related-grid .pm-slot small{display:none}

/* Toners galleries: consistent square frames without cropping packaging. */
.product-master[data-product-master="skincare/toners"] :is(.lip-tiles,.lip-results-grid) img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:none;max-width:none;
  object-fit:contain;object-position:center;background:#f9eee6;
}

/* Cleansers: lock only the three product galleries to the approved square frame. */
.product-master[data-product-master="skincare/cleansers"] :is([data-pm-section="types"],[data-pm-section="results"],[data-pm-section="range"]) :is(.lip-tiles,.lip-results-grid){
  align-items:start;
}
.product-master[data-product-master="skincare/cleansers"] :is([data-pm-section="types"],[data-pm-section="results"],[data-pm-section="range"]) img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:none;max-width:none;
  object-fit:contain;object-position:center;background:#f9eee6;
}

/* Face Masks galleries retain the full photograph inside uniform square frames. */
.product-master[data-product-master="skincare/face-masks"] :is(.lip-tiles,.lip-results-grid) img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:none;max-width:none;
  object-fit:contain;object-position:center;background:#f9eee6;
}
.product-master[data-product-master="skincare/face-masks"] .lip-fill-grid .pm-slot{
  height:auto;aspect-ratio:1/1;
}

/* Hero while the campaign photograph is pending: slot on the image side, copy unchanged. */
/* The five reviewed Skincare galleries share square frames and caption baselines. */
.product-master:is([data-product-master="skincare/serums"],[data-product-master="skincare/cleansers"],[data-product-master="skincare/toners"],[data-product-master="skincare/eye-care"],[data-product-master="skincare/face-masks"]) :is([data-pm-section="types"],[data-pm-section="effects"],[data-pm-section="results"],[data-pm-section="range"],[data-pm-section="packaging"]) img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:none;max-width:none;
  object-fit:contain;object-position:center;background:#f9eee6;
}
.product-master:is([data-product-master="skincare/serums"],[data-product-master="skincare/cleansers"],[data-product-master="skincare/toners"],[data-product-master="skincare/eye-care"],[data-product-master="skincare/face-masks"]) :is([data-pm-section="types"],[data-pm-section="effects"],[data-pm-section="results"],[data-pm-section="range"],[data-pm-section="packaging"]) figcaption h3{
  min-height:2lh;
}

.product-master .pm-hero--pending .lip-hero__image{left:38%;right:0;padding:28px 38px 28px 0}
.product-master .pm-hero--pending .lip-hero__image .pm-slot{height:100%;aspect-ratio:auto}
.product-master .pm-hero-mobile{display:none}
.product-master .lip-final .lip-actions{margin-top:8px}

/* Item-count variants (the master uses five per row; other families may need four or six). */
.product-master:where(:not(.product-master--makeup)) .lip-tiles--five.pm-count-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-master:where(:not(.product-master--makeup)) .lip-tiles--five.pm-count-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-master:where(:not(.product-master--makeup)) .lip-tiles--five.pm-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-master:where(:not(.product-master--makeup)) .lip-results-grid.pm-results--plain{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-master:where(:not(.product-master--makeup)) .lip-results-grid.pm-results--plain.pm-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-master .lip-shade-spectrum.pm-count-1{grid-template-columns:1fr}
.product-master .lip-results-grid figcaption p{font-size:14px;line-height:1.6;color:var(--lip-muted);margin-top:6px}
.product-master .lip-tiles--lips figcaption p:empty{display:none}

@media(max-width:1200px){
  .product-master:where(:not(.product-master--makeup)) .lip-tiles--five.pm-count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-master:where(:not(.product-master--makeup)) .lip-results-grid.pm-results--plain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-master:where(:not(.product-master--makeup)) .lip-results-grid.pm-results--plain.pm-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .product-master .pm-hero--pending .lip-hero__image{left:auto;padding:0 26px 26px}
  .product-master .pm-hero--pending .lip-hero__image .pm-slot{height:auto;aspect-ratio:3/1}
}
@media(max-width:700px){
  .product-master .pm-hero--no-mobile .lip-hero__image img{aspect-ratio:3/1}
  .product-master .pm-hero--pending .lip-hero__image{padding:0 22px 22px}
  .product-master .pm-hero--pending .lip-hero__image .pm-slot{aspect-ratio:3/2}
  .product-master:where(:not(.product-master--makeup)) .lip-tiles--five.pm-count-3,.product-master:where(:not(.product-master--makeup)) .lip-tiles--five.pm-count-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-master:where(:not(.product-master--makeup)) .lip-results-grid.pm-results--plain,.product-master:where(:not(.product-master--makeup)) .lip-results-grid.pm-results--plain.pm-count-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-master .pm-slot b{font-size:10px;letter-spacing:.12em}
  .product-master .lip-fill-grid .pm-slot{height:auto;aspect-ratio:1/1}
  .product-master .pm-hero--mobile-ready .lip-hero__image .pm-slot{display:none}
  .product-master .pm-hero--mobile-ready .pm-hero-mobile{display:block}
  .product-master .pm-hero--mobile-ready .pm-hero-mobile img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
}



/* Foundation (2026-10-16, v2): Lip Products is the fixed reference — same column counts, card sizes and
   frame ratios per section (tiles 1:1, comparison 2:1, Overview / Private Label / Final RFQ 1:1,
   journey and process 4:3, formulation 3:1). Foundation only adds the crop: sources whose ratio differs
   were checked so that a centred cover crop keeps every product whole; others are placeholders. */
[data-product-master="makeup/foundation"] :is(.lip-tiles,.lip-results-grid,.lip-journey-grid,.lip-process-grid) img,
[data-product-master="makeup/foundation"] :is([data-pm-section="overview"],[data-pm-section="private-label"],[data-pm-section="final-rfq"]) img{object-fit:cover;object-position:center}
[data-product-master="makeup/foundation"] .lip-comparison .pm-slot{aspect-ratio:2/1}
[data-product-master="makeup/foundation"] .lip-fill-grid .pm-slot{height:auto;aspect-ratio:1/1}

/* Foundation hero: the 2.67:1 campaign photo fills the whole hero box (no ivory strip beside or below it).
   Products sit in the right 40 % of the photo, so anchoring right only trims empty background. */
@media(min-width:901px){
  [data-product-master="makeup/foundation"] .lip-hero .lip-hero__image{position:absolute;inset:0;width:auto}
  [data-product-master="makeup/foundation"] .lip-hero .lip-hero__image img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:right center}
}

/* Completed Makeup assortments use the existing Lip section-specific frames. */
.pm-lip-completed .lip-comparison .pm-slot{aspect-ratio:2/1}
.pm-lip-completed .lip-fill-grid .pm-slot{height:auto;aspect-ratio:1/1}
.pm-lip-completed .pm-mobile-pending{display:none}
.pm-lip-completed .lip-shade-spectrum figcaption>:only-child{grid-column:1/-1;overflow-wrap:anywhere}
@media(max-width:700px){
 .pm-lip-completed .pm-hero--mobile-pending .lip-hero__image{display:none}
 .pm-lip-completed .pm-mobile-pending{display:block;order:1;width:100%}
 .pm-lip-completed .pm-mobile-pending .pm-slot{aspect-ratio:4/5}
}

/* Existing campaign compositions reviewed at 1440: only background is trimmed. */
@media(min-width:901px){
 .pm-lip-completed .lip-hero .lip-hero__image{position:absolute;inset:0;width:auto}
 .pm-lip-completed .lip-hero .lip-hero__image img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:right center}
}

/* The narrow 3:1 formulation strips keep their ratio even on a 375px screen. */
.pm-lip-completed .lip-shade-spectrum .pm-slot{padding:4px;min-height:0}
.pm-lip-completed .lip-shade-spectrum .pm-slot small{display:none}
.pm-lip-completed .lip-shade-spectrum .pm-slot b{font-size:9px;line-height:1.1;letter-spacing:.02em}