/* Approved mobile direction 1. The desktop hero retains its existing layout. */
.ppx-home .ppx-hero-mobile{display:none}
.ppx-home .ppx-hero-links{margin-bottom:0}
.ppx-front .ppx-home .ppx-hero-copy h1{font-size:clamp(52px,5.1vw,76px)!important;font-weight:650!important;letter-spacing:-.055em}
.ppx-home .ppx-hero-bestseller{position:absolute;left:18%;top:19%;width:28%;display:grid;gap:7px;margin:0;padding-inline-start:14px;border-inline-start:1px solid #829b8d;color:#c9dacf;line-height:1.4;text-align:start;overflow-wrap:anywhere}
.ppx-home .ppx-hero-bestseller>span{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ppx-home .ppx-hero-bestseller>strong{font-size:clamp(15px,1.5vw,20px);font-weight:400;letter-spacing:-.015em;color:#eef2e9}
/* Match the shop's product zoom and keep card feedback in the PPX palette. */
.ppx-front .ppx-home-card,.ppx-front .ppx-home-card:visited,.ppx-front .ppx-home-card:hover{color:#182426;text-decoration:none}
.ppx-home .ppx-home-card-photo{overflow:hidden;transition:background-color 180ms ease,box-shadow 180ms ease}
.ppx-home .ppx-home-card-photo img{transition:transform 250ms ease}
.ppx-home .ppx-home-card h3,.ppx-home .ppx-home-card-price{transition:color 180ms ease,border-color 180ms ease}
.ppx-home .ppx-home-card:focus-visible{outline:2px solid #668471;outline-offset:5px}
.ppx-home .ppx-home-card:focus-visible .ppx-home-card-photo{background:#edf1e8;box-shadow:inset 0 0 0 1px #97ab9d}
.ppx-home .ppx-home-card:focus-visible .ppx-home-card-photo img{transform:scale(1.035)}
.ppx-home .ppx-home-card:focus-visible h3{color:#315746}
.ppx-home .ppx-home-card:focus-visible .ppx-home-card-price{border-color:#668471}
@media(hover:hover) and (pointer:fine){
 .ppx-home .ppx-home-card:hover .ppx-home-card-photo{background:#edf1e8;box-shadow:inset 0 0 0 1px #97ab9d}
 .ppx-home .ppx-home-card:hover .ppx-home-card-photo img{transform:scale(1.035)}
 .ppx-home .ppx-home-card:hover h3{color:#315746}
 .ppx-home .ppx-home-card:hover .ppx-home-card-price{border-color:#668471}
}
@media(prefers-reduced-motion:reduce){
 .ppx-home .ppx-home-card:is(:hover,:focus-visible) .ppx-home-card-photo img{transform:none}
}
@media(max-width:760px){
 .ppx-home{--home-photo-height:clamp(224px,66vw,294px);--home-muted:#b8c8c0}
 .ppx-home .ppx-hero-mobile{display:block}
 .ppx-home .ppx-hero-desktop{display:none}
 .ppx-home #pp-announce-bar{display:none!important}
 .ppx-front .ppx-home .header{position:relative;top:auto}
 .ppx-front .ppx-home .header .container{padding-inline:20px}
 .ppx-front .ppx-home .header-inner{min-height:64px;gap:6px;padding-block:10px}
 .ppx-front .ppx-home .logo-mark{width:76px;height:35px}
 .ppx-front .ppx-home .header-actions{gap:0}
 .ppx-front .ppx-home .header-actions .icon-btn{width:44px;min-width:44px;height:44px}
 .ppx-front .ppx-home .ppx-language-menu>summary{min-width:44px;padding:0}
 .ppx-front .ppx-home-hero{padding:27px 0 20px}
 .ppx-front .ppx-home .ppx-hero-layout{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;max-width:640px}
 .ppx-home .ppx-hero-copy{display:contents}
 .ppx-home .ppx-hero-bestseller{left:0;top:14%;width:42%;gap:5px;padding-inline-start:10px}
 .ppx-home .ppx-hero-bestseller>span{font-size:8px;letter-spacing:.11em}
 .ppx-home .ppx-hero-bestseller>strong{font-size:15px}
 .ppx-front .ppx-home .ppx-hero-copy h1{order:2;font-size:clamp(34px,10vw,46px)!important;line-height:1.04;letter-spacing:-.055em;margin:0 0 9px;max-width:none;text-wrap:initial}
 .ppx-front .ppx-home .ppx-hero-stage{order:4;max-width:440px;width:100%;height:var(--home-photo-height);aspect-ratio:auto;margin:13px auto 0}
 .ppx-front .ppx-home .ppx-hero-object--vial{height:calc(var(--home-photo-height) * .91);width:42%;aspect-ratio:auto;left:auto;right:8%;top:0}
 .ppx-front .ppx-home .ppx-hero-object--pen{width:94%;left:0;bottom:calc(var(--home-photo-height) * .07)}
 .ppx-front .ppx-home .ppx-hero-links{order:5;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:18px 0 0}
 .ppx-front .ppx-home .ppx-hero-links a{display:flex;min-height:50px;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;border:1px solid #94a69e;font-size:13px;line-height:1.3;font-weight:500;text-decoration:none}
 .ppx-front .ppx-home .ppx-hero-links .ppx-solid-link{border-color:#d0e3db;background:#d0e3db;color:#0d171a}
 .ppx-home .ppx-mobile-hero-foot{order:7;display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:12px;font-size:10px;color:var(--home-muted)}
 .ppx-mobile-hero-foot>a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px}
 .ppx-mobile-hero-help{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0;background:none;border:0;color:inherit;font:inherit;font-size:10px;white-space:nowrap;cursor:pointer}
 .ppx-mobile-hero-help>span:first-child{display:inline-grid;place-items:center;border:1px solid currentColor;border-radius:50%;width:16px;height:16px;font-size:10px}
 .ppx-home:not(.ppx-mobile-hero-passed) .ppx-help-launcher{visibility:hidden;pointer-events:none}
 .ppx-front .ppx-home .ppx-help-launcher{width:44px;height:44px;border-radius:50%;padding:0;justify-content:center;font-size:0;bottom:16px;inset-inline-end:16px}
 .ppx-home .ppx-help-launcher::before{border:0;font-size:18px}
 .ppx-home .ppx-mobile-hero-foot :is(a,button):focus-visible{outline:2px solid #a4bda9;outline-offset:4px}
 .ppx-front .ppx-home .ppx-format-section,.ppx-front .ppx-home .ppx-home-help{padding-block:35px;gap:24px}
 .ppx-front .ppx-home .ppx-format-section h2,.ppx-front .ppx-home .ppx-home-help h2,.ppx-front .ppx-home .ppx-section-heading h2{font-size:32px;line-height:1.1}
 .ppx-home .ppx-format-section .ppx-eyebrow,.ppx-home .ppx-home-help .ppx-eyebrow{margin-bottom:14px!important}
 .ppx-front .ppx-home .ppx-home-selection{padding-block:32px}
 .ppx-home .ppx-section-heading{gap:16px;margin-bottom:24px}
 .ppx-home .ppx-format-links a{padding-block:14px}
 .ppx-home .ppx-format-links strong{font-size:23px}
 .ppx-home .ppx-home-card-photo{padding:12px}
}
@media(max-width:350px){
 .ppx-front .ppx-home .header .container{padding-inline:16px}
 .ppx-front .ppx-home .logo-mark{width:58px}
 .ppx-front .ppx-home .ppx-hero-links a{padding-inline:11px;font-size:12px}
 .ppx-home .ppx-mobile-hero-foot{gap:8px;font-size:9px}
}
