/*
 * Autoqueen — page components (hero, rails, photo cards, product cards, stories, looks, special orders).
 * Rules taken from the current storefront so pages look the same. Shared by the homepage and the shop.
 */
.collection-filter-content > :is(fieldset, section, details){border-top: 0px; border-bottom: 1px solid rgb(221, 221, 221); padding-bottom: 24px; margin-bottom: 24px;}
.collection-filter-content > :is(fieldset, section, details):last-child{margin-bottom: 0px;}
.photo-card img{transition: transform var(--product-move-duration) var(--product-hover-ease);}
.aq-looks{--look-accent: #fff; background: rgb(32, 34, 34); color: rgb(255, 255, 255); padding: 64px 0px 36px; margin: 104px 0px; overflow: hidden;}
.aq-looks-heading, .aq-looks-preview, .aq-looks-controls{margin-left: var(--gutter); margin-right: var(--gutter);}
.aq-looks-heading h2{font-size: clamp(28px, 3vw, 44px); margin-bottom: 12px;}
.aq-looks-heading p{font-size: 16px; color: rgb(213, 213, 213);}
.aq-looks-preview{font-size: 12px; color: rgb(187, 187, 187); line-height: 1.5; margin-top: 16px;}
.aq-looks-preview a{text-decoration: underline; text-underline-offset: 4px; margin-left: 8px;}
.aq-looks-track{display: flex; gap: 16px; overflow-x: auto; padding: 28px var(--gutter) 8px; scroll-snap-type: x mandatory; scrollbar-width: none;}
.aq-looks-track::-webkit-scrollbar{display: none;}
.aq-look{flex: 0 0 calc((100vw - 2 * var(--gutter) - 64px)/2.15); scroll-snap-align: start; scroll-margin-left: var(--gutter); min-width: 0px;}
.aq-look-image{position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: rgb(48, 50, 50); isolation: isolate;}
.aq-look-image > img{width: 100%; height: 100%; object-fit: cover;}
.aq-look h3{font-size: 16px; font-weight: 400; margin-top: 14px;}
.aq-hotspot{position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); border: 1px solid rgb(184, 184, 184); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.15) 0px 0px 0px 5px, rgba(0, 0, 0, 0.133) 0px 2px 8px; z-index: 2; transition: box-shadow 0.2s, background 0.2s;}
.aq-hotspot span{font-size: 26px; line-height: 1; font-weight: 400; display: grid; place-items: center; width: 100%; height: 100%; padding-bottom: 2px;}
.aq-hotspot:hover, .aq-hotspot.active{box-shadow: rgba(255, 255, 255, 0.376) 0px 0px 0px 6px, rgba(0, 0, 0, 0.2) 0px 2px 8px;}
.aq-hotspot.active{background: rgb(32, 34, 34); color: rgb(255, 255, 255); border-color: rgb(255, 255, 255);}
.aq-look-card{position: absolute; width: min(284px, 100% - 24px); max-height: calc(100% - 24px); overflow: auto; display: grid; grid-template-columns: 68px 1fr; gap: 12px; background: rgba(255, 255, 255, 0.9); color: rgb(17, 17, 17); border-radius: 6px; padding: 18px 16px; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; z-index: 4; animation: 0.18s ease-out 0s 1 normal none running look-card-in;}
.aq-look-card > img{width: 68px; height: 82px; object-fit: contain; align-self: center;}
.aq-look-card > div{display: flex; flex-direction: column; gap: 6px; min-width: 0px; padding-right: 8px;}
.aq-look-card small{font-size: 11px; color: rgb(102, 102, 102);}
.aq-look-card strong{font-size: 13px; line-height: 1.35;}
.aq-look-card b{font-size: 14px;}
.aq-look-card a{font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; align-self: flex-start;}
.aq-look-stock{font-size: 10px; line-height: 1.4; color: rgb(102, 102, 102);}
.aq-looks-controls{display: flex; align-items: center; gap: 12px; margin-top: 24px;}
.aq-looks-controls button{width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 22px;}
.aq-looks-controls button:hover:not(:disabled){background: rgba(255, 255, 255, 0.082);}
.aq-looks-controls button:disabled{opacity: 0.35;}
.aq-looks-progress{width: 260px; max-width: 50vw; height: 2px; margin-left: 12px; background: rgba(255, 255, 255, 0.208); overflow: hidden;}
.aq-looks-progress span{display: block; height: 100%; background: rgb(255, 255, 255); transition: transform 0.3s;}
@media (max-width: 700px){
.aq-looks{padding-top: 40px; margin: 72px 0px;}
.aq-looks-heading h2{font-size: 28px;}
.aq-look{flex-basis: calc(-48px + 100vw);}
.aq-look-image{aspect-ratio: 4 / 5;}
.aq-looks-track{gap: 12px; scroll-padding-left: 16px;}
.aq-looks-preview{max-width: 90%; font-size: 11px;}
.aq-look-card{grid-template-columns: 60px 1fr; padding: 16px 12px; gap: 10px;}
.aq-look-card > img{width: 60px;}
.aq-looks-controls{margin-top: 12px;}
}
@media (prefers-reduced-motion: reduce){
.aq-look-card{animation: auto ease 0s 1 normal none running none;}
.aq-hotspot, .aq-looks-progress span{transition: none;}
.aq-looks-track{scroll-behavior: auto;}
}
.aq-look-card{width: min(216px, 100% - 24px); grid-template-columns: 48px 1fr; gap: 10px; padding: 14px 12px;}
.aq-look-card > img{width: 48px; height: 72px;}
.aq-look-card > div{padding-right: 4px;}
@media (max-width: 700px){
.aq-look-card{width: min(284px, 100% - 24px); grid-template-columns: 60px 1fr; padding: 16px 12px;}
.aq-look-card > img{width: 60px; height: 82px;}
}
.aq-look-card-header{grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin: -8px -6px 0px 0px;}
.aq-look-card-header small{font-size: 11px; color: rgb(102, 102, 102); padding-left: 0px;}
.aq-look-card-close{display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; font-size: 24px; font-weight: 400; line-height: 1; background: transparent; color: rgb(17, 17, 17);}
.aq-look-card-close:hover{background: rgba(0, 0, 0, 0.03);}
.aq-hotspot.active{background: rgb(255, 255, 255); color: rgb(17, 17, 17); border-color: rgb(17, 17, 17); box-shadow: rgba(255, 255, 255, 0.376) 0px 0px 0px 5px;}
.story-video-card{position: relative; aspect-ratio: 3 / 4; min-width: 0px;}
.story-video-card .photo-card{display: block; width: 100%; height: 100%;}
.story-video-card .photo-card > video{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; pointer-events: none;}
.story-video-card .photo-card > video.is-ready{opacity: 1;}
.story-video-card .photo-card::after{z-index: 1;}
.story-video-toggle{position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center;}
.story-video-toggle:hover{background: rgba(0, 0, 0, 0.8);}
.story-video-toggle svg{width: 22px; height: 22px;}
@media (prefers-reduced-motion: reduce){
.story-video-card .photo-card > video{transition: none;}
}
.story-video-card .photo-card::after{inset: 42% 0px 0px; background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.88) 100%);}
.story-video-card{container-type: inline-size;}
.story-product-footer{position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 10px; background: rgba(0, 0, 0, 0.62); color: rgb(255, 255, 255); border-radius: 5px; min-height: 82px;}
.story-product-footer > img{flex: 0 0 auto; width: 42px; height: 54px; object-fit: contain; background: rgb(255, 255, 255); border-radius: 3px;}
.story-product-copy{display: flex; flex-direction: column; gap: 4px; min-width: 0px;}
.story-product-copy small{font-size: 10px; color: rgb(221, 221, 221); line-height: 1.1;}
.story-product-copy strong{font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.story-product-copy b{font-size: 13px; line-height: 1.25; font-weight: 500;}
.story-product-arrow{font-size: 18px; margin-left: auto; flex: 0 0 auto;}
.story-product-footer:hover strong{text-decoration: underline; text-underline-offset: 3px;}
.story-product-reel .photo-card::after{inset: 55% 0px 0px;}
.story-product-reel .story-video-toggle{z-index: 4;}
@media (min-width: 1024px) and (max-width: 1200px){
.story-product-footer{gap: 7px; padding: 10px 8px;}
.story-product-footer > img{width: 34px; height: 46px;}
.story-product-copy strong, .story-product-copy b{font-size: 12px;}
.story-product-arrow{display: none;}
}
.editorial-eyebrow{font-size: 11px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.5; margin: 0px 0px 16px; color: rgb(85, 85, 85);}
.special-orders-feature{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; margin-top: 100px; margin-bottom: 100px;}
.special-orders-photo{aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px;}
.special-orders-photo img{height: 100%; width: 100%; object-fit: cover; object-position: center 40%;}
.special-orders-copy{max-width: 510px;}
.special-orders-copy h2{font-size: clamp(34px, 3.7vw, 52px); line-height: 1.1; letter-spacing: -0.035em; margin: 0px 0px 24px;}
.special-orders-copy > p:not(.editorial-eyebrow){font-size: 18px; line-height: 1.7; color: rgb(85, 85, 85); margin-bottom: 28px;}
.special-orders-copy ol{counter-reset: special 0; list-style: none; padding: 0px; margin: 0px 0px 32px;}
.special-orders-copy li{counter-increment: special 1; position: relative; padding: 0px 0px 22px 40px; font-size: 15px;}
.special-orders-copy li::before{content: counter(special, decimal-leading-zero); position: absolute; left: 0px; top: 0px; font-size: 11px; color: rgb(119, 119, 119);}
.special-orders-copy strong{font-weight: 500; display: block;}
.special-orders-copy li span{font-size: 13px; color: rgb(102, 102, 102); display: block; margin-top: 6px; line-height: 1.6;}
.special-orders-copy small{font-size: 11px; color: rgb(102, 102, 102); line-height: 1.5; display: block; margin-top: 18px; max-width: 380px;}
@media (max-width: 1023px){
.special-orders-feature{gap: 32px;}
.special-orders-copy > p:not(.editorial-eyebrow){font-size: 16px;}
}
@media (max-width: 700px){
.special-orders-feature{grid-template-columns: 1fr; gap: 28px; margin-top: 64px; margin-bottom: 64px;}
.special-orders-photo{aspect-ratio: 1.2 / 1;}
.special-orders-copy{max-width: none;}
.special-orders-copy h2{font-size: 36px;}
.special-orders-copy ol{margin-bottom: 24px;}
.special-orders-copy .pill{width: 100%; white-space: normal;}
}
.special-orders-photo{aspect-ratio: 4 / 5;}
.special-orders-photo .special-order-portrait{object-position: 50% 50%;}
.special-orders-photo .special-order-portrait{height: 100%;}
.hero{height: 100svh; min-height: 640px; position: relative; color: rgb(255, 255, 255); overflow: hidden; background: rgb(75, 59, 49);}
.hero-copy{position: absolute; bottom: 0px; left: 0px; padding: 0 var(--gutter) max(32px,3.33vw); max-width: 55%; z-index: 2;}
.hero-copy p{font-size: clamp(26px, 24.32px + 0.45vw, 33px); line-height: 1.3; margin-top: 20px; max-width: 500px;}
.hero-actions{display: flex; gap: 16px; margin-top: 28px;}
.rail{min-width: 0px;}
.rail-track{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--gap); scrollbar-width: none; overscroll-behavior-x: contain;}
.rail-track::-webkit-scrollbar{display: none;}
.rail-track > *{flex: 0 0 auto; width: calc((100% - 2.2*var(--gap))/3.2); scroll-snap-align: start;}
.photo-card{position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--round); background: rgb(236, 238, 240);}
.photo-card img{height: 100%; object-fit: cover; transition: transform 0.6s;}
.photo-card:hover img{transform: scale(1.025);}
.photo-card > span{position: absolute; inset: auto 16px 20px; color: rgb(255, 255, 255); display: flex; align-items: flex-end; justify-content: space-between; font-size: 24px; font-weight: 600; line-height: 1.2; gap: 16px; z-index: 2;}
.photo-card > span .icon{opacity: 0; transition: opacity 0.2s;}
.photo-card:hover > span .icon{opacity: 1;}
.photo-card::after{content: ""; position: absolute; inset: 60% 0px 0px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.267)); pointer-events: none;}
.rail-controls{display: flex; align-items: center; gap: 4px; margin-top: 16px; height: 48px;}
.rail-progress{height: 2px; background: rgb(170, 170, 170); width: 300px; margin-left: 24px; overflow: hidden;}
.rail-progress span{height: 2px; background: rgb(0, 0, 0); display: block; transition: transform 0.15s ease-out;}
.shop-rail .rail-track{gap: 20px;}
.shop-rail .rail-track > *{width: calc(33.3333% - 13.3333px);}
.shop-rail .rail-controls{display: none;}
.activity{display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-top: 72px;}
.category-links{padding: 24px;}
.activity-image{aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px;}
.activity-image img{height: 100%; object-fit: cover;}
.gear-section{margin-top: 72px;}
.gear-section .photo-card > span{color: rgb(0, 0, 0);}
.gear-section .photo-card::after{display: none;}
.product{position: relative;}
.product-photo{width: 100%; background: radial-gradient(51.74% 45.16% at 46.65% 38%, rgb(255, 255, 255) 0px, rgb(246, 247, 248) 44.58%, rgb(236, 238, 240)); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.product-photo img{width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s;}
.product-photo:hover img{transform: scale(1.035);}
.favorite{position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center;}
.product-info{display: flex; flex-direction: column; gap: 5px; padding: 18px 12px 24px; font-size: 16px; line-height: 1.4; width: 100%;}
.product-info strong{font-weight: 600;}
.product-info .price{font-size: 14px;}
.product-rail .rail-controls{margin-top: 32px;}
.stories-rail .rail-track{gap: 20px;}
.stories-rail .rail-track > *{width: calc(25% - 15px);}
.stories-rail .rail-controls{display: none;}
@media (max-width: 1023px){
h1{font-size: 26px; letter-spacing: -0.025em;}
.hero{height: 100svh; min-height: 640px;}
.hero-copy{max-width: 100%; width: 100%; text-align: center; padding: 0px 24px 80px;}
.hero-copy p{font-size: 16px; line-height: 1.3; margin-top: 12px; max-width: 350px; margin-left: auto; margin-right: auto;}
.hero-actions{align-items: center; flex-direction: column; gap: 8px; margin-top: 20px;}
.shop{margin-top: 48px;}
.shop-rail .rail-track{gap: 8px; margin-right: -16px;}
.shop-rail .rail-track > *{width: calc(100% - 16px);}
.photo-card > span{font-size: 22px; bottom: 20px;}
.photo-card > span .icon{opacity: 1;}
.shop-rail .rail-controls{display: flex;}
.rail-controls{margin-top: 28px; gap: 8px;}
.rail-progress{flex: 1 1 0%; max-width: 300px; margin-left: 12px; margin-right: 16px;}
.rail-track > *{width: calc(46.5116% - 11.1628px);}
.activity{display: block; margin-top: 88px; margin-bottom: 64px;}
.category-links{padding: 0px;}
.activity-image{display: none;}
.gear-section{margin-top: 0px;}
.gear-section .rail-track > *{width: calc(100% - 32px);}
.rail-track{margin-right: -16px; padding-right: 16px;}
.gear-section .photo-card > span{font-size: 24px;}
.arrivals .product-info{font-size: 14px; padding: 18px 12px 24px; gap: 4px;}
.product-info .price{font-size: 12px;}
.favorite{top: 10px; right: 8px; width: 26px; height: 26px;}
.product-rail .rail-controls{margin-top: 40px;}
.stories-rail .rail-track{gap: 8px;}
.stories-rail .rail-track > *{width: calc(100% - 16px);}
.stories-rail .rail-controls{display: flex;}
.shop-rail .rail-track > .photo-card, .stories-rail .rail-track > .photo-card, .gear-section .rail-track > .photo-card{width: min(340px, 100%); aspect-ratio: 340 / 480;}
.product-rail .rail-track > *{width: calc(47.619% - 3.80952px);}
}
.product-photo{padding: 24px;}
@media (max-width: 1023px){
.product-photo{padding: 16px;}
}
.hero::after{content: ""; position: absolute; inset: 40% 0px 0px; background: linear-gradient(rgba(118, 118, 118, 0), rgba(0, 0, 0, 0.45) 53.13%, rgba(0, 0, 0, 0.65)); pointer-events: none; z-index: 1;}
.photo-card .hover-label{background-size: 0px 2px; transition: background-size var(--editorial-duration) ease;}
.photo-card > span > .icon{opacity: 1; overflow: hidden;}
.photo-card > span > .icon svg{transform: translate(-105%); transition: transform var(--editorial-duration) var(--hover-ease);}
.activity-image img{animation: 0.25s ease-out 0s 1 normal none running category-reveal;}
@media (hover: hover) and (pointer: fine){
.photo-card:hover .hover-label{background-size: 100% 2px;}
.photo-card:hover > span > .icon svg{transform: translate(0px);}
.photo-card img, .product-photo img{transition: transform 0.5s;}
.photo-card:hover img, .product-photo:hover img{transform: scale(1.025);}
}
@media (hover: none), (pointer: coarse){
.photo-card > span > .icon svg{transform: none;}
.photo-card .hover-label{background-size: 100% 2px;}
.photo-card:hover img, .product-photo:hover img{transform: none;}
}
@media (max-width: 1023px){
.photo-card > span > .icon svg{transform: none;}
.photo-card .hover-label{background-size: 100% 2px;}
}
.photo-card img{pointer-events: none;}
.hero-media{position: absolute; inset: 0px;}
.hero-media .hero-poster, .hero-media .hero-video{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;}
.hero-media .hero-video{opacity: 0; transition: opacity 0.4s;}
.hero-media .hero-video.is-ready{opacity: 1;}
.hero-video-toggle{position: absolute; right: var(--gutter); bottom: 32px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.333); backdrop-filter: blur(8px);}
.hero-video-toggle:hover{background: rgba(0, 0, 0, 0.6);}
.hero-video-toggle svg{width: 24px; height: 24px;}
@media (max-width: 1023px){
.hero-media .hero-poster{object-position: 84% center;}
.hero-video-toggle{right: 16px; top: 96px; bottom: auto;}
}
.photo-card.photo-card-contain img{object-fit: contain; background: rgb(255, 255, 255);}
.arrivals-heading{display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px;}
.arrivals-heading h2{margin-bottom: 0px;}
.arrivals-view-all{display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; font-size: 16px; min-height: 48px;}
.arrivals-view-all .hover-label{background-size: 100% 1px;}
.arrivals .product-info{overflow-wrap: anywhere;}
@media (max-width: 600px){
.arrivals-heading{align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;}
.arrivals-view-all{font-size: 14px; min-height: 40px;}
.arrivals-heading h2{font-size: 32px;}
}
.action-primary{background: rgb(0, 0, 0); color: rgb(255, 255, 255);}
.action-secondary{background: transparent; color: rgb(0, 0, 0); border: 1px solid rgb(119, 119, 119);}
.hero-actions{align-items: center; gap: 24px;}
.hero-actions .action-primary{background: rgb(255, 255, 255); color: rgb(0, 0, 0); border-color: rgb(255, 255, 255); min-width: 168px;}
.hero-actions .action-secondary{background: transparent; color: rgb(255, 255, 255); border: 0px; border-radius: 0px; padding: 12px 0px; font-weight: 400; text-decoration: underline 1px; text-underline-offset: 6px; white-space: normal;}
.hero-actions .action-secondary:hover{background: transparent; transform: none; text-decoration-thickness: 2px;}
.hero-actions .action-primary:hover{background: rgb(238, 238, 238); border-color: rgb(238, 238, 238);}
@media (max-width: 1023px){
.hero-actions{gap: 8px;}
.hero-actions .action-primary{min-width: 190px;}
}
.every-ride .stories-rail .rail-track{gap: 20px; scroll-padding-left: 0px; cursor: grab; user-select: none; touch-action: pan-x pan-y pinch-zoom;}
.every-ride .stories-rail .rail-track > .story-video-card{width: calc(25% - 15px); aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden;}
.every-ride .stories-rail .rail-controls{display: flex; margin-top: 20px;}
.every-ride .story-video-card .photo-card{border-radius: 8px; overflow: hidden;}
@media (min-width: 701px) and (max-width: 1023px){
.every-ride .stories-rail .rail-track{margin-right: 0px; padding-right: 0px; gap: 16px;}
.every-ride .stories-rail .rail-track > .story-video-card{width: calc(43.4783% - 13.913px);}
}
@media (max-width: 700px){
.every-ride .stories-rail .rail-track{gap: 12px;}
.every-ride .stories-rail .rail-track > .story-video-card{width: min(320px, 100% - 32px); aspect-ratio: 9 / 16;}
}
.rail-track{touch-action: pan-x pan-y pinch-zoom;}
.rail-track img{-webkit-user-drag: none;}
.activity-image{display: block; min-width: 0px; overflow: hidden; border-radius: var(--round,3px);}
.category-rail{display: none;}
@media (hover: hover) and (pointer: fine){
.rail-track{cursor: grab;}
}
@media (max-width: 1023px){
.activity > .category-links, .activity > .activity-image{display: none;}
.activity > .category-rail{display: block;}
.category-rail .rail-track{gap: 12px;}
.category-rail .photo-card{display: block; width: min(340px, 78vw); aspect-ratio: 3 / 4; position: relative; border-radius: var(--round,3px); overflow: hidden; flex-shrink: 0;}
.category-rail .photo-card img{width: 100%; height: 100%; object-fit: cover;}
.category-rail .photo-card > span{position: absolute; left: 20px; right: 20px; bottom: 22px; color: rgb(255, 255, 255); font-size: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 1;}
.category-rail .photo-card::after{content: ""; position: absolute; inset: 55% 0px 0px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); pointer-events: none;}
.category-rail .rail-controls{display: flex;}
}
.category-links > a{font-size: clamp(34px, 4.1vw, 53px); font-weight: 600; line-height: 1.28; letter-spacing: -0.035em; display: block; width: 100%;}
.category-links > a:hover, .category-links > a:focus-visible{text-decoration: underline; text-underline-offset: 6px;}
@media (max-width: 1023px){
.activity{display: block;}
.activity > .category-rail{min-width: 0px;}
}

