/*
 * New product page layout (task #59082), only with the shop_product_v3 template (ProductPageV2).
 * Loaded before style.css, so every rule is scoped to #product.pp2 to win over the old ones.
 *
 * Colours: Popsport orange #e56524 for the one strong action (the cart button), labels and icons;
 * a very light warm tint for the buy card, a light neutral grey for the info card and the tiles.
 */

#product.pp2 { padding-top: 24px; }

/* ---------- two columns: gallery | buy column (sticky on desktop) ---------- */
#product.pp2 .pp2-top {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start;
	margin-bottom: 36px;
}
#product.pp2 .pp2-top > .left,
#product.pp2 .pp2-top > .right { float: none; width: auto; margin: 0; min-width: 0; }
#product.pp2 .pp2-top > .left { overflow: visible; }
/* the gallery stays in view (under the 50px sticky menu) while the longer buy column scrolls past
   it, so the left side is not left empty next to the info panel and the tiles. A gallery taller
   than the window gets a negative top from product-page-v2.js: it scrolls to its end, then stays */
#product.pp2 .pp2-top > .left { position: sticky; top: var(--pp2-sticky-top, 70px); }

/* ---------- gallery: thumbnails in a column at the side, larger main image ---------- */
#product.pp2 #gallery {
	display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start;
	width: auto; margin: 0; overflow: visible;
}
#product.pp2 #gallery:after { display: none; }
#product.pp2 #gallery .image { grid-column: 2; grid-row: 1; border: 1px solid #ececec; border-radius: var(--ps-r-card); overflow: hidden; background: #fff; }
#product.pp2 #gallery .image img { display: block; width: 100%; height: auto; }
#product.pp2 #gallery .thumbs { grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0; max-height: 640px; overflow-y: auto; scrollbar-width: thin; }
#product.pp2 #gallery .thumbs ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#product.pp2 #gallery .thumbs ul li { float: none; width: 76px; margin: 0; list-style: none; }
#product.pp2 #gallery .thumbs ul li a,
#product.pp2 #gallery .thumbs ul li .pp2-gal-thumb {
	display: block; width: 76px; height: 57px; padding: 0; border: 1px solid var(--ps-line-strong); border-radius: 8px;
	overflow: hidden; background: #fff; cursor: pointer;
}
#product.pp2 #gallery .thumbs ul li a:hover,
#product.pp2 #gallery .thumbs ul li .pp2-gal-thumb:hover { border-color: var(--ps-orange); }
#product.pp2 #gallery .thumbs ul li .pp2-gal-thumb.is-active { border-color: var(--ps-orange); box-shadow: inset 0 0 0 1px var(--ps-orange); }
#product.pp2 #gallery .thumbs ul li img { float: none; display: block; width: 100%; height: 100%; object-fit: contain; }

/* the main image as a swipeable row of all the pictures (product-page-v2.js) */
#product.pp2 #gallery .image.pp2-gal { position: relative; }
#product.pp2 .pp2-gal-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none; aspect-ratio: 1 / 1; cursor: zoom-in; outline: none;
}
#product.pp2 .pp2-gal-track::-webkit-scrollbar { display: none; }
#product.pp2 .pp2-gal-track:focus-visible { box-shadow: inset 0 0 0 2px var(--ps-orange); }
#product.pp2 .pp2-gal-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

/* a spinner on a slide until its picture has loaded (product-page-v2.js adds .is-loaded); it
   fades in after a moment, so a picture from the cache shows no flash of it */
