/*
 * Product page styling — grocery-app re-skin (reference: TazajMart), per
 * project decision. Color still only carries meaning for trend badges
 * (green=falling/good, coral=rising); brand green/gold elsewhere are new
 * decorative/CTA accents. Color tokens come from the theme's style.css
 * root variables.
 */

.pt-product-page {
	max-width: 640px;
	margin: 0 auto;
	padding: 1rem;
}

.pt-product-header {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.5rem;
}

/* Active promo — same top-right-corner convention as the card's own
   .pt-card-badge, just anchored to the whole header instead of the photo
   since the photo here is small and square rather than a wide card image. */
.pt-product-discount-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: var( --pt-color-up );
	color: #fff;
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.25rem 0.7rem;
	border-radius: 6px;
}

.pt-product-photo img,
.pt-product-photo-placeholder {
	width: 96px;
	height: 96px;
	border-radius: var( --pt-radius-card );
	background: var( --pt-color-bg-soft );
	display: block;
	object-fit: cover;
	box-shadow: var( --pt-shadow-card );
}

.pt-product-heading h1 {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

/* products.sold_by_weight — no badge at all for a normal packaged product
   (the absence is the "confezionato" signal), same convention as the
   card's own .pt-card-weight-badge (home.css). */
.pt-product-weight-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: var( --pt-color-bg-soft );
	color: var( --pt-color-stable );
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: var( --pt-radius-pill );
	margin-bottom: 0.5rem;
}

/*
 * Big current price under the title — the cheapest store's own price
 * right now (same figure the store-comparison list's top row already
 * shows), not the cross-store average the chart/trend badge track.
 * Package price is the headline figure (what you'd actually pay);
 * price-per-unit stays small underneath, same visual hierarchy as the
 * card/comparison-list prices elsewhere on the site.
 */
.pt-product-price-block {
	margin: 0 0 0.6rem;
}

.pt-product-price-main {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
}

.pt-product-price-current {
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-size: 1.75rem;
	font-weight: 800;
	color: var( --pt-color-text );
}

.pt-product-price-block--promo .pt-product-price-current {
	color: var( --pt-color-up );
}

.pt-product-price-old {
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-size: 1.05rem;
	color: var( --pt-color-stable );
	text-decoration: line-through;
}

.pt-product-price-unit {
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	color: var( --pt-color-stable );
	margin: 0.1rem 0 0;
}

.pt-trend-badge {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.25rem 0.7rem;
	border-radius: 6px;
	color: #fff;
}

.pt-trend-badge.pt-trend-down {
	background: var( --pt-color-down );
}

.pt-trend-badge.pt-trend-up {
	background: var( --pt-color-up );
}

.pt-trend-badge.pt-trend-stable {
	background: var( --pt-color-stable );
}

.pt-product-chart,
.pt-product-comment,
.pt-product-comparison,
.pt-discount-insight {
	margin-bottom: 1.5rem;
}

/* SteamDB-style "is this discount actually good" callout (docs
 * positioning) — border color carries the verdict, background stays the
 * same soft neutral as .pt-product-comment so it doesn't compete with the
 * page's other accent colors. */
.pt-discount-insight {
	background: var( --pt-color-bg-soft );
	border-radius: 12px;
	border-left: 4px solid var( --pt-color-stable );
	padding: 0.75rem 1rem;
}

.pt-discount-insight--better {
	border-left-color: var( --pt-color-down );
}

.pt-discount-insight--worse {
	border-left-color: var( --pt-color-up );
}

