/* Template-derived design contract. Geometry variables are intentionally editable. */

.template-wheels{--bg:var(--w-bg);--bg2:var(--w-panel);--ink:var(--w-ink);--mut:var(--w-muted);--line:var(--w-line);--acc:var(--w-accent);--sans:var(--w-font);font-family:var(--w-font);font-size:var(--w-body);line-height:var(--w-leading)}
.template-wheels :is(h1,h2,h3,p,button,input,select,textarea,label){font-family:var(--w-font)}
.template-wheels h1{font-size:var(--w-h1);font-weight:var(--w-bold);line-height:1;font-variation-settings:'wdth' 78}
.template-wheels h2{font-size:var(--w-h2);font-weight:var(--w-bold);letter-spacing:var(--w-heading-tracking);line-height:var(--w-heading-leading);font-variation-settings:'wdth' var(--w-width-heading)}
.template-wheels .adv h3{font-size:var(--w-h3);line-height:var(--w-heading-leading);font-weight:var(--w-bold)}
.template-wheels .kicker{font-size:var(--w-small);letter-spacing:var(--w-kicker-tracking);color:var(--w-accent)}
.template-wheels .btn,.template-wheels .wheel-filters .button{border-radius:var(--w-form-radius);padding:var(--w-button-padding);font-size:var(--w-small);letter-spacing:var(--w-tracking);min-height:var(--w-touch);transition:var(--w-transition);box-shadow:var(--w-no-shadow);text-transform:uppercase}
.template-wheels .btn-fill{background:var(--w-ink);color:var(--w-bg)}
.template-wheels .btn-fill:hover{background:var(--w-accent)}
.template-wheels :is(input,select,textarea){font:inherit;color:var(--w-ink);background-color:var(--w-panel);border:var(--w-border);border-radius:var(--w-form-radius);padding:var(--w-control-padding);min-height:var(--w-touch);width:100%;min-width:0}
.template-wheels select{padding-right:calc(var(--w-control-padding)*2.5)}
.template-wheels :focus-visible{outline:var(--w-focus);outline-offset:3px}
.template-wheels :is(.catalog,.adv,.wheel-custom){max-width:var(--w-container);padding:var(--w-section) var(--w-gutter);margin:auto}
.template-wheels .adv{gap:var(--w-block-gap)}
.template-wheels .adv-row{gap:var(--w-column-gap)}
.template-wheels .adv p{color:var(--w-copy);line-height:var(--w-leading)}
.template-wheels .evo{height:var(--w-stage-height)}
.template-wheels .evo-sticky{height:100svh;background:radial-gradient(ellipse at center,var(--w-stage-light),var(--w-bg));position:sticky;top:0}
.template-wheels .evo-title{left:var(--w-gutter);top:16svh;max-width:38%;pointer-events:none}
.template-wheels .evo-title h1 span{font-weight:var(--w-light)}
.template-wheels .evo-stages{left:var(--w-gutter);bottom:8svh;gap:var(--w-small-gap)}
.template-wheels .stage{color:var(--w-muted);font-size:var(--w-small)}
.template-wheels .stage.on{color:var(--w-accent)}
.template-wheels .evo-cta{left:auto;right:var(--w-gutter);bottom:14svh;transform:none;opacity:1}
.wheel-stage{position:absolute;left:var(--wheel-center-x);top:var(--wheel-center-y);width:var(--wheel-diameter);height:var(--wheel-diameter);transform:translate(-50%,-50%) rotate(var(--wheel-turn,0deg)) scale(var(--wheel-scale,1));opacity:var(--wheel-opacity,1);filter:blur(var(--wheel-blur,0px));isolation:isolate}
.wheel-art{position:absolute;inset:0;overflow:visible}
.wheel-art img{position:absolute!important;width:var(--asset-width,100%)!important;height:var(--asset-height,100%)!important;left:var(--asset-left,0%)!important;top:var(--asset-top,0%)!important;max-width:none!important;object-fit:fill!important;transform:none!important;border-radius:0!important;box-shadow:none!important}
.sketch-layer,.cad-layer,.wheel-paper,.scan-grid,.wheel-glint{position:absolute;inset:0}
.wheel-paper{background:var(--w-paper);border-radius:50%;opacity:var(--paper-opacity,0)}
.cad-layer{clip-path:inset(0 0 calc(100% - var(--scan,100%)) 0)}
.scan-grid{background:linear-gradient(var(--w-accent) 1px,transparent 1px),linear-gradient(90deg,var(--w-accent) 1px,transparent 1px);background-size:var(--w-grid) var(--w-grid);border-radius:50%;opacity:var(--grid-opacity,0);clip-path:inset(0 0 calc(100% - var(--scan,100%)) 0)}
.scan-line{position:absolute;left:0;right:0;top:var(--scan,100%);height:2px;background:var(--w-accent);box-shadow:var(--w-scan-glow);opacity:var(--scan-opacity,0)}
.wheel-glint{background:linear-gradient(115deg,transparent 40%,var(--w-ink) 50%,transparent 60%);mix-blend-mode:screen;opacity:var(--glint-opacity,0);transform:translateX(var(--glint-x,-100%));border-radius:50%}
.wheel-ring{position:relative;width:var(--wheel-ring-diameter);max-width:100%;aspect-ratio:1}
.wheel-ring>.wheel-art{width:var(--wheel-ring-image-ratio);height:var(--wheel-ring-image-ratio);inset:0;margin:auto}
.wheel-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:wheel-ring-spin var(--w-ring-duration) linear infinite;animation-play-state:paused}
.wheel-ring.is-visible svg{animation-play-state:running}
.wheel-ring text{font-family:var(--w-font);font-size:7px;letter-spacing:0;fill:var(--w-muted)}
@keyframes wheel-ring-spin{to{transform:rotate(360deg)}}
.wheel-block-art{position:relative;width:var(--wheel-ring-diameter);max-width:100%;aspect-ratio:1}
.template-wheels .wheel-filters{max-width:none;gap:var(--w-small-gap);margin:0 0 var(--w-gap);padding:0}
.template-wheels .filter-note{color:var(--w-muted);font-size:var(--w-small);margin-bottom:var(--w-gap)}
.wheel-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--w-gap)}
.template-wheels .wheel-catalog .card{width:auto;min-width:0;border:var(--w-border);border-radius:var(--w-radius);box-shadow:none;background:var(--w-panel);overflow:hidden}
.template-wheels .wheel-catalog .gal{aspect-ratio:1;height:auto}
.template-wheels .wheel-catalog .landing-photo{width:100%;height:100%;display:block}
.template-wheels .wheel-catalog .gal img{object-fit:contain}
.template-wheels .wheel-catalog .card-body{padding:var(--w-card-padding);gap:var(--w-small-gap)}
.template-wheels .wheel-catalog .card-name{font-size:var(--w-card-title);font-weight:var(--w-medium);line-height:1.3;overflow-wrap:anywhere}
.template-wheels .wheel-catalog small{font-size:var(--w-label);letter-spacing:0}
.template-wheels .wheel-catalog form{width:100%;gap:var(--w-small-gap);margin:0;max-width:none}
.template-wheels .wheel-catalog label{font-size:var(--w-small);display:grid;gap:var(--w-tiny-gap)}
.template-wheels .wheel-catalog .btn{padding:var(--w-control-padding);font-size:var(--w-label);letter-spacing:0;width:100%;white-space:normal}
.template-wheels .wheel-catalog .card-price{font-size:var(--w-price);font-weight:var(--w-bold);line-height:1.4;margin:0;overflow-wrap:anywhere}
.wheel-order-extra{display:grid;gap:var(--w-small-gap)}
.wheel-order-extra[hidden]{display:none}
.template-wheels .wheel-catalog .confirm{display:block}
.template-wheels input[type=checkbox]{width:18px;min-height:18px;height:18px;vertical-align:middle}
.template-wheels .wheel-custom{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:var(--w-column-gap);text-align:left;border-top:var(--w-border)}
.wheel-custom .custom-backdrop{position:absolute;width:70%;max-width:none;left:0;top:0;opacity:.08;z-index:-1;pointer-events:none}
.template-wheels .wheel-custom p{margin:var(--w-gap) 0;max-width:none}
.template-wheels .wheel-custom form{width:100%;margin:0;position:relative;background:var(--w-bg);padding:var(--w-gap);border:var(--w-border);border-radius:var(--w-radius)}
.artist-slot{min-height:var(--w-artist-height);display:grid;place-items:center;border:var(--w-border);border-radius:var(--w-radius);padding:var(--w-gap);color:var(--w-muted);text-align:center}
.artist-slot img{max-width:100%;max-height:var(--w-artist-height);object-fit:contain}
@media(max-width:1080px){.wheel-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.template-wheels .evo-title{top:12svh;max-width:90%}.template-wheels .evo-title h1{font-size:34px}.template-wheels .evo-title .kicker{font-size:10px}.template-wheels .evo-stages{bottom:14svh}.template-wheels .evo-cta{bottom:4svh;left:var(--w-gutter);right:auto}.template-wheels .adv-row,.template-wheels .wheel-custom{grid-template-columns:1fr}.template-wheels .wheel-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.template-wheels .wheel-catalog select{font-size:var(--w-small)}.template-wheels .wheel-catalog .card-name{font-size:14px}.template-wheels .wheel-catalog .card-price{font-size:16px}}
@media(prefers-reduced-motion:reduce){.template-wheels .evo{height:100svh}.template-wheels .evo-sticky{position:relative}.wheel-stage{transform:translate(-50%,-50%);filter:none;opacity:1}.wheel-stage .sketch-layer,.wheel-paper,.scan-grid,.scan-line,.wheel-glint{display:none}.cad-layer{clip-path:none!important}.sketch-layer{mask:none!important}.wheel-ring svg{animation:none!important}.template-wheels *, .template-wheels *::before{scroll-behavior:auto!important;transition:none!important}}
/* Behind the scanner the pencil layer disappears, including CAD openings. */
.wheel-stage .sketch-layer,[data-wheel-block=scan] .sketch-layer{clip-path:inset(var(--scan,0%) 0 0 0)}
@media(prefers-reduced-motion:reduce){[data-wheel-block=scan] .sketch-layer{display:none}}
.template-wheels .wheel-custom form p{margin:0;display:grid;gap:var(--w-tiny-gap);font-size:var(--w-small)}
.template-wheels .wheel-custom form{gap:var(--w-small-gap);align-self:start}
.template-wheels .wheel-custom form .helptext{font-size:var(--w-label);line-height:var(--w-leading)}
.final-layer{position:absolute;inset:0;opacity:var(--final-opacity,0)}
.wheel-stage .cad-layer{opacity:calc(1 - var(--final-opacity,0))}
.template-wheels footer.wheels-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:var(--w-footer-padding);gap:var(--w-footer-gap);border-top:var(--w-border);background:var(--w-bg)}
.wheels-footer .apps{display:flex;flex-wrap:wrap;gap:var(--w-footer-app-gap)}
.wheels-footer .app-badge{display:flex;align-items:center;gap:var(--w-small-gap);padding:var(--w-badge-padding);border:var(--w-border);border-radius:var(--w-badge-radius);background:var(--w-panel);color:var(--w-ink);text-decoration:none}
.wheels-footer .app-badge svg{width:var(--w-badge-icon);height:var(--w-badge-icon);fill:currentColor}
.wheels-footer .foot-note,.wheels-footer-links{color:var(--w-muted);font-size:var(--w-label);letter-spacing:var(--w-tracking);text-transform:uppercase}
.wheels-footer-links{display:flex;flex-wrap:wrap;gap:var(--w-small-gap);width:100%}
.wheels-footer .unavailable{cursor:default}
@media(prefers-reduced-motion:reduce){.wheel-stage .final-layer{opacity:1}.wheel-stage .cad-layer{display:none}}
.template-wheels .assistant-launch{height:var(--w-touch);min-height:var(--w-touch);padding:var(--w-assistant-padding);gap:var(--w-small-gap);background:var(--w-assistant-background);backdrop-filter:blur(var(--w-assistant-blur));-webkit-backdrop-filter:blur(var(--w-assistant-blur));border-radius:var(--w-radius);color:var(--w-ink);font-size:var(--w-small);line-height:1}
.template-wheels .assistant-launch span{display:flex;align-items:center;gap:var(--w-tiny-gap)}
.template-wheels .assistant-launch b{display:inline;font-size:var(--w-small)}
.template-wheels .assistant-launch:hover{background:var(--w-assistant-hover)}

