/*
 * product page, new design (figma 5799:27310 / 5799:27456, phone 5799:30248)
 * everything lives under .ppg, so the old css of the product page (bundle.css) is not touched.
 * parts that are shared with other blocks: css/up-tabs.css (tabs), css/up-carousel.css (paired arrows).
 * selectors have two classes on purpose - shared css files can be linked more than once on a page.
 *
 * inner markup of color rows and tiles is the old one (cart / hydrate scripts work with its classes),
 * here it only gets the new look.
 */
.ppg{--pp-line:#DFDFDF;--pp-text:#212121;--pp-gray:#878787;--pp-icon:#CBCBCB;--pp-accent:#EC7529;--pp-green:#83B00B;--pp-bg:#F8F8F8;
	background:var(--pp-bg);color:var(--pp-text);padding:0 0 60px;
	/* the site content wrapper (.center) keeps 30px of white under the last block, the gray goes down to the footer */
	margin-bottom:-30px}
.ppg .ppg-crumbs{padding-top:30px;padding-bottom:30px}
.ppg .ppg-crumbs > *{min-height:24px;display:flex;align-items:center;flex-wrap:wrap;margin-top:0;margin-bottom:0}
/* blocks of the mockup stand on the borders of the site content (1400px), the usual container keeps 10px inside of them */
@media (min-width:1440px){
	.ppg .container{padding-left:0;padding-right:0}
}
.ppg .ppg-plate{background:#fff;border-radius:10px;min-width:0}

/* ================= top: gallery + info ================= */
.ppg .ppg-top{display:grid;grid-template-columns:minmax(0,792fr) minmax(0,588fr);gap:20px;align-items:start}

/* ---- gallery ---- */
/* sticky offset follows the site header (it slides away on scroll down and back on scroll up):
   js/product-page.js stickyGallery() keeps --ppg-stick = visible bottom of the header (min 20px) */
.ppg .ppg-gallery{padding:20px 12px 20px 20px;position:sticky;top:var(--ppg-stick,20px)}
.ppg .ppg-gal{display:flex;gap:20px;position:static;top:auto}
.ppg .ppg-gal-main{position:relative;flex:1 1 auto;min-width:0;width:auto;aspect-ratio:644/678;overflow:hidden}
.ppg .gallery-main{width:100%;height:100%}
.ppg .gallery-main .swiper-slide{display:flex;align-items:center;justify-content:center;background:#fff}
.ppg .gallery-main .swiper-slide > img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
/* video slide: the slide is a centering flex box, the wrapper had no width and the video was 0px wide (sound only) */
.ppg .gallery-main .swiper-slide > .product-video-wrapper{width:100%;height:100%}
.ppg .gallery-main .videoWrapper{position:static;width:100%;height:100%;padding:0}
.ppg .gallery-main .videoWrapper video{position:static;display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.ppg .ppg-gal-thumbs{position:relative;flex:0 0 96px;width:96px;min-width:96px}
.ppg .gallery-thumbs{position:absolute;left:0;top:0;right:0;bottom:0;width:auto;height:auto;order:0;padding:0 26px 0 0!important}
.ppg .gallery-thumbs .swiper-slide{width:70px;height:70px;border:1px solid var(--pp-line);border-radius:6px;overflow:hidden;background:#fff;opacity:1}
.ppg .gallery-thumbs .swiper-slide:last-child{margin-bottom:0}
.ppg .gallery-thumbs .swiper-slide img{display:block;width:100%;height:100%;object-fit:contain}
.ppg .gallery-thumbs .swiper-slide-thumb-active{border-color:var(--pp-accent)}
.ppg .gallery-thumbs .swiper-scrollbar{right:0;top:0;bottom:0;left:auto;width:8px;height:auto;border-radius:8px;background:#F2F2F2;opacity:1!important}
.ppg .gallery-thumbs .swiper-scrollbar-drag{border-radius:8px;background:var(--pp-icon)}
/* one or no previews: nothing to scroll */
.ppg .gallery-thumbs .swiper-scrollbar.swiper-scrollbar-lock{display:none}

.ppg .ppg-badges{position:absolute;left:0;top:0;right:auto;bottom:auto;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:auto;margin:0;padding:0}
.ppg .ppg-badges .badge{position:relative;left:auto;right:auto;top:auto;margin:0;width:32px;height:32px;min-width:32px}
.ppg .ppg-os{position:absolute;left:0;bottom:0;z-index:3}
.ppg .ppg-os .containerForOsBadge{position:static;display:flex;gap:5px;margin:0;padding:0}
.ppg .ppg-gal-nav{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:3}
.ppg .ppg-gal-nav.is-hidden{display:none}

/* ---- info plate ---- */
.ppg .ppg-info{padding:20px;display:flex;flex-direction:column;gap:30px}
.ppg .ppg-head{display:flex;flex-direction:column;gap:10px}
.ppg .ppg-title{margin:0;padding:0;font-size:24px;line-height:1.25;font-weight:700;color:var(--pp-text);overflow-wrap:anywhere}
.ppg .ppg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 30px;font-size:14px;line-height:1.5}
.ppg .ppg-sku{color:var(--pp-gray)}
.ppg .ppg-meta .product-in-nal,.ppg .ppg-meta .product-is-pred,.ppg .ppg-meta .product-no-nal{display:inline-flex;align-items:center;gap:3px;margin:0;padding:0;font-size:14px;line-height:1.5;background:none}
.ppg .ppg-meta svg{display:block;flex:0 0 20px}

/* ---- price box ---- */
.ppg .ppg-price{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin:0;padding:30px;border:1px solid var(--pp-line);border-radius:10px;background:#fff;box-shadow:none}
.ppg .ppg-price-top{display:flex;align-items:stretch;gap:20px;font-size:14px;line-height:1.5}
.ppg .ppg-price-range{display:flex;flex-direction:column}
.ppg .ppg-range b{font-weight:700}
.ppg .ppg-group{display:inline-flex;align-items:center;gap:5px;margin:0;color:var(--pp-gray);font-size:14px;line-height:1.5}
.ppg .ppg-group .optQ{display:inline-flex;margin:0;cursor:pointer}
.ppg .ppg-group .optQ svg{display:block;width:20px;height:20px}
.ppg .ppg-mrc{display:flex;flex-direction:column;justify-content:flex-end;padding-left:20px;border-left:1px solid var(--pp-line);white-space:nowrap}
.ppg .ppg-mrc[hidden]{display:none}
.ppg .ppg-mrc-l{color:var(--pp-gray)}
.ppg .ppg-price-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;white-space:nowrap}
.ppg .ppg-price-label{font-size:14px;line-height:1.5;color:var(--pp-gray)}
.ppg .ppg-price-main .font-30{font-size:30px;line-height:1.2;font-weight:400}
.ppg .ppg-price-main .font-30 b{font-weight:700}
.ppg .ppg-price-main .font-18{margin:0;font-size:18px;line-height:1.35;color:var(--pp-gray)}
.ppg .ppg-price-main del{font-size:18px;line-height:1.35;color:var(--pp-gray)}
.ppg .ppg-price-main .rad-action{color:#E5343D}
.ppg .ppg-price-actions{display:flex;flex-wrap:wrap;gap:10px}
.ppg .ppg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:32px;min-width:178px;margin:0;padding:0 12px;box-sizing:border-box;border:1px solid var(--pp-line);border-radius:5px;background:#fff;
	color:var(--pp-text);font-size:14px;line-height:1.5;font-weight:400;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .18s ease,color .18s ease}
.ppg .ppg-btn.hidden{display:none}
.ppg .ppg-btn [class^="icon-"]{font-size:20px;line-height:1;color:var(--pp-icon)}
.ppg .ppg-btn svg{display:block;flex:0 0 auto}
@media (hover:hover){
	.ppg .ppg-btn:hover{border-color:var(--pp-accent);color:var(--pp-text);text-decoration:none}
}
.ppg .ppg-btn:focus-visible{outline:2px solid var(--pp-accent);outline-offset:2px}

/* ---- colors: rows of the old table get the new look ---- */
.ppg .ppg-colors-title{display:block;margin:0 0 24px;font-size:14px;line-height:1.5;font-weight:700}
.ppg .ppg-colors .listTable,.ppg .ppg-colors .listTable > tbody{display:block;width:100%;margin:0;border:0}
.ppg .ppg-colors .listTable > tbody{display:flex;flex-direction:column;gap:10px}
.ppg .ppg-colors tr.null-content{display:none}
.ppg .ppg-colors tr.itemPosition{display:flex;align-items:center;gap:20px;min-height:80px;box-sizing:border-box;padding:9px 15px;border:1px solid var(--pp-line);border-radius:10px;background:#fff;transition:border-color .18s ease}
.ppg .ppg-colors tr.itemPosition.is-active{border-color:var(--pp-accent)}
.ppg .ppg-colors tr.itemPosition > td{display:block;padding:0;border:0;width:auto;height:auto;vertical-align:middle;background:none}
.ppg .ppg-colors tr.itemPosition > td:nth-child(1){flex:0 0 60px;margin-right:-10px}
/* min-content: the column never gets narrower than the barcode, it must stay fully visible. long color names wrap */
.ppg .ppg-colors tr.itemPosition > td:nth-child(2){flex:1 1 90px;min-width:min-content}
.ppg .ppg-colors tr.itemPosition > td:nth-child(3){flex:0 0 auto;text-align:right;white-space:nowrap}
.ppg .ppg-colors tr.itemPosition > td:nth-child(4){flex:0 1 250px;min-width:0}
.ppg .ppg-colors .popContainer{display:block;width:60px;height:60px;margin:0;padding:0;border:0;cursor:pointer}
.ppg .ppg-colors .popContainer img{display:block;width:60px;height:60px;object-fit:contain;mix-blend-mode:multiply}
.ppg .ppg-colors .status-in-nal,.ppg .ppg-colors .status-pred,.ppg .ppg-colors .status-no-nal,
.ppg .ppg-colors .product-in-nal,.ppg .ppg-colors .product-is-pred,.ppg .ppg-colors .product-no-nal{display:flex;align-items:center;gap:3px;margin:0;font-size:12px;line-height:1.5}
.ppg .ppg-colors td svg{flex:0 0 20px}
.ppg .ppg-colors .mpList-name{margin:0;font-size:14px;line-height:1.5;color:var(--pp-text);overflow-wrap:anywhere}
.ppg .ppg-colors .afty{margin:0;font-size:12px;line-height:1.5;color:var(--pp-gray);white-space:nowrap}
.ppg .ppg-colors .lh12 span{margin:0;line-height:1.5}
.ppg .ppg-colors .lh12 .font-14{font-size:14px}
.ppg .ppg-colors .lh12 .font-12{font-size:12px;color:var(--pp-gray)}

/* stepper + cart + note + wish: the same parts in color rows (32px) and in tiles (40px).
   scoped to .ppg-colors / .ppg-tile only: the catalog cards in "offers" and "looked" blocks below must keep the catalog look */
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons{--pp-ctl:32px;display:flex;align-items:center;gap:5px;width:100%;margin:0}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .m-b-number-block{flex:1 1 auto;min-width:0;margin:0;padding:0;width:auto}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number{display:flex;align-items:center;gap:5px;width:100%;margin:0;padding:0;border:0;background:none;height:auto}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .minus,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .plus{flex:0 0 var(--pp-ctl);width:var(--pp-ctl);height:var(--pp-ctl);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:0;position:static;
	border:1px solid var(--pp-line);border-radius:8px;background:#fff;color:var(--pp-icon);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .18s ease,color .18s ease}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .minus span,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .plus span{font-size:12px;line-height:1;color:inherit}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .minus span:before,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .plus span:before{color:inherit}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number input{flex:1 1 auto;min-width:0;width:100%;height:var(--pp-ctl);box-sizing:border-box;margin:0;padding:0 4px;border:1px solid var(--pp-line);border-radius:8px;background:#fff;
	font-size:16px;line-height:1;color:var(--pp-text);text-align:center;outline:none;box-shadow:none}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number input:focus{border-color:var(--pp-accent)}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .m-b-buttons-block{flex:0 0 auto;display:flex;align-items:center;gap:5px;margin:0;padding:0;width:auto}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .greenButton{flex:0 0 var(--pp-ctl);width:var(--pp-ctl);min-width:var(--pp-ctl);height:var(--pp-ctl);margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:var(--pp-green);color:#fff;cursor:pointer;position:relative}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .greenButton .icon-hcart{font-size:20px;line-height:1}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .greenButton .button-buy-count{display:none}
/* a product in the cart keeps the green button (+ green check badge from bundle.css) - the same as in the catalog
   and on the live site. only a pre-order in the cart is orange, see below */
/* pre-order: like on the old template - white with orange border, orange icon; in cart - orange with white icon.
   border:0 above has higher specificity than body .greenButton.is_pred of bundle.css, so it is repeated here */
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .greenButton.is_pred{border:1px solid var(--pp-accent);background:transparent;color:var(--pp-accent)}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .greenButton.is_pred.activeInCart{background:var(--pp-accent);color:#fff}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .tovar_list_button,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .book{position:static;opacity:1;flex:0 0 32px;width:32px;min-width:32px;height:32px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
	border:1px solid var(--pp-line);border-radius:8px;background-color:#fff;cursor:pointer}
.ppg .ppg-colors .mainButtons .tovar_list_button{margin-left:15px}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .tovar_list_button svg,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .book svg{display:block;width:24px;height:24px}
.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .tovar_list_button.inNote svg,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .book.inWish svg{display:none}
@media (hover:hover){
	.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .minus:hover,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .number .plus:hover,
	.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .tovar_list_button:hover,.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .book:hover{border-color:var(--pp-accent);color:var(--pp-accent)}
	.ppg :is(.ppg-colors,.ppg-tile) .mainButtons .greenButton:hover{filter:brightness(1.06)}
}

/* ================= info blocks (accordions) ================= */
.ppg .ppg-acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;margin-top:20px}
.ppg .ppg-acc-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.ppg .ppg-acc-item{background:#fff;border-radius:10px;overflow:hidden}
.ppg .ppg-acc-head{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;margin:0;padding:10px 20px;box-sizing:border-box;border:0;background:none;color:var(--pp-text);text-align:left;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.ppg .ppg-acc-ico{flex:0 0 24px;display:flex;color:var(--pp-icon)}
.ppg .ppg-acc-title{flex:1 1 auto;min-width:0;font-size:16px;line-height:1.5;font-weight:400}
.ppg .ppg-acc-btn{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#F2F2F2;position:relative;transition:background-color .18s ease}
.ppg .ppg-acc-btn:before,.ppg .ppg-acc-btn:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--pp-gray);transition:transform .26s cubic-bezier(.45,0,.15,1),background-color .18s ease}
.ppg .ppg-acc-btn:after{transform:rotate(90deg)}
.ppg .ppg-acc-item.is-open .ppg-acc-btn:after{transform:rotate(0deg)}
.ppg .ppg-acc-head:focus-visible .ppg-acc-btn{box-shadow:0 0 0 2px var(--pp-accent)}
@media (hover:hover){
	.ppg .ppg-acc-head:hover .ppg-acc-btn{background:rgba(236,117,41,.12)}
	.ppg .ppg-acc-head:hover .ppg-acc-btn:before,.ppg .ppg-acc-head:hover .ppg-acc-btn:after{background:var(--pp-accent)}
}
/* height is folded with no js measuring: grid rows 0fr -> 1fr */
.ppg .ppg-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.45,0,.15,1)}
.ppg .ppg-acc-item.is-open .ppg-acc-body{grid-template-rows:1fr}
.ppg .ppg-acc-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .3s}
.ppg .ppg-acc-item.is-open .ppg-acc-in{visibility:visible;transition-delay:0s}
.ppg .ppg-acc-text{padding:0 20px 20px;font-size:14px;line-height:1.5;color:var(--pp-text);overflow-wrap:anywhere}
.ppg .ppg-acc-text *{max-width:100%}
.ppg .ppg-acc-text .font-13,.ppg .ppg-acc-text span,.ppg .ppg-acc-text p,.ppg .ppg-acc-text li{font-size:14px;line-height:1.5}
/* texts of these blocks were written for popovers: they carry a "close the popover" button and a green
   button-like "more" link. inside of an accordion both look wrong - the button is empty and the link
   was a green box with green text on it. here they are a plain link, like in the "payment" block */
.ppg .ppg-acc-text .i-pop-close{display:none}
.ppg .ppg-acc-text a{color:var(--pp-green);text-decoration:underline}
.ppg .ppg-acc-text a.popoverMore{display:inline;width:auto;margin:0;padding:0;background:none;border-radius:0;color:var(--pp-green);font-size:14px;font-weight:400;text-align:left}
@media (hover:hover){
	.ppg .ppg-acc-text a:hover{color:var(--pp-accent)}
	.ppg .ppg-acc-text a.popoverMore:hover{opacity:1;color:var(--pp-accent)}
}
.ppg .ppg-acc-text table{width:100%;border-collapse:collapse;margin:10px 0}
.ppg .ppg-acc-text td,.ppg .ppg-acc-text th{padding:6px 10px;border:1px solid var(--pp-line);font-size:14px}
.ppg .ppg-acc-text img{height:auto}
.ppg .ppg-acc-text iframe{max-width:100%}
.ppg .ppg-chars{list-style:none;margin:0 0 16px;padding:0}
.ppg .ppg-chars li{padding:3px 0}
.ppg .ppg-ch-n{color:var(--pp-gray)}
.ppg .ppg-descr + .ppg-descr{margin-top:16px}

/* ================= brands ================= */
.ppg .ppg-brands-wrap{margin-top:30px}
.ppg .ppg-brands-wrap[hidden]{display:none}
.ppg .ppg-brands{justify-content:flex-start}
.ppg .ppg-brands .utabs-tab{text-decoration:none;color:var(--pp-text)}
.ppg .utabs-tab[hidden]{display:none}

/* ================= models of the brand ================= */
.ppg .ppg-coll{margin-top:30px}
.ppg .ppg-coll-head{display:flex;align-items:center;gap:25px;min-height:65px}
.ppg .ppg-coll-headl{flex:0 0 auto;display:flex;flex-direction:column;gap:15px;max-width:100%}
.ppg .ppg-coll-title{margin:0;font-size:24px;line-height:1.2;font-weight:700;color:var(--pp-text)}
/* switch "add as a group" */
.ppg .ppg-switch{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:14px;line-height:1.5;font-weight:400;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ppg .ppg-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ppg .ppg-switch i{flex:0 0 36px;width:36px;height:20px;border-radius:20px;background:var(--pp-line);position:relative;transition:background-color .2s ease}
.ppg .ppg-switch i:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s cubic-bezier(.45,0,.15,1)}
.ppg .ppg-switch input:checked + i{background:var(--pp-accent)}
.ppg .ppg-switch input:checked + i:after{transform:translateX(16px)}
.ppg .ppg-switch input:focus-visible + i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pp-accent)}
.ppg .ppg-note{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding:20px;box-sizing:border-box;border:1px solid rgba(131,176,11,.45);border-radius:10px;background:rgba(131,176,11,.1);font-size:14px;line-height:1.5;animation:ppgIn .25s ease both}
.ppg .ppg-note[hidden]{display:none}
.ppg .ppg-note svg{flex:0 0 24px;color:var(--pp-green)}
@keyframes ppgIn{from{opacity:0}to{opacity:1}}
/* search inside of the block */
.ppg .ppg-search{position:relative;margin-top:15px}
.ppg .ppg-search input{display:block;width:100%;height:50px;margin:0;padding:0 56px 0 20px;box-sizing:border-box;border:1px solid var(--pp-line);border-radius:25px;background:#fff;font-size:14px;line-height:1.5;color:var(--pp-text);outline:none;box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color .18s ease}
.ppg .ppg-search input::placeholder{color:var(--pp-gray);opacity:1}
.ppg .ppg-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.ppg .ppg-search input:focus{border-color:var(--pp-accent)}
.ppg .ppg-search svg{position:absolute;right:15px;top:13px;color:var(--pp-icon);pointer-events:none}

.ppg .ppg-glist{margin-top:15px;position:relative;transition:opacity .2s ease}
.ppg .ppg-glist.is-loading,.ppg .ppg-coll.is-sending .ppg-glist{opacity:.45;pointer-events:none}
.ppg .ppg-groups{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ppg .ppg-grp{margin:0;padding:0;border:1px solid var(--pp-line);border-radius:10px;background:#fff;overflow:hidden}
.ppg .ppg-grp[hidden]{display:none}
.ppg .ppg-grp-head{display:flex;align-items:center;gap:20px;min-height:68px;padding:10px 28px;box-sizing:border-box;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.ppg .ppg-grp-head:focus-visible{box-shadow:inset 0 0 0 2px var(--pp-accent);border-radius:10px}
.ppg .ppg-grp-name{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.5;color:var(--pp-text);text-decoration:none}
.ppg .ppg-grp-sku{flex:0 0 auto;padding:5px 10px;background:#F2F2F2;font-size:14px;line-height:1.5;color:var(--pp-gray);white-space:nowrap}
.ppg .ppg-grp-toggle{flex:0 0 200px;display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:14px;line-height:21px;font-weight:700;white-space:nowrap}
.ppg .ppg-grp-toggle svg{flex:0 0 24px;color:var(--pp-icon);transition:transform .26s cubic-bezier(.45,0,.15,1)}
.ppg .ppg-grp-w2,.ppg .ppg-grp.is-open .ppg-grp-w1{display:none}
.ppg .ppg-grp.is-open .ppg-grp-w2{display:inline}
.ppg .ppg-grp.is-open .ppg-grp-toggle svg{transform:rotate(180deg)}
/* the goods rows open the same way as the info accordion: the row height grows from 0 */
.ppg .ppg-grp-body{display:grid;grid-template-rows:0fr;border-top:0 solid var(--pp-line);transition:grid-template-rows .3s cubic-bezier(.45,0,.15,1)}
.ppg .ppg-grp.is-open .ppg-grp-body{grid-template-rows:1fr;border-top-width:1px}
.ppg .ppg-grp-body > *{min-height:0;visibility:hidden;transition:visibility 0s linear .3s}
.ppg .ppg-grp.is-open .ppg-grp-body > *{visibility:visible;transition-delay:0s}

/* tiles of colors: 5 in a row, thin lines between them */
.ppg .ppg-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden}
/* lines between tiles: drawn by a layer over the tile (::after). a plain border-right was covered by the white
   background of the next tile (the -1px margin puts the line into the next column), so only the line after the
   last tile was seen. the -1px margins stay: the outer lines of the grid are cut by .ppg-tiles overflow */
.ppg .ppg-tile{position:relative;min-width:0;margin:0 -1px -1px 0;background:#fff;transition:background-color .18s ease}
.ppg .ppg-tile::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-right:1px solid var(--pp-line);border-bottom:1px solid var(--pp-line);pointer-events:none;z-index:1}
.ppg .ppg-tile[hidden]{display:none}
.ppg .ppg-tile .mpContain{position:relative;display:flex;flex-direction:column;height:100%;margin:0;padding:0;border:0;background:none}
.ppg .ppg-tile-img{display:block;position:relative;aspect-ratio:1/1;overflow:hidden}
.ppg .ppg-tile-img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ppg .ppg-tile-body{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:20px}
.ppg .ppg-tile-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.ppg .ppg-tile-avail span,.ppg .ppg-tile-avail{display:flex;align-items:center;gap:3px;margin:0;font-size:12px;line-height:1.5}
.ppg .ppg-tile-avail svg{flex:0 0 20px}
.ppg .ppg-tile-color{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.ppg .ppg-tile-sku{min-height:18px;font-size:12px;line-height:1.5;color:var(--pp-gray);overflow-wrap:anywhere}
.ppg .ppg-tile-price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 10px;white-space:nowrap}
.ppg .ppg-tile-usd{font-size:18px;line-height:1.35}
.ppg .ppg-tile-usd b{font-weight:700}
.ppg .ppg-tile-uah{font-size:14px;line-height:1.5;color:var(--pp-gray)}
.ppg .ppg-tile form{margin:auto 0 0;padding-top:10px}
.ppg .ppg-tile .mainButtons{--pp-ctl:40px}
/* note / wish stand over the photo */
.ppg .ppg-tile .mainButtons .tovar_list_button,.ppg .ppg-tile .mainButtons .book{position:absolute;right:10px;top:22px;background-color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ppg .ppg-tile .mainButtons .book{top:59px}
/* group mode: a picked tile */
.ppg .ppg-coll.is-group .ppg-tile{cursor:pointer}
.ppg .ppg-coll.is-group .ppg-tile.is-picked{background:#F5F8EB}
.ppg .ppg-tile.is-picked .mainButtons .number input,.ppg .ppg-tile.is-picked .mainButtons .number .minus,.ppg .ppg-tile.is-picked .mainButtons .number .plus{background:#fff}
.ppg .ppg-empty{padding:40px 20px;text-align:center;font-size:14px;color:var(--pp-gray)}
.ppg .ppg-empty[hidden]{display:none}

/* folded list: first groups are seen, the last one fades, round button unfolds */
.ppg .ppg-coll.is-folded .ppg-grp.is-extra{display:none}
.ppg .ppg-more{position:relative;height:0}
.ppg .ppg-more[hidden]{display:none}
.ppg .ppg-more:before{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(248,248,248,0) 0%,var(--pp-bg) 72%);pointer-events:none}
.ppg .ppg-more-btn{position:absolute;left:50%;bottom:16px;width:50px;height:50px;margin:0 0 0 -25px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--pp-accent);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(236,117,41,.35);transition:transform .18s ease}
.ppg .ppg-more-btn:focus-visible{outline:2px solid var(--pp-accent);outline-offset:3px}
@media (hover:hover){ .ppg .ppg-more-btn:hover{transform:translateY(2px)} }

/* ================= recommended / looked ================= */
.ppg .ppg-offers{margin-top:60px}
.ppg .ppg-offers[hidden]{display:none}
.ppg .ppg-offers-panes{margin-top:30px}
.ppg .ppg-looked{margin-top:60px}
.ppg .ppg-looked:empty{display:none}
/* catalog cards of these blocks open a panel with colors + cart (like in the catalog). the folded block
   (bundle.css: .catalog max-height 660 + overflow hidden, gradient .goods_div z-index 9) cut the panel of the
   first row */
/* the fold keeps the live-site height (660px); while a card of the block is opened it grows to 720px (card 529 +
   panel 175 fits), so the colors + cart panel of the first row is seen in full. an opened block is not touched */
.ppg .ppg-offers .goods_container:not(.opening) .catalog:has(.hoverDiv.open),.ppg .ppg-looked .goods_container:not(.opening) .catalog:has(.hoverDiv.open){max-height:720px}
/* the fade over the last row stays above the cards like on the live site (bundle.css z-index 9), only an opened card
   goes over it. the fade ends in the grey of this page, not in white - with white it looked like a hard cut */
.ppg .ppg-offers .goods_container .hoverDiv.open,.ppg .ppg-looked .goods_container .hoverDiv.open{z-index:10}
.ppg .ppg-offers .goods_div:before,.ppg .ppg-looked .goods_div:before{background:linear-gradient(180deg,rgba(248,248,248,0),var(--pp-bg))}

/* ================= narrower screens ================= */
@media (max-width:1300px){
	.ppg .ppg-title{font-size:22px}
	.ppg .ppg-price{padding:20px}
	.ppg .ppg-colors tr.itemPosition{gap:12px;padding:9px 12px}
	.ppg .ppg-colors .mainButtons .tovar_list_button{margin-left:5px}
	.ppg .ppg-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* one-line colour rows (wide desktop): the quantity field has one width in every row. a pre-order row has a long
   status ("Передзамовлення", 128px) and the controls column was squeezed - the field became 18px. now the field is
   fixed (50px), the room before the note / wish buttons is the part that gives way (15px normally, 5px at least),
   and a pre-order row has 10px between the columns instead of 20 (photo to text stays 10px) */
@media (min-width:1301px){
	.ppg .ppg-colors .mainButtons .m-b-number-block{flex:0 0 auto}
	.ppg .ppg-colors .mainButtons .number input{flex:0 0 50px;width:50px}
	.ppg .ppg-colors .mainButtons .m-b-buttons-block{flex:1 1 auto;min-width:0}
	.ppg .ppg-colors .mainButtons .tovar_list_button{margin-left:auto}
	.ppg .ppg-colors tr.itemPosition:has(.status-pred){gap:10px}
	.ppg .ppg-colors tr.itemPosition:has(.status-pred) > td:nth-child(1){margin-right:0}
}
@media (max-width:1100px){
	.ppg .ppg-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	/* row of a color in two lines: photo + name + price, then the controls */
	.ppg .ppg-colors tr.itemPosition{flex-wrap:wrap;gap:10px}
	.ppg .ppg-colors tr.itemPosition > td:nth-child(1){margin-right:0}
	.ppg .ppg-colors tr.itemPosition > td:nth-child(2){flex:1 1 0}
	.ppg .ppg-colors tr.itemPosition > td:nth-child(4){flex:1 1 100%}
	.ppg .ppg-colors .mainButtons{--pp-ctl:40px}
	.ppg .ppg-colors .mainButtons .tovar_list_button,.ppg .ppg-colors .mainButtons .book{flex-basis:40px;width:40px;min-width:40px;height:40px}
}
@media (max-width:991px){
	.ppg{padding-bottom:40px;margin-bottom:-10px}
	.ppg .ppg-crumbs{padding-top:10px;padding-bottom:10px}
	/* phone: one white band from edge to edge instead of two plates */
	.ppg .ppg-top{display:block;margin:0 -10px;padding:10px;background:#fff}
	.ppg .ppg-plate{border-radius:0;background:none}
	.ppg .ppg-gallery{position:static;padding:0}
	.ppg .ppg-gal{flex-direction:column;gap:10px}
	.ppg .ppg-gal-main{aspect-ratio:1/1;width:100%}
	.ppg .ppg-gal-thumbs{flex:0 0 auto;width:auto;min-width:0;height:76px}
	.ppg .gallery-thumbs{padding:0 0 16px!important}
	.ppg .gallery-thumbs .swiper-slide{width:60px;height:60px;margin-right:5px}
	.ppg .gallery-thumbs .swiper-scrollbar{left:0;right:0;top:auto;bottom:0;width:auto;height:6px}
	.ppg .ppg-badges .badge{width:24px;height:24px;min-width:24px}
	.ppg .ppg-gal-nav{display:none}
	.ppg .ppg-info{padding:10px 0 0;gap:10px}
	.ppg .ppg-title{font-size:18px;line-height:1.5}
	.ppg .ppg-meta{gap:5px 10px;font-size:12px}
	.ppg .ppg-meta .product-in-nal,.ppg .ppg-meta .product-is-pred,.ppg .ppg-meta .product-no-nal{font-size:12px}
	.ppg .ppg-meta svg{width:18px;height:18px;flex-basis:18px}
	.ppg .ppg-price{padding:20px;gap:10px}
	.ppg .ppg-price-top{font-size:12px}
	.ppg .ppg-group{font-size:12px}
	.ppg .ppg-price-label{display:none}
	.ppg .ppg-price-main .font-30{font-size:20px}
	.ppg .ppg-price-main .font-18,.ppg .ppg-price-main del{font-size:14px;line-height:1.5}
	.ppg .ppg-price-actions{width:100%}
	.ppg .ppg-btn{flex:1 1 auto}
	.ppg .ppg-colors-title{margin-bottom:10px;font-size:12px}
	.ppg .ppg-colors tr.itemPosition{padding:9px}
	.ppg .ppg-colors .lh12 .font-14{font-size:16px;font-weight:400}
	.ppg .ppg-colors .lh12 .font-12{font-size:14px}
	.ppg .ppg-colors .mainButtons .tovar_list_button{margin-left:5px}

	.ppg .ppg-acc{grid-template-columns:minmax(0,1fr);gap:5px;margin-top:10px}
	/* one column on a phone: the two desktop columns are dissolved so the items can be re-ordered,
	   description goes first */
	.ppg .ppg-acc-col{display:contents}
	.ppg .ppg-acc-item--descr{order:-1}
	.ppg .ppg-acc-head{min-height:40px;padding:8px 10px;gap:5px}
	.ppg .ppg-acc-ico{flex-basis:20px}
	.ppg .ppg-acc-ico svg{width:20px;height:20px}
	.ppg .ppg-acc-title{font-size:14px}
	.ppg .ppg-acc-btn{flex-basis:24px;width:24px;height:24px}
	.ppg .ppg-acc-btn:before,.ppg .ppg-acc-btn:after{width:10px;margin-left:-5px}
	.ppg .ppg-acc-text{padding:0 10px 10px}

	.ppg .ppg-brands-wrap{margin-top:10px}
	/* tabs row goes edge to edge, the first tab starts from the usual 10px */
	.ppg .ppg-brands,.ppg .ppg-offers-tabs{margin-left:-10px;margin-right:-10px;max-width:none}
	.ppg .ppg-brands .utabs-track,.ppg .ppg-offers-tabs .utabs-track{padding:0 10px}
	/* only two tabs here - they stay in the middle like on desktop (up-tabs.css puts them to the left on phones) */
	.ppg .ppg-offers-tabs{justify-content:center}
	.ppg .ppg-coll{margin-top:20px}
	.ppg .ppg-coll-head{flex-direction:column;align-items:stretch;gap:10px;min-height:0}
	.ppg .ppg-coll-headl{gap:10px}
	.ppg .ppg-coll-title{font-size:18px;line-height:1.5}
	.ppg .ppg-note{padding:10px;font-size:12px}
	.ppg .ppg-search{margin-top:10px}
	.ppg .ppg-search input{height:40px;border-radius:20px;padding-left:18px}
	.ppg .ppg-search svg{top:8px}
	.ppg .ppg-glist{margin-top:10px}
	.ppg .ppg-groups{gap:5px}
	.ppg .ppg-grp-sku{display:none}
	.ppg .ppg-grp-w1,.ppg .ppg-grp.is-open .ppg-grp-w2{display:none}
	.ppg .ppg-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
	.ppg .ppg-offers,.ppg .ppg-looked{margin-top:40px}
	.ppg .ppg-offers-panes{margin-top:20px}
	/* --- variant tile and its head row, sizes from the figma phone mockup (node 5799:30486) --- */
	.ppg .ppg-grp-head{flex-wrap:wrap;gap:0 10px;min-height:60px;padding:9px 10px 9px 15px}
	.ppg .ppg-grp-name{flex:1 1 0;font-size:12px}
	.ppg .ppg-grp-toggle{flex:0 0 auto;font-size:12px;line-height:1.35}
	.ppg .ppg-tile .mpContain{padding:10px;gap:10px}
	.ppg .ppg-tile-body{padding:0;gap:10px}
	.ppg .ppg-tile-info{gap:5px}
	.ppg .ppg-tile-avail,.ppg .ppg-tile-avail span{gap:3px;font-size:10px;line-height:1.2;white-space:nowrap}
	.ppg .ppg-tile-avail svg{flex:0 0 15px;width:15px;height:15px}
	.ppg .ppg-tile-color{font-size:12px;line-height:1.5}
	.ppg .ppg-tile-sku{min-height:0;font-size:10px;line-height:1.2}
	.ppg .ppg-tile-price{gap:0 5px}
	.ppg .ppg-tile-usd{font-size:14px;line-height:1.5}
	.ppg .ppg-tile-uah{font-size:12px;line-height:1.5}
	.ppg .ppg-tile form{padding-top:0}
	/* counter 24px, 4px inside it, 10px before the green cart button */
	.ppg .ppg-tile .mainButtons{--pp-ctl:24px;gap:10px}
	.ppg .ppg-tile .mainButtons .number{gap:4px}
	.ppg .ppg-tile .mainButtons .number input{font-size:12px;border-radius:6px}
	/* min-width too: bundle.css gives these buttons a min-width of 30-32px on phones, they became wider than tall */
	.ppg .ppg-tile .mainButtons .number .minus,.ppg .ppg-tile .mainButtons .number .plus,.ppg .ppg-tile .mainButtons .greenButton{border-radius:6px;min-width:var(--pp-ctl)}
	.ppg .ppg-tile .mainButtons .greenButton .icon-hcart{font-size:16px}
	/* note / wish buttons on the photo corner: 9px from the right, 10px from the top, 4px apart */
	.ppg .ppg-tile .mainButtons .tovar_list_button,.ppg .ppg-tile .mainButtons .book{flex-basis:24px;width:24px;min-width:24px;height:24px;right:9px;top:10px;border-radius:6px}
	.ppg .ppg-tile .mainButtons .book{top:38px}
	.ppg .ppg-tile .mainButtons .tovar_list_button svg,.ppg .ppg-tile .mainButtons .book svg{width:18px;height:18px}
	/* --- colour rows: one to one with the old template on the live site (measured at 390px) --- */
	.ppg .ppg-colors .listTable > tbody{gap:10px}
	.ppg .ppg-colors tr.itemPosition{gap:10px;min-height:0;padding:10px;border-radius:8px}
	.ppg .ppg-colors tr.itemPosition.is-active{border-color:var(--pp-line)}
	.ppg .ppg-colors tr.itemPosition > td:nth-child(1){flex:0 0 40px;margin:0}
	.ppg .ppg-colors .popContainer,.ppg .ppg-colors .popContainer img{width:40px;height:40px}
	.ppg .ppg-colors .status-in-nal,.ppg .ppg-colors .status-pred,.ppg .ppg-colors .status-no-nal,
	.ppg .ppg-colors .product-in-nal,.ppg .ppg-colors .product-is-pred,.ppg .ppg-colors .product-no-nal{font-size:10px;line-height:1.2}
	.ppg .ppg-colors td svg{flex:0 0 15px;width:15px;height:15px}
	.ppg .ppg-colors .mpList-name{font-size:12px;line-height:1.25}
	.ppg .ppg-colors .afty{font-size:10px;line-height:1.2}
	.ppg .ppg-colors .lh12 .font-14{font-size:14px;line-height:1.2}
	.ppg .ppg-colors .lh12 .font-14 b{font-weight:700}
	.ppg .ppg-colors .lh12 .font-12{font-size:12px;line-height:1.25}
	/* controls: 32px tall, 5px apart, counter field 54px, cart / note / wish share the rest equally */
	/* bundle.css forces margin-left:5px !important on the buttons block and the note button,
	   so the flex gaps are zeroed and those margins give the 5px spacing, as on the live site */
	.ppg .ppg-colors .mainButtons{--pp-ctl:32px;gap:0}
	.ppg .ppg-colors .mainButtons .m-b-buttons-block{gap:0}
	.ppg .ppg-colors tr.itemPosition > td:nth-child(2){padding:3px 0}
	.ppg .ppg-colors .mainButtons .m-b-number-block{flex:0 0 auto;width:auto}
	.ppg .ppg-colors .mainButtons .number{gap:5px}
	.ppg .ppg-colors .mainButtons .number input{flex:0 0 54px;width:54px;font-size:16px;border-radius:8px}
	.ppg .ppg-colors .mainButtons .number .minus span,.ppg .ppg-colors .mainButtons .number .plus span{font-size:22px}
	.ppg .ppg-colors .mainButtons .m-b-buttons-block{flex:1 1 0;min-width:0}
	.ppg .ppg-colors .mainButtons .greenButton,.ppg .ppg-colors .mainButtons .tovar_list_button,.ppg .ppg-colors .mainButtons .book{flex:1 1 0;width:auto;min-width:32px;height:32px;margin:0;border-radius:8px}
	.ppg .ppg-colors .mainButtons .greenButton .icon-hcart{font-size:21px}
	.ppg .ppg-colors .mainButtons .book{margin-left:5px}
}
/* phone turned sideways: the square full width gallery from the block above was taller than the
   whole screen. two columns like the desktop page: photo with thumbs on the left, stock, buttons,
   price and colours on the right; the gallery is sized by screen height */
@media (max-width:991px) and (orientation:landscape){
	/* 55/45 like col-7 / col-5 of the old template, so the colour rows get the same width as on the live site */
	.ppg .ppg-top{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:10px 20px;align-items:start}
	/* like the live site: the photo column follows the scroll (fixed header is 61px) until the row with the description ends */
	.ppg .ppg-gallery{position:sticky;top:70px;padding:0}
	.ppg .ppg-gal{flex-direction:column;gap:10px}
	.ppg .ppg-gal-main{aspect-ratio:auto;width:100%;height:min(calc(100svh - 165px),46vw);min-height:200px}
	.ppg .gallery-main .swiper-slide>img{max-height:100%}
	.ppg .ppg-gal-thumbs{height:76px}
	/* arrows sat on the seam between the columns, swipe works anyway */
	.ppg .ppg-gal-nav{display:none}
	.ppg .ppg-info{padding:0;gap:10px}
	.ppg .ppg-title{font-size:18px;line-height:1.5}
	/* goods tiles of the brand block, like the old template on the live site in landscape (measured at 844 / 932):
	   4 per row, photo up to 160px in the middle, tight text lines, 32px counter + cart (8px before the cart) */
	.ppg .ppg-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
	.ppg .ppg-tile .mpContain{gap:5px}
	.ppg .ppg-tile-img{aspect-ratio:auto;height:160px}
	.ppg .ppg-tile-info{gap:3px}
	.ppg .ppg-tile-color{line-height:1.25}
	.ppg .ppg-tile .mainButtons{--pp-ctl:32px;gap:8px}
	.ppg .ppg-tile .mainButtons .number{gap:5px}
	.ppg .ppg-tile .mainButtons .number input{font-size:14px;border-radius:8px}
	.ppg .ppg-tile .mainButtons .number .minus,.ppg .ppg-tile .mainButtons .number .plus,.ppg .ppg-tile .mainButtons .greenButton{border-radius:8px}
	.ppg .ppg-tile .mainButtons .greenButton .icon-hcart{font-size:22px}
}
@media (max-width:600px){
	.ppg .ppg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* tiles on a phone in portrait: counter + cart like the old template on the live site.
   up to 428px: 24px controls, 5px inside the counter, 15px before the cart.
   429-480px: bundle.css makes them 30px (min-width 30 too) - the same here, 10px before the cart, icon 20px */
@media (max-width:480px){
	.ppg .ppg-tile .mainButtons{gap:15px}
	.ppg .ppg-tile .mainButtons .number{gap:5px}
	.ppg .ppg-tile .mainButtons .number input{font-size:11px}
}
@media (min-width:429px) and (max-width:480px){
	.ppg .ppg-tile .mainButtons{--pp-ctl:30px;gap:10px}
	.ppg .ppg-tile .mainButtons .number input{font-size:12px}
	.ppg .ppg-tile .mainButtons .greenButton .icon-hcart{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
	.ppg .ppg-acc-body,.ppg .ppg-acc-in,.ppg .ppg-grp-body,.ppg .ppg-grp-body > *,.ppg .ppg-acc-btn:after,.ppg .ppg-grp-toggle svg,.ppg .ppg-switch i:after{transition:none}
	.ppg .ppg-note{animation:none}
}