#product.pp2 .pp2-gal-slide:not(.is-loaded):after,
.pp2-lb-slide:not(.is-loaded):after {
	content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 34px; height: 34px; margin: -17px 0 0 -17px;
	box-sizing: border-box; border: 3px solid rgba(0, 0, 0, .1); border-top-color: var(--ps-orange); border-radius: 50%;
	pointer-events: none;
}
/* in the viewer it sits over the small picture (white): a dark round backing keeps it visible */
.pp2-lb-slide:not(.is-loaded):after {
	border-color: rgba(255, 255, 255, .3); border-top-color: var(--ps-orange);
	background: rgba(17, 17, 17, .55); box-shadow: 0 0 0 6px rgba(17, 17, 17, .55);
}
@media (prefers-reduced-motion: no-preference) {
	#product.pp2 .pp2-gal-slide:not(.is-loaded):after,
	.pp2-lb-slide:not(.is-loaded):after { animation: pp2-spin .8s linear infinite, pp2-fade-in .2s .2s both; }
}
@keyframes pp2-spin { to { transform: rotate(360deg); } }
@keyframes pp2-fade-in { from { opacity: 0; } to { opacity: 1; } }
#product.pp2 #gallery .pp2-gal-slide img { width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; }
#product.pp2 .pp2-gal-arrow {
	position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; margin-top: -21px; padding: 0; border: 1px solid var(--ps-line-strong); border-radius: 50%;
	background: rgba(255, 255, 255, .94); color: var(--ps-ink); cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s, color .15s;
}
#product.pp2 .pp2-gal-prev { left: 12px; }
#product.pp2 .pp2-gal-next { right: 12px; }
#product.pp2 .pp2-gal:hover .pp2-gal-arrow:not(:disabled),
#product.pp2 .pp2-gal-arrow:focus-visible { opacity: 1; }
#product.pp2 .pp2-gal-arrow:hover { border-color: var(--ps-orange); color: var(--ps-orange); }
#product.pp2 .pp2-gal-arrow:disabled { visibility: hidden; }
#product.pp2 .pp2-gal-count {
	position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px;
	background: rgba(29, 29, 29, .72); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; pointer-events: none;
}
@media (hover: none) {
	#product.pp2 .pp2-gal-arrow { display: none; }
}