.pt-discount-insight-verdict {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.pt-discount-insight-basis {
	font-size: 0.8rem;
	color: var( --pt-color-stable );
	margin: 0;
}

.pt-product-chart h2,
.pt-product-comparison h2 {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.pt-product-chart .pt-price-chart {
	width: 100%;
	height: auto;
	max-height: 220px;
}

/* Promo bands (docs: SteamDB-style visual distinction between a promo dip
 * and a genuine regular-price move) — green like the "falling/good" trend
 * color, since a promo is inherently a good-for-the-shopper event, just
 * low-opacity so it reads as a background zone, not another line. */
.pt-price-chart-promo-band {
	fill: var( --pt-color-down );
	opacity: 0.12;
}

.pt-chart-empty {
	color: var( --pt-color-stable );
	font-size: 0.9rem;
}

/*
 * Time-range selector (30gg/3 mesi/6 mesi/tutto) — assets/js/product-
 * chart.js swaps #pt-price-chart-container's contents via REST on click,
 * same pattern as the homepage feed's filter selects.
 */
.pt-chart-range-selector {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

/* Figma Frame 98 — solid dark pills always (not white+border with a dark
   "selected" state) — active still needs its own visible distinction the
   static mockup doesn't show, so it reuses the indigo #5D65FF this
   redesign already uses for "currently selected" everywhere else (store
   chips, sort/promo pills). */
.pt-chart-range-btn {
	border: none;
	border-radius: var( --pt-radius-pill );
	background: #000;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 500;
	font-family: inherit;
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pt-chart-range-btn:hover {
	background: #2c2c2c;
}

.pt-chart-range-btn.is-active {
	background: #5d65ff;
}

/*
 * Multi-store chart legend (docs: one line per supermarket rather than a
 * single blended average, which could look like a price crash whenever a
 * store simply started reporting). Click toggles that store's line via
 * product-chart.js; dimmed + strike-through-free styling on a hidden
 * entry rather than removing it, so it stays clickable to bring back.
 */
.pt-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-top: 0.6rem;
}

.pt-chart-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: none;
	background: none;
	padding: 0.15rem 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var( --pt-color-text );
	cursor: pointer;
}

.pt-chart-legend-item.is-hidden {
	color: var( --pt-color-stable );
	opacity: 0.55;
}

.pt-chart-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pt-price-chart-series.is-hidden {
	display: none;
}

.pt-product-comment p {
	background: var( --pt-color-bg-soft );
	border-radius: 12px;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	margin: 0;
}

/* Figma Frame 98 — each row is its own card (logo + price + cart button),
   not a plain divided list; the city/branch text the old list-row version
   showed is dropped from the visual (kept as a title="" tooltip on the
   logo instead) since this list compares chains, not physical branches —
   .pt-store-row-badge below carries that distinction visually now. */
.pt-store-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pt-store-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
}

.pt-store-row-logo {
	flex-shrink: 0;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	box-shadow: 0 3px 11px rgba( 0, 0, 0, 0.15 );
}

.pt-store-row-logo--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: var( --pt-color-text );
	padding: 0.4rem;
}

.pt-store-row-price {
	flex: 1;
	min-width: 0;
}

.pt-store-row-price-main {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	color: #000;
}

.pt-store-row-price-main--promo {
	font-weight: 700;
	color: #f42019;
}

.pt-store-row-price-old {
	font-size: 0.8em;
	font-weight: 400;
	color: var( --pt-color-stable );
	text-decoration: line-through;
	order: -1;
}

.pt-store-row-unit-price {
	margin: 0;
	font-size: 0.8rem;
	color: var( --pt-color-stable );
}

/* "Miglior prezzo!" — floats over the row's top-right corner rather than
   taking up its own line, same "badge on top of a card" language as the
   product cards' own discount badge elsewhere in this redesign. */
.pt-store-row-badge {
	position: absolute;
	top: -0.5rem;
	right: 0.5rem;
	background: #ff9500;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: var( --pt-radius-pill );
	white-space: nowrap;
}

.pt-store-row-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.pt-store-row-save {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.0625rem;
	height: 2.0625rem;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: #ab5dff;
	color: #fff;
	cursor: pointer;
}

.pt-store-row-save svg {
	transition: fill 0.15s ease;
}

.pt-store-row-save.is-saved svg {
	fill: #fff;
}