/* The launcher stays above the footer, including while its links enter the viewport. */
.template-wheels .assistant-launch{bottom:max(calc(var(--w-assistant-bottom) + env(safe-area-inset-bottom)),var(--assistant-footer-lift,0px))}
.wheel-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--w-small-gap);margin-top:var(--w-gap)}
.wheel-pagination a{display:grid;place-items:center;min-width:var(--w-touch);min-height:var(--w-touch);border:var(--w-border);border-radius:var(--w-form-radius);text-decoration:none;font-size:var(--w-small)}
.wheel-pagination a[aria-current=page]{background:var(--w-accent);color:var(--w-bg);font-weight:var(--w-medium)}
.wheel-pagination span{font-size:var(--w-small);color:var(--w-muted)}
.template-wheels .wheel-catalog .g-btn{opacity:1;width:var(--w-touch);height:var(--w-touch);font-size:var(--w-price)}
.wheel-zoom-hint{position:absolute;right:var(--w-small-gap);bottom:var(--w-small-gap);color:var(--w-bg);background:var(--w-ink);border-radius:50%;width:var(--w-gap);height:var(--w-gap);display:grid;place-items:center;pointer-events:none}
.template-wheels #store-gallery{width:min(1100px,94vw);height:min(860px,90dvh);max-width:94vw;max-height:90dvh;margin:auto;padding:var(--w-gap);border:var(--w-border);border-radius:var(--w-radius);background:var(--w-bg);color:var(--w-ink);overflow:hidden}
.template-wheels #store-gallery[open]{display:flex;flex-direction:column;gap:var(--w-small-gap)}
.template-wheels #store-gallery::backdrop{background:rgba(12,12,13,.86);backdrop-filter:blur(8px)}
.template-wheels #store-gallery .store-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--w-small-gap);flex-shrink:0}
.template-wheels #store-gallery h2{font-size:var(--w-card-title);line-height:var(--w-heading-leading);overflow-wrap:anywhere}
.template-wheels #store-gallery button{min-height:var(--w-touch);padding:var(--w-control-padding);border:var(--w-border);border-radius:var(--w-form-radius);background:var(--w-panel);color:var(--w-ink);font-size:var(--w-small)}
.template-wheels #store-gallery button:disabled{opacity:.45;cursor:default}
.template-wheels #store-gallery :is(img,video){display:block;min-height:0;flex:1;width:100%;max-width:100%;max-height:none;object-fit:contain;background:var(--w-panel)}
.template-wheels #store-gallery [hidden]{display:none!important}
.template-wheels #store-gallery .gallery-status{font-size:var(--w-small);color:var(--w-muted);margin:0;min-height:1.5em}
.template-wheels #gallery-position{font-size:var(--w-small);white-space:nowrap}
body:has(#store-gallery[open]){overflow:hidden}

.template-wheels .wheel-catalog .gal{touch-action:pan-y}

/* Avoid a body scroll container breaking sticky positioning on mobile Safari. */
@supports(overflow:clip){body.template-wheels{overflow-x:clip}}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
 .template-wheels .evo-sticky{position:sticky;top:0;height:100svh}
 .template-wheels .evo-title{width:auto;max-width:92%;top:calc(var(--w-header-height) + var(--w-gap))}
}