/* the full screen viewer (product-page-v2.js), on <body> */
html.pp2-lb-open, html.pp2-lb-open body { overflow: hidden; }
.pp2-lb {
	position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column;
	background: #111; color: #fff; font-family: 'Ubuntu', sans-serif;
}
.pp2-lb[hidden] { display: none; }
.pp2-lb button { font-family: inherit; }
.pp2-lb-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; }
.pp2-lb-count { font-size: 14px; font-weight: 600; opacity: .85; }
.pp2-lb-close,
.pp2-lb-arrow {
	display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .15s;
}
.pp2-lb-close { width: 44px; height: 44px; }
.pp2-lb-close:hover,
.pp2-lb-arrow:hover { background: rgba(255, 255, 255, .24); }
.pp2-lb-track {
	flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	overscroll-behavior: contain; scrollbar-width: none;
	touch-action: pan-x;   /* swiping stays native, pinching goes to product-page-v2.js instead of zooming the page */
}
.pp2-lb-track::-webkit-scrollbar { display: none; }
.pp2-lb.is-zoomed .pp2-lb-track { overflow: hidden; touch-action: none; }
.pp2-lb-slide {
	position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
	display: flex; align-items: center; justify-content: center;
	padding: 0 72px; box-sizing: border-box; overflow: hidden;
}
.pp2-lb-slide img {
	display: block; max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: var(--ps-r);
	cursor: zoom-in; transition: transform .25s ease; -webkit-user-select: none; user-select: none;
}
.pp2-lb.is-zoomed .pp2-lb-slide img { cursor: zoom-out; touch-action: none; }
.pp2-lb.is-panning .pp2-lb-slide img { transition: none; }
.pp2-lb-arrow { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; }
.pp2-lb-prev { left: 12px; }
.pp2-lb-next { right: 12px; }
.pp2-lb-arrow:disabled { visibility: hidden; }
.pp2-lb.is-zoomed .pp2-lb-arrow { display: none; }
.pp2-lb-thumbs { flex: none; overflow-x: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.pp2-lb-thumbs::-webkit-scrollbar { display: none; }
.pp2-lb-thumbs ul { display: flex; gap: 8px; width: max-content; margin: 0 auto; padding: 0; list-style: none; }
.pp2-lb-thumbs li { margin: 0; }
.pp2-lb-thumbs .pp2-gal-thumb {
	display: block; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px;
	overflow: hidden; background: #fff; opacity: .55; cursor: pointer; transition: opacity .15s, border-color .15s;
}
.pp2-lb-thumbs .pp2-gal-thumb:hover { opacity: .85; }
.pp2-lb-thumbs .pp2-gal-thumb.is-active { opacity: 1; border-color: var(--ps-orange); }
.pp2-lb-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (hover: none), (max-width: 640px) {
	.pp2-lb-arrow { display: none; }
	.pp2-lb-slide { padding: 0 12px; }
}
/* no extra pictures: the main image takes the whole width */
#product.pp2 #gallery:not(:has(.thumbs li)) { grid-template-columns: minmax(0, 1fr); }
#product.pp2 #gallery:not(:has(.thumbs li)) .image { grid-column: 1; }
#product.pp2 #gallery:not(:has(.thumbs li)) .thumbs { display: none; }
/* the discount shows once, beside the price */
#product.pp2 .product-badges-pp .badge-discount { display: none; }

/* ---------- brand, breadcrumb, title ---------- */
#product.pp2 .pp2-head { margin-bottom: 18px; }
#product.pp2 .pp2-brand { display: inline-block; margin-bottom: 12px; color: var(--ps-ink); text-decoration: none; }
#product.pp2 .pp2-logo { display: block; width: 100px; height: auto; max-height: 56px; object-fit: contain; object-position: left center; }
#product.pp2 .pp2-brand-name { font-size: 16px; font-weight: 800; letter-spacing: .02em; }
#product.pp2 a.pp2-brand:hover .pp2-brand-name { color: var(--ps-orange); }
#product.pp2 .pp2-crumbs { margin: 0 0 6px; padding: 0; font-size: 13px; color: #6b6b6b; }
#product.pp2 .pp2-crumbs li { display: inline; list-style: none; }
#product.pp2 .pp2-crumbs li + li:before { content: "\203A"; margin: 0 6px; color: #9a9a9a; }
#product.pp2 .pp2-crumbs a { color: #6b6b6b; }
#product.pp2 .pp2-crumbs a:hover { color: var(--ps-orange); text-decoration: underline; }
#product.pp2 .pp2-title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--ps-ink); text-transform: none; }

/* ---------- small uppercase section labels in orange ---------- */
#product.pp2 .pp2-label,
#product.pp2 .sc-picker-title {
	display: block; margin: 0 0 10px; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; color: var(--ps-orange);
}

/* ---------- cards ---------- */
#product.pp2 .pp2-card { border-radius: var(--ps-r-lg); padding: 20px 22px; margin-bottom: 16px; }
#product.pp2 .pp2-buy-card { background: var(--ps-tint); border: 1px solid var(--ps-tint-line); }
#product.pp2 .pp2-info-card { background: var(--ps-soft); border: 1px solid var(--ps-line); padding-top: 16px; padding-bottom: 8px; }

/* price */
#product.pp2 .pp2-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 18px; }
#product.pp2 .pp2-price .price p { padding: 0; margin: 0; font-size: 34px; line-height: 1.1; color: var(--ps-orange); }
/* one flat price ("69.95 €") instead of the raised cents of the old black box */
#product.pp2 .pp2-price .price p span { font-size: inherit; vertical-align: baseline; color: var(--ps-orange); }
#product.pp2 .pp2-price .price p strong { font-size: inherit; vertical-align: baseline; color: var(--ps-orange); margin-left: 6px; }
#product.pp2 .pp2-price .old-price { position: static; font-size: 16px; color: #8a8a8a; text-decoration: line-through; }
#product.pp2 .pp2-discount { display: inline-block; background: var(--ps-orange); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
/* "Küsi hinnapakkumist" (price on request) takes the price's place */
#product.pp2 .pp2-price .btn-price-request { float: none; border-radius: var(--ps-r); }
#product.pp2 .pp2-price:has(.btn-price-request) { margin-bottom: 0; }

