/** Shopify CDN: Minification failed Line 16:2 Unexpected "1" Line 33:6 Unexpected "13" Line 34:5 Expected identifier but found "." Line 36:7 Unexpected "30" Line 42:7 Unexpected "35" Line 46:7 Unexpected "35" Line 47:7 Expected identifier but found "36" Line 48:7 Expected identifier but found "37" Line 49:7 Expected identifier but found "38" Line 50:7 Unexpected "39" ... and 731 more hidden warnings **/ 1 /* ============================================================ 2 - SPORTIFY EG — Mobile Optimization CSS 2 + SPORTIFY EG — Mobile Optimization CSS (v2 — Atelier-precise) 3 Paste into: Shopify Admin → Online Store → Themes → 4 - Customize → (bottom-left) Custom CSS 5 - OR: Online Store → Themes → Edit Code → 6 - assets/base.css (append at the bottom) 4 + Edit Code → assets → mobile-optimization.css 5 + Link in theme.liquid : 6 + 7 ============================================================ */ 8 9 /* ---------------------------------------------------------- 10 - 1. GLOBAL MOBILE RESET 10 + 1. GLOBAL RESET 11 ---------------------------------------------------------- */ 12 @media screen and (max-width: 768px) { 13 html, body { ... 29 } 30 31 /* ---------------------------------------------------------- 32 - 2. STICKY HEADER + SHADOW 32 + 2. ANNOUNCEMENT BAR 33 ---------------------------------------------------------- */ 34 @media screen and (max-width: 768px) { 35 - header, 36 - .header, 37 - .site-header, 38 - #shopify-section-header { 35 + .announcement-bar { 36 + padding-top: 7px !important; 37 + padding-bottom: 7px !important; 38 + } 39 + 40 + .announcement-bar__text { 41 + font-size: 11px !important; 42 + line-height: 1.4 !important; 43 + letter-spacing: 0.04em !important; 44 + } 45 +} 46 + 47 +/* ---------------------------------------------------------- 48 + 3. HEADER — STICKY + SHADOW + COMPACT 49 + ---------------------------------------------------------- */ 50 +@media screen and (max-width: 768px) { 51 + /* Sticky */ 52 + .header-section { 53 position: sticky !important; 54 top: 0 !important; 41 - z-index: 200 !important; 42 - background: #ffffff !important; 43 - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important; 44 - transition: box-shadow 0.2s ease; 55 + z-index: 300 !important; 56 } 57 47 - /* Reduce header height on mobile */ 48 - .header__heading, 49 - .header-wrapper, 50 - .header__row { 58 + .header { 59 + background: var(--color-background, #fff) !important; 60 + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; 61 + } 62 + 63 + /* Tighten vertical padding */ 64 + .header__columns { 65 padding-top: 10px !important; 66 padding-bottom: 10px !important; 67 } 68 55 - /* Logo — cap at 120px wide on mobile */ 56 - .header__heading-logo, 57 - .site-header__logo img, 58 - .header__logo img, 59 - header .logo img { 60 - max-height: 38px !important; 69 + /* Logo — cap size */ 70 + .header-logo__image { 71 + max-height: 36px !important; 72 width: auto !important; 62 - max-width: 130px !important; 73 } 74 65 - /* All header icon buttons — 44px minimum touch target */ 75 + .header-logo__image-container { 76 + max-width: 120px !important; 77 + } 78 + 79 + /* All header icon buttons — 44×44px minimum touch target */ 80 .header__icon, 67 - .site-header__icons a, 68 - .header__menu-toggle, 69 - header button, 70 - header a[class*="icon"], 71 - .cart-count-bubble { 72 - min-width: 44px; 73 - min-height: 44px; 81 + .header-actions__action, 82 + .account-button { 83 + min-width: 44px !important; 84 + min-height: 44px !important; 85 display: inline-flex !important; 75 - align-items: center; 76 - justify-content: center; 86 + align-items: center !important; 87 + justify-content: center !important; 88 } 89 79 - /* Cart bubble count — better visibility */ 80 - .cart-count-bubble, 81 - .header__cart-count { 82 - font-size: 10px !important; 90 + /* Cart bubble count */ 91 + .cart-bubble { 92 + font-size: 9px !important; 93 font-weight: 700 !important; 84 - background: #000 !important; 85 - color: #fff !important; 86 - border-radius: 50%; 87 - min-width: 18px; 88 - height: 18px; 89 - display: flex; 90 - align-items: center; 91 - justify-content: center; 94 } 95 + 96 + .cart-bubble__text-count { 97 + font-weight: 700 !important; 98 + } 99 + 100 + /* Hide desktop nav text labels on mobile */ 101 + .account-button__text { 102 + display: none !important; 103 + } 104 } 105 106 /* ---------------------------------------------------------- 96 - 3. MOBILE MENU DRAWER 107 + 4. MOBILE MENU DRAWER 108 ---------------------------------------------------------- */ 109 @media screen and (max-width: 768px) { 99 - /* Menu drawer full-width on mobile */ 100 - .menu-drawer, 101 - .mobile-nav, 102 - [class*="mobile-menu"], 103 - details[class*="menu"] { 110 + .menu-drawer-container { 111 width: 100% !important; 112 max-width: 100vw !important; 113 } 114 108 - /* Nav links — large touch areas */ 109 - .menu-drawer__navigation a, 110 - .mobile-nav a, 111 - [class*="mobile-menu"] a, 112 - .header__menu-item a { 113 - padding: 14px 20px !important; 114 - font-size: 15px !important; 115 + /* Nav links — big touch areas */ 116 + .menu-drawer__menu-item { 117 + padding: 0 !important; 118 + border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; 119 + } 120 + 121 + .menu-drawer__menu-item-text { 122 + padding: 15px 20px !important; 123 + font-size: 14px !important; 124 font-weight: 600 !important; 116 - letter-spacing: 0.04em; 117 - display: block; 118 - border-bottom: 1px solid #f0f0f0; 125 + letter-spacing: 0.04em !important; 126 } 127 121 - /* Remove desktop nav on mobile */ 122 - .header__menu, 123 - .header__navigation, 124 - nav[class*="desktop"] { 125 - display: none !important; 128 + .menu-list__link { 129 + padding: 13px 20px !important; 130 + font-size: 13px !important; 131 + display: block !important; 132 + font-weight: 500 !important; 133 } 134 + 135 + .menu-list__link-title { 136 + font-size: 13px !important; 137 + } 138 } 139 140 /* ---------------------------------------------------------- 130 - 4. HERO / SLIDESHOW SECTION 141 + 5. HERO / SLIDESHOW 142 ---------------------------------------------------------- */ 143 @media screen and (max-width: 768px) { 133 - /* Hero — proper mobile height (not too tall) */ 134 - .slideshow, 135 - .banner, 136 - .hero, 137 - [class*="slideshow"], 138 - [class*="hero-banner"], 139 - .section-hero { 140 - min-height: 65vh !important; 141 - max-height: 75vh !important; 142 - position: relative; 144 + .slideshow-section { 145 + min-height: 62vh !important; 146 + max-height: 72vh !important; 147 } 148 145 - /* Hero image — cover the container */ 146 - .slideshow__slide img, 147 - .banner__image, 148 - .hero img, 149 - [class*="slideshow"] img, 150 - [class*="hero-banner"] img { 149 + /* Image — fill container, focus top for apparel */ 150 + .slide__image-container { 151 + height: 62vh !important; 152 + max-height: 72vh !important; 153 + } 154 + 155 + .slide__image { 156 width: 100% !important; 157 height: 100% !important; 158 object-fit: cover !important; 159 object-position: center top !important; 160 } 161 157 - /* Hero text — readable on mobile */ 158 - .slideshow__text, 159 - .banner__content, 160 - .hero__text, 161 - [class*="slideshow__text"], 162 - [class*="banner__content"] { 163 - padding: 20px 16px !important; 162 + /* Overlay content */ 163 + .slide__content { 164 + padding: 20px 16px 24px !important; 165 text-align: center !important; 166 } 167 167 - /* Hero headline */ 168 - .slideshow__heading, 169 - .banner__heading, 170 - .hero__heading, 171 - [class*="slideshow__heading"], 172 - [class*="banner__heading"], 173 - [class*="hero__heading"] { 174 - font-size: clamp(26px, 7vw, 40px) !important; 175 - line-height: 1.15 !important; 176 - letter-spacing: -0.02em !important; 177 - margin-bottom: 12px !important; 168 + /* Headline using fluid sizing */ 169 + .slide__content h1, 170 + .slide__content h2, 171 + .slide__content .h1, 172 + .slide__content .h2 { 173 + font-size: clamp(22px, 6.5vw, 36px) !important; 174 + line-height: 1.12 !important; 175 + letter-spacing: -0.01em !important; 176 + margin-bottom: 10px !important; 177 } 178 180 - /* Hero subtext */ 181 - .slideshow__subheading, 182 - .banner__subheading, 183 - [class*="subheading"] { 184 - font-size: 13px !important; 185 - letter-spacing: 0.05em; 186 - margin-bottom: 20px !important; 179 + /* Subtext */ 180 + .slide__content p, 181 + .slide__content .h5, 182 + .slide__content .h6 { 183 + font-size: 12px !important; 184 + letter-spacing: 0.06em !important; 185 + margin-bottom: 18px !important; 186 } 187 189 - /* Hero CTA button — big, full-width friendly */ 190 - .slideshow__button, 191 - .banner__button, 192 - .hero__button, 193 - [class*="banner__button"], 194 - [class*="slideshow__button"] { 195 - min-height: 50px !important; 196 - padding: 14px 32px !important; 197 - font-size: 13px !important; 198 - letter-spacing: 0.08em !important; 188 + /* CTA button */ 189 + .slide__content .button { 190 + min-height: 48px !important; 191 + padding: 0 28px !important; 192 + font-size: 12px !important; 193 font-weight: 700 !important; 200 - border-radius: 2px !important; 194 + letter-spacing: 0.1em !important; 195 } 202 - 203 - /* Slideshow dots/arrows — reposition */ 204 - .slideshow__controls, 205 - [class*="slider-buttons"], 206 - [class*="slideshow-controls"] { 207 - bottom: 16px !important; 208 - } 209 - 210 - /* Hide slider arrows on mobile — use swipe */ 211 - .slideshow__prev, 212 - .slideshow__next, 213 - [class*="slider-button--prev"], 214 - [class*="slider-button--next"] { 215 - display: none !important; 216 - } 196 } 197 198 /* ---------------------------------------------------------- 220 - 5. ANNOUNCEMENT BAR 199 + 6. PRODUCT GRID — FORCE 2 COLUMNS 200 ---------------------------------------------------------- */ 201 @media screen and (max-width: 768px) { 223 - .announcement-bar, 224 - [class*="announcement"] { 225 - font-size: 11px !important; 226 - padding: 7px 12px !important; 227 - text-align: center; 228 - line-height: 1.4; 229 - } 230 -} 231 - 232 -/* ---------------------------------------------------------- 233 - 6. SECTION HEADINGS & SPACING 234 - ---------------------------------------------------------- */ 235 -@media screen and (max-width: 768px) { 236 - /* Tighten section padding */ 237 - .section, 238 - [class*="section"], 239 - .page-width { 240 - padding-left: 12px !important; 241 - padding-right: 12px !important; 242 - } 243 - 244 - .section + .section, 245 - [class*="section"] + [class*="section"] { 246 - margin-top: 32px !important; 247 - } 248 - 249 - /* Section title */ 250 - .section__header h2, 251 - .collection__title, 252 - [class*="section-header"] h2, 253 - [class*="section__title"], 254 - .title { 255 - font-size: clamp(18px, 5vw, 26px) !important; 256 - text-align: center !important; 257 - margin-bottom: 16px !important; 258 - letter-spacing: 0.04em !important; 259 - } 260 -} 261 - 262 -/* ---------------------------------------------------------- 263 - 7. PRODUCT GRID — 2 COLUMNS ON MOBILE 264 - ---------------------------------------------------------- */ 265 -@media screen and (max-width: 768px) { 266 - /* Force 2-column grid */ 267 - .product-grid, 268 - .collection-grid, 269 - .grid--2-col-tablet-down, 270 - ul[class*="product-grid"], 271 - [class*="product-list"], 272 - .collection ul, 273 - .grid.grid--1-col { 202 + .product-grid { 203 display: grid !important; 204 grid-template-columns: repeat(2, 1fr) !important; 205 gap: 10px !important; 206 padding: 0 !important; 278 - list-style: none !important; 279 - margin: 0 !important; 207 } 208 282 - /* Individual card */ 283 - .product-card-wrapper, 284 - .card-wrapper, 285 - .grid__item, 286 - li[class*="product"] { 209 + .product-grid__item { 210 width: 100% !important; 211 margin: 0 !important; 289 - padding: 0 !important; 212 } 213 } 214 215 /* ---------------------------------------------------------- 294 - 8. PRODUCT CARDS 216 + 7. PRODUCT CARDS 217 ---------------------------------------------------------- */ 218 @media screen and (max-width: 768px) { 297 - /* Card container */ 298 - .card, 299 - .product-card, 300 - [class*="product-card"]:not([class*="__"]) { 301 - border-radius: 4px; 302 - overflow: hidden; 303 - position: relative; 304 - background: #fff; 219 + .product-card { 220 + display: flex !important; 221 + flex-direction: column !important; 222 + height: 100% !important; 223 } 224 307 - /* Product image — consistent square aspect ratio */ 308 - .card__media, 309 - .card .media, 310 - .product-card__image-wrapper, 311 - [class*="card__media"], 312 - [class*="card-media"] { 225 + /* Image gallery — consistent 3:4 portrait ratio */ 226 + .card-gallery { 227 aspect-ratio: 3 / 4 !important; 228 overflow: hidden !important; 229 width: 100% !important; 230 + position: relative !important; 231 + flex-shrink: 0 !important; 232 } 233 318 - .card__media img, 319 - .card .media img, 320 - .product-card__image-wrapper img, 321 - [class*="card__media"] img { 234 + .product-media-container { 235 width: 100% !important; 236 height: 100% !important; 237 + } 238 + 239 + .product-media { 240 + width: 100% !important; 241 + height: 100% !important; 242 + } 243 + 244 + .product-media__image { 245 + width: 100% !important; 246 + height: 100% !important; 247 object-fit: cover !important; 248 object-position: top center !important; 326 - transition: transform 0.4s ease; 249 } 250 329 - /* Card info section */ 330 - .card__information, 331 - .card__content, 332 - .product-card__info, 333 - [class*="card__information"], 334 - [class*="card-information"] { 251 + /* Card details section */ 252 + .product-grid-view-zoom-out--details { 253 padding: 8px 8px 10px !important; 254 + flex: 1 !important; 255 + display: flex !important; 256 + flex-direction: column !important; 257 + gap: 4px !important; 258 } 259 338 - /* Product title */ 339 - .card__heading, 340 - .card-information__title, 341 - .product-card__title, 342 - [class*="card__heading"], 343 - [class*="card-title"] { 260 + /* Product title — 2-line clamp */ 261 + .product-card__link { 262 font-size: 11px !important; 263 font-weight: 600 !important; 346 - line-height: 1.3 !important; 347 - letter-spacing: 0.03em !important; 348 - margin-bottom: 4px !important; 349 - /* Clamp to 2 lines */ 264 + line-height: 1.35 !important; 265 + letter-spacing: 0.02em !important; 266 display: -webkit-box !important; 267 -webkit-line-clamp: 2 !important; 268 -webkit-box-orient: vertical !important; 269 overflow: hidden !important; 270 + text-decoration: none !important; 271 } 272 356 - /* Price */ 357 - .price, 358 - .card-information__price, 359 - .product-card__price, 360 - [class*="price"]:not([class*="button"]):not([class*="filter"]) { 273 + /* Price group */ 274 + .price-item__group { 275 + display: flex !important; 276 + flex-wrap: wrap !important; 277 + gap: 4px !important; 278 + align-items: baseline !important; 279 + } 280 + 281 + .price-item--sale { 282 font-size: 12px !important; 283 font-weight: 700 !important; 363 - letter-spacing: 0.02em !important; 284 } 285 366 - /* Sale / compare price */ 367 - .price--on-sale .price__sale, 368 - [class*="price--sale"], 369 - [class*="price-sale"] { 370 - color: #c00 !important; 371 - } 372 - 373 - s.price__compare, 374 - .price__was, 375 - [class*="price-compare"], 376 - del { 286 + .price-item--regular.compare-at-price { 287 font-size: 10px !important; 378 - opacity: 0.5; 379 - text-decoration: line-through; 288 + opacity: 0.45 !important; 289 + text-decoration: line-through !important; 290 + font-weight: 400 !important; 291 } 292 293 /* Sale badge */ 383 - .badge, 384 - .card__badge, 385 - [class*="badge"] { 294 + .product-badges { 295 + z-index: 2 !important; 296 + } 297 + 298 + .product-badges .badge, 299 + .product-badges span { 300 font-size: 9px !important; 387 - padding: 3px 6px !important; 301 + padding: 3px 7px !important; 302 font-weight: 700 !important; 389 - letter-spacing: 0.06em; 390 - border-radius: 2px; 303 + letter-spacing: 0.06em !important; 304 } 305 393 - /* Quick-add / Add button on card */ 394 - .quick-add__submit, 395 - .card__footer button, 396 - [class*="quick-add"] button, 397 - .product-card__add { 398 - height: 38px !important; 306 + /* Quick-add buttons — full width, tall */ 307 + .quick-add { 308 + padding: 0 8px 10px !important; 309 + } 310 + 311 + .quick-add__button { 312 + width: 100% !important; 313 + min-height: 38px !important; 314 font-size: 10px !important; 315 font-weight: 700 !important; 401 - letter-spacing: 0.08em !important; 402 - width: 100% !important; 316 + letter-spacing: 0.09em !important; 317 border-radius: 2px !important; 404 - margin-top: 6px !important; 318 } 319 + 320 + .add-to-cart-text__content { 321 + font-size: 10px !important; 322 + letter-spacing: 0.09em !important; 323 + } 324 } 325 326 /* ---------------------------------------------------------- 409 - 9. BRAND COLLECTION TILES (ALO / LULU / ADIDAS ETC.) 327 + 8. COLLECTION / BRAND TILES (resource-card) 328 ---------------------------------------------------------- */ 329 @media screen and (max-width: 768px) { 412 - /* Brand grid — 2x2 on mobile */ 413 - [class*="collection-list"], 414 - [class*="brand-grid"], 415 - [class*="collections-grid"] { 416 - display: grid !important; 417 - grid-template-columns: repeat(2, 1fr) !important; 418 - gap: 8px !important; 330 + /* Horizontal scroll rail for brand strip — preserve it */ 331 + .collections-slider { 332 + -webkit-overflow-scrolling: touch !important; 333 + scroll-snap-type: x mandatory !important; 334 + scrollbar-width: none !important; 335 } 336 421 - /* Brand tile */ 422 - [class*="collection-list__item"], 423 - [class*="brand-tile"], 424 - [class*="collections-grid__item"] { 425 - aspect-ratio: 1 / 1 !important; 426 - overflow: hidden !important; 427 - border-radius: 4px !important; 428 - position: relative !important; 337 + .collections-slider::-webkit-scrollbar { 338 + display: none !important; 339 } 340 431 - [class*="collection-list__item"] img, 432 - [class*="brand-tile"] img, 433 - [class*="collections-grid__item"] img { 434 - width: 100% !important; 435 - height: 100% !important; 436 - object-fit: cover !important; 341 + .collections-slider__item { 342 + scroll-snap-align: start !important; 343 } 344 439 - /* Brand title overlay */ 440 - [class*="collection-list__item"] h3, 441 - [class*="brand-tile"] h3, 442 - [class*="collections-grid__item"] h3 { 443 - font-size: 13px !important; 444 - font-weight: 700 !important; 445 - letter-spacing: 0.05em !important; 345 + .collections-slider__link { 346 + min-width: 110px !important; 347 } 447 -} 348 449 -/* ---------------------------------------------------------- 450 - 10. FILTERS & SORT (COLLECTION PAGE) 451 - ---------------------------------------------------------- */ 452 -@media screen and (max-width: 768px) { 453 - /* Filter/sort bar sticky at top of collection */ 454 - .facets__form, 455 - [class*="facets"], 456 - [class*="filter-bar"] { 457 - position: sticky; 458 - top: 60px; 459 - z-index: 100; 460 - background: #fff; 461 - border-bottom: 1px solid #eee; 462 - padding: 10px 12px !important; 463 - } 464 - 465 - /* Filter & Sort buttons — equal width */ 466 - .mobile-facets__open, 467 - [class*="filter-button"], 468 - [class*="sort-button"], 469 - [class*="facets__button"] { 470 - flex: 1; 471 - min-height: 42px !important; 472 - font-size: 12px !important; 349 + /* Resource cards (collections grid) */ 350 + .resource-card__title { 351 + font-size: 11px !important; 352 font-weight: 600 !important; 474 - letter-spacing: 0.05em !important; 475 - border: 1.5px solid #000 !important; 476 - border-radius: 2px !important; 477 - background: #fff !important; 478 - color: #000 !important; 353 + letter-spacing: 0.04em !important; 354 } 355 481 - /* Active filter chip */ 482 - [class*="facets__pill"], 483 - [class*="active-filter"] { 484 - font-size: 10px !important; 485 - padding: 4px 10px !important; 486 - border-radius: 20px !important; 487 - background: #000 !important; 488 - color: #fff !important; 489 - font-weight: 600; 356 + .resource-card__image { 357 + object-fit: cover !important; 358 + object-position: top center !important; 359 } 360 } 361 362 /* ---------------------------------------------------------- 494 - 11. PRODUCT DETAIL PAGE (PDP) 363 + 9. FILTER & SORT BAR 364 ---------------------------------------------------------- */ 365 @media screen and (max-width: 768px) { 497 - /* Product images — full width swipeable */ 498 - .product__media-wrapper, 499 - [class*="product__media"], 500 - [class*="product-images"] { 501 - width: 100% !important; 502 - padding: 0 !important; 503 - margin-bottom: 0 !important; 366 + /* Horizontal facets bar — sticky below header */ 367 + .facets--horizontal { 368 + position: sticky !important; 369 + top: 58px !important; 370 + z-index: 200 !important; 371 + background: var(--color-background, #fff) !important; 372 + border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; 373 + padding: 10px 12px !important; 374 } 375 506 - .product__media-item img, 507 - [class*="product__media"] img { 508 - width: 100% !important; 509 - aspect-ratio: 3/4 !important; 510 - object-fit: cover !important; 376 + /* Filter toggle button */ 377 + .facets-toggle__button { 378 + min-height: 40px !important; 379 + font-size: 11px !important; 380 + font-weight: 700 !important; 381 + letter-spacing: 0.07em !important; 382 + padding: 0 14px !important; 383 } 384 513 - /* Product info stacks below images */ 514 - .product__info-wrapper, 515 - [class*="product__info"], 516 - [class*="product-info"] { 517 - padding: 20px 16px !important; 385 + /* Sort select */ 386 + .sorting-filter__select { 387 + font-size: 11px !important; 388 + font-weight: 600 !important; 389 + min-height: 40px !important; 390 } 391 520 - /* Product title */ 521 - .product__title, 522 - [class*="product__title"] { 523 - font-size: 20px !important; 524 - font-weight: 700 !important; 525 - line-height: 1.2 !important; 526 - margin-bottom: 8px !important; 392 + /* Facets drawer — full screen slide-up */ 393 + .facets--drawer { 394 + border-radius: 16px 16px 0 0 !important; 395 } 396 529 - /* Price on PDP */ 530 - .product__price, 531 - [class*="product__price"] { 532 - font-size: 18px !important; 397 + .facets-drawer__title { 398 + font-size: 16px !important; 399 font-weight: 700 !important; 534 - margin-bottom: 20px !important; 400 + padding: 20px 20px 12px !important; 401 } 402 537 - /* Variant selector (size/color) */ 538 - .variant-selects, 539 - .variant-radios, 540 - [class*="variant"] label { 541 - font-size: 13px !important; 403 + .facets__label { 404 + font-size: 12px !important; 405 font-weight: 600 !important; 406 } 407 545 - /* Size option buttons */ 546 - .variant-radios label, 547 - [class*="swatch"], 548 - [class*="size-option"] { 549 - min-width: 44px !important; 550 - min-height: 44px !important; 551 - font-size: 12px !important; 552 - display: inline-flex !important; 553 - align-items: center !important; 554 - justify-content: center !important; 555 - border-radius: 2px !important; 556 - } 557 - 558 - /* Add to cart — full width, tall */ 559 - .product-form__submit, 560 - [class*="add-to-cart"], 561 - button[name="add"] { 562 - width: 100% !important; 563 - min-height: 54px !important; 564 - font-size: 14px !important; 408 + /* See results button */ 409 + .facets__see-results { 410 + min-height: 50px !important; 411 + font-size: 13px !important; 412 font-weight: 700 !important; 566 - letter-spacing: 0.1em !important; 567 - border-radius: 2px !important; 568 - margin-top: 16px !important; 413 + letter-spacing: 0.08em !important; 414 + width: 100% !important; 415 } 416 571 - /* Product description text */ 572 - .product__description, 573 - [class*="product__description"] { 574 - font-size: 13px !important; 575 - line-height: 1.7 !important; 576 - color: #444 !important; 417 + /* Color swatches — larger on mobile */ 418 + .facets__swatch-wrapper { 419 + min-width: 36px !important; 420 + min-height: 36px !important; 421 } 422 } 423 424 /* ---------------------------------------------------------- 581 - 12. FLOATING STICKY ADD-TO-CART (PDP mobile) 425 + 10. CART DRAWER 426 ---------------------------------------------------------- */ 427 @media screen and (max-width: 768px) { 584 - /* If the theme supports a sticky ATC, enhance it */ 585 - [class*="sticky-atc"], 586 - [class*="sticky-add"], 587 - .product-sticky-bar { 588 - position: fixed !important; 589 - bottom: 0 !important; 590 - left: 0 !important; 591 - right: 0 !important; 592 - z-index: 300 !important; 593 - padding: 12px 16px !important; 594 - background: #fff !important; 595 - box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important; 596 - border-top: 1px solid #eee !important; 597 - } 598 -} 599 - 600 -/* ---------------------------------------------------------- 601 - 13. CART DRAWER / CART PAGE 602 - ---------------------------------------------------------- */ 603 -@media screen and (max-width: 768px) { 604 - /* Cart drawer — full width */ 605 - .cart-drawer, 606 - [class*="cart-drawer"], 607 - [class*="drawer--right"] { 428 + .cart-drawer__dialog { 429 width: 100% !important; 430 max-width: 100vw !important; 431 + border-radius: 0 !important; 432 } 433 612 - /* Cart items */ 613 - .cart-item, 614 - [class*="cart-item"] { 615 - padding: 14px 0 !important; 616 - gap: 12px !important; 434 + .cart-drawer__header { 435 + padding: 16px 20px !important; 436 + border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; 437 } 438 619 - .cart-item__image, 620 - [class*="cart-item__image"] { 621 - width: 80px !important; 622 - height: 80px !important; 623 - flex-shrink: 0; 624 - border-radius: 3px; 625 - object-fit: cover; 439 + .cart-drawer__heading { 440 + font-size: 16px !important; 441 + font-weight: 700 !important; 442 + letter-spacing: 0.04em !important; 443 } 444 628 - /* Checkout button */ 629 - .cart__checkout-button, 630 - [class*="checkout-button"], 631 - button[name="checkout"] { 632 - min-height: 54px !important; 633 - font-size: 14px !important; 445 + /* Cart checkout button */ 446 + .cart-items__empty-button, 447 + .cart-drawer__dialog .button:not(.button-unstyled):not(.close-button) { 448 + min-height: 52px !important; 449 + font-size: 13px !important; 450 font-weight: 700 !important; 451 letter-spacing: 0.1em !important; 452 width: 100% !important; ... 455 } 456 457 /* ---------------------------------------------------------- 642 - 14. NEWSLETTER SECTION 458 + 11. QUICK-ADD MODAL 459 ---------------------------------------------------------- */ 460 @media screen and (max-width: 768px) { 645 - [class*="newsletter"], 646 - [class*="email-signup"] { 647 - padding: 40px 16px !important; 648 - text-align: center; 461 + .quick-add-modal__content { 462 + border-radius: 16px 16px 0 0 !important; 463 + padding: 20px 16px !important; 464 } 465 651 - [class*="newsletter"] h2, 652 - [class*="email-signup"] h2 { 653 - font-size: 20px !important; 654 - margin-bottom: 8px !important; 466 + /* Variant option buttons */ 467 + .variant-option__button-label { 468 + min-width: 44px !important; 469 + min-height: 44px !important; 470 + font-size: 12px !important; 471 + display: inline-flex !important; 472 + align-items: center !important; 473 + justify-content: center !important; 474 } 475 +} 476 657 - [class*="newsletter"] p, 658 - [class*="email-signup"] p { 659 - font-size: 13px !important; 660 - margin-bottom: 20px !important; 477 +/* ---------------------------------------------------------- 478 + 12. EMAIL SIGNUP 479 + ---------------------------------------------------------- */ 480 +@media screen and (max-width: 768px) { 481 + .email-signup-block { 482 + padding: 40px 16px !important; 483 + text-align: center !important; 484 } 485 663 - /* Email input + button stacked */ 664 - [class*="newsletter"] form, 665 - [class*="email-signup"] form { 666 - display: flex !important; 486 + .email-signup__form { 487 + gap: 10px !important; 488 + } 489 + 490 + .email-signup__input-group { 491 flex-direction: column !important; 492 gap: 10px !important; 493 } 494 671 - [class*="newsletter"] input[type="email"], 672 - [class*="email-signup"] input[type="email"] { 495 + .email-signup__input { 496 width: 100% !important; 497 height: 50px !important; 498 font-size: 14px !important; 499 padding: 0 16px !important; 677 - border-radius: 2px !important; 678 - border: 1.5px solid #ccc !important; 500 } 501 681 - [class*="newsletter"] button, 682 - [class*="email-signup"] button { 502 + .email-signup__button { 503 height: 50px !important; 684 - font-size: 13px !important; 504 + font-size: 12px !important; 505 font-weight: 700 !important; 686 - letter-spacing: 0.08em !important; 506 + letter-spacing: 0.09em !important; 507 width: 100% !important; 688 - border-radius: 2px !important; 508 + justify-content: center !important; 509 } 510 } 511 512 /* ---------------------------------------------------------- 693 - 15. FOOTER 513 + 13. BENTO BOX SECTIONS 514 ---------------------------------------------------------- */ 515 @media screen and (max-width: 768px) { 696 - .footer, 697 - [class*="footer"] { 698 - padding: 32px 16px 80px !important; /* 80px bottom for iOS home bar */ 516 + .bento-box { 517 + display: flex !important; 518 + flex-direction: column !important; 519 + gap: 8px !important; 520 } 521 701 - /* Stack footer columns */ 702 - .footer__content, 703 - [class*="footer__content"], 704 - [class*="footer-columns"], 705 - .footer-grid { 522 + .bento-box__item { 523 + width: 100% !important; 524 + min-height: 200px !important; 525 + } 526 +} 527 + 528 +/* ---------------------------------------------------------- 529 + 14. UTILITIES SECTION 530 + ---------------------------------------------------------- */ 531 +@media screen and (max-width: 768px) { 532 + .utilities { 533 display: flex !important; 534 flex-direction: column !important; 708 - gap: 24px !important; 535 + gap: 0 !important; 536 + padding: 0 16px !important; 537 } 538 +} 539 711 - /* Footer heading */ 712 - .footer__heading, 713 - [class*="footer__heading"], 714 - [class*="footer-title"] { 715 - font-size: 12px !important; 716 - font-weight: 700 !important; 717 - letter-spacing: 0.1em !important; 718 - text-transform: uppercase !important; 719 - margin-bottom: 10px !important; 720 - cursor: pointer; 540 +/* ---------------------------------------------------------- 541 + 15. FOOTER 542 + ---------------------------------------------------------- */ 543 +@media screen and (max-width: 768px) { 544 + .shopify-section-group-footer-group { 545 + padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important; 546 } 547 723 - /* Footer links */ 724 - .footer__list a, 725 - [class*="footer__list"] a, 726 - [class*="footer-links"] a { 727 - font-size: 13px !important; 728 - padding: 6px 0 !important; 729 - display: block !important; 730 - color: #555 !important; 548 + .footer-utilities { 549 + padding: 32px 16px 24px !important; 550 } 551 733 - /* Footer bottom */ 734 - .footer__copyright, 735 - [class*="footer__copyright"], 736 - [class*="footer-bottom"] { 737 - text-align: center !important; 552 + .footer-utilities__text { 553 font-size: 11px !important; 739 - color: #888 !important; 740 - border-top: 1px solid #eee !important; 741 - padding-top: 20px !important; 554 + text-align: center !important; 555 } 556 + 557 + /* Social icons row */ 558 + .social-icons__wrapper { 559 + justify-content: center !important; 560 + gap: 16px !important; 561 + } 562 + 563 + .social-icons__icon-wrapper { 564 + min-width: 44px !important; 565 + min-height: 44px !important; 566 + display: inline-flex !important; 567 + align-items: center !important; 568 + justify-content: center !important; 569 + } 570 } 571 572 /* ---------------------------------------------------------- 573 16. TYPOGRAPHY SCALE 574 ---------------------------------------------------------- */ 575 @media screen and (max-width: 768px) { 749 - h1 { font-size: clamp(24px, 7vw, 32px) !important; } 750 - h2 { font-size: clamp(18px, 5vw, 24px) !important; } 751 - h3 { font-size: clamp(15px, 4vw, 18px) !important; } 752 - p, li { font-size: 13px !important; line-height: 1.65 !important; } 753 - a { font-size: inherit !important; } 576 + h1, .h1 { font-size: clamp(24px, 7vw, 32px) !important; } 577 + h2, .h2 { font-size: clamp(19px, 5.5vw, 26px) !important; } 578 + h3, .h3 { font-size: clamp(16px, 4.5vw, 20px) !important; } 579 + h4, .h4 { font-size: clamp(14px, 4vw, 17px) !important; } 580 + h5, .h5 { font-size: 12px !important; letter-spacing: 0.06em !important; } 581 + h6, .h6 { font-size: 11px !important; letter-spacing: 0.08em !important; } 582 + p, .paragraph { font-size: 13px !important; line-height: 1.65 !important; } 583 } 584 585 /* ---------------------------------------------------------- 757 - 17. SCROLL & PERFORMANCE 586 + 17. SCROLL SNAP ON CAROUSELS 587 ---------------------------------------------------------- */ 588 @media screen and (max-width: 768px) { 760 - /* Hardware-accelerated scrolling */ 761 - html { 762 - scroll-behavior: smooth; 763 - } 764 - 765 - /* Scrollable carousels — native scroll with snap */ 766 - [class*="slider"], 767 - [class*="carousel"], 768 - [class*="scroll-snap"] { 589 + .swiper-container { 590 scroll-snap-type: x mandatory !important; 591 -webkit-overflow-scrolling: touch !important; 771 - overflow-x: auto !important; 592 scrollbar-width: none !important; 593 } 594 775 - [class*="slider"]::-webkit-scrollbar, 776 - [class*="carousel"]::-webkit-scrollbar { 595 + .swiper-container::-webkit-scrollbar { 596 display: none !important; 597 } 598 780 - [class*="slider__item"], 781 - [class*="carousel__item"] { 599 + .swiper-slide-wrapper { 600 scroll-snap-align: start !important; 601 } 602 } 603 604 /* ---------------------------------------------------------- 787 - 18. LOADING SKELETON (PERCEIVED PERFORMANCE) 605 + 18. SECTION SPACING 606 ---------------------------------------------------------- */ 607 @media screen and (max-width: 768px) { 790 - .card__media:empty, 791 - [class*="card__media"]:empty { 792 - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 793 - background-size: 200% 100%; 794 - animation: shimmer 1.4s infinite; 608 + .section { 609 + padding-left: 12px !important; 610 + padding-right: 12px !important; 611 } 612 797 - @keyframes shimmer { 798 - 0% { background-position: 200% 0; } 799 - 100% { background-position: -200% 0; } 613 + .section-resource-list__header { 614 + text-align: center !important; 615 + padding-bottom: 12px !important; 616 } 617 + 618 + .product-grid-container { 619 + padding: 0 12px 32px !important; 620 + } 621 } 622 623 /* ---------------------------------------------------------- 804 - 19. SAFE AREA (IPHONE NOTCH / HOME BAR) 624 + 19. LOADING SKELETON (perceived performance) 625 ---------------------------------------------------------- */ 806 -@supports (padding-bottom: env(safe-area-inset-bottom)) { 807 - .footer, 808 - [class*="footer"], 809 - [class*="sticky-atc"], 810 - [class*="cart-drawer"] { 811 - padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; 626 +@keyframes sp-shimmer { 627 + 0% { background-position: 200% 0; } 628 + 100% { background-position: -200% 0; } 629 +} 630 + 631 +@media screen and (max-width: 768px) { 632 + .card-gallery:empty { 633 + background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 50%, #f2f2f2 75%); 634 + background-size: 200% 100%; 635 + animation: sp-shimmer 1.4s infinite; 636 } 637 } 638 639 /* ---------------------------------------------------------- 816 - 20. TAP STATE FEEDBACK 640 + 20. IOS SAFE AREA + TAP FEEDBACK 641 ---------------------------------------------------------- */ 642 +@supports (padding-bottom: env(safe-area-inset-bottom)) { 643 + .cart-drawer__dialog, 644 + .facets--drawer, 645 + .quick-add-modal__content { 646 + padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; 647 + } 648 +} 649 + 650 @media (hover: none) and (pointer: coarse) { 819 - button:active, 820 - a:active, 821 - [class*="button"]:active { 822 - opacity: 0.75; 823 - transform: scale(0.98); 824 - transition: opacity 0.1s, transform 0.1s; 651 + .button:active, 652 + .product-card__link:active, 653 + .quick-add__button:active { 654 + opacity: 0.7; 655 + transform: scale(0.97); 656 + transition: opacity 0.08s, transform 0.08s; 657 } 658 }