/* Same 33px/radius-6/#97EF3F icon button as the product-card/compare-card
   cart buttons (home.css) — duplicated here rather than shared since this
   page never loads home.css (catalog-type pages only). Keep both in sync
   if this spec changes. */
.pt-store-row .pt-add-to-basket--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.0625rem;
	height: 2.0625rem;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: #97ef3f;
	color: #000;
	line-height: 1;
	position: relative;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}

.pt-store-row .pt-add-to-basket--icon:hover {
	background: #86d936;
}

.pt-store-row .pt-add-to-basket--icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) scale( 1 );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.pt-store-row .pt-add-to-basket--icon .pt-add-to-basket-check {
	opacity: 0;
	transform: translate( -50%, -50% ) scale( 0.4 );
}

.pt-store-row .pt-add-to-basket--icon:active {
	transform: scale( 0.9 );
}

.pt-store-row .pt-add-to-basket--icon.is-added {
	animation: pt-add-pop 0.35s ease;
}

.pt-store-row .pt-add-to-basket--icon.is-added svg:not( .pt-add-to-basket-check ) {
	opacity: 0;
	transform: translate( -50%, -50% ) scale( 0.4 );
}

.pt-store-row .pt-add-to-basket--icon.is-added .pt-add-to-basket-check {
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 1 );
}

.pt-product-actions {
	display: flex;
	gap: 0.75rem;
}

.pt-product-page .pt-add-to-basket {
	display: block;
	flex: 1;
	text-align: center;
	padding: 0.75rem 1rem;
	transition: background 0.15s ease, transform 0.15s ease;
}

.pt-product-share {
	position: relative;
	flex: 0 0 auto;
	width: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --pt-color-border );
	border-radius: var( --pt-radius-pill );
	background: #fff;
	color: var( --pt-color-text );
	cursor: pointer;
	transition: background 0.15s ease;
}

.pt-product-share:hover {
	background: var( --pt-color-bg-soft );
}

.pt-product-share-copied {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX( -50% );
	margin-bottom: 0.4rem;
	background: var( --pt-color-text );
	color: #fff;
	font-size: 0.75rem;
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.pt-product-share.is-copied .pt-product-share-copied {
	opacity: 1;
}

.pt-add-to-basket-label--added {
	display: none;
}

.pt-add-to-basket.is-added {
	background: var( --pt-color-brand-dark );
	animation: pt-add-pop 0.35s ease;
}

.pt-add-to-basket.is-added .pt-add-to-basket-label {
	display: none;
}

.pt-add-to-basket.is-added .pt-add-to-basket-label--added {
	display: inline;
}

/* "Altri formati di questo prodotto" — cross-package-size comparison */

.pt-product-formats {
	margin-bottom: 1.5rem;
}

.pt-product-formats h2 {
	font-size: 1rem;
	margin: 0 0 0.25rem;
}

.pt-product-formats-hint {
	color: var( --pt-color-stable );
	font-size: 0.8rem;
	margin: 0 0 0.75rem;
}

.pt-format-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var( --pt-color-border );
}

.pt-format-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var( --pt-color-border );
}

.pt-format-row--current {
	background: var( --pt-color-bg-soft );
}

.pt-format-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.pt-format-label {
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

a.pt-format-label:hover {
	color: var( --pt-color-brand );
}

/*
 * Which store sells this format — a different package size is a
 * different canonical product (see matching.py's package_size_
 * compatible()), so in practice every row here is a single-store
 * listing; without this, "Altri formati" said which size was cheaper
 * but not where to actually buy it.
 */
.pt-format-store {
	font-size: 0.78rem;
	color: var( --pt-color-stable );
}

.pt-format-price {
	font-size: 0.9rem;
	color: var( --pt-color-stable );
}

.pt-format-row--best .pt-format-price {
	color: var( --pt-color-down );
	font-weight: 700;
}

.pt-format-badge {
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	background: var( --pt-color-down );
	padding: 0.15rem 0.5rem;
	border-radius: var( --pt-radius-pill );
}