/* sizes: equal columns across the card, right edge in line with the switch and the button */
#product.pp2 #shop { margin-top: 0; }
#product.pp2 .sc-picker { margin-bottom: 18px; }
#product.pp2 .sc-picker-head { margin-bottom: 10px; }
#product.pp2 .sc-picker-title { margin: 0; }
#product.pp2 .sc-switch { background: #fff; }
#product.pp2 .sc-sizes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#product.pp2 .sc-size { min-height: 48px; border-radius: 8px; }

/* the cart button: full width, the strongest thing on the page */
#product.pp2 #shop .pp2-buy-row { clear: both; }
#product.pp2 #shop .btn.pp2-buy {
	float: none; display: block; width: 100%; box-sizing: border-box; height: auto; padding: 0 20px; line-height: 56px;
	background: var(--ps-orange); color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-transform: none;
	border-radius: var(--ps-r); box-shadow: 0 6px 18px rgba(229, 101, 36, .28);
}
#product.pp2 #shop .btn.pp2-buy:hover { background: var(--ps-orange-dark); }
/* the old dropdown look is only a fallback when the size script does not run */
#product.pp2 #shop .chosen-container { float: none; margin: 0 0 14px; }

/* ---------- info card: delivery, installments, store stock ---------- */
#product.pp2 .pp2-meta { font-size: 13px; padding-bottom: 12px; }
#product.pp2 .pp2-meta .delivery-text,
#product.pp2 .pp2-meta .free-transport { justify-content: flex-start; text-align: left; font-weight: 400; font-size: 13px; color: var(--ps-text); }
#product.pp2 .pp2-meta .delivery-text span,
#product.pp2 .pp2-meta .free-transport span { width: 18px; height: 18px; background-size: 15px 15px; top: 1px; }
#product.pp2 .pp2-meta .price-note { text-align: left; margin: 8px 0 0; padding: 0; border: 0; font-size: 12px; color: #8a8a8a; }
#product.pp2 .pp2-meta .product-gift { margin-bottom: 10px; }
#product.pp2 .pp2-info-card details { border-top: 1px solid #e2e2df; margin: 0; font-size: 14px; }
#product.pp2 details > summary { cursor: pointer; padding: 12px 24px 12px 0; list-style: none; position: relative; color: var(--ps-ink); font-weight: 600; }
#product.pp2 details > summary::-webkit-details-marker { display: none; }
#product.pp2 details > summary:after { content: "+"; position: absolute; right: 2px; top: 9px; font-size: 18px; font-weight: 400; color: var(--ps-orange); }
#product.pp2 details[open] > summary:after { content: "\2212"; }
#product.pp2 details.pp2-leasing summary b { color: var(--ps-orange); }
#product.pp2 .pp2-leasing .leasing-text { margin: 0 0 12px; text-align: left; border: 0; padding: 0; font-weight: 400; font-size: 13px; }
#product.pp2 .pp2-stock .show_availability { margin: 0 0 12px; }

/* store stock (task #59155): a white rounded table with grey column labels instead of the black
   header and the solid orange rows; it scrolls sideways when there are many sizes, with the store
   names kept in view. style.css sets the old colours with !important, so these need it too. */
#product.pp2 .pp2-stock-scroll {
	margin: 0 0 14px; overflow-x: auto; background: #fff; border: 1px solid var(--ps-line); border-radius: 12px;
	scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
