/* SPDX-License-Identifier: GPL-2.0-or-later */
.product-images-wrap { max-width: 1120px; }
.product-images-hero { font-size: 15px; color: #555; }

/* ── Dashboard: hero ───────────────────────────────────────────── */
.product-images-dash { margin-top: 8px; }
.pi-hero {
	display: flex; gap: 28px; align-items: center; justify-content: space-between;
	background: linear-gradient(120deg, #0f1c4d 0%, #0a6b5f 52%, #00dc9c 100%);
	color: #fff; border-radius: 16px; padding: 32px 36px; margin: 16px 0 28px;
	box-shadow: 0 10px 30px -12px rgba(15,28,77,.4);
}
/* On the brand hero, the primary CTA reads best as a white chip. */
.pi-hero .button-primary { background: #fff; border-color: #fff; color: #0f1c4d; }
.pi-hero .button-primary:hover { background: #eef2f1; border-color: #eef2f1; color: #0f1c4d; }
.pi-hero-copy { max-width: 560px; }
.pi-eyebrow { font-size: 11px; letter-spacing: 2px; margin: 0 0 6px; opacity: .8; }
.pi-hero h2 { color: #fff; font-size: 26px; line-height: 1.25; margin: 0 0 10px; font-weight: 700; }
.pi-hero-sub { color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.pi-hero-cta { display: flex; align-items: center; gap: 16px; margin: 0; }
.pi-hero-link { color: #fff; text-decoration: underline; font-size: 13px; }
.pi-hero-link:hover { color: #fff; }

/* Hero product photo with cutout treatment */
.pi-hero-visual { flex: 0 0 300px; }
.pi-hero-visual .pi-shot { width: 300px; height: 200px; border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }

/* ── Section heads ─────────────────────────────────────────────── */
.pi-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin: 34px 0 16px; flex-wrap: wrap; }
.pi-section-head h2 { margin: 0 0 3px; font-size: 18px; }
.pi-section-title { max-width: 62ch; }
.pi-section-sub { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
.pi-section-aside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 2px; }

/* On/off toggle status pill */
.pi-toggle { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 12.5px; font-weight: 600; }
.pi-toggle-track { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: #d1d5db; transition: background .15s ease; }
.pi-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s ease; }
.pi-toggle-off .pi-toggle-label { color: #b45309; }
.pi-toggle-off:hover .pi-toggle-track { background: #c4c7cd; }
.pi-toggle-off:hover .pi-toggle-label { color: #92400e; }
.pi-toggle-on .pi-toggle-track { background: #00DC9C; }
.pi-toggle-on .pi-toggle-knob { left: 18px; }
.pi-toggle-on .pi-toggle-label { color: #047857; }

/* ── Photoroom-style asymmetric collage ────────────────────────── */
.pi-collage { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.pi-cc {
	background: #f4f2ee; border-radius: 18px; padding: 14px 14px 4px;
	display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.pi-cc:hover { box-shadow: 0 16px 36px -20px rgba(17,24,39,.38); transform: translateY(-2px); }
.pi-cc-w2 { grid-column: span 2; }
.pi-cc-w4 { grid-column: span 4; }
.pi-cc-w6 { grid-column: span 6; }

.pi-strip {
	position: relative; display: flex; gap: 3px; height: 210px;
	border-radius: 11px; overflow: hidden; background: #fff;
}
.pi-cc-w2 .pi-strip { height: 210px; }
.pi-cell { position: relative; flex: 1; overflow: hidden; background: #fff; }
.pi-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pi-cc-foot {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	padding: 14px 6px 12px;
}
.pi-cc-foot h3 { margin: 0 0 4px; font-size: 17px; font-weight: 750; color: #111827; }
.pi-cc-foot p { margin: 0; font-size: 12.5px; color: #6b7280; line-height: 1.5; max-width: 52ch; }
.pi-learn {
	flex: 0 0 auto; align-self: center; text-decoration: none; font-size: 12.5px; font-weight: 600;
	color: #1f2937; background: #fff; border: 1px solid #e2e0da; padding: 7px 14px; border-radius: 999px;
	white-space: nowrap; transition: background .15s ease, border-color .15s ease;
}
.pi-learn:hover { background: #111827; color: #fff; border-color: #111827; }

/* Ratio chips for the crop strip */
.pi-ratiochip {
	position: absolute; bottom: 10px; left: 10px; z-index: 3; background: rgba(255,255,255,.94); color: #4338ca;
	font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}
/* Subject-aware crop frames — dashed rounded rectangle at each target ratio,
   with the area outside the frame dimmed (the crop preview). */
.pi-cropframe {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
	border: 2px dashed rgba(255,255,255,.96); border-radius: 8px;
	box-shadow: 0 0 0 9999px rgba(17,24,39,.20);
}
.pi-cropframe-1x1  { height: 84%; aspect-ratio: 1 / 1; }
.pi-cropframe-4x5  { height: 94%; aspect-ratio: 4 / 5; }
.pi-cropframe-16x9 { width: 94%; aspect-ratio: 16 / 9; }
/* Show the whole product (contained), so the crop frame encloses the subject
   instead of slicing through it. */
.pi-strip-crop .pi-cell { background: #f6f5f2; }
.pi-strip-crop .pi-cell img { object-fit: contain; padding: 10px; }

@media (max-width: 1100px) {
	.pi-collage { grid-template-columns: repeat(4, 1fr); }
	.pi-cc-w4 { grid-column: span 4; } .pi-cc-w2 { grid-column: span 2; } .pi-cc-w6 { grid-column: span 4; }
}
@media (max-width: 700px) {
	.pi-collage { grid-template-columns: 1fr; }
	.pi-cc-w2, .pi-cc-w4, .pi-cc-w6 { grid-column: auto; }
	.pi-cc-foot { flex-wrap: wrap; }
}

/* ── Remaining features: one row of icon cards (llms-txt style) ─── */
.pi-grid { display: grid; gap: 12px; }
.pi-grid-local { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) { .pi-grid-local { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .pi-grid-local { grid-template-columns: repeat(2, 1fr); } }

.pi-card {
	background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.pi-card-body h3 { margin: 0 0 3px; font-size: 13px; font-weight: 700; }
.pi-card-body p { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.45; }

/* Photo frame (shared by feature blocks) */
.pi-shot {
	position: relative; width: 100%; height: 240px; overflow: hidden; background: #f3f4f6;
}
.pi-shot-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Checkerboard = transparency */
.pi-checker,
.pi-cut-band {
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #dfe3ea 25%, transparent 25%),
		linear-gradient(-45deg, #dfe3ea 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #dfe3ea 75%),
		linear-gradient(-45deg, transparent 75%, #dfe3ea 75%);
	background-size: 18px 18px;
	background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* Background-remover before→after: original background on the LEFT, transparent
   checkerboard cutout revealed on the RIGHT (remove.bg convention). */
.pi-shot-cut .pi-cut-band,
.pi-cell-cut .pi-cut-band {
	position: absolute; inset: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 48%);
	        mask-image: linear-gradient(90deg, transparent 44%, #000 48%);
}
/* keep the product above the checkerboard band */
.pi-cell-cut img { position: relative; z-index: 1; mix-blend-mode: multiply; }
.pi-cell-cut { background: #fff; }
/* before/after divider */
.pi-cell-cut::after { content: ""; position: absolute; top: 0; bottom: 0; left: 46%; width: 2px; background: rgba(255,255,255,.9); z-index: 2; }
.pi-pill {
	position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
	background: rgba(255,255,255,.92); color: #111827; font-size: 12px; font-weight: 600;
	padding: 5px 11px 5px 9px; border-radius: 999px; box-shadow: 0 2px 8px -2px rgba(0,0,0,.3);
}
.pi-spin {
	width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c7d2fe; border-top-color: #4f46e5;
	animation: pi-spin 0.9s linear infinite; display: inline-block;
}
@keyframes pi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pi-spin { animation: none; } }

/* Enhancer: left half softened, split rule + 4× chip */
.pi-shot-sharpen::before {
	content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 50%; z-index: 1;
	backdrop-filter: blur(3px) contrast(.92); -webkit-backdrop-filter: blur(3px) contrast(.92);
	border-right: 2px solid rgba(255,255,255,.9);
}
.pi-chip {
	position: absolute; bottom: 12px; right: 12px; z-index: 2; background: #111827; color: #fff;
	font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 7px; box-shadow: 0 2px 8px -2px rgba(0,0,0,.4);
}

/* Scene / generic tag pill */
.pi-tag {
	position: absolute; top: 12px; left: 12px; background: rgba(17,24,39,.72); color: #fff;
	font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 4px 10px; border-radius: 999px;
	backdrop-filter: blur(4px);
}

/* Alt-text caption bar */
.pi-caption {
	position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.94); color: #1f2937; font-size: 12px; font-style: italic;
	padding: 7px 11px; border-radius: 9px; box-shadow: 0 3px 10px -3px rgba(0,0,0,.3); line-height: 1.35;
}
.pi-caption-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }

/* Auto-crop ratio overlay */
.pi-shot-crop .pi-ratio-frame {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 58%; aspect-ratio: 4/5; border: 2px dashed rgba(255,255,255,.95);
	border-radius: 4px; box-shadow: 0 0 0 9999px rgba(17,24,39,.28);
}
.pi-chips { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; }
.pi-chips em {
	font-style: normal; background: rgba(255,255,255,.92); color: #4338ca; font-size: 11px; font-weight: 700;
	padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}

/* Local (always-on) tiles — vertical, one row of icon cards */
.pi-card-local { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.pi-card-local:hover { box-shadow: 0 10px 22px -14px rgba(17,24,39,.32); transform: translateY(-2px); }
.pi-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; position: relative; }
.pi-ico::after { content: ""; position: absolute; inset: 10px; border-radius: 4px; background: #4f46e5; opacity: .85; }
.pi-ico-audit::after { border-radius: 999px; background: #4f46e5; }
.pi-ico-deliver::after { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pi-ico-compliance::after { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.pi-ico-flip::after { clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 35%, 60% 70%, 60% 50%, 0 50%); }
.pi-ico-video::after { clip-path: polygon(25% 15%, 85% 50%, 25% 85%); }
.pi-ico-dedupe::after { background: none; border: 3px solid #4f46e5; box-shadow: 6px 6px 0 -1px #a5b4fc; inset: 7px 12px 12px 7px; }

.product-images-status { padding: 12px 16px; background: #fff; border: 1px solid #e0e0e0; margin: 16px 0; border-radius: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.product-images-pill { background: #eef2ff; color: #4338ca; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.product-images-pill-ok { background: #ecfdf5; color: #047857; }
.product-images-pill-warn { background: #fef3c7; color: #92400e; }
.product-images-usage { color: #555; font-size: 13px; }
.product-images-features, .product-images-moat { columns: 2; column-gap: 24px; }
.product-images-features li, .product-images-moat li { break-inside: avoid; }
.product-images-score { font-size: 28px; font-weight: 700; padding: 8px 12px; border-radius: 6px; display: inline-block; margin-bottom: 12px; }
.product-images-score-ok { background: #ecfdf5; color: #047857; }
.product-images-score-warn { background: #fef3c7; color: #92400e; }
.product-images-score-bad { background: #fef2f2; color: #b91c1c; }
.product-images-findings { padding-left: 18px; }
.product-images-findings li { margin-bottom: 6px; font-size: 12px; }

/* ═══ AI Shopper Image Audit page ═══════════════════════════════ */
.product-images-audit { max-width: 1120px; }

/* Hero: score ring + verdict + soft CTA */
.pia-hero {
	background: linear-gradient(120deg, #faf9ff 0%, #f3f0ff 100%);
	border: 1px solid #ece9fb; border-radius: 18px; padding: 28px 32px; margin: 14px 0 8px;
}
.pia-hero-main { display: flex; gap: 28px; align-items: center; }
.pia-ring { position: relative; flex: 0 0 132px; width: 132px; height: 132px; }
.pia-ring svg { width: 132px; height: 132px; }
.pia-ring circle { fill: none; stroke-width: 9; }
.pia-ring-bg { stroke: #e9e7f5; }
.pia-ring-fg { stroke: #6d28d9; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .1s linear; stroke-dashoffset: 327; stroke-dasharray: 327; }
.pia-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pia-num-inner { display: inline-flex; align-items: baseline; gap: 1px; line-height: 1; font-weight: 800; }
.pia-num-inner span { font-size: 30px; color: #111827; }
.pia-num-inner small { font-size: 12px; color: #9ca3af; font-weight: 600; }
.pia-hero-copy { flex: 1; min-width: 0; }
.pia-hero-copy h2 { margin: 2px 0 6px; font-size: 22px; font-weight: 750; color: #111827; }
.pia-hero-sub { margin: 0 0 14px; color: #4b5563; font-size: 13.5px; line-height: 1.55; max-width: 62ch; }
.pia-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pia-stat { background: #fff; border: 1px solid #e9e7f5; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: #4b5563; }
.pia-stat strong { color: #6d28d9; }
.pia-stat.is-clear { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.pia-alert { display: flex; gap: 9px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 12.5px; color: #92400e; line-height: 1.5; max-width: 62ch; }
.pia-alert::before { content: "⚠"; font-size: 14px; line-height: 1.35; flex: 0 0 auto; }
.pia-cta-row { display: flex; align-items: center; gap: 14px; margin: 0; flex-wrap: wrap; }
.pia-progress { color: #6b7280; font-size: 13px; }

/* Explain output */
.pia-explain-out { margin-top: 16px; background: #fff; border: 1px solid #ece9fb; border-radius: 12px; padding: 16px 18px; }
.pia-explain-h { margin: 0 0 6px; font-size: 15px; font-weight: 750; color: #111827; }
.pia-explain-b { margin: 0 0 12px; font-size: 13.5px; color: #374151; line-height: 1.6; }
.pia-explain-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #f5f3ff; border-radius: 9px; padding: 10px 14px; font-size: 13px; color: #4338ca; }
.pia-explain-action .button { flex: 0 0 auto; }

/* Toolbar + filters */
.pia-toolbar { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; }
.pia-toolbar h3 { margin: 0; font-size: 16px; }
.pia-filters { display: flex; gap: 6px; }
.pia-chip-btn { border: 1px solid #e5e7eb; background: #fff; color: #4b5563; border-radius: 999px; padding: 4px 13px; font-size: 12.5px; cursor: pointer; }
.pia-chip-btn.is-active { background: #111827; color: #fff; border-color: #111827; }

/* Product cards */
.pia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pia-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.pia-card:hover { box-shadow: 0 14px 30px -16px rgba(17,24,39,.32); transform: translateY(-2px); }
.pia-card-media { position: relative; height: 170px; background: #f3f4f6; }
.pia-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pia-card-ringwrap { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; }
.pia-card-ring { width: 40px; height: 40px; background: rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 2px 6px -2px rgba(0,0,0,.3); }
.pia-card-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.pia-card-body { padding: 12px 14px 14px; }
.pia-card-title { margin: 0 0 8px; font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.pia-card-title a { color: #111827; text-decoration: none; }
.pia-card-title a:hover { color: #4338ca; }
.pia-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pia-chip { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.pia-chip.is-high { background: #fef2f2; color: #b91c1c; }
.pia-chip.is-med { background: #fffbeb; color: #b45309; }
.pia-chip.is-low { background: #f3f4f6; color: #4b5563; }
.pia-chip.is-pass { background: #ecfdf5; color: #047857; }
.pia-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pia-why { background: #fff; border: 1px solid #e2e0da; color: #1f2937; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pia-why:hover { background: #f9fafb; }
/* Fix-it severity colours: red = blocking, amber = good-to-have, brand green = nice-to-have. */
.pia-fix { color: #fff; text-decoration: none; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; }
.pia-fix--high { background: #dc2626; } .pia-fix--high:hover { background: #b91c1c; color: #fff; }
.pia-fix--med  { background: #d97706; } .pia-fix--med:hover  { background: #b45309; color: #fff; }
.pia-fix--low  { background: #00DC9C; color: #053b2c; } .pia-fix--low:hover { background: #00c48b; color: #053b2c; }
/* Store-level primary conversion CTA — brand green. */
.pia-fix-brand { background: #00DC9C; color: #053b2c; border: 0; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pia-fix-brand:hover { background: #00c48b; color: #053b2c; }
/* Per-product "Why?" — visually distinct from the store-level panel: compact,
   left-accent, labeled, no big CTA. */
.pia-why-out { margin-top: 12px; padding: 10px 12px; background: #faf9ff; border-left: 3px solid #7c3aed; border-radius: 0 8px 8px 0; }
.pia-why-label { display: inline-block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: #6d28d9; margin-bottom: 5px; }
.pia-why-body { margin: 0; font-size: 12.5px; color: #374151; line-height: 1.5; }
.pia-empty { color: #6b7280; font-size: 14px; padding: 24px 0; }

@media (max-width: 782px) {
	.pia-hero-main { flex-direction: column; align-items: flex-start; }
}

/* Footer byline (matches sibling plugins) */
.pi-footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid #ececec; color: #8a8f98; font-size: 12px; }
.pi-footer strong { color: #00b585; font-weight: 700; }