/* ---- Theme additions ---- */
a.photo-card,a.product-photo,a.product-info{color:inherit;text-decoration:none}
a.product-info{display:flex}
.favorite.saved .icon svg{fill:#000}
.product-info .price s{color:#767676;margin-left:6px;font-size:.92em}
.product-info .price ins{text-decoration:none}
.aq-sale-badge{position:absolute;left:12px;top:12px;z-index:2;background:#b3261e;color:#fff;font-size:11px;font-weight:500;letter-spacing:.04em;padding:4px 8px;border-radius:3px;pointer-events:none}
@media (max-width:1023px){.aq-sale-badge{left:8px;top:10px}}
.aq-block-empty{padding:24px;border:1px dashed #bbb;border-radius:8px;color:#666;font-size:14px}
.rail-controls[hidden]{display:none}
.hero-media .hero-poster{object-position:var(--aq-hero-pos,center)}
@media (max-width:1023px){.hero-media .hero-poster{object-position:var(--aq-hero-pos-m,84% center)}}
/* Click-and-drag rows (mouse / trackpad click), as in the original */
.rail-track.aq-draggable,.aq-looks-track.aq-draggable{cursor:grab}
.rail-track.is-dragging,.aq-looks-track.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.rail-track.is-dragging a,.aq-looks-track.is-dragging a{pointer-events:none}
.rail-track img,.aq-looks-track img{-webkit-user-drag:none}
/* Looks: card opens/closes with a fade. The whole card is ONE link box (picture, name, price, stock),
   so a tap anywhere on it opens the product — reliable on touch screens. Only × is separate. */
@keyframes look-card-in{0%{opacity:0;translate:0 4px}100%{opacity:1;translate:0}}
.aq-look-card{display:block;padding:0;cursor:pointer;transition:opacity .2s ease}
.aq-look-card[hidden]{display:none}
.aq-look-card.is-closing{opacity:0;pointer-events:none}
.aq-look-card a.aq-look-card-link{display:grid;grid-template-columns:68px 1fr;gap:12px 16px;align-items:center;padding:18px 16px;min-height:0;color:inherit;text-decoration:none;font-size:inherit;font-weight:inherit;-webkit-tap-highlight-color:rgba(0,0,0,.04);border-radius:inherit}
.aq-look-card a.aq-look-card-link > img{width:68px;height:82px;object-fit:contain;align-self:center;max-width:none}
.aq-look-card a.aq-look-card-link > div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 8px 0 4px}
.aq-look-card a.aq-look-card-link > .aq-look-card-header{grid-column:1 / -1;margin:-8px 0 0;padding-right:40px;min-height:28px}
.aq-look-card-link:hover strong,.aq-look-card-link:focus-visible strong{text-decoration:underline;text-underline-offset:3px}
.aq-look-card-link:focus-visible{outline:2px solid #111;outline-offset:-4px}
.aq-look-card-close{position:absolute;top:4px;right:4px;z-index:1}
@media (max-width:1023px){
	.aq-look-card a.aq-look-card-link{grid-template-columns:60px 1fr;gap:10px 14px;padding:16px 12px}
	.aq-look-card a.aq-look-card-link > img{width:60px}
}
@media (max-width:700px){
	.aq-look-card a.aq-look-card-link{grid-template-columns:48px 1fr;gap:8px 12px;padding:14px 12px}
	.aq-look-card a.aq-look-card-link > img{width:48px;height:72px}
}
/* Looks: ripple around the + buttons */
@keyframes match-dot-ripple{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.8);opacity:0}}
.aq-hotspot::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.06);pointer-events:none;animation:match-dot-ripple 2.8s ease-out infinite}
.aq-look .aq-hotspot:nth-of-type(2)::before{animation-delay:.9s}
.aq-look .aq-hotspot:nth-of-type(3)::before{animation-delay:1.8s}
.aq-hotspot.active::before{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.aq-hotspot::before{animation:none;opacity:0}.aq-look-card{transition:none}}

/* Smooth loading: lazy pictures fade in once downloaded (only when JavaScript runs, so nothing can stay hidden) */
.aq-js main img[loading="lazy"]{opacity:0;transition:opacity .35s ease,transform .6s}
.aq-js main img[loading="lazy"].aq-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){.aq-js main img[loading="lazy"]{transition:none}}