/* Isolated test page. Existing shop/desktop drawer files remain unchanged. */
.hm-pdm-test{max-width:1200px;margin:24px auto;padding:0 20px 90px}
.hm-pdm-test h1{font-size:28px;margin:0 0 18px}.hm-pdm-test-note{font-size:12px;color:#777}
.hm-pdm-test-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
#hm-pdm-filter-open{border:1px solid #ccc;border-radius:30px;background:#fff;text-transform:none;padding:10px 16px}
.hm-pdm-test-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hm-pdm-test-card{padding:12px;border:1px solid #eee;border-radius:12px}.hm-pdm-test-card img{width:100%;aspect-ratio:1;object-fit:contain}
.hm-pdm-test-card h2{font-size:15px;line-height:1.4;margin:8px 0}.hm-pdm-card-brand{font-size:12px;color:#777;display:block;margin-top:10px}
.hm-pdm-test-card[hidden],#hm-pdm-empty[hidden]{display:none!important}
#hm-sf-layer.hm-pdm-test-layer{z-index:2147483647}
/* Keep the underlying shop visible beneath the drawer backdrop. */
#hm-sf-layer .hm-sf-range{position:relative;height:48px;margin:4px 0 8px}
#hm-sf-layer .hm-sf-range-track{position:absolute;left:10px;right:10px;top:23px;height:3px;background:#ddd;border-radius:3px}
#hm-sf-layer .hm-sf-range-fill{position:absolute;left:var(--range-start,0%);right:var(--range-end,0%);height:100%;background:#da3399}
#hm-sf-layer .hm-sf-range input{position:absolute;inset:0;width:100%;height:48px;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;margin:0;padding:0;border:0}
#hm-sf-layer .hm-sf-range input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border:1px solid #777;border-radius:50%;background:#fff;pointer-events:auto;cursor:grab}
#hm-sf-layer .hm-sf-range input::-moz-range-thumb{width:20px;height:20px;border:1px solid #777;border-radius:50%;background:#fff;pointer-events:auto;cursor:grab}
#hm-sf-layer .hm-sf-range input:focus-visible{outline:none}
#hm-sf-layer .hm-sf-range input:focus-visible::-webkit-slider-thumb{outline:2px solid #292929;outline-offset:3px}
#hm-sf-layer .hm-sf-range input:focus-visible::-moz-range-thumb{outline:2px solid #292929;outline-offset:3px}
@media(min-width:768px){
 #hm-sf-layer.hm-pdm-test-layer{--sf-pink:#da3399;--sf-ink:#303030;--sf-line:#dedede;font-family:'Lato',sans-serif}
 #hm-sf-layer.hm-pdm-test-layer #hm-sf-panel{width:460px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-header{min-height:76px;padding:12px 24px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-title{font-size:18px;font-weight:800}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-reset{font-size:14px;letter-spacing:0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-close{width:36px;height:36px;padding:8px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-scroll{padding:0 24px 14px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-section-toggle{font-size:17px;font-weight:800;min-height:58px;padding:15px 0;line-height:1.25}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-summary{font-size:13px;margin-top:5px;line-height:1.3}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-options{padding-bottom:15px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option{min-height:38px;gap:10px;padding:7px 0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option label{font-size:15px;line-height:1.35;font-weight:400}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input{width:18px;height:18px;flex-basis:18px;border:1.5px solid #b5b5b5;background:#fff;box-shadow:none;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]{border-radius:4px!important}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]:checked{border-color:#747474;background:#747474;box-shadow:none;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]:checked::after{content:'';display:block;width:8px;height:4px;margin:4px 0 0 3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]:checked+label{font-weight:600}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="radio"]{border-radius:50%!important}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="radio"]:checked{border-color:#666;border-width:1.5px;background:radial-gradient(circle,#666 0 4.5px,#fff 5px);box-shadow:none;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input:focus-visible{outline:2px solid #555;outline-offset:3px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours,
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-brands .hm-sf-option{min-width:0;gap:8px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-brands label{overflow-wrap:anywhere}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-count{white-space:nowrap;color:#777;font-size:12px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-age-note{font-size:12px;line-height:1.4;color:#777;margin:9px 0 0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours input[type="checkbox"]{background:var(--sf-swatch,#fff)}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours input[type="checkbox"]:checked{background:var(--sf-swatch,#303030);border-width:1.5px;border-color:#777;box-shadow:inset 0 0 0 2px #fff;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours .is-light-swatch input[type="checkbox"]:checked::after{border-color:#666}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-more{font-size:14px;padding-top:8px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;border-bottom:1px solid var(--sf-line);font-size:17px;font-weight:400}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single-label{flex:1;margin:0;cursor:pointer;font-size:17px;line-height:1.25;font-weight:400}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 18px;margin:0;border:1.5px solid #b5b5b5;border-radius:4px!important;background:#fff;box-shadow:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single.is-selected .hm-sf-single-label{font-weight:600}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single input:checked{border-color:#747474;background:#747474}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single input:checked::after{content:'';display:block;width:8px;height:4px;margin:4px 0 0 3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-footer{padding:18px 24px 22px;border:0;background:white;flex-shrink:0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-apply{background:#da3399;color:#fff;font-size:15px;font-weight:800;letter-spacing:0;min-height:50px;padding:12px;text-transform:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-apply:hover{background:#da3399}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-price-fields{gap:16px}
}
@media(max-width:767px){
 .hm-pdm-test-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #hm-sf-layer.hm-pdm-test-layer{--sf-pink:#da3399;--sf-ink:#303030;--sf-line:#dedede;font-family:'Lato',sans-serif}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-header{min-height:76px;padding:12px 18px;padding-top:max(12px,env(safe-area-inset-top))}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-title{font-size:18px;font-weight:800}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-reset{font-size:14px;letter-spacing:0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-close{width:36px;padding:8px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-scroll{padding:0 18px 14px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-section-toggle{font-size:17px;font-weight:800;min-height:58px;padding:15px 0;line-height:1.25}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-summary{font-size:13px;margin-top:5px;line-height:1.3}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-options{padding-bottom:15px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option{min-height:38px;gap:10px;padding:7px 0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option label{font-size:15px;line-height:1.35;font-weight:400}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input{width:18px;height:18px;flex-basis:18px;border:1.5px solid #b5b5b5;background:#fff;box-shadow:none;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]{border-radius:4px!important}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]:checked{border-color:#747474;background:#747474;box-shadow:none;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]:checked::after{content:'';display:block;width:8px;height:4px;margin:4px 0 0 3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="checkbox"]:checked+label{font-weight:600}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="radio"]{border-radius:50%!important}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input[type="radio"]:checked{border-color:#666;border-width:1.5px;background:radial-gradient(circle,#666 0 4.5px,#fff 5px);box-shadow:none;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-option input:focus-visible{outline:2px solid #555;outline-offset:3px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours{column-gap:14px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-brands .hm-sf-option{min-width:0;gap:8px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-brands label{overflow-wrap:anywhere}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-count{white-space:nowrap;color:#777;font-size:12px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-age-note{font-size:12px;line-height:1.4;color:#777;margin:9px 0 0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours input[type="checkbox"]{background:var(--sf-swatch,#fff)}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours input[type="checkbox"]:checked{background:var(--sf-swatch,#303030);border-width:1.5px;border-color:#777;box-shadow:inset 0 0 0 2px #fff;outline:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-colours .is-light-swatch input[type="checkbox"]:checked::after{border-color:#666}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-more{font-size:14px;padding-top:8px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;border-bottom:1px solid var(--sf-line);font-size:17px;font-weight:400}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single-label{flex:1;margin:0;cursor:pointer;font-size:17px;line-height:1.25;font-weight:400}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 18px;margin:0;border:1.5px solid #b5b5b5;border-radius:4px!important;background:#fff;box-shadow:none}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single.is-selected .hm-sf-single-label{font-weight:600}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single input:checked{border-color:#747474;background:#747474}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-single input:checked::after{content:'';display:block;width:8px;height:4px;margin:4px 0 0 3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-footer{padding:18px 18px max(22px,env(safe-area-inset-bottom));border:0;background:white;flex-shrink:0}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-apply{background:#da3399;color:#fff;font-size:15px;font-weight:800;letter-spacing:0;min-height:50px;padding:12px}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-apply:hover{background:#da3399}
 #hm-sf-layer.hm-pdm-test-layer .hm-sf-price-fields{gap:16px}
}
@media(max-width:360px){#hm-sf-layer.hm-pdm-test-layer .hm-sf-title{font-size:17px}#hm-sf-layer.hm-pdm-test-layer .hm-sf-reset{font-size:13px}}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-group{padding-bottom:8px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-axis{padding:5px 0 14px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-axis+.hm-sf-folded-axis{border-top:1px solid #eee;padding-top:14px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-label{font-size:14px;font-weight:700;line-height:1.3;margin:0 0 2px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-axis .hm-sf-range{height:42px;margin:0 0 3px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-axis .hm-sf-range-track{top:21px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-axis .hm-sf-price-input{height:42px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-folded-axis .hm-sf-price-label{margin-bottom:4px}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-apply.is-loading{opacity:1;cursor:progress}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-apply.is-loading::before{content:'';display:inline-block;width:18px;height:18px;margin-right:10px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;vertical-align:-4px;animation:hm-sf-spin .75s linear infinite}
@keyframes hm-sf-spin{to{transform:rotate(360deg)}}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-option.is-unavailable label,
#hm-sf-layer.hm-pdm-test-layer .hm-sf-single.is-unavailable .hm-sf-single-label,
#hm-sf-layer.hm-pdm-test-layer .is-unavailable .hm-sf-count{color:#929292;cursor:not-allowed}
#hm-sf-layer.hm-pdm-test-layer .hm-sf-option.is-unavailable input,
#hm-sf-layer.hm-pdm-test-layer .hm-sf-single.is-unavailable input{opacity:.4;cursor:not-allowed}

@media(prefers-reduced-motion:reduce){#hm-sf-layer.hm-pdm-test-layer .hm-sf-apply.is-loading::before{animation:none}}
.hm-pdm-async-pages{display:flex;justify-content:center;align-items:center;margin:25px 0 35px}
.hm-pdm-async-pages .hm-pdm-page{min-height:42px;padding:9px 22px;border:2px solid #222;border-radius:0;background:#fff;color:#111;font-weight:600;cursor:pointer}
.hm-pdm-async-pages .hm-pdm-page:hover{background:#f7f7f7}
.hm-pdm-async-pages .hm-pdm-page.is-loading{cursor:progress;opacity:1}
.hm-pdm-async-pages .hm-pdm-page.is-loading::after{content:'';display:inline-block;width:16px;height:16px;margin-left:12px;border:2px solid #ddd;border-top-color:#222;border-radius:50%;vertical-align:-3px;animation:hm-sf-spin .75s linear infinite}
.hm-pdm-async-pages .hm-pdm-page:focus-visible{outline:2px solid #da3399;outline-offset:2px}

