/* Expander: expanding image panels. Scales with its own container width, so it works in a post column, a page section or a full-width block. Built by Megaone, geeaig.com */
.mx{--mx-h:520px;--mx-n:4;--mx-strip:64px;--mx-gap:8px;--mx-r:18px;--mx-ease:cubic-bezier(.2,.75,.25,1);--mx-ink:var(--ink,#171916);--mx-mut:var(--grey,#777b73);--mx-line:var(--line,#e3e0d9);--mx-surf:var(--stone,#e9e7e1);container-type:inline-size;container-name:mx;margin:28px 0;color:var(--mx-ink);font-size:14px;line-height:1.5}
.mx-head{margin:0 0 20px}.mx-eyebrow{margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-tx,#c4501f)}.mx-title{margin:0 0 8px;font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem)}.mx-intro{margin:0;color:var(--mx-mut);max-width:60ch}
.mx-stage{display:grid;grid-template-columns:minmax(0,1fr) repeat(calc(var(--mx-n) - 1),var(--mx-strip));gap:var(--mx-gap);height:max(220px,min(var(--mx-h),calc((100cqw - (var(--mx-n) - 1) * (var(--mx-strip) + var(--mx-gap))) * .5625)));list-style:none;margin:0;padding:0;overflow:hidden;border-radius:calc(var(--mx-r) + 4px);transition:grid-template-columns .7s var(--mx-ease)}
.mx-panel{position:relative;min-width:0;overflow:hidden;border-radius:var(--mx-r);background:var(--mx-surf);isolation:isolate}
@supports (color:color-mix(in srgb,red,blue)){.mx-panel{background:color-mix(in srgb,var(--mx-a,#cfcbc2) 16%,var(--mx-surf))}}
.mx-media{position:absolute;inset:0;z-index:-1}
.mx-img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transform:scale(1.07);filter:saturate(.72) brightness(.94);transition:transform .9s var(--mx-ease),filter .5s ease}
.mx-panel.is-active .mx-img{transform:none;filter:none;object-fit:contain}
.mx-fit-top .mx-panel.is-active .mx-img{object-fit:cover;object-position:50% 0}
.mx-fit-center .mx-panel.is-active .mx-img{object-fit:cover;object-position:50% 50%}
.mx-panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(14,16,14,.16),rgba(14,16,14,.34));transition:background .45s ease}
.mx-panel.is-active::after{background:none}
.mx-hit{position:absolute;inset:0;z-index:1;border:0;background:none;padding:0;margin:0;cursor:pointer;border-radius:inherit}
.mx-hit:focus-visible{outline:3px solid var(--accent-tx,#c4501f);outline-offset:-3px}
.mx-panel.is-active .mx-hit{pointer-events:none;cursor:default}
.mx-panel.is-active{cursor:zoom-in}
.mx-top{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.mx-chip{display:flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:12px;background:rgba(255,255,255,.9);color:#171916;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mx-label{font-size:.95rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-code{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(23,25,22,.62)}
.mx-meta{display:flex;align-items:center;gap:10px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.mx-idx{font-size:.72rem;font-variant-numeric:tabular-nums}
.mx-badge{padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.9);color:#2f5a35;font-size:.68rem;font-weight:700;text-shadow:none}.mx-badge.is-low{color:#9a4a12}
.mx-panel:not(.is-active) .mx-top{left:50%;right:auto;transform:translateX(-50%)}
.mx-panel:not(.is-active) .mx-meta,.mx-panel:not(.is-active) .mx-code{display:none}
.mx-panel:not(.is-active) .mx-chip{padding:12px 7px}
.mx-panel:not(.is-active) .mx-label{writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(var(--mx-h) - 80px)}
@container mx (max-width:900px){.mx{--mx-strip:52px}}
.mx-foot{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .35s ease .12s,transform .5s var(--mx-ease) .08s;pointer-events:none}
.mx-panel.is-active .mx-foot{opacity:1;transform:none}
.mx-cap{margin:0;max-width:46ch;padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.9);color:#171916;font-size:.84rem;line-height:1.4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mx-cap:empty{display:none}
.mx-zoom{pointer-events:auto;flex:none;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.16);color:#fff;font-size:17px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s}
.mx-zoom:hover,.mx-zoom:focus-visible{background:#fff;color:#171916}
.mx-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.mx-swatches{display:flex;gap:10px;flex-wrap:wrap}
.mx-swatch{width:24px;height:24px;padding:0;border-radius:50%;border:3px solid var(--canvas,#fff);background:var(--sw,#cfcbc2);box-shadow:0 0 0 1px var(--mx-line);cursor:pointer;transition:transform .25s var(--mx-ease),box-shadow .25s}
.mx-swatch:hover{transform:scale(1.14)}.mx-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--mx-ink)}
.mx-nav{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--mx-mut);font-size:.78rem;font-variant-numeric:tabular-nums}
.mx-nav button{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--mx-line);background:transparent;color:var(--mx-ink);cursor:pointer;font-size:15px;line-height:1;transition:background .2s,color .2s}
.mx-nav button:hover{background:var(--mx-ink);color:var(--canvas,#fff)}
.mx-detail{display:grid;gap:18px;grid-template-columns:1fr;padding:22px 2px 0;animation:mxIn .5s var(--mx-ease)}.mx-detail[hidden]{display:none}
@keyframes mxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mx-dname{margin:0 0 4px;font-size:1.2rem}.mx-ddesc{margin:0 0 12px;color:var(--mx-mut)}
.mx-feats{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.mx-feats li{position:relative;padding-left:22px}.mx-feats li::before{content:"\2713";position:absolute;left:0;color:var(--accent-tx,#c4501f);font-weight:800}
.mx-dlink{font-weight:700;border-bottom:1px solid currentColor}
.mx-dside small{display:block;color:var(--mx-mut);font-size:.76rem}.mx-dprice{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.05em;line-height:1.15}
.mx-stock{display:inline-block;margin-top:6px;font-size:.76rem;color:#2f5a35}.mx-stock.is-low{color:#9a4a12}
@container mx (min-width:640px){.mx-detail{grid-template-columns:1fr auto;align-items:start}.mx-dside{text-align:right;min-width:160px}}
@container mx (max-width:639px){
.mx-stage{display:flex;flex-direction:column;height:auto;border-radius:var(--mx-r);transition:none}
.mx-panel{flex:none;height:58px;transition:height .65s var(--mx-ease)}
.mx-panel.is-active{height:calc(100cqw * .5625)}
.mx-panel:not(.is-active) .mx-top{left:14px;right:auto;top:50%;transform:translateY(-50%)}
.mx-panel:not(.is-active) .mx-label{writing-mode:horizontal-tb;transform:none;max-height:none}
.mx-panel:not(.is-active) .mx-chip{padding:8px 13px}
.mx-cap{font-size:.82rem}
}
.mx-lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;color:#fff}
.mx-lb::backdrop{background:rgba(10,11,10,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mx-lb[open]{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center}
.mx-lb figure{margin:0;display:grid;gap:12px;justify-items:center;align-content:start;max-height:100vh;overflow:auto;padding:28px 0}
.mx-lb img{max-width:100%;width:auto;height:auto;border-radius:10px}.mx-lb figcaption{font-size:.9rem;opacity:.85;text-align:center;padding:0 12px}
.mx-lb button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer;justify-self:center}.mx-lb button:hover{background:#fff;color:#171916}
.mx-lb-x{position:absolute;top:16px;right:16px;z-index:2}
@media(max-width:700px){.mx-lb[open]{grid-template-columns:1fr}.mx-lb-p,.mx-lb-n{position:absolute;bottom:18px;z-index:2}.mx-lb-p{left:18px}.mx-lb-n{right:18px}}
.pj-core{margin:56px 0 0}.pj-core .mx{margin-top:22px}
@media(prefers-reduced-motion:reduce){.mx *,.mx *::before,.mx *::after{transition:none!important;animation:none!important}}