/* The collection has one job: help customers choose a compatible case. */
.shop-main{padding-bottom:64px;min-height:70vh}
.shop-breadcrumb{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:#626262;padding:24px 0 20px}
.shop-intro{padding:0 0 28px}
.shop-intro h1{font-size:36px;line-height:1.2;letter-spacing:-.025em;font-weight:600;margin:0}
.shop-toolbar{display:flex;gap:24px;align-items:center;padding:16px 0;border-block:1px solid #e3e3e3}
.shop-model-field{display:flex;align-items:center;gap:16px;min-width:0}
.shop-model-field label{font-size:14px;font-weight:600;white-space:nowrap}
.shop-model-field select{width:310px;max-width:100%;min-height:46px;padding:10px 36px 10px 14px;font:inherit;font-size:15px;background:#fff;border:1px solid #b7b7b7;border-radius:4px;color:#171717;cursor:pointer}
.shop-result-count{margin-left:auto;font-size:14px;color:#626262;white-space:nowrap}
.shop-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:36px;margin-top:28px}
.shop-filter-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 18px;font-size:16px}
.shop-filter-heading button{font-size:13px;color:#555;text-decoration:underline;text-underline-offset:3px}
.shop-filter-group{border-top:1px solid #e3e3e3;padding:0 0 16px}
.shop-filter-group summary{display:flex;justify-content:space-between;align-items:center;min-height:54px;list-style:none;font-size:15px;font-weight:600;cursor:pointer}
.shop-filter-group summary::-webkit-details-marker{display:none}
.shop-filter-group summary:after{content:'+';font-size:19px;font-weight:400}
.shop-filter-group[open] summary:after{content:'−'}
.shop-filter-group fieldset{border:0;margin:0;padding:0}
.shop-filters label:has(input){display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;color:#515151;line-height:1.4;cursor:pointer}
.shop-filters input{accent-color:#171717;width:16px;height:16px;margin:0;flex-shrink:0}
.shop-filters select{width:100%;min-height:44px;border:1px solid #b7b7b7;border-radius:4px;background:#fff;padding:9px 12px;color:#171717;font:inherit;font-size:14px}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.shop-card{min-width:0}
.shop-card-image{display:block;aspect-ratio:1;background:#fafafa;border:1px solid #e6e6e6;border-radius:4px;padding:12px;overflow:hidden}
.shop-card-image img{width:100%;height:100%;object-fit:contain;transition:transform .2s}
.shop-card-image:hover img{transform:scale(1.025)}
.shop-card h2{font-size:14px;line-height:1.6;font-weight:500;letter-spacing:0;margin:16px 0 0;overflow-wrap:break-word}
.shop-card h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.shop-card-colour{display:flex;align-items:center;gap:9px;font-size:14px;color:#626262;margin-top:12px;line-height:1.5}
.shop-card-colour i{width:12px;height:12px;border:1px solid #999;border-radius:50%;background:var(--swatch);flex-shrink:0}
#shop-active-filters{display:flex;flex-wrap:wrap;gap:10px}
#shop-active-filters:not(:empty){margin-bottom:20px}
#shop-active-filters button{font-size:14px;line-height:1.4;background:#f3f3f3;border:1px solid #ddd;border-radius:4px;padding:9px 12px}
.shop-empty{padding:56px 28px;background:#f6f6f5;text-align:center;border-radius:4px}
.shop-empty h2{font-size:28px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0 auto 16px;max-width:560px}
.shop-empty>p{font-size:16px;line-height:1.7;color:#626262;max-width:510px;margin:auto}
.shop-empty>div{display:flex;gap:24px;align-items:center;justify-content:center;margin-top:28px}
.shop-filter-toggle{display:none}
@media(max-width:1100px){.shop-layout{grid-template-columns:180px minmax(0,1fr);gap:28px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.shop-main.container{width:calc(100% - 40px)}.shop-breadcrumb{font-size:13px;padding:20px 0 16px}.shop-intro{padding-bottom:22px}.shop-intro h1{font-size:28px}.shop-toolbar{flex-wrap:wrap;gap:14px;padding:16px 0 8px}.shop-model-field{display:block;width:100%}.shop-model-field label{display:block;margin-bottom:8px}.shop-model-field select{width:100%;font-size:16px;min-height:48px}.shop-filter-toggle{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:10px 0;min-height:44px;font-size:15px;font-weight:600}.shop-result-count{font-size:14px}.shop-layout{display:block;margin-top:20px}.shop-filters{display:none;padding:20px;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:4px;margin-bottom:24px}.shop-filters.is-open{display:block}.shop-filters label:has(input){font-size:15px;padding:12px 0}.shop-grid{gap:30px 16px}.shop-card-image{padding:8px}.shop-card h2{font-size:14px;line-height:1.6;margin-top:12px}.shop-card-colour{font-size:13px}.shop-empty{padding:36px 20px}.shop-empty h2{font-size:24px}.shop-empty>div{flex-direction:column;gap:20px}.shop-main{padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){.shop-card-image img{transition:none}}