/* MessMate product page (4 Nov 2026, Claude): the redesigned product template. Everything is scoped to .px / .px-*,
   so nothing here touches another page. Colours, radii and fonts come from the site tokens in messmate.css
   (--mm-brand follows the mm_green setting). Rendered by _mm_pdp.php; behaviour is in assets/mm-pdp.js. */
.px,.px *,.px *::before,.px *::after{box-sizing:border-box}
.px [hidden]{display:none!important}
.px-wrap{width:min(var(--mm-wrap,1240px),100% - 2 * var(--mm-pad,20px));margin-inline:auto}
.px-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ---- limited-time offer strip: only rendered when the site settings hold a real offer name and a future end date ---- */
.px-offer{background:var(--mm-clay-tint);border-bottom:1px solid #ecd0bd;color:#5a2a12}
.px-offer .px-wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding-block:10px;font-size:14px}
.px-offer strong{font-weight:700}
.px-clock{display:flex;gap:6px;font-variant-numeric:tabular-nums}
.px-clock span{background:#fff;border:1px solid #ecd0bd;border-radius:9px;padding:3px 8px;min-width:48px;text-align:center;font-weight:700;line-height:1.25}
.px-clock small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8d5a3e}
/* ---- buy section ---- */
.px-buy{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.5vw,72px);padding-block:12px 64px;align-items:start}
@media(max-width:980px){.px-buy{grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:40px}}
.px-gal{position:sticky;top:calc(var(--bar-h) + 56px)}
@media(max-width:980px){.px-gal{position:static}}
.px-stage{position:relative;aspect-ratio:1/1;max-width:100%;background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:var(--mm-r);overflow:hidden;animation:pxStageIn .9s var(--mm-ease) both}
@keyframes pxStageIn{from{opacity:0;transform:translateY(10px) scale(.985)}}
.px-stage>img{width:100%;height:100%;object-fit:contain;padding:4%}
.px-stage>img.px-swap{animation:pxFade .45s var(--mm-ease) both}
@keyframes pxFade{from{opacity:0}}
.px-stage .px-arrow{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;border:1px solid var(--mm-line);background:#ffffffee;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px #24211d14;transition:transform .2s var(--mm-ease)}
.px-stage .px-arrow:hover{transform:scale(1.06)}
.px-stage .px-arrow.px-prev{left:12px}
.px-stage .px-arrow.px-prev .px-ic{transform:scaleX(-1)}
.px-stage .px-arrow.px-next{right:12px}
.px-stage .px-count{position:absolute;left:14px;bottom:12px;font-size:12.5px;background:#ffffffe6;border:1px solid var(--mm-line);border-radius:99px;padding:3px 10px;color:var(--mm-ink-2);font-variant-numeric:tabular-nums}
.px-stage .mm3d{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 38%,#fff 0%,#f6efe2 100%)}
.px-stage .mm3d canvas{width:100%;height:100%;display:block}
.px-stage .mm3d__load,.px-stage .mm3d__nogl{display:none}
.px-stage .mm3d.is-fallback .mm3d__nogl{display:block;position:absolute;inset:auto 16px 16px;font-size:14px;color:var(--mm-ink-2)}
.px-ctl{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}
.px-ctl button{width:40px;height:40px;border-radius:50%;border:1px solid var(--mm-line);background:#ffffffee;display:grid;place-items:center;cursor:pointer}
.px-ctl button:hover{background:#fff}
.px-ctl .px-up .px-ic{transform:rotate(-90deg)}
.px-ctl .px-down .px-ic{transform:rotate(90deg)}
.px-ctl .px-left .px-ic{transform:scaleX(-1)}
.px-hint{position:absolute;left:14px;bottom:12px;font-size:12.5px;background:#ffffffe6;border:1px solid var(--mm-line);border-radius:99px;padding:5px 12px;color:var(--mm-ink-2);max-width:calc(100% - 200px)}
.px-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.px-thumbs button{flex:none;width:76px;height:76px;border-radius:14px;border:1.5px solid var(--mm-line);background:var(--mm-paper);padding:0;cursor:pointer;overflow:hidden;display:grid;place-items:center;transition:border-color .2s}
.px-thumbs button img{width:100%;height:100%;object-fit:cover}
.px-thumbs button[aria-current=true]{border-color:var(--mm-brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--mm-brand) 22%,transparent)}
.px-thumbs .px-t3d{flex-direction:column;gap:2px;font-size:11.5px;font-weight:700;color:var(--mm-brand);background:var(--mm-pine-tint)}
.px-t3d .px-ic{width:24px;height:24px}
.px-note3d{font-size:12.5px;color:var(--mm-ink-3);margin:6px 2px 0}
.px-tag{display:inline-flex;gap:6px;align-items:center;background:var(--mm-clay-tint);color:var(--mm-clay);border-radius:99px;padding:5px 12px;font:600 12px var(--mm-sans);letter-spacing:.04em;text-transform:uppercase}
.px-tag .px-ic{width:15px;height:15px}
.px h1{font:500 clamp(34px,4.4vw,52px)/1.04 var(--mm-display);letter-spacing:-.02em;margin:14px 0 8px;text-wrap:balance}
.px h1 em{font-style:italic}
.px-sub{margin:0 0 14px;color:var(--mm-ink-2);font-size:16.5px;text-wrap:pretty}
.px-stars{display:inline-flex;gap:2px;vertical-align:-3px}
.px-stars svg{width:17px;height:17px;fill:var(--mm-honey);stroke:none}
.px-rate{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--mm-ink-2);margin:0 0 16px;flex-wrap:wrap}
.px-rate a{color:var(--mm-ink)}
.px-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.px-price b{font:500 36px var(--mm-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.px-save{background:var(--mm-clay-tint);color:var(--mm-clay);font-weight:700;font-size:13.5px;border-radius:99px;padding:5px 12px}
.px-lead{margin:0 0 18px;font-size:16.5px;color:var(--mm-ink-2);text-wrap:pretty}
.px-chips{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.px-chips li{display:inline-flex;gap:7px;align-items:center;font-size:13.5px;font-weight:500;background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:99px;padding:6px 13px 6px 10px}
.px-chips .px-ic{width:17px;height:17px;color:var(--mm-brand)}
.px-fit{display:flex;gap:12px;background:var(--mm-pine-tint);border-radius:var(--mm-r-sm);padding:14px 16px;margin:0 0 22px;font-size:14.5px;line-height:1.5}
.px-fit .px-ic{margin-top:2px;color:var(--mm-brand)}
.px-fit b{display:block;font-size:15px;margin-bottom:2px}
/* compact colour pickers */
.px-pick{margin:0 0 18px}
.px-pick+.px-pick{margin-top:-4px}
.px-pick__h{display:flex;gap:8px;align-items:baseline;font-size:14px;margin-bottom:9px}
.px-pick__h b{font-weight:700}
.px-pick__h span{color:var(--mm-ink-2)}
.px-sws{display:flex;gap:10px;flex-wrap:wrap}
.px-sw{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c,#ccc);box-shadow:inset 0 0 0 1px #24211d26;position:relative;transition:transform .2s var(--mm-ease)}
.px-sw:hover{transform:scale(1.08)}
.px-sw[aria-pressed=true]{box-shadow:inset 0 0 0 1px #24211d26,0 0 0 2.5px var(--mm-cream),0 0 0 4.5px var(--mm-brand)}
.px-sw--tri{width:42px;height:42px;background:conic-gradient(var(--a) 0 33.33%,var(--b) 0 66.66%,var(--c) 0)}
.px-buyrow{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:22px 0 12px}
.px-qty{display:inline-flex;align-items:center;border:1.5px solid var(--mm-line);border-radius:99px;background:var(--mm-paper);height:54px}
.px-qty button{width:46px;height:100%;border:0;background:none;font-size:22px;cursor:pointer;border-radius:99px}
.px-qty button:hover{background:var(--mm-oat)}
.px-qty input{width:44px;height:100%;border:0;background:none;padding:0;text-align:center;font:700 16px var(--mm-sans);font-variant-numeric:tabular-nums;color:var(--mm-ink);-moz-appearance:textfield;appearance:textfield;min-width:0}
.px-qty input::-webkit-outer-spin-button,.px-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 28px;border-radius:99px;border:1.5px solid var(--mm-brand);background:var(--mm-brand);color:#fff;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:transform .2s var(--mm-ease),box-shadow .2s}
.px-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px color-mix(in srgb,var(--mm-brand) 32%,transparent)}
.px-btn--ghost{background:transparent;color:var(--mm-brand)}
.px-btn--add{flex:1 1 200px}
.px-buynow{display:flex;width:100%;margin-bottom:14px}
.px-trust{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--mm-line);display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.px-trust li{display:flex;gap:10px;font-size:13.5px;line-height:1.35}
.px-trust .px-ic{color:var(--mm-brand);margin-top:1px}
.px-trust small{display:block;color:var(--mm-ink-3);font-size:12.5px}
@media(max-width:520px){.px-trust{grid-template-columns:1fr}}
/* ---- bands ---- */
.px-band{padding-block:clamp(44px,6vw,84px)}
.px-band--oat{background:var(--mm-oat)}
.px-band--paper{background:var(--mm-paper);border-block:1px solid var(--mm-line)}
.px-eyebrow{font:700 12px var(--mm-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mm-clay);margin:0 0 10px}
.px h2{font:500 clamp(28px,3.4vw,42px)/1.08 var(--mm-display);letter-spacing:-.018em;margin:0 0 12px;text-wrap:balance}
.px h2 em{font-style:italic}
.px-intro{max-width:62ch;color:var(--mm-ink-2);margin:0 0 30px;font-size:17px;text-wrap:pretty}
/* bundles */
.px-bund{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.px-bund.px-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
@media(max-width:860px){.px-bund,.px-bund.px-two{grid-template-columns:1fr;max-width:none}}
.px-bcard{position:relative;background:var(--mm-paper);border:1.5px solid var(--mm-line);border-radius:var(--mm-r);padding:16px;display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;text-decoration:none;color:inherit;transition:border-color .2s,transform .25s var(--mm-ease),box-shadow .25s}
a.px-bcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px #24211d14}
.px-bcard.px-cur{border-color:var(--mm-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--mm-brand) 16%,transparent)}
.px-bcard img{width:96px;height:96px;object-fit:contain;border-radius:12px;background:var(--mm-cream)}
.px-bcard h3{font:600 18px var(--mm-sans);margin:0 0 3px}
.px-bcard p{margin:0;font-size:13.5px;color:var(--mm-ink-2)}
.px-bcard .px-pr{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:700}
.px-bcard .px-pr .px-save{font-size:12px;padding:3px 9px}
.px-bcard .px-here{position:absolute;top:-11px;left:16px;background:var(--mm-brand);color:#fff;font:700 11px var(--mm-sans);letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:4px 10px}
/* what's in the box */
.px-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
.px-box[data-n="1"]{grid-template-columns:minmax(0,360px)}
.px-box[data-n="2"]{grid-template-columns:repeat(2,minmax(0,360px))}
@media(max-width:720px){.px-box,.px-box[data-n="1"],.px-box[data-n="2"]{grid-template-columns:minmax(0,1fr)}
.px-item{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center}
.px-item .px-ph{aspect-ratio:1/1}
.px-item .px-q{top:8px;left:8px;font-size:12px;padding:3px 9px}}
.px-item{background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:var(--mm-r);overflow:hidden;position:relative}
.px-item .px-ph{aspect-ratio:4/3;background:var(--mm-cream);display:grid;place-items:center}
.px-item .px-ph img{width:100%;height:100%;object-fit:contain;padding:6%}
.px-item .px-q{position:absolute;top:12px;left:12px;background:var(--mm-brand);color:#fff;font:700 14px var(--mm-sans);border-radius:99px;padding:4px 12px;font-variant-numeric:tabular-nums}
.px-item div.px-tx{padding:14px 16px 18px}
.px-item h3{font:600 17px var(--mm-sans);margin:0 0 3px}
.px-item p{margin:0;font-size:14px;color:var(--mm-ink-2)}
.px-sold{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--mm-ink-2);background:var(--mm-paper);border:1px dashed var(--mm-sand);border-radius:var(--mm-r-sm);padding:12px 16px}
.px-sold b{color:var(--mm-ink)}
/* spec grid */
.px-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.px-spec{background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:var(--mm-r);padding:22px 22px 20px}
.px-spec .px-ic{width:26px;height:26px;color:var(--mm-brand);margin-bottom:10px}
.px-spec h3{font:700 12px var(--mm-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mm-clay);margin:0 0 8px}
.px-spec p{margin:0 0 6px;font-size:15px}
.px-spec p:last-child{margin:0}
.px-spec .px-m{color:var(--mm-ink-2);font-size:14px}
.px-spec .px-big{font:500 22px/1.15 var(--mm-display)}
/* fit + install */
.px-fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:34px}
@media(max-width:760px){.px-fitgrid{grid-template-columns:1fr}}
.px-fcard{border-radius:var(--mm-r);padding:22px 24px;background:var(--mm-paper);border:1px solid var(--mm-line)}
.px-fcard--yes{background:var(--mm-pine-tint);border-color:transparent}
.px-fcard h3{font:600 20px var(--mm-display);margin:0 0 10px}
.px-fcard ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.px-fcard li{display:flex;gap:10px}
.px-fcard li .px-ic{width:18px;height:18px;margin-top:3px}
.px-fcard--yes li .px-ic{color:var(--mm-brand)}
.px-fcard--no li .px-ic{color:var(--mm-clay)}
.px-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:860px){.px-steps{grid-template-columns:1fr}}
.px-step{background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:var(--mm-r);overflow:hidden}
.px-step img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.px-step div{padding:16px 20px 20px}
@media(max-width:720px){.px-step img{aspect-ratio:4/3}}
.px-step h3{font:600 19px var(--mm-sans);margin:0 0 6px;display:flex;gap:10px;align-items:center}
.px-step h3 i{font:700 13px var(--mm-sans);font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--mm-brand);color:#fff;display:grid;place-items:center}
.px-step p{margin:0;font-size:14.5px;color:var(--mm-ink-2)}
.px-vid{margin-top:18px;border:1.5px dashed var(--mm-sand);border-radius:var(--mm-r);padding:20px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--mm-paper)}
.px-vid .px-ic{width:34px;height:34px;color:var(--mm-brand)}
.px-vid p{margin:0;flex:1 1 260px;font-size:14.5px;color:var(--mm-ink-2)}
.px-vid .px-btn{height:46px}
/* reviews carousel */
.px-rv{position:relative}
.px-rvhead{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.px-rvhead .px-intro{margin:0}
.px-rvnav{display:flex;gap:10px}
.px-rvnav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--mm-line);background:var(--mm-paper);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.px-rvnav button:hover:not(:disabled){background:var(--mm-pine-tint);border-color:var(--mm-brand)}
.px-rvnav button:disabled{opacity:.35;cursor:default}
.px-rvnav .px-prev .px-ic{transform:scaleX(-1)}
.px-rvtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline-offset:6px}
.px-rvtrack::-webkit-scrollbar{display:none}
.px-rcard{flex:0 0 min(380px,86%);scroll-snap-align:start;background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:var(--mm-r);padding:22px 24px;display:flex;flex-direction:column;gap:14px;margin:0}
.px-rcard .px-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.px-vf{display:inline-flex;gap:5px;align-items:center;font:700 11.5px var(--mm-sans);letter-spacing:.03em;color:var(--mm-brand);background:var(--mm-pine-tint);border-radius:99px;padding:3px 10px 3px 8px}
.px-vf .px-ic{width:14px;height:14px;stroke-width:2.4}
.px-rcard blockquote{margin:0;font-size:16px;line-height:1.55;flex:1}
.px-rcard figcaption{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;font-size:14px}
.px-rcard .px-av{width:38px;height:38px;border-radius:50%;background:var(--mm-oat);display:grid;place-items:center;font:600 16px var(--mm-display)}
.px-rcard figcaption b{display:block}
.px-rcard figcaption span span{color:var(--mm-ink-3)}
.px-rcard .px-of{font-size:12px;color:var(--mm-ink-3);border-top:1px solid var(--mm-line);padding-top:10px;margin-top:-2px}
.px-dots{display:flex;gap:7px;justify-content:center;margin-top:6px}
.px-dots i{width:7px;height:7px;border-radius:50%;background:var(--mm-sand);transition:all .25s}
.px-dots i.px-on{width:22px;border-radius:99px;background:var(--mm-brand)}
.px-norev{border:1.5px dashed var(--mm-sand);border-radius:var(--mm-r);padding:26px;color:var(--mm-ink-2);background:var(--mm-paper)}
/* collection */
.px-coll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:980px){.px-coll{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.px-coll{gap:12px}}
.px-pc{background:var(--mm-paper);border:1px solid var(--mm-line);border-radius:var(--mm-r);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s var(--mm-ease),box-shadow .25s}
.px-pc:hover{transform:translateY(-4px);box-shadow:0 16px 36px #24211d14}
.px-pc .px-ph{aspect-ratio:1/1;background:var(--mm-cream);display:grid;place-items:center}
.px-pc img{width:100%;height:100%;object-fit:contain;padding:6%}
.px-pc div.px-tx{padding:14px 16px 18px;display:grid;gap:3px}
.px-pc b{font-size:16px}
.px-pc span{font-size:13.5px;color:var(--mm-ink-2)}
.px-pc .px-p{font-weight:700;color:var(--mm-ink);margin-top:4px}
/* accordions (only two,secondary information) */
.px-acc{max-width:860px;border-top:1px solid var(--mm-line)}
.px-acc details{border-bottom:1px solid var(--mm-line)}
.px-acc summary{cursor:pointer;list-style:none;position:relative;padding:20px 44px 20px 0;font:600 18px var(--mm-sans)}
.px-acc summary::-webkit-details-marker{display:none}
.px-acc summary::after{content:"+";position:absolute;right:6px;top:50%;translate:0 -50%;font-size:26px;font-weight:300;color:var(--mm-ink-3);transition:transform .25s var(--mm-ease)}
.px-acc details[open] summary::after{transform:rotate(45deg)}
.px-acc .px-in{padding:0 0 22px;color:var(--mm-ink-2);font-size:15.5px;max-width:70ch}
.px-acc .px-in p{margin:0 0 10px}
.px-story{display:flex;gap:16px;align-items:center;max-width:860px;margin-top:36px;font-size:15.5px;color:var(--mm-ink-2)}
.px-story .px-ic{width:30px;height:30px;color:var(--mm-clay)}
/* scroll reveals: visible by default,hidden only when the script marks a block as "below the fold" */
.px-pre{opacity:0;transform:translateY(18px)}
.px-shown{animation:pxRise .7s var(--mm-ease) both}
@keyframes pxRise{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){.px-pre{opacity:1;transform:none}
.px-shown,.px-stage{animation:none}
.px-sw,.px-btn,.px-pc,.px-bcard{transition:none}}
.px{--px-pad:clamp(44px,6vw,84px)}
.px-buy{padding-top:12px}
.px-meta{margin:18px 0 0;font-size:13px;color:var(--mm-ink-3)}
.px-meta a{color:var(--mm-ink-2)}
.px-video{margin-top:18px;border-radius:var(--mm-r);overflow:hidden;background:#000}
.px-video video{display:block;width:100%;height:auto;max-height:70vh}
.px-more .pd-specs{margin:0 0 22px}
.px-acc .px-in.px-more-body{max-width:none}
.px-acc .px-more-body>.pd-long{max-width:none;margin:0}
.px-acc .px-more-body .pd-long h2{display:none}
.px-acc .px-more-body .pd-long .pd-desc{border-top:0;padding-top:0;margin-top:0}
.px-ndnote{display:none}