#product.pp2 .pp2-stock .show_availability {
	width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 13px;
}
#product.pp2 .pp2-stock .show_availability tr { background: transparent !important; }
#product.pp2 .pp2-stock .show_availability th,
#product.pp2 .pp2-stock .show_availability td {
	width: auto !important; padding: 10px !important; vertical-align: middle; white-space: nowrap;
	text-align: center !important; border: 0 !important; border-bottom: 1px solid #f0f0ee !important;
	background: #fff; color: var(--ps-ink) !important;
}
#product.pp2 .pp2-stock .show_availability th {
	padding-top: 9px !important; padding-bottom: 9px !important;
	font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7a7a7a !important;
	background: #fafaf9;
}
#product.pp2 .pp2-stock .show_availability tr:last-child td { border-bottom: 0 !important; }
/* the store name column: left, bold, stays in view while the sizes scroll */
#product.pp2 .pp2-stock .show_availability th:first-child,
#product.pp2 .pp2-stock .show_availability td:first-child {
	position: sticky; left: 0; z-index: 1; text-align: left !important; box-shadow: 1px 0 0 #f0f0ee;
}
#product.pp2 .pp2-stock .show_availability td:first-child { font-weight: 600; }
#product.pp2 .pp2-stock .show_availability td:not(:first-child) { font-weight: 700; color: var(--ps-ink) !important; }

/* ---------- official dealer block (brand_hubs / landing_pages: TEMPISH and others) ---------- */
/* a white rounded card in the info panel instead of the grey box with the orange bar; the B2B
   link an outlined button in normal case, so the cart button stays the only filled one */
#product.pp2 .brand-dealer {
	display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center;
	margin: 0 0 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--ps-line); border-left: 1px solid var(--ps-line);
	border-radius: 12px; line-height: 1.45;
}
#product.pp2 .brand-dealer-logo { flex: none; display: block; }
#product.pp2 .brand-dealer-logo img { width: 84px; max-height: 44px; object-fit: contain; object-position: left center; }
#product.pp2 .brand-dealer-text { min-width: 0; font-size: 13px; color: var(--ps-text); }
#product.pp2 .brand-dealer-text strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ps-ink); }
#product.pp2 .brand-dealer-text a { display: inline; font-weight: 700; color: var(--ps-orange); }
#product.pp2 .brand-dealer-text a:hover { text-decoration: underline; }
#product.pp2 .brand-dealer-text a.brand-dealer-b2b {
	display: table; margin-top: 10px; height: auto; padding: 0 14px; line-height: 34px;
	background: #fff; border: 1px solid var(--ps-orange); border-radius: 8px; color: var(--ps-orange);
	font-size: 13px; font-weight: 700; text-transform: none; text-decoration: none;
}
#product.pp2 .brand-dealer-text a.brand-dealer-b2b:hover { background: var(--ps-orange); color: #fff; text-decoration: none; }

/* ---------- gift with the product, "Küsi hinnapakkumist" note: same tinted card, no orange bar ---------- */
#product.pp2 .product-gift,
#product.pp2 .form-product {
	padding: 12px 14px; background: var(--ps-tint); border: 1px solid var(--ps-tint-line); border-left: 1px solid var(--ps-tint-line); border-radius: 12px;
}
#product.pp2 .product-gift-title { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-orange); }

/* ---------- the "Uus" / "-20%" tags on the picture: inside the rounded corner ---------- */
#product.pp2 .product-badges-pp { top: 12px; right: 12px; z-index: 2; }
#product.pp2 .product-badges-pp span { border-radius: var(--ps-r-sm); }
#product.pp2 .product-badges-pp > span + span { margin-top: 4px; }

/* ---------- details as tiles ---------- */
#product.pp2 .pp2-details { margin: 22px 0 0; }
#product.pp2 .pp2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#product.pp2 .pp2-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ps-soft); border-radius: 12px; min-width: 0; }
#product.pp2 .pp2-tile-icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
	border-radius: 50%; background: #fff; color: var(--ps-orange); box-shadow: inset 0 0 0 1px #f3dccb;
}
#product.pp2 .pp2-tile-text { display: flex; flex-direction: column; min-width: 0; }
#product.pp2 .pp2-tile-label { font-size: 12px; color: #7a7a7a; line-height: 1.3; }
#product.pp2 .pp2-tile-value { font-size: 14px; font-weight: 700; color: var(--ps-ink); line-height: 1.35; overflow-wrap: break-word; }

