body:has(.accessory-page){overflow-x:clip}
.accessory-page{--accessory-edge:calc(max(0px,(100vw - var(--gymio-content-width))/2) + var(--gymio-gutter));padding-top:24px}
.accessory-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.accessory-layout>section{min-width:0}.accessory-layout h1{margin-top:0}.accessory-layout .g-heading{margin-block:24px}
.accessory-gallery>div:first-child{position:relative;background:var(--gymio-surface);aspect-ratio:1}
.accessory-gallery>div:first-child img{width:100%;height:100%;object-fit:contain}.accessory-gallery>div:first-child a{display:block;height:100%}
.accessory-gallery>div[role=group]{position:relative;display:flex;width:max-content;max-width:100%;gap:4px;overflow-x:auto;padding:24px 3px 32px}
.accessory-gallery>div[role=group]::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:12px;border-radius:var(--gymio-pill);background:var(--gymio-primary);pointer-events:none}
.accessory-gallery button[data-photo]{flex:0 0 104px;padding:0;background:var(--gymio-background);border:1px solid var(--gymio-border);border-radius:0;cursor:pointer}
.accessory-gallery button[data-photo][aria-pressed=true]{outline:2px solid var(--gymio-primary);outline-offset:0}.accessory-gallery button[data-photo]:hover{border-color:var(--gymio-primary)}.accessory-gallery button[data-photo] img{width:100%;aspect-ratio:1;object-fit:contain}
.accessory-page form{display:grid;gap:12px;margin-block:24px}.accessory-page select{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--gymio-border);background:var(--gymio-background);color:var(--gymio-text)}
.accessory-page form .g-button{justify-self:start;min-width:220px;max-width:100%;margin-top:8px}
.accessory-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:32px;border-top:1px solid var(--gymio-border)}.accessory-details li{margin-bottom:12px}.accessory-details>div:only-child{grid-column:1/-1;max-width:800px}.accessory-details h2{margin-top:0}
@media(max-width:767px){.accessory-layout,.accessory-details{grid-template-columns:1fr;gap:24px}.accessory-page form .g-button{width:100%}.accessory-gallery button[data-photo]{flex-basis:84px}}
.accessory-layout h1::after{content:'';display:block;width:calc(80% + var(--accessory-edge));height:16px;border-radius:var(--gymio-pill) 0 0 var(--gymio-pill);background:var(--gymio-primary);margin-top:20px;margin-left:20%;pointer-events:none}
.accessory-gallery>div:first-child{background:var(--gymio-surface);border-radius:var(--gymio-radius)}
.accessory-gallery>div:first-child::after{content:'';position:absolute;left:calc(-1 * var(--accessory-edge));bottom:-10px;width:calc(45% + var(--accessory-edge));height:20px;border-radius:0 var(--gymio-pill) var(--gymio-pill) 0;background:var(--gymio-primary);pointer-events:none}
.accessory-gallery [data-accessory-image]{cursor:zoom-in}
.accessory-details{position:relative;border-top:0;background:var(--gymio-background);padding-inline:24px}.accessory-details li::marker{color:var(--gymio-primary)}
.accessory-lightbox{width:min(1100px,94vw);max-width:94vw;height:90dvh;max-height:90dvh;padding:64px 56px 44px;border:0;border-radius:var(--gymio-radius);background:transparent;overflow:hidden}
.accessory-lightbox::before{content:'';position:absolute;top:24px;left:0;width:80px;height:14px;border-radius:0 var(--gymio-pill) var(--gymio-pill) 0;background:var(--gymio-primary);pointer-events:none}
.accessory-lightbox,.accessory-lightbox *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.variant-options{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.variant-options legend{padding:0;margin-bottom:10px}
.variant-options label{position:relative;flex:1 1 100px;max-width:180px;cursor:pointer}
.variant-options input{position:absolute;width:1px;height:1px;opacity:0}
.variant-options label>span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 16px;border:1px solid var(--gymio-border);border-radius:14px;background:var(--gymio-background);transition:background-color .15s,border-color .15s}
.variant-options label>span>span:first-child{font-size:20px}
.variant-options small{color:var(--gymio-muted);font-size:12px}
.variant-options label:hover>span,.variant-options input:checked+span{border-color:var(--gymio-primary);background:var(--gymio-field-active)}
.variant-options input:checked+span{box-shadow:inset 0 0 0 1px var(--gymio-primary)}
.variant-options input:focus-visible+span{outline:2px solid var(--gymio-text);outline-offset:3px}
.variant-options label[data-available="0"]>span{border-style:dashed}
.accessory-lightbox::backdrop{background:rgb(0 0 0 / .78)}.accessory-lightbox>img{width:100%;height:100%;object-fit:contain}
.accessory-lightbox [data-lightbox-close]{position:absolute;top:12px;right:16px}.accessory-lightbox [data-lightbox-status]{position:absolute;bottom:10px;left:0;width:100%;text-align:center;margin:0;color:var(--gymio-on-dark)}
@media(max-width:767px){.accessory-lightbox{padding:64px 12px 44px}.accessory-details{padding-inline:16px}}

.accessory-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.accessory-related img{width:100%;height:240px;object-fit:contain}.accessory-related .product-card{--product-button-padding:25px}@media(max-width:600px){.accessory-related{grid-template-columns:1fr}}
