*,*::before,*::after{box-sizing:border-box}html{min-width:320px;background:var(--color-canvas);scroll-behavior:smooth}body{min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden;background:var(--color-canvas);color:var(--color-text);font-family:var(--font-family-body);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{color:inherit;-webkit-tap-highlight-color:transparent}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.58}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}img{display:block;max-width:100%;object-fit:contain}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-family-heading);letter-spacing:-.025em}.skip-link{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-150%);padding:12px 16px;border-radius:12px;background:var(--color-accent);color:var(--color-accent-ink)}.skip-link:focus{transform:translateY(0)}.app-shell{min-height:100dvh;padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}.app-main{width:100%;animation:page-enter var(--motion-standard) var(--motion-ease-out) both}.page-shell{max-width:var(--content-max);margin-inline:auto;padding:20px var(--page-x) calc(var(--nav-height) + 32px)}
.app-header{position:sticky;top:0;z-index:20;display:flex;min-height:var(--header-height);align-items:center;justify-content:space-between;padding:8px var(--page-x);border-bottom:1px solid var(--color-border);background:rgba(6,8,5,.86);backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-family-heading);font-size:clamp(18px,4.6vw,24px);font-weight:700;letter-spacing:-.045em}.brand b{color:var(--color-accent);font-weight:700}.brand-mark{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--color-border-strong);border-radius:10px;background:var(--color-surface-raised);color:var(--color-accent)}.brand-mark svg{width:18px;height:18px}.header-actions{display:flex;align-items:center;gap:8px}.compact-control,.cart-button{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:6px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);font-size:12px;font-weight:720}.cart-button{position:relative}.cart-button>span{display:grid;min-width:17px;height:17px;place-items:center;border-radius:99px;background:var(--color-accent);color:var(--color-accent-ink);font-size:10px;font-weight:850}
.bottom-nav{position:fixed;z-index:30;right:0;bottom:0;left:0;display:grid;min-height:calc(var(--nav-height) + env(safe-area-inset-bottom));grid-template-columns:repeat(5,1fr);padding:7px var(--page-x) max(7px,env(safe-area-inset-bottom));border-top:1px solid var(--color-border);background:rgba(10,15,8,.94);backdrop-filter:blur(20px)}.nav-item{display:flex;min-height:48px;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;color:var(--color-text-muted);font-size:10px;font-weight:650;text-decoration:none}.nav-item svg{width:19px;height:19px}.nav-item.active{color:var(--color-accent);background:rgba(151,197,27,.1)}
.home-main{max-width:none}.home-hero{position:relative;display:flex;min-height:min(74svh,660px);align-items:stretch;overflow:hidden;background-color:var(--color-canvas);background-image:url("../assets/images/glendale-hero-scene-mobile-v1.png");background-position:right center;background-repeat:no-repeat;background-size:cover}.home-hero::after{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,5,.98),rgba(6,8,5,.87) 38%,rgba(6,8,5,.16) 74%,transparent),linear-gradient(135deg,rgba(105,145,17,.28),transparent 62%);content:""}.hero-content{position:relative;z-index:1;display:flex;width:min(60%,430px);min-height:inherit;flex-direction:column;justify-content:center;padding:32px var(--page-x)}.hero-kicker,.bike-category,.browse-heading>span,.page-title span,.order-card>span,.modal-head span{color:var(--color-accent);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.hero-content h1{max-width:7ch;margin-top:10px;font-size:clamp(40px,11vw,78px);line-height:.87}.primary-button,.secondary-button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:0 16px;font-size:14px;font-weight:800;text-decoration:none;transition:transform var(--motion-fast) var(--motion-ease-out),background-color var(--motion-fast) ease}.primary-button{margin-top:20px;background:var(--color-accent);color:var(--color-accent-ink)}.secondary-button{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text)}.primary-button svg,.secondary-button svg{width:17px;height:17px}.primary-button:active,.secondary-button:active{transform:scale(.97)}.home-catalog{padding:24px 0 calc(var(--nav-height) + 28px);background:var(--color-canvas)}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-header h2{font-size:clamp(25px,7vw,38px)}.link-button{min-height:44px;background:transparent;color:var(--color-accent);font-size:13px;font-weight:800}.home-product-carousel{display:grid;grid-auto-columns:calc((100vw - (var(--page-x)*2) - 16px)/3);grid-auto-flow:column;gap:8px;overflow-x:auto;padding:0 var(--page-x) 10px;scroll-snap-type:x proximity;scrollbar-width:none}.home-product-carousel::-webkit-scrollbar{display:none}
.bike-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-card);color:inherit;cursor:pointer;scroll-snap-align:start;transition:transform var(--motion-standard) var(--motion-ease-out),border-color var(--motion-standard) ease,background-color var(--motion-standard) ease}.bike-card-image{position:relative;display:grid;aspect-ratio:1/1;place-items:center;overflow:hidden;background:radial-gradient(circle at 54% 22%,rgba(151,197,27,.30),transparent 39%),linear-gradient(145deg,#182015,#0b1008 70%)}.bike-card-image::after{position:absolute;bottom:10%;left:14%;width:72%;height:10%;border-radius:50%;background:rgba(0,0,0,.48);filter:blur(9px);content:""}.bike-card-image img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain!important;filter:brightness(1.13) contrast(1.02) saturate(1.04);transform:scale(1.05)}.heart-button{position:absolute;z-index:2;top:8px;right:8px;display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--color-border);border-radius:11px;background:rgba(10,15,8,.72);color:var(--color-text);backdrop-filter:blur(10px)}.heart-button svg{width:16px;height:16px}.heart-button.active{color:#ff8aa1}.heart-button.active svg{fill:currentColor}.bike-card-copy{min-width:0;padding:10px}.bike-card-copy h3{display:-webkit-box;overflow:hidden;margin-top:4px;font-family:var(--font-family-body);font-size:clamp(10px,2.9vw,14px);font-weight:760;line-height:1.08;-webkit-box-orient:vertical;-webkit-line-clamp:2}.bike-card-copy>strong{display:block;margin-top:7px;color:var(--color-accent-strong);font-family:var(--font-family-heading);font-size:clamp(17px,4.7vw,28px);line-height:1}.bike-card-copy ul{display:grid;gap:4px;margin:9px 0 0;padding:0;list-style:none}.bike-card-copy li{display:flex;align-items:center;gap:4px;color:var(--color-text-muted);font-size:clamp(8px,2.2vw,11px);line-height:1.1}.bike-card-copy li svg{width:11px;height:11px;color:var(--color-accent)}
.browse-heading{margin-bottom:16px}.browse-heading h1,.page-title h1{margin-top:4px;font-size:clamp(32px,9vw,52px);line-height:.9}.search-box{display:flex;min-height:48px;align-items:center;gap:10px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);padding:0 14px}.search-box svg{width:18px;color:var(--color-text-muted)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--color-text)}.category-bar{display:flex;gap:8px;overflow-x:auto;margin:16px 0 20px;padding-bottom:2px;scrollbar-width:none}.category-chip{display:inline-flex;min-height:40px;align-items:center;gap:7px;flex:0 0 auto;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-muted);padding:0 13px;font-size:12px;font-weight:750}.category-chip.active{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink)}.category-chip svg{width:15px;height:15px}.bike-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bike-grid .bike-card-copy{padding:12px}.empty-state{display:flex;min-height:250px;grid-column:1/-1;align-items:center;justify-content:center;flex-direction:column;gap:12px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-muted);padding:24px;text-align:center}.empty-state>svg{width:36px;height:36px;color:var(--color-accent)}.empty-state h1,.empty-state h2{color:var(--color-text);font-size:26px}.empty-state p{max-width:30ch}.empty-state .primary-button{margin-top:4px}
.back-link{display:inline-flex;min-height:44px;align-items:center;gap:7px;margin-bottom:6px;background:transparent;color:var(--color-text-muted);font-size:13px;font-weight:750}.back-link svg{width:17px}.product-stage{display:grid;gap:20px}.product-image{display:grid;min-height:clamp(300px,75vw,520px);place-items:center;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:radial-gradient(circle at 55% 28%,rgba(169,215,42,.30),transparent 34%),linear-gradient(145deg,#162012,#0a0f08 70%)}.product-image img{width:100%;height:100%;filter:brightness(1.12) contrast(1.03);transform:scale(1.04)}.product-info{padding-bottom:10px}.title-row{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-top:4px}.title-row h1{font-size:clamp(34px,9vw,60px);line-height:.9}.product-info>p{max-width:48ch;margin-top:12px;color:var(--color-text-muted)}.detail-price{display:block;margin-top:18px;color:var(--color-accent-strong);font-family:var(--font-family-heading);font-size:clamp(36px,10vw,60px);line-height:.9}.availability{display:inline-flex;align-items:center;gap:6px;margin-top:13px;color:var(--color-text-muted);font-size:12px;font-weight:650}.availability svg{width:16px;color:var(--color-accent)}.spec-panel{margin-top:22px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:16px}.spec-panel h2{font-size:22px}.spec-panel ul{display:grid;gap:0;margin:10px 0 0;padding:0;list-style:none}.spec-panel li{display:flex;min-height:43px;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:13px}.spec-panel li span{display:flex;align-items:center;gap:7px}.spec-panel li svg{width:16px;color:var(--color-accent)}.spec-panel li b{color:var(--color-text);font-weight:700;text-align:right}.sticky-actions{position:sticky;z-index:10;bottom:calc(var(--nav-height) + 8px);display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;padding:8px;border:1px solid var(--color-border);border-radius:16px;background:rgba(10,15,8,.9);backdrop-filter:blur(16px)}.sticky-actions .primary-button,.sticky-actions .secondary-button{width:100%;margin:0}
.page-title{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:20px}.cart-counter{display:grid;width:35px;height:35px;place-items:center;border-radius:50%;background:var(--color-accent);color:var(--color-accent-ink);font-weight:850}.cart-layout{display:grid;gap:16px}.cart-row{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:13px;align-items:start;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:12px;transition:opacity 180ms ease,transform 180ms var(--motion-ease-out)}.cart-row.is-removing{opacity:0;transform:translateX(18px)}.cart-row-image{display:grid;aspect-ratio:1;place-items:center;overflow:hidden;border-radius:12px;background:var(--color-surface-raised)}.cart-row-image img{width:100%;height:100%;filter:brightness(1.1)}.cart-row h2{font-family:var(--font-family-body);font-size:15px;line-height:1.1}.cart-row p{display:-webkit-box;overflow:hidden;margin-top:5px;color:var(--color-text-muted);font-size:11px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.quantity-control{display:inline-flex;min-height:36px;align-items:center;gap:10px;margin-top:12px;border:1px solid var(--color-border);border-radius:10px;padding:0 5px}.quantity-control button{display:grid;width:28px;height:28px;place-items:center;border-radius:7px;background:var(--color-surface-hover);font-size:18px}.quantity-control span{min-width:12px;text-align:center;font-weight:800}.cart-total{display:flex;min-height:100%;flex-direction:column;align-items:end;justify-content:space-between;gap:10px;font-family:var(--font-family-heading);font-size:21px}.cart-total button{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:transparent;color:var(--color-text-muted)}.cart-total button:hover{color:var(--color-danger)}.order-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-raised);padding:18px}.order-card>div{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:12px}.order-card p{color:var(--color-text-muted);font-size:13px}.order-card strong{font-family:var(--font-family-heading);font-size:30px;line-height:.9}.order-note{margin-top:14px}.checkout-button{width:100%;margin-top:18px}.account-page{display:grid;min-height:calc(100dvh - var(--header-height) - var(--nav-height));place-items:center}.account-card{max-width:520px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:clamp(24px,6vw,48px);text-align:center}.account-card>span{display:inline-grid;width:48px;height:48px;place-items:center;border-radius:14px;background:rgba(151,197,27,.14);color:var(--color-accent)}.account-card>span svg{width:23px}.account-card h1{margin-top:16px;font-size:clamp(32px,9vw,52px);line-height:.9}.account-card p{margin:14px auto 0;color:var(--color-text-muted)}.account-card .primary-button{margin-top:20px}
.toast-region{position:fixed;z-index:100;right:var(--page-x);bottom:calc(var(--nav-height) + 18px);left:var(--page-x);display:flex;justify-content:center;pointer-events:none}.toast{display:flex;align-items:center;gap:9px;border:1px solid var(--color-border-strong);border-radius:14px;background:rgba(16,23,13,.96);box-shadow:var(--shadow-card);padding:12px 14px;color:var(--color-text);font-size:13px;font-weight:700;transition:opacity var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease-out)}.toast svg{width:18px;color:var(--color-accent)}.toast-error svg{color:var(--color-danger)}.toast-out{opacity:0;transform:translateY(8px)}.modal-backdrop{position:fixed;z-index:80;inset:0;display:flex;align-items:end;justify-content:center;background:rgba(0,0,0,.68);padding:16px}.modal-sheet{width:min(100%,600px);max-height:min(88dvh,720px);overflow:auto;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:0 -18px 70px rgba(0,0,0,.45);padding:20px;animation:sheet-in var(--motion-standard) var(--motion-ease-out) both}.modal-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.modal-head h2{margin-top:4px;font-size:34px;line-height:.9}.modal-head button{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:var(--color-surface-raised)}.modal-head button svg{width:19px}.checkout-product{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:10px;align-items:center;margin:18px 0;border-block:1px solid var(--color-border);padding-block:14px}.checkout-product img{width:66px;height:66px;border-radius:10px;background:var(--color-surface-raised)}.checkout-product div{display:grid;gap:3px}.checkout-product span{color:var(--color-text-muted);font-size:12px}.checkout-product strong{font-family:var(--font-family-heading);font-size:21px}fieldset{display:grid;gap:12px;margin:0;border:0;padding:0}legend{margin-bottom:12px;font-family:var(--font-family-heading);font-size:22px;font-weight:700}fieldset label{display:grid;gap:6px;color:var(--color-text-muted);font-size:12px;font-weight:700}fieldset input{min-height:46px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-canvas-soft);color:var(--color-text);padding:0 12px}.terms-check{display:flex;align-items:start;gap:9px;margin-top:16px;color:var(--color-text-muted);font-size:12px}.terms-check input{width:18px;height:18px;accent-color:var(--color-accent)}.is-pending{pointer-events:none}.spinner{animation:spin 800ms linear infinite}
@media (hover:hover) and (pointer:fine){.bike-card:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover);transform:translateY(-4px)}.primary-button:hover{background:var(--color-accent-strong)}.secondary-button:hover,.compact-control:hover,.cart-button:hover{background:var(--color-surface-hover)}}@media (min-width:700px){.home-hero{min-height:clamp(440px,54vw,680px);background-image:url("../assets/images/glendale-hero-scene-desktop-v1.png")}.hero-content{width:min(43%,500px);padding-left:max(var(--page-x),calc((100vw - var(--content-max))/2))}.home-product-carousel{grid-auto-columns:minmax(190px,22vw);gap:14px}.bike-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-stage{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:start}.product-info{padding:18px 0}.cart-layout{grid-template-columns:minmax(0,1fr) minmax(300px,.42fr)}.order-card{position:sticky;top:82px}.toast-region{left:auto;width:max-content}}@media (min-width:1024px){.bike-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.home-product-carousel{padding-inline:max(var(--page-x),calc((100vw - var(--content-max))/2))}.home-product-carousel{grid-auto-columns:minmax(205px,17vw)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@keyframes page-enter{from{opacity:.01;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes sheet-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}

/* Home framing and carousel product treatment */
.home-main{padding-inline:var(--page-x)}
.home-hero{margin-inline:calc(var(--page-x) * -1)}
.home-catalog .page-pad,.home-product-carousel{padding-inline:0}
.bike-card-image{isolation:isolate}
.bike-card-image::before{position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,3,.14) 0%,transparent 38%,rgba(3,5,3,.76) 100%);content:""}
.bike-card-image::after{z-index:1}
.bike-card-image img{z-index:2}
.heart-button{z-index:3}
@media (min-width:700px){.home-main{padding-inline:max(var(--page-x),calc((100vw - var(--content-max))/2))}}
@media (min-width:1024px){.home-product-carousel{padding-inline:0}}
