/* LayoutGlut — full product page designs.
 * Slots: .lg-p-head (title, rating, price) · .lg-p-media (images / gallery) · .lg-p-buy (excerpt, add to
 * cart, meta) · .lg-p-files (preview files) · .lg-p-body (tabs, related) · .lg-p-facts · .lg-p-bar.
 * A design is a CSS grid that places the slots. */

.lg-page { display: grid; grid-template-rows: auto 1fr; gap: 24px 36px; width: 100%; clear: both; margin: 0 0 2em; color: var(--lg-text); align-items: start; }
.lg-page ~ .summary, .lg-page ~ .entry-summary { display: none !important; }
.lg-page > * { min-width: 0; }
.lg-p-head { grid-area: head; }
.lg-p-media { grid-area: media; position: relative; }
.lg-p-buy { grid-area: buy; }
.lg-p-files { grid-area: files; }
.lg-p-body { grid-area: body; }
.lg-p-facts { grid-area: facts; display: none; gap: 6px; flex-wrap: wrap; align-items: center; }
.lg-p-bar { display: none; }
.lg-p-fact { font-size: .85em; color: var(--lg-muted); margin-right: 4px; }

.lg-p-head .product_title { margin: 0 0 .3em; line-height: 1.2; }
.lg-p-head .price { display: block; margin: .3em 0 0; font-size: 1.4em; }
.lg-p-buy .woocommerce-product-details__short-description { margin-bottom: 1em; }
.lg-p-buy form.cart { margin: 1em 0; }
.lg-p-buy .product_meta { font-size: .9em; color: var(--lg-muted); }
.lg-p-media .woocommerce-product-gallery, .lg-p-media .images { float: none !important; width: 100% !important; margin: 0 !important; }
.lg-p-media .onsale { z-index: 7; }
.lg-p-files .lg-section { margin: 0; }
.lg-p-body .woocommerce-tabs, .lg-p-body .related, .lg-p-body .upsells { clear: both; }
.lg-p-body > :first-child { margin-top: 0; }

@media (max-width: 800px) {
  .lg-page { grid-template-columns: 1fr !important; grid-template-areas: none !important; gap: 20px; }
  .lg-page > * { grid-area: auto !important; grid-column: 1 !important; grid-row: auto !important; }
  .lg-p-head { order: 1; } .lg-p-media { order: 2; } .lg-p-buy { order: 3; } .lg-p-files { order: 4; } .lg-p-body { order: 5; }
}

/* ── 1. Split: gallery (images + files) left, details right ─────────── */
.lg-ptpl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media head" "media buy" "body body"; }
.lg-ptpl-split .lg-p-media { grid-row: 1 / span 2; }
.lg-ptpl-split .lg-p-buy, .lg-ptpl-split .lg-p-head { align-self: start; }
.lg-ptpl-split .lg-p-buy { align-self: start; margin-top: -8px; }

/* ── 2. Image + file list ───────────────────────────────────────────── */
.lg-ptpl-imagelist { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "media head" "media buy" "media files" "body body"; }
.lg-ptpl-imagelist .lg-p-buy { margin-top: -10px; }
.lg-ptpl-imagelist .lg-p-files { padding: 16px; border: 1px solid var(--lg-line); border-radius: calc(var(--lg-radius) + 2px); background: var(--lg-soft); }
.lg-ptpl-imagelist .lg-p-files .lg-heading { font-size: 1em; margin-bottom: .6em; }

/* ── 3. Cards only: no product image ────────────────────────────────── */
.lg-ptpl-cards { max-width: 1000px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr; grid-template-areas: "head" "files" "buy" "body"; gap: 28px; }
.lg-ptpl-cards .lg-p-head { text-align: center; padding: 8px 0 0; }
.lg-ptpl-cards .lg-p-head .product_title { font-size: 2.1em; }
.lg-ptpl-cards .lg-p-head .star-rating { margin: 0 auto .4em; }
.lg-ptpl-cards .lg-p-files .lg-heading { text-align: center; }
.lg-ptpl-cards .lg-p-buy { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 18px 22px; border-radius: calc(var(--lg-radius) + 4px); background: var(--lg-soft); border: 1px solid var(--lg-line); }
.lg-ptpl-cards .lg-p-buy > * { margin: 0 !important; }
.lg-ptpl-cards .lg-p-buy .woocommerce-product-details__short-description { flex: 1 1 280px; }
.lg-ptpl-cards .lg-p-buy .product_meta { flex-basis: 100%; }
.lg-ptpl-cards .lg-p-files .lg-files { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lg-ptpl-cards .lg-p-files .lg-file { padding: 22px 18px; }

/* ── 4. Wide stage: full-width gallery, details left, description right ─ */
.lg-ptpl-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "media media" "head body" "buy body"; }
.lg-ptpl-wide .lg-p-media { max-width: 980px; width: 100%; margin: 0 auto; }
.lg-ptpl-wide .lg-p-media .lg-body { --lg-gallery-ratio: 16 / 9; }
.lg-ptpl-wide .lg-p-body { grid-row: 2 / span 2; }
.lg-ptpl-wide .lg-p-head { padding-top: 4px; }
.lg-ptpl-wide .lg-p-body .woocommerce-tabs { margin-top: 0; }

/* ── 5. Document first: the viewer is the content ───────────────────── */
.lg-ptpl-document { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "files head" "files media" "files buy" "body body"; }
.lg-ptpl-document .lg-p-media { max-width: 260px; }
.lg-ptpl-document .lg-p-files .lg-heading { display: none; }
.lg-ptpl-document .lg-p-head .product_title { font-size: 1.5em; }
.lg-ptpl-document .lg-p-buy { padding: 16px; border: 1px solid var(--lg-line); border-radius: calc(var(--lg-radius) + 2px); background: var(--lg-soft); }
.lg-ptpl-document .lg-p-buy .woocommerce-product-details__short-description { font-size: .92em; }
.lg-ptpl-document .lg-p-buy form.cart { margin: .6em 0; }
.lg-ptpl-document .lg-p-files .lg-body { height: min(var(--lg-height), 72vh); }
@media (max-width: 1000px) { .lg-ptpl-document { grid-template-columns: minmax(0, 1fr) 260px; } }

/* ── Features strip (Page Builder) ──────────────────────────────────── */
.lg-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 24px; }
.lg-feature { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--lg-line); border-radius: var(--lg-radius); background: var(--lg-soft); }
.lg-feature b { display: block; font-size: .92em; }
.lg-feature small { display: block; color: var(--lg-muted); font-size: .8em; line-height: 1.35; }
.lg-ficon { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: color-mix(in srgb, var(--lg-accent) 12%, #fff); color: var(--lg-accent); }