#product.pp2 .pp2-intro { margin-top: 16px; }

/* ---------- "Vaata lisaks" (page.php): a heading and the category page cards (shop_list,
   card look in site-restyle.css) ---------- */
#product.pp2 .pp2-more { margin: 40px 0 48px; }
#product.pp2 .pp2-more-title {
	margin: 0 0 16px; font-size: 22px; line-height: 1.25; font-weight: 700; text-transform: none; color: var(--ps-ink);
}

/* ---------- sticky price + cart bar on phones (product-page-v2.js) ---------- */
.pp2-bar { display: none; }

@media only screen and (max-width: 1200px) {
	#product.pp2 .pp2-top { gap: 32px; }
	#product.pp2 .sc-sizes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media only screen and (max-width: 768px) {
	#product.pp2 { padding-top: 12px; }
	#product.pp2 .pp2-top { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 24px; }
	#product.pp2 .pp2-top > .left { position: static; }
	/* thumbnails as a row under the image */
	#product.pp2 #gallery { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	#product.pp2 #gallery .image { grid-column: 1; grid-row: 1; }
	#product.pp2 #gallery .thumbs { grid-column: 1; grid-row: 2; max-height: none; overflow-x: auto; overflow-y: hidden; }
	#product.pp2 #gallery .thumbs ul { flex-direction: row; }
	#product.pp2 #gallery .thumbs ul li { flex: none; width: 64px; }
	#product.pp2 #gallery .thumbs ul li a,
	#product.pp2 #gallery .thumbs ul li .pp2-gal-thumb { width: 64px; height: 48px; }
	#product.pp2 .pp2-title { font-size: 21px; }
	#product.pp2 .pp2-price .price p { font-size: 28px; }
	#product.pp2 .pp2-card { padding: 16px; border-radius: var(--ps-r-card); }
	#product.pp2 .pp2-more { margin: 32px 0 36px; }
	#product.pp2 .pp2-more-title { font-size: 19px; }
	#product.pp2 .sc-sizes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }

	.pp2-bar {
		display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 7000;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff;
		box-shadow: 0 -4px 18px rgba(0, 0, 0, .14); transform: translateY(110%); transition: transform .2s ease;
	}
	body.pp2-bar-on .pp2-bar { transform: none; }
	body.pp2-bar-on { padding-bottom: 76px; }
	body.pp2-bar-on #back-top { bottom: 86px; }
	.pp2-bar-price { flex: none; font-size: 20px; font-weight: 800; color: var(--ps-orange); white-space: nowrap; }
	.pp2-bar-btn {
		flex: 1; min-width: 0; border: 0; border-radius: var(--ps-r); background: var(--ps-orange); color: #fff; font-size: 16px; font-weight: 700;
		line-height: 48px; padding: 0 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		font-family: inherit;
	}
	.pp2-bar-btn:active { background: var(--ps-orange-dark); }
}

@media only screen and (max-width: 420px) {
	#product.pp2 .sc-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* two tiles side by side still fit a product code like MIZK1GA251051 */
	#product.pp2 .pp2-tiles { gap: 8px; }
	#product.pp2 .pp2-tile { gap: 8px; padding: 10px; }
	#product.pp2 .pp2-tile-icon { width: 28px; height: 28px; }
	#product.pp2 .pp2-tile-icon svg { width: 16px; height: 16px; }
	#product.pp2 .pp2-tile-value { font-size: 13px; }
}

@media only screen and (max-width: 340px) {
	#product.pp2 .pp2-tiles { grid-template-columns: minmax(0, 1fr); }
}