/* Product Configurator, real visuals (R2). Linked after site.css on home, Shopify, Charcoal case study and the configurator draft page.
   Everything here is the REAL configurator UI (captures in img/configurator/): light app skin on a #f5f5f5 canvas in both themes (it is a real object, like a screenshot),
   body font only, square corners as in the app. Behaviour in js/mk-config.js. */

/* ---------- 1. Live card (home #products + Shopify #products) ---------- */
.mkc{--ap-bg:#fff;--ap-canvas:#f5f5f5;--ap-text:#111;--ap-mute:#6f6f6f;--ap-line:#e2e2e2;--ap-dark:#1a1a1a;
 flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);background:var(--ap-bg);color:var(--ap-text);font-family:var(--body);text-align:left}
.mk-win:has(>.mkc){container-type:inline-size}
.prod .wbar .ui-try{white-space:nowrap}
/* the window keeps the card's usual minimum height but may grow when the layout stacks (narrow cards), so nothing clips */
#products .prod .ui.mk-win:has(>.mkc){height:auto;max-height:none;min-height:clamp(13rem,32vh,17rem)}
.mkc-view{position:relative;background:var(--ap-canvas);min-height:0;min-width:0;display:grid}
.mkc-jk{position:absolute;inset:.5rem .5rem 1.75rem}
.mkc-jk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .18s}
.mkc-jk img.on{opacity:1}
.mkc-cap{position:absolute;right:.625rem;bottom:.4375rem;font:400 .75rem/1.2 var(--body);color:#8a8a8a;white-space:nowrap}
.mkc-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.mkc-tabs{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;border-bottom:1px solid var(--ap-line);padding:0 .75rem}
.mkc-tabs span{padding:.6875rem 0 .5625rem;font:600 .75rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:default}
.mkc-tabs span.on{color:var(--ap-text);border-bottom-color:var(--ap-text)}
.mkc-body{flex:1;min-height:0;padding:.75rem;display:grid;align-content:start;gap:.625rem}
.mkc-sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.375rem}
.mkc-sw button{all:unset;cursor:pointer;position:relative;display:block;aspect-ratio:1;background:#ddd;box-sizing:border-box;outline:0}
.mkc-sw button img{display:block;width:100%;height:100%;object-fit:cover}
.mkc-sw button::before{content:"";position:absolute;inset:0;border:2px solid transparent;pointer-events:none;transition:border-color .12s}
.mkc-sw button[aria-checked="true"]::before{border-color:var(--ap-dark);box-shadow:inset 0 0 0 1px #fff}
.mkc-sw button:hover::before{border-color:#777}
.mkc-sw button[aria-checked="true"]:hover::before{border-color:var(--ap-dark)}
.mkc-sw button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mkc-sw button::after{content:"";position:absolute;inset:-.25rem -.1875rem}
.mkc-nm{display:grid;gap:.1875rem;min-width:0}
.mkc-nm b{font:600 .8125rem/1.2 var(--body);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-nm span{font:400 .75rem/1.2 var(--body);color:var(--ap-mute);white-space:nowrap}
.mkc-buy{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid var(--ap-line);padding:.625rem .75rem}
.mkc-buy div{display:grid;gap:.125rem;min-width:0}
.mkc-buy b{font:600 1.0625rem/1.1 var(--body);white-space:nowrap}
.mkc-buy span{font:400 .75rem/1.2 var(--body);color:var(--ap-mute);white-space:nowrap}
.mkc-buy .mkc-bag{background:var(--ap-dark);color:#fff;font:600 .75rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:.75rem 1.125rem;cursor:default;white-space:nowrap}
.prod .mkc-buy .mkc-bag{color:#fff}
/* narrow window (phone carousel card, tablet with two cards side by side): view on top, panel below; tabs and swatches scroll sideways like the real phone app */
@container (max-width:460px){
 .mkc{grid-template-columns:1fr}
 .mkc-view{height:9.5rem}
 .mkc-jk{inset:.375rem .5rem 1.5rem}
 .mkc-tabs{display:flex;justify-content:flex-start;gap:1rem;overflow-x:auto;scrollbar-width:none}
 .mkc-tabs span{flex:none}
 .mkc-sw{display:flex;overflow-x:auto;scrollbar-width:none;gap:.375rem;margin-inline:-.75rem;padding-inline:.75rem}
 .mkc-sw button{flex:none;width:2.75rem}
 .mkc-sw button::after{inset:-.25rem -.1875rem}
 .mkc-buy .mkc-bag{padding:.75rem .875rem}
}
.mkc-buy .mkc-bag span{font:inherit;color:inherit;letter-spacing:inherit}
.mkc-bag .mkc-m{display:none}
/* narrow window = the configurator's own PHONE layout (real captures img/configurator/hero-m-*.webp, user 2026-10-11: "on mobile it is much nicer"):
   big render, price + FINISH right under it, step tabs, a strip of large swatches, the cloth name centred between search and filter. No "Add to bag" (desktop only). */
@container (max-width:460px){
 .mkc-view{height:auto;aspect-ratio:1/1.02}
 .mkc-jk{inset:.75rem 1rem .5rem}
 .mkc-cap{display:none}
 .mkc-buy{order:-1;border-top:0;border-bottom:1px solid var(--ap-line);padding:.75rem .875rem}
 .mkc-buy div{display:flex;align-items:baseline;gap:.5rem}
 .mkc-buy .mkc-bag{padding:.8125rem 1.5rem}
 .mkc-bag .mkc-d{display:none}.mkc-bag .mkc-m{display:inline}
 .mkc-tabs{display:grid;grid-template-columns:repeat(4,1fr);justify-content:stretch;gap:0;padding:0;overflow:visible}
 .mkc-tabs span{text-align:center;padding:.875rem 0 .75rem}
 .mkc-body{padding:.625rem 0 .75rem;gap:.75rem}
 .mkc-sw{margin-inline:0;padding-inline:.625rem;gap:.5rem;scroll-snap-type:x proximity}
 .mkc-sw button{width:4.75rem;scroll-snap-align:start}
 .mkc-nm{grid-template-columns:1.25rem 1fr 1.25rem;align-items:center;padding:0 .875rem;column-gap:.5rem}
 .mkc-nm::before,.mkc-nm::after{content:"";grid-row:1/3;width:1.25rem;height:1.25rem;background:currentColor;opacity:.85;
   -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
 .mkc-nm::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E")}
 .mkc-nm::after{grid-column:3;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 7h11M18 7h3M3 17h4M11 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E")}
 .mkc-nm b,.mkc-nm span{grid-column:2;text-align:center}
 .mkc-nm b{text-transform:none;letter-spacing:0;font-size:.9375rem}
}
@media (max-width:1000px){.mkc{flex:none}}
@media (prefers-reduced-motion:reduce){.mkc-jk img{transition:none}}

/* ---------- 2. Shopify #problems, tab 04: the real phone screen in the shared .mk-phone frame ---------- */
.sh-mock.mkc-ph{display:grid;place-items:center;padding:.75rem;background:#f5f5f5;min-height:0}
.sh-mock.mkc-ph .mk-phone{height:100%;max-height:100%;width:auto;box-shadow:var(--mk-sh-sm)}
.sh-mock.mkc-ph .mk-phone-screen img{height:100%;object-fit:cover;object-position:top}

/* ---------- 3. Charcoal case study, store section: the configurator as a fourth store screen (desktop capture + phone) ---------- */
.cc-vp{container-type:size}
.cc-vp .cc-cfg{display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,2cqw,1.5rem);padding:clamp(.625rem,3cqh,1.25rem) clamp(.75rem,3cqw,1.5rem);background:#eceef0}
.cc-vp .cc-cfg .cc-cfg-d{flex:1 1 0;min-width:0;width:auto;height:auto;max-height:100%;object-fit:contain;border:1px solid #d9dde0;border-radius:var(--r-sm);background:#fff}
.cc-vp .cc-cfg .cc-cfg-p{--mk-ph-h:calc(100cqh - clamp(2rem,12cqh,4rem));flex:none;justify-self:auto}
.cc-vp .cc-cfg .cc-cfg-p img{height:100%;object-fit:cover;object-position:top}
/* small window: the phone alone (the desktop capture would be too small to read) */
@container (max-width:520px){.cc-vp .cc-cfg .cc-cfg-d{display:none}}
@media (max-width:760px){#shots .wtabs-bar [role="tab"]{padding-inline:.25rem;text-align:center}#shots .wtabs-bar b{font-size:.8125rem;overflow:visible;text-overflow:clip}}
@media (max-width:600px){.sh-mock.mkc-ph{padding:1rem}.sh-mock.mkc-ph .mk-phone{height:21rem}}

/* ---------- 4. Narrow card v2 (user 2026-10-13): compact, fabric switching only ----------
   No price row, no FINISH, no step tabs, no search/filter row: the render, the cloth name and one strip of swatches.
   Swatch strip scrolls sideways only (it used to drift up and down: overflow-x:auto also let the tap areas scroll it vertically). */
@container (max-width:460px){
 .mkc-buy,.mkc-tabs{display:none}
 .mkc-view{aspect-ratio:auto;height:13.5rem}
 .mkc-jk{inset:.625rem 1rem .375rem}
 .mkc-body{padding:.625rem 0 .75rem;gap:.5rem}
 .mkc-nm{display:block;padding:0 .875rem;text-align:center}
 .mkc-nm::before,.mkc-nm::after,.mkc-nm span{display:none}
 .mkc-nm b{font-size:.875rem}
 .mkc-sw{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;padding-block:.25rem;scroll-snap-type:x mandatory}
 .mkc-sw button{width:3.5rem}
 .mkc-sw button::after{inset:0}
}