app-product{background:var(--mg-bg);color:var(--mg-text);--pp-radius:20px;--pp-ease:cubic-bezier(.22, 1, .36, 1);--pp-well:#f7f3f9;--pp-panel:var(--mg-surface);display:block}html.theme-dark app-product{--pp-well:#eee8f1}app-product .pp-container{max-width:1240px;margin:0 auto;padding:0 1.5rem}app-product .pp-sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}app-product a:focus-visible,app-product button:focus-visible,app-product summary:focus-visible,app-product select:focus-visible,app-product input:focus-visible{outline:2px solid var(--mg-focus);outline-offset:2px}app-product .pp-head{padding:2rem 0 1.75rem}app-product .pp-breadcrumb{color:var(--mg-muted);align-items:center;gap:.5rem;font-size:.85rem;display:flex}app-product .pp-breadcrumb a{color:var(--mg-muted);text-decoration:none}app-product .pp-breadcrumb a:hover{color:var(--mg-text)}app-product .pp-breadcrumb-current{color:var(--mg-text);font-weight:600}app-product .pp-title{letter-spacing:-.02em;color:var(--mg-text);margin:.9rem 0 0;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;line-height:1.1}app-product .pp-facts{color:var(--mg-muted);flex-wrap:wrap;gap:.4rem 1.4rem;margin:.9rem 0 0;padding:0;font-size:.95rem;list-style:none;display:flex}app-product .pp-facts li{align-items:center;gap:.5rem;display:inline-flex}app-product .pp-facts li:before{content:"";background:var(--mg-brand);border-radius:50%;width:6px;height:6px}app-product .pp-facts strong{color:var(--mg-text)}app-product .pp-main{padding-bottom:1rem}app-product .pp-layout{display:block}app-product .pp-aside{display:none}app-product .pp-aside--open{z-index:60;background:#14131273;align-items:flex-end;display:flex;position:fixed;inset:0}app-product .pp-aside--open .pp-aside-sticky{width:100%;max-height:85vh;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));animation:pp-sheet-in .25s var(--pp-ease);border-bottom:0;border-radius:24px 24px 0 0;overflow-y:auto}@keyframes pp-sheet-in{0%{opacity:0;transform:translateY(40px)}}app-product .pp-aside-sticky{border:1px solid var(--mg-stroke);border-radius:var(--pp-radius);background:var(--pp-panel);padding:1.25rem}app-product .pp-aside-head{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}app-product .pp-aside-title{margin:0;font-size:1.05rem;font-weight:700}app-product .pp-aside-actions{align-items:center;gap:.75rem;display:flex}app-product .pp-sheet-close{border:1px solid var(--mg-stroke);background:var(--mg-surface);width:40px;height:40px;color:var(--mg-text);cursor:pointer;border-radius:50%;place-items:center;display:grid}app-product .pp-sheet-close svg{width:18px;height:18px}app-product .pp-sheet-done{width:100%;margin-top:1rem}app-product .pp-clear{color:var(--mg-brand-ink);cursor:pointer;background:0 0;border:0;padding:.25rem 0;font-size:.88rem;font-weight:600}app-product .pp-fgroup{border-top:1px solid var(--mg-stroke);padding:.85rem 0 .4rem}app-product .pp-fgroup+.pp-fgroup{margin-top:.4rem}app-product .pp-fhead{letter-spacing:.1em;text-transform:uppercase;color:var(--mg-muted);cursor:pointer;justify-content:space-between;align-items:center;padding:.2rem 0 .6rem;font-size:.78rem;font-weight:700;list-style:none;display:flex}app-product .pp-fhead::-webkit-details-marker{display:none}app-product .pp-fcaret{border-bottom:2px solid;border-right:2px solid;width:8px;height:8px;transition:transform .2s;transform:rotate(-135deg)translate(-2px,-2px)}app-product .pp-fgroup:not([open]) .pp-fcaret{transform:rotate(45deg)}app-product .pp-fopts{flex-direction:column;gap:.1rem;display:flex}app-product .pp-fopt{width:100%;min-height:38px;font:inherit;color:var(--mg-text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:.65rem;padding:.35rem .5rem;font-size:.93rem;transition:background .15s;display:flex}app-product .pp-fopt:hover{background:color-mix(in srgb, var(--mg-text) 5%, transparent)}app-product .pp-fbox{border:1.5px solid color-mix(in srgb, var(--mg-text) 35%, transparent);border-radius:5px;flex:none;width:18px;height:18px;transition:background .15s,border-color .15s;position:relative}app-product .pp-fopt.is-active .pp-fbox{background:var(--mg-brand);border-color:var(--mg-brand)}app-product .pp-fopt.is-active .pp-fbox:after{content:"";border-right:2px solid var(--mg-on-brand);border-bottom:2px solid var(--mg-on-brand);width:5px;height:9px;position:absolute;top:1.5px;left:5px;transform:rotate(45deg)}app-product .pp-fopt.is-active .pp-flabel{font-weight:600}app-product .pp-flabel{flex:1;min-width:0}app-product .pp-fcount{color:var(--mg-muted);font-variant-numeric:tabular-nums;font-size:.82rem}app-product .pp-fmore{color:var(--mg-brand-ink);cursor:pointer;background:0 0;border:0;align-self:flex-start;margin:.35rem 0 0 .5rem;padding:.2rem 0;font-size:.88rem;font-weight:600}app-product .pp-price{padding:.2rem .25rem .9rem}app-product .pp-price-inputs{align-items:center;gap:.5rem;display:flex}app-product .pp-price-field{border:1px solid var(--mg-stroke);background:var(--mg-bg);border-radius:10px;flex:1;align-items:center;gap:.3rem;min-width:0;height:42px;padding:0 .7rem;display:flex}app-product .pp-price-field input{width:100%;min-width:0;font:inherit;color:var(--mg-text);-moz-appearance:textfield;background:0 0;border:0;outline:none;font-size:.92rem}app-product .pp-price-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}app-product .pp-price-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}app-product .pp-price-field:focus-within{border-color:var(--mg-brand-ink)}app-product .pp-cur{color:var(--mg-muted);font-size:.85rem}app-product .pp-price-dash{color:var(--mg-muted)}app-product .pp-range{height:28px;margin-top:.9rem;position:relative}app-product .pp-range-rail,app-product .pp-range-fill{border-radius:4px;height:4px;position:absolute;top:50%;transform:translateY(-50%)}app-product .pp-range-rail{background:var(--mg-stroke);left:0;right:0}app-product .pp-range-fill{background:var(--mg-brand)}app-product .pp-range input[type=range]{pointer-events:none;appearance:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}app-product .pp-range input[type=range]::-webkit-slider-thumb{border:2px solid var(--mg-brand-ink);background:var(--mg-surface);width:20px;height:20px;box-shadow:var(--mg-shadow);cursor:pointer;pointer-events:auto;-webkit-appearance:none;border-radius:50%}app-product .pp-range input[type=range]::-moz-range-thumb{border:2px solid var(--mg-brand-ink);background:var(--mg-surface);cursor:pointer;pointer-events:auto;border-radius:50%;width:18px;height:18px}app-product .pp-range input[type=range]::-webkit-slider-runnable-track{background:0 0}app-product .pp-range input[type=range]::-moz-range-track{background:0 0}app-product .pp-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}app-product .pp-search{border:1px solid var(--mg-stroke);background:var(--mg-surface);border-radius:999px;flex:260px;align-items:center;gap:.6rem;height:48px;padding:0 1.1rem;transition:border-color .2s;display:flex}app-product .pp-search:focus-within{border-color:var(--mg-brand-ink)}app-product .pp-search-icon{color:var(--mg-muted);display:flex}app-product .pp-search-icon svg{width:18px;height:18px}app-product .pp-search input{min-width:0;font:inherit;color:var(--mg-text);background:0 0;border:0;outline:none;flex:1;font-size:.95rem}app-product .pp-search input::placeholder{color:var(--mg-muted)}app-product .pp-search input:focus-visible{outline:none}app-product .pp-sort{border:1px solid var(--mg-stroke);background:var(--mg-surface);border-radius:999px;align-items:center;gap:.35rem;height:48px;padding:0 .6rem 0 1.1rem;display:flex}app-product .pp-sort-label{color:var(--mg-muted);white-space:nowrap;font-size:.88rem}app-product .pp-sort-select{height:36px;font:inherit;color:var(--mg-text);cursor:pointer;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366625c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .4rem center/11px 8px no-repeat;border:0;border-radius:8px;padding:0 1.6rem 0 .2rem;font-size:.92rem;font-weight:600}app-product .pp-sort-select option{background:var(--mg-surface);color:var(--mg-text)}app-product .pp-mobile-filter-btn{border:1px solid var(--mg-stroke);background:var(--mg-surface);height:48px;font:inherit;color:var(--mg-text);cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:0 1.1rem;font-size:.92rem;font-weight:600;display:inline-flex;position:relative}app-product .pp-mobile-filter-btn svg{width:18px;height:18px}app-product .pp-mobile-filter-dot{background:var(--mg-brand);border-radius:50%;width:8px;height:8px}app-product .pp-meta-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;margin:1.25rem 0 1.1rem;display:flex}app-product .pp-count{color:var(--mg-muted);margin:0;font-size:.92rem}app-product .pp-count strong{color:var(--mg-text);font-weight:600}app-product .pp-active{flex-wrap:wrap;gap:.5rem;display:flex}app-product .pp-pill{border:1px solid var(--mg-stroke);background:var(--mg-surface);min-height:34px;font:inherit;color:var(--mg-text);cursor:pointer;border-radius:999px;align-items:center;gap:.45rem;padding:0 .85rem;font-size:.85rem;font-weight:600;display:inline-flex}app-product .pp-pill:hover{border-color:var(--mg-muted)}app-product .pp-pill-x{color:var(--mg-muted);font-size:1.05rem;line-height:1}app-product .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem .9rem;margin:0;padding:0;list-style:none;display:grid}app-product .pp-card{flex-direction:column;min-width:0;display:flex}app-product .pp-card-media{aspect-ratio:1;border-radius:var(--pp-radius);background:var(--pp-well);display:block;position:relative;overflow:hidden}app-product .pp-card-img{object-fit:contain;max-width:80%;max-height:80%;transition:transform .45s var(--pp-ease), opacity .3s ease;margin:auto;position:absolute;inset:0}app-product .pp-card:hover .pp-card-img{transform:scale(1.05)}app-product .pp-card-media--loading .pp-card-img{opacity:0}app-product .pp-card-skeleton{opacity:0;transition:opacity .3s;position:absolute;inset:0}app-product .pp-card-skeleton.is-visible,app-product .pp-card--skeleton .pp-card-media{opacity:1;background:linear-gradient(100deg, transparent 30%, #ffffff8c 50%, transparent 70%) var(--pp-well);background-size:220% 100%;animation:1.3s ease-in-out infinite pp-shimmer}@keyframes pp-shimmer{0%{background-position:120% 0}to{background-position:-120% 0}}app-product .pp-card-flags{z-index:1;flex-direction:column;align-items:flex-start;gap:.35rem;display:flex;position:absolute;top:.65rem;left:.65rem}app-product .pp-flag{color:#17161b;white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:.22rem;padding:.16rem .45rem;font-size:.62rem;font-weight:700;display:inline-flex;box-shadow:0 1px 2px #1413121f}app-product .pp-flag svg{width:10px;height:10px;color:var(--mg-brand-ink)}app-product .pp-flag--icon{justify-content:center;width:1.4rem;height:1.4rem;padding:0;position:relative}app-product .pp-flag--icon svg{width:12px;height:12px}app-product .pp-flag--icon:after{content:attr(data-tip);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;background:#17161b;border-radius:6px;padding:.22rem .45rem;font-size:.66rem;font-weight:600;transition:opacity .12s,transform .12s;position:absolute;top:50%;left:calc(100% + .35rem);transform:translate(-2px,-50%)}app-product .pp-flag--icon:hover:after{opacity:1;transform:translateY(-50%)}app-product .pp-flag--brand{background:var(--mg-brand);color:var(--mg-on-brand)}app-product .pp-flag--incart{z-index:1;background:var(--mg-brand);color:var(--mg-on-brand);box-shadow:0 2px 8px rgba(var(--mg-glow-rgb), .24);gap:.22rem;padding:.2rem .48rem;font-size:.64rem;position:absolute;top:.55rem;right:.55rem}app-product .pp-flag--incart svg{width:10px;height:10px;color:var(--mg-on-brand)}app-product .pp-card-body{flex-direction:column;flex:1;padding:.85rem .2rem 0;display:flex;container-type:inline-size}app-product .pp-card-cat{letter-spacing:.08em;text-transform:uppercase;color:var(--mg-muted);margin-bottom:.25rem;font-size:.72rem;font-weight:700}app-product .pp-card-name{margin:0;font-size:.98rem;font-weight:600;line-height:1.4}app-product .pp-card-name a{color:var(--mg-text);-webkit-line-clamp:2;-webkit-box-orient:vertical;text-decoration:none;display:-webkit-box;overflow:hidden}app-product .pp-card-name a:hover{text-underline-offset:3px;text-decoration:underline}app-product .pp-card-foot{justify-content:space-between;align-items:center;gap:.75rem;margin-top:auto;padding-top:.75rem;display:flex}app-product .pp-card-pricing{flex-direction:column;gap:.2rem;min-width:0;display:flex}app-product .pp-card-price{min-width:0;color:var(--mg-text);font-variant-numeric:tabular-nums;font-size:1.02rem;font-weight:700}app-product .pp-per{color:var(--mg-muted);margin-left:.15rem;font-size:.8rem;font-weight:500}app-product .pp-card-gst{color:var(--mg-muted);white-space:nowrap;font-size:.74rem;font-weight:500}app-product .pp-card-gst strong{color:var(--mg-text);font-weight:700}app-product .pp-card-price--coming-soon{color:var(--mg-muted);font-size:.9rem;font-weight:600}app-product .pp-card-btn{background:var(--mg-brand);min-height:36px;font:inherit;color:var(--mg-on-brand);cursor:pointer;border:1px solid #0000;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:.3rem;padding:0 .95rem;font-size:.85rem;font-weight:700;transition:background .2s,border-color .2s;display:inline-flex}app-product .pp-card-btn svg{width:14px;height:14px}app-product .pp-card-btn:hover{background:var(--mg-brand-hover)}app-product .pp-card-btn--remove{border-color:var(--mg-stroke);background:var(--mg-surface);color:var(--mg-text)}app-product .pp-card-btn--remove:hover{border-color:var(--mg-muted);background:var(--mg-surface)}app-product .pp-card-btn--soon,app-product .pp-card-btn--soon:hover{border:1px dashed var(--mg-stroke);color:var(--mg-muted);cursor:not-allowed;background:0 0}app-product .pp-card-price--coming-soon+.pp-card-btn--soon{display:none}app-product .pp-card--skeleton .pp-card-media{display:block}app-product .pp-skel-line{background:color-mix(in srgb, var(--mg-text) 8%, transparent);border-radius:6px;height:12px;margin-top:.85rem;display:block}app-product .pp-skel-line--short{width:45%;margin-top:.5rem}app-product .pp-state{border:1px dashed var(--mg-stroke);border-radius:var(--pp-radius);text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:3.5rem 1.5rem;display:flex}app-product .pp-state-title{margin:0;font-size:1.2rem;font-weight:700}app-product .pp-state-desc{max-width:28rem;color:var(--mg-muted);margin:0 0 .75rem}app-product .pp-btn{min-height:46px;font:inherit;cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:0 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s;display:inline-flex}app-product .pp-btn--brand{background:var(--mg-brand);color:var(--mg-on-brand)}app-product .pp-btn--brand:hover{background:var(--mg-brand-hover)}app-product .pp-btn--ghost{border-color:var(--mg-stroke);background:var(--mg-surface);color:var(--mg-text)}app-product .pp-btn--ghost:hover{border-color:var(--mg-muted)}app-product .pp-pagination{justify-content:center;margin-top:2.75rem;display:flex}app-product .pp-help{background:color-mix(in srgb, var(--mg-brand) 14%, var(--mg-surface));border-radius:28px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem 2rem;margin:4.5rem 0 4rem;padding:2rem 2.25rem;display:flex}app-product .pp-help-title{color:var(--mg-text);margin:0;font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700}app-product .pp-help-desc{max-width:38rem;color:var(--mg-muted);margin:.4rem 0 0;line-height:1.6}app-product .pp-cart-btn{z-index:40;background:var(--mg-ink);height:52px;font:inherit;color:#f3f2f6;cursor:pointer;transition:transform .2s var(--pp-ease);border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:.55rem;padding:0 1.25rem;font-size:.95rem;font-weight:600;display:inline-flex;position:fixed;bottom:1.5rem;right:1.5rem;box-shadow:0 10px 28px #14131247}app-product .pp-cart-btn:hover{transform:translateY(-2px)}app-product .pp-cart-btn svg{width:20px;height:20px}app-product .pp-cart-count{background:var(--mg-brand);min-width:24px;height:24px;color:var(--mg-on-brand);border-radius:999px;place-items:center;padding:0 .4rem;font-size:.8rem;font-weight:800;display:grid}@media (width>=640px){app-product .pp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem 1.1rem}}@media (width>=1024px){app-product .pp-layout{grid-template-columns:260px minmax(0,1fr);align-items:stretch;gap:2rem;display:grid}app-product .pp-aside,app-product .pp-aside--open{background:0 0;display:block;position:static}app-product .pp-aside--open .pp-aside-sticky{max-height:calc(100vh - var(--mg-header-h) - 2rem);border-radius:var(--pp-radius);border-bottom:1px solid var(--mg-stroke);padding-bottom:1.25rem;animation:none}app-product .pp-sheet-close,app-product .pp-sheet-done{display:none}app-product .pp-aside-sticky{top:calc(var(--mg-header-h) + 1rem);max-height:calc(100vh - var(--mg-header-h) - 2rem);scrollbar-width:none;position:sticky;overflow-y:auto}app-product .pp-aside-sticky::-webkit-scrollbar{display:none}app-product .pp-mobile-filter-btn{display:none}}@media (width>=1200px){app-product .pp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=639.98px){app-product .pp-container{padding:0 1rem}app-product .pp-head{padding:1.25rem 0}app-product .pp-facts{gap:.35rem 1rem;font-size:.88rem}app-product .pp-search{flex-basis:100%;order:3}app-product .pp-sort{flex:1 1 0;min-width:0;padding-left:.9rem}app-product .pp-sort-select{flex:1;width:100%;min-width:0}app-product .pp-card-body{padding-top:.7rem}app-product .pp-card-name{font-size:.92rem}app-product .pp-help{margin:3.5rem 0 3rem;padding:1.5rem}app-product .pp-cart-btn{bottom:1rem;right:1rem}}@media (prefers-reduced-motion:reduce){app-product .pp-card-img,app-product .pp-card-skeleton,app-product .pp-cart-btn,app-product .pp-fcaret{transition:none}app-product .pp-aside--open .pp-aside-sticky{animation:none}app-product .pp-card:hover .pp-card-img,app-product .pp-cart-btn:hover{transform:none}app-product .pp-card-skeleton.is-visible,app-product .pp-card--skeleton .pp-card-media{animation:none}}@container (width<=15rem){app-product .pp-card-foot{flex-direction:column;align-items:stretch;gap:.6rem}app-product .pp-card-btn{width:100%}}
