
/* Catalogue cards: one geometry for all product types. */
.product-thumb.pp-merch-card{display:flex;flex-direction:column;height:auto;overflow:hidden;float:none;width:100%}
.pp-merch-card .image{flex:none;float:none!important;width:100%!important;padding:8px!important;margin:0!important;aspect-ratio:1/1;display:block}
.pp-merch-card .image a{display:block;height:100%}.pp-merch-card .image img{width:100%;height:100%;object-fit:contain;max-height:none}
.pp-merch-card .caption{padding:12px 12px 8px!important;min-height:0!important;margin:0!important;flex:none;display:flex;flex-direction:column}
.pp-merch-card h4{height:3.75em;line-height:1.25!important;margin:0 0 8px!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pp-merch-card .pp-card-description{height:4.2em;line-height:1.4!important;margin:0 0 10px!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pp-card-scores{height:55px;display:flex;gap:6px;align-items:flex-start;flex:none}
.pp-card-scores span{background:#8ce9ec;border:2px solid #191919;box-shadow:2px 2px 0 #191919;transform:rotate(-2deg);padding:4px 5px;flex:1;font-size:11px;line-height:1.2;text-align:center}
.pp-card-scores span+span{background:#ffdf4d;transform:rotate(2deg)}.pp-card-scores b{display:block;font-size:17px;line-height:1.2}
.pp-card-price{height:38px;display:flex;align-items:center}.pp-merch-card .price{margin:0!important;white-space:nowrap;font-size:18px!important}.pp-stock-off{font-weight:bold;color:#666}
.pp-card-quantity{height:48px;display:flex;align-items:center;justify-content:center;padding:0 10px 8px}
.pp-qty{display:inline-flex;border:2px solid #191919;border-radius:7px;overflow:hidden;background:white;max-width:100%;height:38px}
.pp-qty button{border:0;background:#fff06a;font-size:23px;font-weight:bold;width:38px;flex:none;color:#151515;line-height:1;padding:0;cursor:pointer}
.pp-qty input{border:0;border-left:2px solid #191919;border-right:2px solid #191919;min-width:0;width:53px;height:34px;box-shadow:none;border-radius:0;text-align:center;padding:3px;font-size:16px;appearance:textfield;-moz-appearance:textfield}
.pp-qty input::-webkit-inner-spin-button{appearance:none}.pp-qty button:hover{background:#8ce9ec}.pp-qty button:active{background:#ff969b}.pp-qty:focus-within{outline:3px solid #5a39c9;outline-offset:2px}
.pp-merch-card .button-group{margin:0!important;display:flex;flex:none;min-height:46px;clear:both}
.pp-merch-card .button-group button{min-height:44px;font-size:12px!important;white-space:normal;line-height:1.15;padding:6px 4px!important;min-width:0}
.pp-merch-card .button-group button:first-child{flex:1;width:auto!important}.pp-merch-card .button-group button:not(:first-child){flex:none;width:35px!important}
.pp-merch-card button:disabled{background:#ddd!important;color:#555!important;cursor:default}.pp-merch-card button:focus-visible{outline:3px solid #5a39c9;outline-offset:-4px}
.pp-product-qty{margin-bottom:16px}.pp-product-qty input{width:75px}
.pp-hero.pp-hero-merch{position:relative;padding-right:510px;min-height:385px;overflow:hidden}
.pp-banner-products{position:absolute;right:15px;top:25px;width:465px;height:335px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);gap:12px;align-items:center}
.pp-banner-products a,.pp-banner-products .pp-banner-item{grid-column:span 2;display:block;background:white;border:3px solid #191919;border-radius:12px;box-shadow:5px 5px 0 #191919;overflow:hidden;transform:rotate(-4deg);height:155px}
.pp-banner-products a:nth-child(2){transform:rotate(5deg)}.pp-banner-products a:nth-child(4){grid-column:2 / span 2;transform:rotate(4deg)}.pp-banner-products .pp-banner-item:last-child{transform:rotate(-4deg)}
.pp-banner-products img{width:100%;height:100%;object-fit:contain}.pp-banner-products a:hover{transform:translateY(-4px) rotate(0)}.pp-banner-products a:focus-visible{outline:4px solid #5a39c9;outline-offset:3px}
@media(max-width:1199px){.pp-hero.pp-hero-merch{padding-right:430px}.pp-banner-products{width:390px}.pp-banner-products a,.pp-banner-products .pp-banner-item{height:140px}}
@media(max-width:767px){.pp-hero.pp-hero-merch{padding-right:18px;min-height:0;padding-bottom:18px}.pp-banner-products{position:relative;inset:auto;width:100%;height:auto;margin-top:22px;gap:8px;grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto;padding:0 4px}.pp-banner-products a,.pp-banner-products .pp-banner-item{height:auto;aspect-ratio:1/1;border-width:2px;box-shadow:3px 3px 0 #191919}.pp-merch-card .caption{padding:10px 8px 6px!important}.pp-merch-card h4{font-size:13px!important}.pp-merch-card .pp-card-description{font-size:11px!important}.pp-card-scores{gap:4px;height:53px}.pp-card-scores span{font-size:9px;padding:4px 2px}.pp-card-scores b{font-size:15px}.pp-merch-card .price{font-size:16px!important}.pp-merch-card .button-group button:not(:first-child){width:28px!important}.pp-merch-card .button-group button{font-size:11px!important}.pp-card-quantity{padding-left:5px;padding-right:5px}}

.product-layout .product-thumb.pp-merch-card>.caption{flex:0 0 auto!important}
.product-layout .product-thumb.pp-merch-card>.pp-card-quantity{flex:0 0 48px!important;flex-direction:row!important}
.pp-merch-card .pp-card-price{flex:0 0 38px}
@media(max-width:767px){#product .form-group:last-child{grid-template-columns:70px minmax(0,1fr)}#product .form-group:last-child .pp-product-qty{grid-column:2;justify-self:start;margin:0}#product .form-group:last-child #button-cart,#product .form-group:last-child>button.btn{grid-column:1 / -1;width:100%;margin-top:4px}.pp-merch-card .image{height:148px!important}}

.pp-product-qty{width:164px;flex:none}.pp-product-qty #input-quantity{width:84px;max-width:none;flex:none;height:34px}
@media(max-width:767px){#product .form-group.pp-purchase{display:grid!important;grid-template-columns:70px minmax(0,1fr)!important}#product .pp-purchase .pp-product-qty{grid-column:2!important;justify-self:start;width:164px!important;margin:0}#product .pp-purchase>label{white-space:nowrap}#product .pp-purchase #button-cart,#product .pp-purchase>button.btn{grid-column:1 / -1!important;width:100%!important;margin-top:4px}}

.pp-all-catalog{text-align:center;margin:8px 0 36px}.pp-all-catalog .btn{display:inline-block;padding:14px 38px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border:3px solid #111;border-radius:0;box-shadow:5px 5px 0 #111;transition:transform .12s,box-shadow .12s}.pp-all-catalog .btn:hover,.pp-all-catalog .btn:focus{transform:translate(2px,2px);box-shadow:3px 3px 0 #111}

/* banner: 7 cards (countries, PWD, J-Lube) */
@media(min-width:768px){.pp-hero.pp-hero-merch{padding-right:560px}.pp-banner-products{width:535px;height:340px;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);gap:10px;top:22px}.pp-banner-products a{grid-column:span 2!important;height:158px;transform:rotate(-3deg)}.pp-banner-products a:nth-child(even){transform:rotate(3deg)}.pp-banner-products a:nth-child(5){grid-column:2 / span 2!important}.pp-banner-products a:hover{transform:translateY(-4px) rotate(0)}}
@media(min-width:768px) and (max-width:1199px){.pp-hero.pp-hero-merch{padding-right:470px}.pp-banner-products{width:445px;height:300px}.pp-banner-products a{height:140px}}
@media(max-width:767px){.pp-banner-products a:nth-child(7){grid-column:3 / span 2!important}}

/* Text blocks: descriptions of products and categories */
.pp-desc p{margin:0 0 12px}
.pp-desc .pp-lead{font-size:17px;font-weight:600;background:#fff06a;transform:rotate(-.4deg)}
.pp-links{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:8px}
.pp-links li{background:#fff;border:2px solid #191919;border-radius:10px;padding:8px 12px 8px 36px;position:relative;box-shadow:3px 3px 0 #191919;font-size:14px;line-height:1.4}
.pp-links li:before{content:"→";position:absolute;left:12px;top:7px;font-weight:700;color:#5a39c9}
.pp-links li a{font-weight:700}
.pp-callout{background:#8ce9ec;border:3px solid #191919;border-radius:12px;box-shadow:4px 4px 0 #191919;padding:12px 16px;margin:16px 0;font-size:15px;line-height:1.5}
.pp-callout strong{display:inline-block;background:#191919;color:#fff;padding:1px 8px;border-radius:6px;margin-right:6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
p.pp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
p.pp-chips a{background:#fff;border:2px solid #191919;border-radius:18px;padding:3px 12px;font-size:13px;box-shadow:2px 2px 0 #191919;text-decoration:none;color:#191919}
p.pp-chips a:hover{background:#ffdf4d}
.pp-cat .pp-links{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
@media(max-width:600px){.pp-desc .pp-lead{font-size:15px;transform:none}.pp-callout{padding:10px 12px}.pp-links li{box-shadow:2px 2px 0 #191919}}

/* Compact list view: retain the grid card layout and every purchase control. */
#content .product-list .product-thumb.pp-merch-card{display:grid;grid-template-columns:144px minmax(0,1fr) 196px;grid-template-rows:auto auto;gap:8px 16px;align-items:center;padding:12px;height:auto;margin-bottom:18px}
#content .product-list .pp-merch-card>.image{grid-column:1;grid-row:1 / 3;width:144px!important;height:144px!important;aspect-ratio:1;padding:0!important;border:0;border-radius:8px;align-self:center}
#content .product-list .pp-merch-card>.image img{width:100%;height:100%;max-height:none;object-fit:contain}
#content .product-list .pp-merch-card>.caption{grid-column:2;grid-row:1 / 3;padding:0!important;min-width:0;gap:7px}
#content .product-list .pp-merch-card h4{height:auto;min-height:0;max-height:2.5em;margin:0!important;-webkit-line-clamp:2;font-size:15px;overflow-wrap:anywhere}
#content .product-list .pp-merch-card .pp-card-description{height:auto;max-height:2.8em;margin:0!important;-webkit-line-clamp:2}
#content .product-list .pp-merch-card .pp-card-scores{height:auto;min-height:0;gap:8px;flex-wrap:wrap}
#content .product-list .pp-merch-card .pp-card-scores:empty{display:none}
#content .product-list .pp-merch-card .pp-card-scores span{flex:none;padding:3px 7px;font-size:11px;transform:none}
#content .product-list .pp-merch-card .pp-card-scores b{display:inline;font-size:12px;margin-left:4px}
#content .product-list .pp-merch-card .pp-card-price{height:auto;min-height:30px;flex:auto}
#content .product-list .pp-merch-card>.pp-card-quantity{grid-column:3;grid-row:1;padding:0;height:auto;align-self:end}
#content .product-list .pp-merch-card>.button-group{grid-column:3;grid-row:2;align-self:start;min-width:0;width:100%;border:2px solid var(--pp-ink);border-radius:8px;overflow:hidden}
#content .product-list .pp-merch-card>.button-group button:not(:first-child){width:38px!important}
@media(min-width:768px) and (max-width:1199px){
 #content .product-list .product-thumb.pp-merch-card{grid-template-columns:112px minmax(0,1fr) 164px;gap:8px 10px;padding:10px}
 #content .product-list .pp-merch-card>.image{width:112px!important;height:112px!important}
}
@media(max-width:767px){
 #content .product-list{width:100%!important}
 #content .product-list .pp-merch-card>.caption{min-height:0}
 #content .product-list .product-thumb.pp-merch-card{grid-template-columns:96px minmax(0,1fr);gap:10px;padding:10px;margin-bottom:14px}
 #content .product-list .pp-merch-card>.image{grid-column:1;grid-row:1;width:96px!important;height:96px!important}
 #content .product-list .pp-merch-card>.caption{grid-column:2;grid-row:1;gap:6px;padding:0!important}
 #content .product-list .pp-merch-card h4{font-size:13px!important;max-height:3.75em;-webkit-line-clamp:3}
 #content .product-list .pp-merch-card .pp-card-scores{gap:4px}
 #content .product-list .pp-merch-card .pp-card-scores span{font-size:9px;padding:3px 4px;border-width:1px;box-shadow:1px 1px 0 var(--pp-ink)}
 #content .product-list .pp-merch-card .pp-card-scores b{font-size:10px;margin-left:2px}
 #content .product-list .pp-merch-card>.pp-card-quantity{grid-column:1;grid-row:2;align-self:center}
 #content .product-list .pp-merch-card>.pp-card-quantity .pp-qty{width:96px}
 #content .product-list .pp-merch-card>.pp-card-quantity button{width:28px}
 #content .product-list .pp-merch-card>.pp-card-quantity input{width:36px;min-height:34px}
 #content .product-list .pp-merch-card>.button-group{grid-column:2;grid-row:2;align-self:center}
 #content .product-list .pp-merch-card>.button-group button:not(:first-child){width:30px!important}
 #product-search #content>h2{font-size:18px;line-height:1.4}
 #product-search .pp-search-hint{margin-top:14px}
}
