1<!-- layout/theme.liquid --> 2 3<!doctype html> 4<html lang="en" dir="ltr"> 5 <head> 6 <!-- Blockshop theme - Version 13.0.1 by Troop Themes - https://troopthemes.com/ --> 7 8 <meta charset="UTF-8"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"> 10 <meta name="ps-key" content="1766-5f63c09bea20d1002642e038"> 11 <meta name="ps-country" content="US"> 12 <meta name="ps-language" content="en"><meta name="description" content="Create your Club Olay account for exclusive offers and personalized skin care. Sign up!"><title> 13 Create An Account | Olay 14 – OLAY</title><link rel="canonical" href="https://www.olay.com/pages/create-account"><link rel="dns-prefetch" href="https://cdn.shopify.com"><link rel="dns-prefetch" href="https://cdn.ordergroove.com"> 15 <link rel="dns-prefetch" href="https://external-api.jebbit.com"> 16 <link rel="dns-prefetch" href="web-sandbox.pypestream.com"> 17 <link rel="dns-prefetch" href="https://pypestream.com"><link rel="preconnect" href="https://rebuyengine.com" crossorigin> 18<link rel="preconnect" href="https://cdn.rebuyengine.com" crossorigin> 19<link rel="preconnect" href="https://cached.rebuyengine.com" crossorigin>
20<script async src="https://cdn.rebuyengine.com/onsite/js/rebuy.js?shop=x36ngn-ms.myshopify.com"></script>
20 21<link rel="shortcut icon" href="//www.olay.com/cdn/shop/files/favicon.jpg?v=1779268602&width=32" type="image/png"> 22 <link rel="apple-touch-icon" href="//www.olay.com/cdn/shop/files/favicon.jpg?v=1779268602&width=180"><!-- snippets/preload.liquid --><link rel="preconnect" href="https://cdn.shopify.com" crossorigin> 23<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin> 24
25<script async crossorigin fetchpriority="high" src="/cdn/shopifycloud/importmap-polyfill/es-modules-shim.2.4.0.js"></script>
vendor: 1 bytes, line 25
25
26<script type="importmap"> 27 { 28 "imports": { 29 "@troop-themes/main": "//www.olay.com/cdn/shop/t/10/assets/theme.js?v=168616996959632291441790055673" 30 } 31 } 32</script>
32<link 33 rel="preload" 34 href="//www.olay.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2" 35 as="font" 36 type="font/woff2" 37 crossorigin 38 ><link 39 rel="preload" 40 href="//www.olay.com/cdn/fonts/inter/inter_n5.d7101d5e168594dd06f56f290dd759fba5431d97.woff2" 41 as="font" 42 type="font/woff2" 43 crossorigin 44 ><link 45 rel="preload" 46 href="//www.olay.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2" 47 as="font" 48 type="font/woff2" 49 crossorigin 50 ><!-- snippets/meta-tags.liquid --><meta property="og:type" content="website" /> 51 <meta property="og:title" content="Create An Account | Olay" /> 52<meta property="og:url" content="https://www.olay.com/pages/create-account" /> 53<meta property="og:site_name" content="OLAY" /> 54<meta property="og:description" content="Create your Club Olay account for exclusive offers and personalized skin care. Sign up!" /><meta name="twitter:card" content="summary" /> 55<meta name="twitter:description" content="Create your Club Olay account for exclusive offers and personalized skin care. Sign up!" /><meta name="twitter:title" content="Create An Account | Olay" /> 56<!-- snippets/schema-org.liquid -->
56<script type="application/ld+json"> 57{ 58 "@context": "https://schema.org", 59 "@id": "https:\/\/www.olay.com\/#organization", 60 "@type": "Organization", 61 "name": "OLAY", 62 "url": "https:\/\/www.olay.com\/","contactPoint": [ 63 { 64 "@type": "ContactPoint", 65 "telephone": "+1-800-285-5170", 66 "contactOption": "TollFree", 67 "contactType": "customer support", 68 "areaServed": "US", 69 "availableLanguage": ["EN"] 70 } 71 ], 72 "sameAs": [ 73 "https://www.facebook.com/OlayUS/", 74 "https://www.instagram.com/olay/?hl=en", 75 "https://twitter.com/olayskin?lang=en", 76 "https://www.pinterest.com/OlayUS/", 77 "https://www.youtube.com/channel/UCZ1CQE5_gNdcuvxwcZOahzA", 78 "https://www.tiktok.com/@olay", 79 "https://en.wikipedia.org/wiki/Olay" 80 ] 81} 82</script>
82<script type="application/ld+json"> 83 { 84 "@context": "https://schema.org", 85 "@type": "WebPage", 86 "@id": "https:\/\/www.olay.com\/pages\/create-account", 87 "name": "Create account","url": "https:\/\/www.olay.com\/pages\/create-account", 88 "publisher": { 89 "@type": "Organization", 90 "@id": "https:\/\/www.olay.com\/#organization", 91 "name": "OLAY" 92 }, 93 "breadcrumb": { 94 "@type": "BreadcrumbList", 95 "itemListElement": [ 96 { 97 "@type": "ListItem", 98 "position": 1, 99 "item": { 100 "@id": "https:\/\/www.olay.com\/", 101 "name": "Home" 102 } 103 }, 104 { 105 "@type": "ListItem", 106 "position": 2, 107 "item": { 108 "@id": "https:\/\/www.olay.com\/pages\/create-account", 109 "name": "Create account" 110 } 111 } 112 ] 113 }} 114 </script>
114<!-- snippets/css-typography.liquid --><style>@font-face { 115 font-family: Inter; 116 font-weight: 700; 117 font-style: normal; 118 font-display: swap; 119 src: url("//www.olay.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"), 120 url("//www.olay.com/cdn/fonts/inter/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff"); 121} 122@font-face { 123 font-family: Inter; 124 font-weight: 500; 125 font-style: normal; 126 font-display: swap; 127 src: url("//www.olay.com/cdn/fonts/inter/inter_n5.d7101d5e168594dd06f56f290dd759fba5431d97.woff2") format("woff2"), 128 url("//www.olay.com/cdn/fonts/inter/inter_n5.5332a76bbd27da00474c136abb1ca3cbbf259068.woff") format("woff"); 129} 130@font-face { 131 font-family: Inter; 132 font-weight: 700; 133 font-style: normal; 134 font-display: swap; 135 src: url("//www.olay.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"), 136 url("//www.olay.com/cdn/fonts/inter/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff"); 137} 138@font-face { 139 font-family: Inter; 140 font-weight: 400; 141 font-style: normal; 142 font-display: swap; 143 src: url("//www.olay.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2"), 144 url("//www.olay.com/cdn/fonts/inter/inter_n4.af8052d517e0c9ffac7b814872cecc27ae1fa132.woff") format("woff"); 145} 146@font-face { 147 font-family: Inter; 148 font-weight: 700; 149 font-style: normal; 150 font-display: swap; 151 src: url("//www.olay.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"), 152 url("//www.olay.com/cdn/fonts/inter/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff"); 153} 154@font-face { 155 font-family: Inter; 156 font-weight: 400; 157 font-style: italic; 158 font-display: swap; 159 src: url("//www.olay.com/cdn/fonts/inter/inter_i4.feae1981dda792ab80d117249d9c7e0f1017e5b3.woff2") format("woff2"), 160 url("//www.olay.com/cdn/fonts/inter/inter_i4.62773b7113d5e5f02c71486623cf828884c85c6e.woff") format("woff"); 161} 162@font-face { 163 font-family: Inter; 164 font-weight: 700; 165 font-style: italic; 166 font-display: swap; 167 src: url("//www.olay.com/cdn/fonts/inter/inter_i7.b377bcd4cc0f160622a22d638ae7e2cd9b86ea4c.woff2") format("woff2"), 168 url("//www.olay.com/cdn/fonts/inter/inter_i7.7c69a6a34e3bb44fcf6f975857e13b9a9b25beb4.woff") format("woff"); 169} 170:root {--font--heading--uppercase: normal;--font--nav--uppercase: normal;--font--sub-nav--uppercase: normal;--font--button--uppercase: uppercase;--font--overline--uppercase: uppercase;--font--paragraph--uppercase: normal;--font--banner--size: 52px; 171 --font--banner--mobile-size: 32px; 172 173 --font--featured--size: 28px; 174 --font--featured--mobile-size: 24px; 175 176 --font--section--size: 28px; 177 --font--section--mobile-size: 24px; 178 179 --font--block--size: 20px; 180 --font--block--mobile-size: 16px; 181 182 --font--paragraph--size: 16px;--font--paragraph--mobile-size: 16px;--font--featured-paragraph--size: 22px;--font--featured-paragraph--mobile-size: 18px;--font--nav--size: 14px;--font--nav--mobile-size: 14px;--font--sub-nav--size: 14px;--font--sub-nav--mobile-size: 14px;--font--overline--size: 12px; 183 --font--button--size: 16px; 184 --font--button--spacing: 0px; 185 186 --font--heading--family: Inter, sans-serif; 187 --font--heading--weight: 700; 188 --font--heading--style: normal; 189 --font--heading--spacing: 0px; 190 191 --font--nav--family: Inter, sans-serif; 192 --font--nav--weight: 500; 193 --font--nav--style: normal; 194 195 --font--paragraph--family: Inter, sans-serif; 196 --font--paragraph--weight: 400; 197 --font--paragraph--style: normal; 198 --font--paragraph--spacing: 0px; 199 200 --font--line-height: 1.2; 201 202 /* ======================================== 203 Madonna 3.0 Typography System 204 ======================================== */ 205 206 /* Madonna Font Family - Inter */ 207 --madonna-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 208 209 /* Madonna Font Sizes */ 210 --madonna-font-size-xs: 12px; 211 --madonna-font-size-sm: 14px; 212 --madonna-font-size-base: 16px; 213 --madonna-font-size-lg: 18px; 214 --madonna-font-size-xl: 20px; 215 --madonna-font-size-2xl: 24px; 216 --madonna-font-size-3xl: 28px; 217 --madonna-font-size-4xl: 32px; 218 --madonna-font-size-5xl: 36px; 219 --madonna-font-size-6xl: 44px; 220 --madonna-font-size-7xl: 52px; 221
222 /* Madonna Font Weights */ 223 --madonna-font-weight-normal: 400; 224 --madonna-font-weight-medium: 500; 225 --madonna-font-weight-semibold: 600; 226 --madonna-font-weight-bold: 700; 227 228 /* Madonna Line Heights */ 229 --madonna-line-height-tight: 1.2; 230 --madonna-line-height-snug: 1.25; 231 --madonna-line-height-normal: 1.333; 232 --madonna-line-height-relaxed: 1.5; 233 --madonna-line-height-loose: 1.75; 234 235 /* Madonna Typography Presets (from Figma) */ 236 --madonna-heading-2-size: 28px; 237 --madonna-heading-2-weight: var(--madonna-font-weight-bold); 238 --madonna-heading-2-line-height: var(--madonna-line-height-tight); 239 240 --madonna-heading-4-size: 28px; 241 --madonna-heading-4-weight: var(--madonna-font-weight-bold); 242 --madonna-heading-4-line-height: var(--madonna-line-height-tight); 243 244 --madonna-body-large-size: 24px; 245 --madonna-body-large-weight: var(--madonna-font-weight-medium); 246 --madonna-body-large-line-height: var(--madonna-line-height-normal); 247 248 --madonna-body-size: 20px; 249 --madonna-body-weight: var(--madonna-font-weight-normal); 250 --madonna-body-line-height: var(--madonna-line-height-tight); 251 252 --madonna-body-bold-size: 20px; 253 --madonna-body-bold-weight: var(--madonna-font-weight-bold); 254 --madonna-body-bold-line-height: var(--madonna-line-height-tight); 255 256 /* Madonna Mobile Typography (responsive) */ 257 --madonna-heading-mobile-size: 24px; 258 --madonna-body-mobile-size: 16px; 259 --madonna-body-large-mobile-size: 18px; 260 } 261</style><!-- snippets/css-variables.liquid --><style> 262 :root { 263 --color--accent-1: #CC0000; 264 --color--accent-1-translucent: rgba(204, 0, 0, 0.85); 265 --color--accent-2: #EFD33D; 266 --color--accent-2-translucent: rgba(239, 211, 61, 0.85); 267 --color--accent-3: #D0342C; 268 --color--accent-3-translucent: rgba(208, 52, 44, 0.85); 269 --color--body: #000000; 270 --color--body--light: #303030; 271 --color--success: #4caf50; 272 --color--gray: #808080; 273 --color--alert: #D0342C; 274 275 --bg-color--white: white; 276 --bg-color--transparent: transparent; 277 --bg-color--light: #F6F6F6; 278 --bg-color--light-translucent: rgba(246, 246, 246, 0.85); 279 --bg-color--dark: #000000; 280 --bg-color--dark-translucent: rgba(0, 0, 0, 0.85); 281 --bg-color--accent-1: var(--color--accent-1); 282 --bg-color--accent-2: var(--color--accent-2); 283 --bg-color--accent-3: var(--color--accent-3); 284 --bg-color--body: #FFFFFF; 285 --bg-color--body-translucent: rgba(255, 255, 255, 0.85); 286 287 --border--thickness: 1px; 288 --border--color-dark: rgba(0, 0, 0, 0.15); 289 --border--color-light: rgba(255, 255, 255, 0.15); 290 --border--dark: var(--border--thickness) solid var(--border--color-dark); 291 --border--light: var(--border--thickness) solid var(--border--color-light); 292 293 --box-shadow--center: 0px 0px 10px rgba(0, 0, 0, 0.08); 294 --box-shadow--top: 0 -10px 10px -10px rgba(0, 0, 0, 0.2); 295 --box-shadow--left: -2px 0 10px -2px rgba(0, 0, 0, 0.2); 296 --box-shadow--right: 2px 0 10px -2px rgba(0, 0, 0, 0.2); 297 --box-shadow--bottom: 0 10px 10px -10px rgba(0, 0, 0, 0.2); 298 299 --content--shadow-opacity: 0.1; 300 --content--image-opacity: 1.0; 301 302 --button--height: 45px; 303 --button--border-width: 1px; 304 --button--radius: 8px; 305 --button--padding: 0 var(--spacing--3); 306 --button--bg-color-1: #CC0000; 307 --button--color-1: #FFFFFF; 308 --button--border-color-1: #CC0000; 309 --button--bg-color--hover-1: #A60000; 310 --button--color--hover-1: #FFFFFF; 311 --button--bg-color-2: #FFFFFF; 312 --button--color-2: #000000; 313 --button--border-color-2: #000000; 314 --button--bg-color--hover-2: #F6F6F6; 315 --button--color--hover-2: #000000; 316 --button--bg-color-3: #000000; 317 --button--color-3: #f6f6f6; 318 --button--border-color-3: #000000; 319 --button--bg-color--hover-3: #f6f6f6; 320 --button--color--hover-3: #000000; 321 --button--bg-color-4: transparent; 322 --button--color-4: #ffffff; 323 --button--border-color-4: #ffffff; 324 --button--bg-color--hover-4: #ffffff; 325 --button--color--hover-4: #444444; 326 327 --input--height: 45px; 328 --input--radius: 8px; 329 --input--padding: var(--spacing--1) var(--spacing--3); 330 --input--bg-color: #ffffff; 331 --input--color: #444444; 332 --image--radius: 8px; 333 --image--radius-enabled: 1; 334 335 --product--swatches-size: 24px; 336 337 --layout--spacing-small: 16px; 338 --layout--spacing-medium: 32px; 339 --layout--spacing-large: 52px; 340 --layout--spacing-x-large: 104px; 341 --layout--mobile-spacing-small: 12px; 342 --layout--mobile-spacing-medium: 24px; 343 --layout--mobile-spacing-large: 32px; 344 --layout--mobile-spacing-x-large: 64px; 345 346 --layout--alignment: center; 347 348 --progress-bar: linear-gradient( 349 90deg, 350 rgba(0, 0, 0, 0.3) 0%, 351 rgb(0, 0, 0) 80%, 352 rgba(0, 0, 0, 0.8) 353 ); 354 355 /* shop pay */ 356 --payment-terms-background-color: #FFFFFF; 357 358 /* js helpers */ 359 --announcement--sticky: 0; 360 --announcement--height: 0px; 361 --header--sticky: 0; 362 --header--height: 0px; 363 --split-announcement--height: 0px; 364 365 --sticky-offset: calc(var(--announcement--sticky, 0) * var(--announcement--height, 0px) + var(--header--sticky, 0) * var(--header--height, 0px)); 366 367 /* ======================================== 368 Madonna 3.0 Design System 369 ======================================== */ 370
371 /* Breakpoints */ 372 --madonna-bp-mobile-sm: 320px; 373 --madonna-bp-mobile-md: 390px; 374 --madonna-bp-mobile-max: 767px; 375 --madonna-bp-tablet-min: 768px; 376 --madonna-bp-tablet-landscape: 1024px; 377 --madonna-bp-tablet-max: 1099px; 378 --madonna-bp-desktop-min: 1100px; 379 --madonna-bp-desktop-intent: 1440px; 380 --madonna-bp-desktop-xlarge: 1920px; 381 382 /* Content Max Widths */ 383 --madonna-max-width-mobile: 600px; 384 --madonna-max-width-tablet: 900px; 385 --madonna-max-width-desktop: 1440px; 386 387 /* Madonna Brand Colors */ 388 --madonna-color-primary: #CC0000; 389 --madonna-color-primary-hover: #A60000; 390 --madonna-color-primary-active: #8B0000; 391 --madonna-color-club-olay: #EFD33D; 392 --madonna-color-club-olay-dark: #D4B82E; 393 --madonna-color-club-olay-light: #F5E170; 394 --madonna-color-promotional: #D0342C; 395 --madonna-color-promotional-dark: #B02923; 396 --madonna-color-promotional-light: #FDEEEE; 397 398 /* Madonna Neutral Colors */ 399 --madonna-color-black: #000000; 400 --madonna-color-white: #FFFFFF; 401 --madonna-color-gray-50: #FAFAFA; 402 --madonna-color-gray-100: #F6F6F6; 403 --madonna-color-gray-200: #E5E7EB; 404 --madonna-color-gray-300: #D1D5DB; 405 --madonna-color-gray-400: #9CA3AF; 406 --madonna-color-gray-500: #6B7280; 407 --madonna-color-gray-600: #4B5563; 408 --madonna-color-gray-700: #374151; 409 --madonna-color-gray-800: #1F2937; 410 --madonna-color-gray-900: #111827; 411 412 /* Madonna Semantic Colors */ 413 --madonna-color-success: #008000; 414 --madonna-color-success-bg: #F0FEF1; 415 --madonna-color-error: #D0342C; 416 --madonna-color-error-bg: #FDEEEE; 417 --madonna-color-error-border: #FFD6D6; 418 --madonna-color-warning: #FFA500; 419 --madonna-color-warning-bg: #FFF4E5; 420 --madonna-color-info: #0066CC; 421 --madonna-color-info-bg: #E5F2FF; 422 423 /* Madonna Text Colors */ 424 --madonna-color-text-primary: var(--madonna-color-black); 425 --madonna-color-text-secondary: var(--madonna-color-gray-500); 426 --madonna-color-text-tertiary: var(--madonna-color-gray-400); 427 --madonna-color-text-inverse: var(--madonna-color-white); 428 429 /* Madonna Background Colors */ 430 --madonna-color-bg-primary: var(--madonna-color-white); 431 --madonna-color-bg-secondary: var(--madonna-color-gray-50); 432 --madonna-color-bg-tertiary: var(--madonna-color-gray-100); 433 434 /* Madonna Border Colors */ 435 --madonna-color-border-light: var(--madonna-color-gray-200); 436 --madonna-color-border-medium: var(--madonna-color-gray-300); 437 --madonna-color-border-dark: var(--madonna-color-gray-400); 438 439 /* Madonna Spacing Scale (4px base) */ 440 --madonna-spacing-1: 4px; 441 --madonna-spacing-2: 8px; 442 --madonna-spacing-3: 12px; 443 --madonna-spacing-4: 16px; 444 --madonna-spacing-5: 20px; 445 --madonna-spacing-6: 24px; 446 --madonna-spacing-8: 32px; 447 --madonna-spacing-10: 40px; 448 --madonna-spacing-12: 48px; 449 --madonna-spacing-16: 64px; 450 --madonna-spacing-20: 80px; 451 --madonna-spacing-24: 96px; 452 --madonna-spacing-32: 128px; 453 454 /* Madonna Border Radius */ 455 --madonna-radius-none: 0; 456 --madonna-radius-sm: 4px; 457 --madonna-radius-md: 8px; 458 --madonna-radius-lg: 12px; 459 --madonna-radius-xl: 16px; 460 --madonna-radius-full: 9999px; 461 462 /* Madonna Shadows */ 463 --madonna-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 464 --madonna-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 465 --madonna-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 466 --madonna-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 467 --madonna-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 468 --madonna-shadow-focus: 0 0 0 3px rgba(204, 0, 0, 0.1); 469 470 /* Madonna Z-index Scale */ 471 --madonna-z-behind: -1; 472 --madonna-z-base: 0; 473 --madonna-z-dropdown: 1000; 474 --madonna-z-sticky: 1100; 475 --madonna-z-overlay: 1200; 476 --madonna-z-modal: 1300; 477 478 /* Madonna Transitions */ 479 --madonna-duration-fast: 150ms; 480 --madonna-duration-normal: 250ms; 481 --madonna-duration-slow: 350ms; 482 --madonna-ease-in: cubic-bezier(0.4, 0, 1, 1); 483 --madonna-ease-out: cubic-bezier(0, 0, 0.2, 1); 484 --madonna-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); 485
486 /* Madonna Component Variables */ 487 --madonna-button-height: 44px; 488 --madonna-button-height-sm: 36px; 489 --madonna-button-height-lg: 52px; 490 --madonna-button-padding-x: var(--madonna-spacing-6); 491 --madonna-button-padding-y: var(--madonna-spacing-3); 492 --madonna-input-height: 44px; 493 --madonna-input-padding-x: var(--madonna-spacing-4); 494 --madonna-input-padding-y: var(--madonna-spacing-3); 495 --madonna-input-border-width: 2px; 496 --madonna-input-focus-border-width: 2px; 497 --madonna-card-padding: var(--madonna-spacing-6); 498 --madonna-card-gap: var(--madonna-spacing-4); 499 } 500 501 shopify-accelerated-checkout, shopify-accelerated-checkout-cart { 502 --shopify-accelerated-checkout-button-block-size: var(--button--height); 503 --shopify-accelerated-checkout-button-border-radius: var(--button--radius); 504 --shopify-accelerated-checkout-button-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 505 } 506</style><style> 507 .color-scheme-1 { 508 --color-background: 253, 253, 253; 509 --gradient-background: #fdfdfd; 510 511 --color-foreground: 22, 23, 22; 512 --color-button: 22, 23, 22; 513 --color-button-text: 253, 253, 253; 514 --color-secondary-button: 253, 253, 253; 515 --color-secondary-button-text: 22, 23, 22; 516 --color-link: 22, 23, 22; 517 --color-shadow: 22, 23, 22; 518 color: rgb(var(--color-foreground)); 519 background-color: rgb(var(--color-background)); 520 }.color-scheme-2 { 521 --color-background: 244, 244, 244; 522 --gradient-background: #f4f4f4; 523 524 --color-foreground: 22, 23, 22; 525 --color-button: 22, 23, 22; 526 --color-button-text: 253, 253, 253; 527 --color-secondary-button: 244, 244, 244; 528 --color-secondary-button-text: 22, 23, 22; 529 --color-link: 22, 23, 22; 530 --color-shadow: 22, 23, 22; 531 color: rgb(var(--color-foreground)); 532 background-color: rgb(var(--color-background)); 533 }.color-scheme-3 { 534 --color-background: 22, 23, 22; 535 --gradient-background: #161716; 536 537 --color-foreground: 253, 253, 253; 538 --color-button: 253, 253, 253; 539 --color-button-text: 22, 23, 22; 540 --color-secondary-button: 22, 23, 22; 541 --color-secondary-button-text: 253, 253, 253; 542 --color-link: 253, 253, 253; 543 --color-shadow: 22, 23, 22; 544 color: rgb(var(--color-foreground)); 545 background-color: rgb(var(--color-background)); 546 }.color-scheme-4 { 547 --color-background: 193, 30, 51; 548 --gradient-background: #c11e33; 549 550 --color-foreground: 255, 255, 255; 551 --color-button: 255, 255, 255; 552 --color-button-text: 193, 30, 51; 553 --color-secondary-button: 193, 30, 51; 554 --color-secondary-button-text: 255, 255, 255; 555 --color-link: 255, 255, 255; 556 --color-shadow: 22, 23, 22; 557 color: rgb(var(--color-foreground)); 558 background-color: rgb(var(--color-background)); 559 }.color-scheme-5 { 560 --color-background: 255, 255, 255; 561 --gradient-background: #ffffff; 562 563 --color-foreground: 22, 23, 22; 564 --color-button: 193, 30, 51; 565 --color-button-text: 255, 255, 255; 566 --color-secondary-button: 255, 255, 255; 567 --color-secondary-button-text: 22, 23, 22; 568 --color-link: 22, 23, 22; 569 --color-shadow: 22, 23, 22; 570 color: rgb(var(--color-foreground)); 571 background-color: rgb(var(--color-background)); 572 }.color-scheme-6 { 573 --color-background: 253, 253, 253; 574 --gradient-background: transparent; 575 --color-foreground: 22, 23, 22; 576 --color-button: 22, 23, 22; 577 --color-button-text: 253, 253, 253; 578 --color-secondary-button: 253, 253, 253; 579 --color-secondary-button-text: 22, 23, 22; 580 --color-link: 22, 23, 22; 581 --color-shadow: 22, 23, 22; 582 color: rgb(var(--color-foreground)); 583 background-color: transparent; 584 } 585 .gradient { 586 background: rgb(var(--color-background)); 587 background: var(--gradient-background); 588 background-attachment: fixed; 589 } 590</style> 591<!-- snippets/custom-styles.liquid --><style></style><link href="//www.olay.com/cdn/shop/t/10/assets/theme.css?v=73702006799401583081788936643" rel="stylesheet" type="text/css" media="all" /> 592<link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/product-card-custom.css?v=2029886700165843901785409403" media="print" onload="this.media='all'"> 593 <noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/product-card-custom.css?v=2029886700165843901785409403"></noscript> 594 595 <link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/shopflex-cu
595stom.css?v=35797984864791264621784697535" media="print" onload="this.media='all'"> 596 <noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/shopflex-custom.css?v=35797984864791264621784697535"></noscript> 597 598
598<script src=https://unpkg.com/@grafana/faro-web-sdk@^1.0.0/dist/bundle/faro-web-sdk.iife.js defer></script>
598 599
599<script src=https://unpkg.com/@grafana/faro-web-tracing@^1.0.0/dist/bundle/faro-web-tracing.iife.js defer></script>
599 600 601 602
602<script type="module"> 603 const performanceCookieCategory = '2,'; 604 605 function waitForOneTrust() { 606 hasOneTrustLoaded(); 607 608 let attempts = 0; 609 const interval = setInterval(function () { 610 if (hasOneTrustLoaded() || attempts > 100){ 611 clearInterval(interval); 612 } 613 attempts++; 614 }, 100) 615 } 616 617 function hasOneTrustLoaded() { 618 if(typeof window.OnetrustActiveGroups === 'string'){ 619 //check now 620 optanonWrapper() 621 // and wrap and trigger after cookie opt-in 622 window.OptanonWrapper = optanonWrapper; 623 checkGeoRedirect() 624 return true; 625 } 626 return false; 627 } 628 629 function sendConsent(trackingConsent) { 630 window.Shopify.customerPrivacy.setTrackingConsent(trackingConsent, () => { 631 if (typeof window?.BV?.cookieConsent === 'object'){ 632 window.BV.cookieConsent.setConsent(trackingConsent); 633 } 634 if(gtag){ 635 let gTagConsent = trackingConsent === true ? "granted" : "denied"; 636 gtag('consent', 'update', { 637 'ad_storage': gTagConsent, 638 'ad_user_data': gTagConsent, 639 'ad_personalization': gTagConsent, 640 'analytics_storage': gTagConsent 641 }); 642 } 643 644 // PRIVACY FIX: Dispatch event when tracking consent is granted 645 // This allows tracking scripts to initialize only after user consent 646 if (trackingConsent === true) { 647 const consentEvent = new CustomEvent('trackingConsentGranted', { 648 detail: { consent: true, timestamp: Date.now() } 649 }); 650 document.dispatchEvent(consentEvent); 651 } 652 }); 653 } 654 655 function loadYouTubePlayer(trackingConsent) { 656 if(trackingConsent === true ){ 657 var script = document.createElement('script'); 658 script.src = 'https://www.youtube.com/iframe_api'; 659 document.head.appendChild(script); 660 script.onload = function() { 661 var playerDiv = document.getElementById('youtube-player'); 662 if (playerDiv) { 663 playerDiv.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>'; 664 } 665 }; 666 } 667 } 668 669 function optanonWrapper() { 670 const trackingConsent = !!window.OnetrustActiveGroups.includes(performanceCookieCategory); 671 window.Shopify.loadFeatures( 672 [ 673 { 674 name: 'consent-tracking-api', 675 version: '0.1', 676 }, 677 ], 678 error => { 679 if (error) { 680 throw error; 681 } 682 683 sendConsent(trackingConsent); 684 loadYouTubePlayer(trackingConsent) 685 686 }, 687 ); 688 } 689 690 function checkGeoRedirect() { 691 const OLAY_AU_URL = "https://www.olayskincare.com/en-au/"; 692 693 const getCountryFromGeoData = (geoData) => { 694 if (!geoData) { 695 return ""; 696 } 697 698 if (typeof geoData === "string") { 699 return geoData; 700 } 701 702 return geoData.country; 703 }; 704 705 const isAustraliaOrNewZealand = (country) => { 706 if (!country) { 707 return false; 708 } 709 710 const normalizedCountry = String(country).trim().toUpperCase(); 711 712 return normalizedCountry === "AU" || normalizedCountry === "NZ"; 713 }; 714 715 const geoData = window.OneTrust.getGeolocationData(); 716 const country = getCountryFromGeoData(geoData); 717 718 if (isAustraliaOrNewZealand(country)) { 719 window.location.replace(OLAY_AU_URL); 720 } 721 } 722 723 (function () { 724 waitForOneTrust(); 725 })(); 726</script>
726 727 728
729<script> 730 // Initialize Faro when the main bundle loads 731 function window_init() { 732 window.GrafanaFaroWebSdk.initializeFaro({ 733 app: { 734 name: 'CDP-OLAY-US-EN-PROD', 735 environment: 'production', 736 version: '0.0.1', 737 }, 738 user: { 739 // Optional, if you want to set custom attributes 740 attributes: { 741 'cost_center': '8000500717', 742 'app_id': 'CI005637306', 743 }, 744 }, 745 //intake sampling from PG DataLayer 746 sessionTracking: { 747 samplingRate: 0.5 748 }, 749 transports: [new window.GrafanaFaroWebSdk.FetchTransport({ 750 url: 'https://grafana-alloy.rum.gcp.pgcloud.com/collect', 751 apiKey: 'AZS3GA5NRaR25H9BkV9N8f9CDE8kxVOVJsuKX1OGUAUEAn62' // This is just an ID, not a secret key! 752 }), 753 new window.GrafanaFaroWebSdk.ConsoleTransport()], 754 }); 755 }; 756 window.addEventListener("load", function (event) { 757 window_init() 758 window.addTracing() 759 // console.log("Faro client initialized. Tracing added.") 760 // console.log("Sampling Rate: 0.5"); 761 }, false); 762 window.addTracing = () => { 763 // console.log("In window.addTracing()"); 764 window.GrafanaFaroWebSdk.faro.instrumentations.add( 765 new window.GrafanaFaroWebTracing.TracingInstrumentation( 766 { 767 // Optional, if you want to add custom attributes to the resource 768 resourceAttributes: { 769 'cost_center': '8000500717', 770 'application_id': 'CDP-OLAY-US-EN-PROD', 771 }, 772 }, 773 ) 774 ); 775 }; 776</script>
776 777 778 <!-- PRIVACY FIX: Consent-Based Google Fonts Loader --> 779<!-- Loads Google Fonts only after user grants tracking consent (GDPR/CCPA compliant) -->
780<script> 781 (function() { 782 'use strict'; 783 784 // Google Fonts to load after consent 785 const GOOGLE_FONTS_URL = 'https://fonts.googleapis.com/css2?family=Catamaran:wght@700&display=swap'; 786 787 // Check if user has granted tracking consent 788 function checkTrackingConsent() { 789 // Check OneTrust consent (Performance cookies = category 2) 790 if (typeof window.OnetrustActiveGroups === 'string' && window.OnetrustActiveGroups.includes('2,')) { 791 return true; 792 } 793 794 // Check Shopify Customer Privacy API 795 if (window.Shopify && window.Shopify.customerPrivacy) { 796 const consent = window.Shopify.customerPrivacy.getTrackingConsent(); 797 if (consent === 'yes' || consent === true) { 798 return true; 799 } 800 } 801 802 return false; 803 } 804 805 // Load Google Fonts dynamically (only called after consent) 806 function loadGoogleFonts() { 807 // Check if already loaded 808 if (document.querySelector('link[href*="fonts.googleapis.com"]')) { 809 return; 810 } 811 812 // Add preconnect for performance 813 const preconnect1 = document.createElement('link'); 814 preconnect1.rel = 'preconnect'; 815 preconnect1.href = 'https://fonts.googleapis.com'; 816 document.head.appendChild(preconnect1); 817 818 const preconnect2 = document.createElement('link'); 819 preconnect2.rel = 'preconnect'; 820 preconnect2.href = 'https://fonts.gstatic.com'; 821 preconnect2.crossOrigin = 'anonymous'; 822 document.head.appendChild(preconnect2); 823 824 // Load font stylesheet 825 const fontLink = document.createElement('link'); 826 fontLink.rel = 'stylesheet'; 827 fontLink.href = GOOGLE_FONTS_URL; 828 document.head.appendChild(fontLink); 829 } 830 831 // Initialize font loader 832 function initConsentBasedFonts() { 833 const hasConsent = checkTrackingConsent(); 834 835 if (hasConsent) { 836 // Consent already granted - load fonts immediately 837 loadGoogleFonts(); 838 } else { 839 // Wait for consent grant event 840 document.addEventListener('trackingConsentGranted', function() { 841 loadGoogleFonts(); 842 }, { once: true }); 843 } 844 } 845 846 // Run after DOM ready 847 if (document.readyState === 'loading') { 848 document.addEventListener('DOMContentLoaded', initConsentBasedFonts); 849 } else { 850 initConsentBasedFonts(); 851 } 852 })(); 853</script>
853 854 855 <!-- PRIVACY FIX: Consent-Based Curalate/Bazaarvoice Vibe Loader --> 856<!-- Loads Curalate visual UGC only after user grants tracking consent (GDPR/CCPA compliant) -->
857<script> 858 (function() { 859 'use strict'; 860 861 // Curalate site identifier 862 const CURALATE_SITE_NAME = 'Olay-uLqCGd'; 863 864 // Check if user has granted tracking consent 865 function checkTrackingConsent() { 866 // Check OneTrust consent (Performance cookies = category 2) 867 if (typeof window.OnetrustActiveGroups === 'string' && window.OnetrustActiveGroups.includes('2,')) { 868 return true; 869 } 870 871 // Check Shopify Customer Privacy API 872 if (window.Shopify && window.Shopify.customerPrivacy) { 873 const consent = window.Shopify.customerPrivacy.getTrackingConsent(); 874 if (consent === 'yes' || consent === true) { 875 return true; 876 } 877 } 878 879 return false; 880 } 881 882 // Load Curalate/BV Vibe script (only called after consent) 883 function loadCuralate() { 884 // Check if already loaded 885 if (window.crl8 && window.crl8._loaded) { 886 return; 887 } 888 889 // Initialize Curalate 890 !(function (siteName) { 891 var e = (window.crl8 = window.crl8 || {}), 892 n = !1, 893 i = []; 894 (e.ready = function (e) { 895 n ? e() : i.push(e); 896 }), 897 (e.pixel = 898 e.pixel || 899 function () { 900 e.pixel.q.push(arguments); 901 }), 902 (e.pixel.q = e.pixel.q || []); 903 var t = window.document, 904 o = t.createElement('script'), 905 c = e.debug || -1 !== t.location.search.indexOf('crl8-debug=true') ? 'js' : 'min.js'; 906 (o.async = !0), 907 (o.src = t.location.protocol + '//edge.curalate.com/sites/' + siteName + '/site/latest/site.' + c), 908 (o.onload = function () { 909 (n = !0), 910 i.forEach(function (e) { 911 e(); 912 }); 913 // Mark as loaded to prevent duplicate initialization 914 e._loaded = true; 915 }); 916 var r = t.getElementsByTagName('script')[0]; 917 r.parentNode.insertBefore(o, r.nextSibling); 918 })(CURALATE_SITE_NAME); 919 } 920 921 // Initialize consent-based Curalate loader 922 function initConsentBasedCuralate() { 923 const hasConsent = checkTrackingConsent(); 924 925 if (hasConsent) { 926 // Consent already granted - load Curalate after page load with delay 927 window.addEventListener('load', function() { 928 setTimeout(loadCuralate, 2000); 929 }); 930 } else { 931 // Wait for consent grant event 932 document.addEventListener('trackingConsentGranted', function() { 933 // Load immediately when consent is granted (no need to wait for page load) 934 setTimeout(loadCuralate, 2000); 935 }, { once: true }); 936 } 937 } 938 939 // Run initialization 940 if (document.readyState === 'loading') { 941 document.addEventListener('DOMContentLoaded', initConsentBasedCuralate); 942 } else { 943 initConsentBasedCuralate(); 944 } 945 })(); 946</script>
946 947 948<!-- Slick Slider 1.8.1 - Deferred for PageSpeed --><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick.min.css?v=103443148378814735961779203468" media="print" onload="this.media='all'"> 949 <noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick.min.css?v=103443148378814735961779203468"></noscript> 950 <style> 951 /* slick-theme â font paths resolved via Shopify asset_url */ 952 @font-face { 953 font-family: 'slick'; 954 font-weight: normal; 955 font-style: normal; 956 font-display: swap; 957 src: url('//www.olay.com/cdn/shop/t/10/assets/slick-font.woff?v=111354281175319789571779203467') format('woff'), 958 url('//www.olay.com/cdn/shop/t/10/assets/slick-font.ttf?v=51727957652983676071779203466') format('truetype'), 959 url('//www.olay.com/cdn/shop/t/10/assets/slick-font.svg%23slick?v=4836') format('svg'); 960 } 961 .slick-loading .slick-list { background: #fff url('//www.olay.com/cdn/shop/t/10/assets/slick-ajax-loader.gif?v=344831891803776881779203468') center center no-repeat; } 962 .slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0} 963 .slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0} 964 .slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1} 965 .slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25} 966 .slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} 967 .slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'â'}[dir=rtl] .slick-prev:before{content:'â'} 968 .slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}.slick-next:before{content:'â'}[dir=rtl] .slick-next:before{content:'â'} 969 .slick-dotted.slick-slider{margin-bottom:30px} 970 .slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center} 971 .slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer} 972 .slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0} 973 .slick-dots li button:focus,.slick-dots li button:hover{outline:0} 974 .slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1} 975 .slick-dots li button:before{font-family:slick;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'â¢';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} 976 .slick-dots li.slick-active button:before{opacity:.75;color:#000} 977 </style> 978 979
979<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
979<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/66143911979/digital_wallets/dialog"> 980<meta id="in-context-paypal-metadata" data-shop-id="66143911979" data-venmo-supported="false" data-environment="production" data-locale="en_US" data-paypal-v4="true" data-currency="USD">
981<script async="async" src="/checkouts/internal/preloads.js?locale=en-US&default_configuration_id=33176092715"></script>
981 982<link rel="preconnect" href="https://shop.app" crossorigin="anonymous">
983<script async="async" src="https://shop.app/checkouts/internal/preloads.js?locale=en-US&default_configuration_id=33176092715&shop_id=66143911979" crossorigin="anonymous"></script>
vendor: 1 bytes, line 983
983
984<script id="apple-pay-shop-capabilities" type="application/json">{"shopId":66143911979,"countryCode":"US","currencyCode":"USD","merchantCapabilities":["supports3DS"],"merchantId":"gid:\/\/shopify\/Shop\/66143911979","merchantName":"OLAY","requiredBillingContactFields":["postalAddress","email"],"requiredShippingContactFields":["postalAddress","email"],"shippingType":"shipping","supportedNetworks":["visa","masterCard","amex","discover","elo","jcb"],"total":{"type":"pending","label":"OLAY","amount":"1.00"},"shopifyPaymentsEnabled":true,"supportsSubscriptions":true}</script>
vendor: 1 bytes, line 984
984
985<script id="shopify-features" type="application/json">{"accessToken":"ef90b86b193b1c9350ef0912ac6f90ec","betas":["rich-media-storefront-analytics"],"domain":"www.olay.com","predictiveSearch":true,"shopId":66143911979,"locale":"en"}</script>
vendor: 1 bytes, line 985
985
986<script>var Shopify = Shopify || {}; 987Shopify.shop = "x36ngn-ms.myshopify.com"; 988Shopify.locale = "en"; 989Shopify.currency = {"active":"USD","rate":"1.0"}; 990Shopify.country = "US"; 991Shopify.theme = {"name":"pg-olay-shopify-theme-migration\/Release-Prod","id":183716282411,"schema_name":"Blockshop","schema_version":"13.0.1","theme_store_id":null,"role":"main"}; 992Shopify.theme.handle = "null"; 993Shopify.theme.style = {"id":null,"handle":null}; 994Shopify.cdnHost = "www.olay.com/cdn"; 995Shopify.routes = Shopify.routes || {}; 996Shopify.routes.root = "/"; 997Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js"; 998Shopify.SignInWithShop = Shopify.SignInWithShop || {}; 999Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {}; 1000Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 1000
1000
1001<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 1001
1001
1002<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 1002
1002
1003<script> 1004 window.ShopifyPay = window.ShopifyPay || {}; 1005 window.ShopifyPay.apiHost = "shop.app\/pay"; 1006 window.ShopifyPay.redirectState = null; 1007</script>
vendor: 1 bytes, line 1007
1007
1008<script> 1009 window.Shopify = window.Shopify || {}; 1010 window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {}; 1011 window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 }; 1012 window.Shopify.SignInWithShop.eligible = false; 1013</script>
vendor: 1 bytes, line 1013
1013
1014<script id="shop-js-analytics" type="application/json">{"pageType":"page"}</script>
vendor: 1 bytes, line 1014
1014
1015<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
vendor: 1 bytes, line 1015
1015
1016<script type="module"> 1017 await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"); 1018 1019 window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true}); 1020 1021</script>
vendor: 1 bytes, line 1021
1021
1022<script> 1023 window.Shopify = window.Shopify || {}; 1024 if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {}; 1025 window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]}; 1026</script>
vendor: 1 bytes, line 1026
1026
1027<script>(function() { 1028 var isLoaded = false; 1029 function asyncLoad() { 1030 if (isLoaded) return; 1031 isLoaded = true; 1032 var urls = ["https:\/\/cdn.rebuyengine.com\/onsite\/js\/rebuy.js?shop=x36ngn-ms.myshopify.com","\/\/cdn.shopify.com\/proxy\/56cd4c876000fdaf2b386f6ace259a4781d3efb7f55e297ce08e91258bd6a435\/api.kount.com\/shopify\/js?m_id=604117\u0026shop=x36ngn-ms.myshopify.com\u0026sp-cache-control=cHVibGljLCBtYXgtYWdlPTkwMA"]; 1033 for (var i = 0; i < urls.length; i++) { 1034 var s = document.createElement('script'); 1035 s.type = 'text/javascript'; 1036 s.async = true; 1037 s.src = urls[i]; 1038 var x = document.getElementsByTagName('script')[0]; 1039 x.parentNode.insertBefore(s, x); 1040 } 1041 }; 1042 if(window.attachEvent) { 1043 window.attachEvent('onload', asyncLoad); 1044 } else { 1045 window.addEventListener('load', asyncLoad, false); 1046 } 1047})();</script>
vendor: 1 bytes, line 1047
1047
1048<script id="__st">var __st={"a":66143911979,"offset":-14400,"reqid":"c101279f-f188-4f5e-854f-feb6a04251f4-1790274562","pageurl":"www.olay.com\/pages\/create-account","s":"pages-699362705451","u":"2fcd6c4129f1","p":"page","rtyp":"page","rid":699362705451};</script>
vendor: 1 bytes, line 1048
1048
1049<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 1049
1049
1050<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!1)}();</script>
vendor: 1 bytes, line 1050
1050
1051<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//www.olay.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1051
1051
1052<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//www.olay.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
1052<script crossorigin="anonymous" defer="defer" src="//www.olay.com/cdn/shopifycloud/storefront/assets/shopify_pay/storefront-616277c7.js?v=20250812"></script>
vendor: 1 bytes, line 1052
1052
1053<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 1053
1053
1054<script> 1055 window.Shopify = window.Shopify || {}; 1056 window.Shopify.MCP = window.Shopify.MCP || {}; 1057 window.Shopify.MCP.enabled = true; 1058 window.Shopify.MCP.shop = "x36ngn-ms.myshopify.com"; 1059 window.Shopify.MCP.mcpEndpoint = "https:\/\/www.olay.com\/api\/mcp"; 1060 window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n - What is your return policy?\n - What is your shipping policy?\n - What is your phone number?\n - What are your hours of operation?\"\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."}},"required":["query"]}}]; 1061</script>
vendor: 1 bytes, line 1061
1061
1062<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/www.olay.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})(); 1063</script>
vendor: 1 bytes, line 1063
1063
1064<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://www.olay.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}}; 1065</script>
vendor: 1 bytes, line 1065
1065
1066<script data-source-attribution="shopify.dynamic_checkout.buyer_consent"> 1067 function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent); 1068</script>
vendor: 1 bytes, line 1068
1068
1069<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}})); 1070</script>
1070 1071<link id="shopify-accelerated-checkout-styles" rel="stylesheet" media="screen" href="https://www.olay.com/cdn/shopifycloud/portable-wallets/latest/accelerated-checkout-backwards-compat.css" crossorigin="anonymous"> 1072<style id="shopify-accelerated-checkout-cart"> 1073 #shopify-buyer-consent { 1074 margin-top: 1em; 1075 display: inline-block; 1076 width: 100%; 1077} 1078 1079#shopify-buyer-consent.hidden { 1080 display: none; 1081} 1082 1083#shopify-subscription-policy-button { 1084 background: none; 1085 border: none; 1086 padding: 0; 1087 text-decoration: underline; 1088 font-size: inherit; 1089 cursor: pointer; 1090} 1091 1092#shopify-subscription-policy-button::before { 1093 box-shadow: none; 1094} 1095 1096 </style> 1097<link rel="stylesheet" media="screen" href="//www.olay.com/cdn/shop/t/10/compiled_assets/styles.css?v=176896877714171008531790055677">
1098<script id="sections-script" data-sections="login-model" defer="defer" src="//www.olay.com/cdn/shop/t/10/compiled_assets/scripts.js?v=72143950487254657171779203508"></script>
vendor: 1 bytes, line 1098
1098
1099<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
vendor: 1 bytes, line 1099
1099
1100<script src="//www.olay.com/cdn/shop/t/10/assets/rebuy-cart-fix.js?v=162588278479567118451785409404" defer></script>
1100<!-- snippets/routes.liquid -->
1100<script> 1101 if (Shopify) { 1102 Shopify.routes = { 1103 ...Shopify.routes, 1104 all_products_collection: '/collections/all', 1105 cart: '/cart', 1106 cart_add: '/cart/add', 1107 cart_change: '/cart/change', 1108 cart_update: '/cart/update', 1109 libraries: { 1110 theme_async: "//www.olay.com/cdn/shop/t/10/assets/theme-async.js?v=143171013185924877741788936642", 1111 masonry: "//www.olay.com/cdn/shop/t/10/assets/masonry.min.js?v=153413113355937702121772534240", 1112 plyr: "/cdn/shopifycloud/plyr/v2.0/shopify-plyr.en.js", 1113 swipe_listener: "//www.olay.com/cdn/shop/t/10/assets/swipe-listener.min.js?v=123039615894270182531772534241", 1114 vimeo: "https://player.vimeo.com/api/player.js" 1115 }, 1116 product_recommendations: '/recommendations/products', 1117 predictive_search: '/search/suggest', 1118 search: '/search', 1119 root: '/', 1120 youtube: 'https://youtube.com/iframe_api' 1121 } 1122 } 1123</script>
1123<script src="//www.olay.com/cdn/shop/t/10/assets/jquery.min.js?v=147293088974801289311779203466" defer></script>
1123<script src="//www.olay.com/cdn/shop/t/10/assets/rebuy-cart-fix.js?v=162588278479567118451785409404" defer></script>
1123 1124 1125
1125<script> 1126 (function () { 1127 1128 const SHOP_ID = "66143911979"; 1129 const STORAGE_KEY = "mo_customer_logged_" + SHOP_ID; 1130 1131 const LOGOUT_URL = "https://pg.xecurify.com/moas/idp/oidc/logout?post_logout_redirect_uri=https://www.olay.com/customer_identity/logout"; 1132 1133 1134 if (localStorage.getItem(STORAGE_KEY)) { 1135 localStorage.removeItem(STORAGE_KEY); 1136 window.location.href = LOGOUT_URL; 1137 } 1138 1139 1140 })(); 1141 </script>
1141 1142
1143<script type="module" src="//www.olay.com/cdn/shop/t/10/assets/theme.js?v=168616996959632291441790055673" defer></script>
1143 1144
1144<script src="//www.olay.com/cdn/shop/t/10/assets/club-olay-pricing.js?v=12815026447236107621780736832" defer></script>
1144 1145
1145<script src="//www.olay.com/cdn/shop/t/10/assets/club-olay-ordergroove-integration.js?v=39752010455004195541780736831" defer></script>
1145 1146
1146<script src="//www.olay.com/cdn/shop/t/10/assets/product-card-slider.js?v=31276142040325463091779203465" defer></script>
1146 1147
1147<script src="//www.olay.com/cdn/shop/t/10/assets/slick-a11y-fix.js?v=133226406664206843461783320609" defer></script>
1147<script src="//www.olay.com/cdn/shop/t/10/assets/algolia-autocomplete-custom.js?v=118055193124865790931781251135" defer></script>
1147<script src="//www.olay.com/cdn/shop/t/10/assets/OSA-custom.js?v=106244461974805445911783320608" defer></script>
1147<script> 1148 window.addEventListener('load', function() {var script = document.createElement('script'); 1149 script.src = 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js'; 1150 script.type = 'text/javascript'; 1151 script.charset = 'UTF-8'; 1152 script.setAttribute('data-domain-script', '7599faa8-d7d1-4c2d-a8a2-9507e625e4c0-test'); 1153 document.head.appendChild(script); 1154 }); 1155 </script>
1155 1156 1157 <!-- click tracking - Deferred for PageSpeed (TBT optimization) + Privacy Consent Check -->
1158<script> 1159 // PRIVACY FIX: Only initialize tracking after user consent is granted 1160 function initGTMClickTracking() { 1161 // Check for tracking consent before initializing 1162 const hasConsent = checkTrackingConsent(); 1163 1164 if (!hasConsent) { 1165 // If no consent yet, listen for consent grant event 1166 document.addEventListener('trackingConsentGranted', function() { 1167 attachClickListeners(); 1168 }, { once: true }); 1169 return; 1170 } 1171 1172 // Consent already granted - attach listeners immediately 1173 attachClickListeners(); 1174 } 1175 1176 // Check if user has granted tracking consent 1177 function checkTrackingConsent() { 1178 // Check OneTrust consent (Performance cookies = category 2) 1179 if (typeof window.OnetrustActiveGroups === 'string' && window.OnetrustActiveGroups.includes('2,')) { 1180 return true; 1181 } 1182 1183 // Check Shopify Customer Privacy API 1184 if (window.Shopify && window.Shopify.customerPrivacy) { 1185 const consent = window.Shopify.customerPrivacy.getTrackingConsent(); 1186 if (consent === 'yes' || consent === true) { 1187 return true; 1188 } 1189 } 1190 1191 return false; 1192 } 1193 1194 // Attach click tracking event listeners (only called after consent) 1195 function attachClickListeners() { 1196 // function that gets the path of the clicked element. Borrowed from Simo Ahava. https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/ 1197 function gtm_get_click_element_path(element) { 1198 var el = element; 1199 if (el instanceof Node) { 1200 // Build the list of elements along the path 1201 var elList = []; 1202 do { 1203 if (el instanceof Element) { 1204 var classString = el.classList ? [].slice.call(el.classList).join('.') : ''; 1205 var elementName = (el.tagName ? el.tagName.toLowerCase() : '') + 1206 (classString ? '.' + classString : '') + 1207 (el.id ? '#' + el.id : ''); 1208 if (elementName) elList.unshift(elementName); 1209 } 1210 el = el.parentNode 1211 } while (el != null); 1212 // Get the stringified element object name 1213 var objString = element.toString().match(/\[object (\w+)\]/); 1214 var elementType = objString ? objString[1] : element.toString(); 1215 var cssString = elList.join(' > '); 1216 // Return the CSS path as a string, prefixed with the element object name 1217 return cssString ? elementType + ': ' + cssString : elementType; 1218 } 1219 } 1220 1221 window.addEventListener("click", function(event){ 1222 1223 // track clicks on any element and push it to Shopify customer events 1224 Shopify.analytics.publish("custom_click",{ 1225 click_element : gtm_get_click_element_path(event.target) || '', 1226 click_id : event.target.id || '', 1227 click_classes : event.target.className || '', 1228 click_text : event.target.innerText || '', 1229 click_target : event.target.target || '', 1230 click_url : event.target.href || '' 1231 }); 1232 1233 // track link clicks and push it to Shopify customer events 1234 var closestLink = event.target.closest('a') 1235 if (closestLink){ 1236 Shopify.analytics.publish("custom_link_click",{ 1237 click_element : gtm_get_click_element_path(closestLink.target) || '', 1238 click_id : closestLink.id || '', 1239 click_classes : closestLink.className || '', 1240 click_text : closestLink.innerText || '', 1241 click_target : closestLink.target || '', 1242 click_url : closestLink.href || '' 1243 }) 1244 } 1245 }); 1246 } 1247 1248 // Defer initialization until browser is idle (reduces TBT by ~1,000ms) 1249 if ('requestIdleCallback' in window) { 1250 requestIdleCallback(initGTMClickTracking, { timeout: 3000 }); 1251 } else { 1252 // Fallback for browsers without requestIdleCallback 1253 setTimeout(initGTMClickTracking, 2000); 1254 } 1255</script>
1255 1256<!-- end of click tracking --> 1257
1258<script> 1259 window.pypestreamConfig = { 1260 APP_ID: 'cbef6a14-10ee-4ecb-9d63-aa04a75f8995', 1261 language: 'en', 1262 play_chime: false 1263 }; 1264 1265 function insertScript () { 1266 var script = document.createElement('script'); 1267 script.type = 'text/javascript'; 1268 script.src = 'https://web.pypestream.com/launcher.js?ts=' + Date.now(); 1269 script.async = true; 1270 document.body.appendChild(script); 1271 } 1272 1273 if (document.readyState === 'complete') { 1274 insertScript(); 1275 } else { 1276 window.addEventListener('load', insertScript); 1277 } 1278</script>
1278 1279<!-- Cart drawer view_cart tracking: publish cart data when mini-cart drawer opens -->
1280<script> 1281(function() { 1282 'use strict'; 1283 1284 var cartDrawerOpened = false; 1285 1286 window.addEventListener('theme:drawer:right:opening', function() { 1287 // Verify the cart drawer is present in the DOM 1288 var cartDrawer = document.querySelector('.cart--root[data-view="drawer"]'); 1289 if (!cartDrawer) return; 1290 1291 cartDrawerOpened = true; 1292 1293 fetch('/cart.js') 1294 .then(function(response) { return response.json(); }) 1295 .then(function(cart) { 1296 if (!cartDrawerOpened) return; 1297 cartDrawerOpened = false; 1298 if (window.Shopify && window.Shopify.analytics) { 1299 Shopify.analytics.publish('cart_drawer_opened', { cart: cart }); 1300 } 1301 }) 1302 .catch(function() { 1303 cartDrawerOpened = false; 1304 }); 1305 }); 1306 1307 // Reset flag if drawer closes before fetch resolves 1308 window.addEventListener('theme:drawer:right:closed', function() { 1309 cartDrawerOpened = false; 1310 }); 1311})(); 1312</script>
1312 1313 <!-- BEGIN app block: shopify://apps/ordergroove-subscriptions/blocks/main-app-embed/cf69fc68-e893-4d33-87e3-4e71e2f5822f --> 1314 1315 1316 1317 1318 1319
1320<script 1321 type="text/javascript" 1322 src="https://static.ordergroove.com/17242c24d4c311e98de1bc764e10b970/main.js" 1323 defer 1324 data-shopify-selling-plans 1325 ></script>
1325 1326 1327
1328<script> 1329 document.addEventListener("DOMContentLoaded", (event) => { 1330 const ordergrooveJsInstances = Array.from(document.querySelectorAll('script[src*="ordergroove.js"]')); 1331 if (ordergrooveJsInstances.length > 0) { 1332 console.warn("Multiple Ordergroove Theme Integrations appear to be in use. Subscriptions may not work as intended. Please check your theme setup."); 1333 } 1334 }); 1335</script>
1335 1336 1337 1338<!-- END app block --><!-- BEGIN app block: shopify://apps/bazaarvoice-reviews-photos/blocks/bvjs_block/766ed9d3-b120-48f3-8444-448f45152f47 --> 1339
1340<script> 1341 window.localStorage.setItem("bv_client_configuration", JSON.stringify({"client_name":"olay","environment":"production","use_external_ids":false,"use_variants":false,"external_id_attribute":"sku","product_metafield_key":"","product_metafield_namespace":"","default_deployment_zone":"main_site","default_locale":"en_US","locale_mapping":{"en":["en_US"]},"deployment_zone_mapping":{"Main Site":["*"]}})); 1342</script>
1342 1343 1344
1344<script src="https://apps.bazaarvoice.com/deployments/olay/main_site/production/en_US/bv.js" async></script>
1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354<!-- END app block --><!-- BEGIN app block: shopify://apps/ab-tasty/blocks/abtasty-tag/50439cd8-89e0-4240-838a-2948c07c763d --> 1355 1356
1356<script 1357 type="text/javascript" 1358 src="https://try.abtasty.com/4946d8bf53d0549ab361173996360343.js" 1359 async 1360 ></script>
1360 1361 1362
1362<script type="text/javascript"> 1363 // This waits for all the external ressources (including ABTasty tag) to load before executing the callback function. 1364 window.addEventListener('load', function () { 1365 if(!window.ABTasty) { 1366 // AB Tasty tag is not loaded so exit. 1367 return 1368 } 1369 1370 if (window.ABTasty.eventState?.['consentValid']?.status === 'complete') { 1371 updateShopifyDataForWebPixel(); 1372 } else { 1373 window.addEventListener('abtasty_consentValid', () => { 1374 updateShopifyDataForWebPixel(); 1375 }); 1376 } 1377 1378 1379 async function waitForVisitorId(maxRetries = 5, delayMs = 500) { 1380 for (let i = 0; i < maxRetries; i++) { 1381 const visitorId = ABTasty.api.v1.getValue('visitorId') 1382 if (visitorId) { 1383 return visitorId; 1384 } 1385 await new Promise(resolve => setTimeout(resolve, delayMs)); 1386 } 1387 return null; 1388 } 1389 1390 1391 async function updateShopifyDataForWebPixel() { 1392 const STORAGE_KEY = 'ABTastyShopify'; 1393 const consentReady = ABTasty.consentReady; 1394 const shouldHandleSubdomain = "false" === "true"; 1395 1396 if(!consentReady) { 1397 if(shouldHandleSubdomain) { 1398 await cookieStore.delete(STORAGE_KEY); 1399 } 1400 return localStorage.removeItem(STORAGE_KEY); 1401 } 1402 1403 const visitorId = await waitForVisitorId(5, 500); 1404 1405 if (!visitorId) { 1406 console.error('[AB Tasty] Unable to get AB Tasty visitorID after 5 retry'); 1407 return; 1408 } 1409 1410 const ABTastyData = { 1411 identifier: "4946d8bf53d0549ab361173996360343", 1412 campaigns: ABTasty.getCampaignHistory(), 1413 visitorId: visitorId, 1414 accountId: ABTasty.getAccountSettings().id, 1415 consent: ABTasty.consentReady, 1416 }; 1417 1418 if (shouldHandleSubdomain) { 1419 await cookieStore.set({ 1420 name: STORAGE_KEY, 1421 value: JSON.stringify(ABTastyData), 1422 expires: Date.now() + 1 * 24 * 60 * 60 * 1000, // 1 day 1423 domain: window.location.hostname, 1424 }); 1425 } 1426 localStorage.setItem(STORAGE_KEY, JSON.stringify(ABTastyData)); 1427 } 1428 }); 1429 </script>
1429 1430 1431 1432 1433 1434 1435<!-- END app block --><!-- BEGIN app block: shopify://apps/attentive/blocks/attn-tag/8df62c72-8fe4-407e-a5b3-72132be30a0d -->
1435<script type="text/javascript" src="https://cnabc.olay.com/olay/load" onerror=" var fallbackScript = document.createElement('script'); fallbackScript.src = 'https://cdn.attn.tv/olay/dtag.js'; document.head.appendChild(fallbackScript);" data-source="loaded?source=app-embed" defer="defer"></script>
1435 1436 1437 1438<!-- END app block --><!-- BEGIN app block: shopify://apps/yotpo-loyalty-rewards/blocks/loader-app-embed-block/2f9660df-5018-4e02-9868-ee1fb88d6ccd --> 1439
1439<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/-521omSQ7xo5NUlge295Qw" async></script>
1439 1440 1441 1442 1443 1444<!-- END app block -->
1444<script src="https://cdn.shopify.com/extensions/01a0b0d0-5b4e-75c9-9538-927dc23cc42a/ab273f809a5da1f7468216e787f20c950431cc24-36611/assets/algolia_autocomplete.js" type="text/javascript" defer="defer"></script>
1444 1445<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0661/4391/1979/files/home-og-image-pref.jpg?v=1783585746" /> 1446<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/0661/4391/1979/files/home-og-image-pref.jpg?v=1783585746" /> 1447<meta property="og:image:width" content="1200" /> 1448<meta property="og:image:height" content="1108" /> 1449<link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
1450<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 66143911979,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "page"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 1450
1450
1451<script> 1452 window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || []; 1453</script>
vendor: 1 bytes, line 1453
1453
1454<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
1454).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 66143911979,storefrontBaseUrl: "https://www.olay.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://www.olay.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["16072cab","8450a54b"],webPixelsConfigList: [{"id":"2075459627","configuration":"{\"env\":\"prod\"}","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"8a9a175b11d15038a70fe78d09c59720","type":"APP","apiClientId":3977633,"privacyPurposes":["ANALYTICS","MARKETING"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"2040758315","configuration":"{\"locale\":\"en_US\",\"client\":\"Olay\",\"environment\":\"production\",\"deployment_zone\":\"main_site\",\"use_external_ids\":\"false\",\"use_variants\":\"false\",\"external_id_attribute\":\"sku\",\"storefront_api_key\":\"1291cb3a54866fce600f8c5e7d13fd3e\",\"product_metafield_key\":\"none\",\"product_metafield_namespace\":\"none\",\"multi_locale_enabled\":\"true\",\"locale_mapping\":\"{\\\"en\\\":[\\\"en_US\\\"]}
1454\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"bf601cbef12079fa1ab77422415f1989","type":"APP","apiClientId":1888040,"privacyPurposes":["ANALYTICS","MARKETING"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized"},{"id":"1656815659","configuration":"{\"cart_viewed\":\"true\",\"checkout_address_info_submitted\":\"true\",\"checkout_completed\":\"true\",\"checkout_contact_info_submitted\":\"true\",\"checkout_shipping_info_submitted\":\"true\",\"checkout_started\":\"true\",\"collection_viewed\":\"true\",\"page_viewed\":\"true\",\"payment_info_submitted\":\"true\",\"product_added_to_cart\":\"true\",\"product_removed_from_cart\":\"true\",\"product_viewed\":\"true\",\"search_submitted\":\"true\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"4b912d4db8d67578541bfae8b70a40a9","type":"APP","apiClientId":100317265921,"privacyPurposes":["ANALYTICS"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":[],"dataSharingControls":["share_all_events"]},"dataSharingState":"unrestricted"},{"id":"145948715","eventPayloadVersion":"1","runtimeContext":"LAX","scriptVersion":"43","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"name":"CAT-PGDataLayer"},{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"OLAY","paymentSettings":{"currencyCode":"USD"},"myshopifyDomain":"x36ngn-ms.myshopify.com","countryCode":"US","storefrontUrl":"https:\/\/www.olay.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[{"id":"7918651244587","handle":"regenerist-micro-sculpting-cream-moisturizer","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071672873003","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918638628907","handle":"olay-intensely-hydrating-body-wash-strawberry","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071663435819","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918655963179","handle":"age-defying-body-wash-with-vitamin-e","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071678050347","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918655012907","handle":"age-defying-anti-wrinkle-night-cream","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071676313643","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649081899","handle":"age-defying-body-wash-with-niacinamide","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071674740779","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918642266155","handle":"age-defying-classic-daily-renewal-cream-face-moisturizer","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071663173675","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649671723","handle":"age-defying-classic-facial-cleanser","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071671234603","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918638170155","handle":"age-defying-classic-night-cream-face-moisturizer","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071661731883","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918635319339","handle":"clarifying-daily-facial-cleanser-with-niacinamide","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071659569195","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918654062635","handle":"cleanse-toner","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071675232299","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649344043","handle":"cleansing-brightening-body-wash-with-vitamin-b3-and-vitamin-c","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071669104683","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649147435","handle":"cleansing-firming-body-wash-with-vitamin-b3-and-collagen","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071668940843","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918639874091","handle":"complete-lotion-moisturizer-normal-spf-15-4oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071663009835","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918642888747","handle":"complete-lotion-moisturizer-normal-spf-15-6oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071665565739","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918651736107","handle":"complete-lotion-moisturizer-sensitive-spf-15-4oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071673266219","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918654783531","handle":"complete-lotion-moisturizer-sensitive-spf-30","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071676018731","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918640758827","handle":"complete-lotion-moisturizer-sensitive-with-sunscreen-spf-15-6oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071661862955","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918631059499","handle":"complete-moisturizer-hydrating-cream-spf-15","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071653965867","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918631092267","handle":"daily-facials-cleansing-cloths-daily-hydrating-clean-66-count","
1454isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654850603","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918628077611","handle":"daily-facials-cleansing-cloths-deeply-purifying-clean-66-ct","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071652065323","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918634205227","handle":"daily-facials-cleansing-cloths-gentle-sensitive-clean-33-ct","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071657898027","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918647050283","handle":"deep-hydration-vitamin-b3-hyaluronic-acid-serum-fragrance-free","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071667007531","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918635286571","handle":"detoxifying-pore-scrub-with-pro-vitamin-b5","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071658848299","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918653636651","handle":"olay-magic-aa-toner","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071679229995","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918646820907","handle":"fan-faves-power-couple","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071672348715","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649901099","handle":"fresh-outlast-body-wash-rose-water-sweet-nectar","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071669694507","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918651572267","handle":"fresh-outlast-body-wash-rose-water-sweet-nectar-pump","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071677001771","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918646165547","handle":"micro-sculpting-cream-moisturizer-trial-size","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071668383787","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918642692139","handle":"night-of-olay-firming-night-cream-for-radiant-skin","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071665401899","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918637776939","handle":"olay-active-hydrating-beauty-moisturizing-lightweight-lotion-for-all-ages-4oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071661273131","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918631026731","handle":"olay-active-hydrating-beauty-moisturizing-lightweight-lotion-for-all-ages-6oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654883371","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918655995947","handle":"olay-active-hydrating-beauty-moisturizing-lotion-for-sensitive-skin","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071678214187","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918654423083","handle":"olay-active-hydrating-cream-face-moisturizer-for-deep-hydration-2oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071675559979","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918655438891","handle":"olay-active-hydrating-cream-face-moisturizer-for-deep-hydration-3-4oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071675199531","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918639743019","handle":"olay-active-hydrating-eye-cream","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071664615467","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918633189419","handle":"olay-balancing-cream-cleanser-with-collagen-peptide","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071658422315","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649737259","handle":"olay-berry-passionate-body-wash-with-notes-of-passionfruit-and-guava-vitamin-b3-and-antioxidant-blend-22oz","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071675854891","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7955387383851","handle":"olay-best-sellers-micro-sculpting-cream-and-retinoid-power-couple","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44204976144427","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]}
1454,{"id":"7918650064939","handle":"olay-brightening-exfoliating-cleanser-with-vitamin-c","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071675822123","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918649573419","handle":"olay-brightening-eyes-vitamin-c-eye-cream","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071675428907","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918630338603","handle":"olay-cleansing-melts-hyaluronic-32-count","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654260779","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918629847083","handle":"olay-cleansing-melts-retinol-12-count","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071653900331","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918630076459","handle":"olay-cleansing-melts-retinol-32-count","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654096939","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918629191723","handle":"olay-cleansing-melts-vitamin-c-12-count","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071653277739","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918629421099","handle":"olay-cleansing-melts-vitamin-c-32-count","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071653474347","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918645510187","handle":"olay-collagen-peptide-max-moisturizing-cream","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071671660587","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918645837867","handle":"olay-collagen-peptide-max-visibly-firming-serum","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071671922731","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918632402987","handle":"olay-collagen-peptide-moisturizing-cream","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071657865259","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918632730667","handle":"olay-collagen-peptide-visibly-firming-serum","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071658094635","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918630666283","handle":"olay-complete-daily-facial-moisturizer-with-sunscreen-broad-spectrum-spf-40","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654621227","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918630862891","handle":"olay-complete-hydrating-lotion-sensitive","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654785067","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"7918631125035","handle":"olay-complete-rich-moisturizing-cream-sensitive","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"44071654981675","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]}],"purchasingCompany":null},},"https://www.olay.com/cdn","c8540278we853e1abpb62b2c4amde256306",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"183716282411","themePublished":"true","eventMetadataId":"831eee8c-5f10-4f0b-9329-c27fc05ce867","pageType":"page","resourceId":"699362705451","shopId":"66143911979","storefrontBaseUrl":"https:\/\/www.olay.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"16072cab\", \"8450a54b\"]","isMerchantRequest":"false","hashVersion":"c8540278we853e1abpb62b2c4amde256306","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
1454<script> 1455 window.ShopifyAnalytics = window.ShopifyAnalytics || {}; 1456 window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {}; 1457 window.ShopifyAnalytics.meta.currency = 'USD'; 1458 var meta = {"page":{"pageType":"page","resourceType":"page","resourceId":699362705451,"requestId":"c101279f-f188-4f5e-854f-feb6a04251f4-1790274562"}}; 1459 for (var attr in meta) { 1460 window.ShopifyAnalytics.meta[attr] = meta[attr]; 1461 } 1462</script>
vendor: 1 bytes, line 1462
1462
1463<script class="analytics"> 1464 (function () { 1465 var customDocumentWrite = function(content) { 1466 var jquery = null; 1467 1468 if (window.jQuery) { 1469 jquery = window.jQuery; 1470 } else if (window.Checkout && window.Checkout.$) { 1471 jquery = window.Checkout.$; 1472 } 1473 1474 if (jquery) { 1475 jquery('body').append(content); 1476 } 1477 }; 1478 1479 var hasLoggedConversion = function(token) { 1480 if (token) { 1481 return document.cookie.indexOf('loggedConversion=' + token) !== -1; 1482 } 1483 return false; 1484 } 1485 1486 var setCookieIfConversion = function(token) { 1487 if (token) { 1488 var twoMonthsFromNow = new Date(Date.now()); 1489 twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2); 1490 1491 document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow; 1492 } 1493 } 1494 1495 var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || []; 1496 window.ShopifyAnalytics.lib.trekkie = window.trekkie; 1497 if (trekkie.integrations) { 1498 return; 1499 } 1500 trekkie.methods = [ 1501 'identify', 1502 'page', 1503 'ready', 1504 'track', 1505 'trackForm', 1506 'trackLink' 1507 ]; 1508 trekkie.factory = function(method) { 1509 return function() { 1510 var args = Array.prototype.slice.call(arguments); 1511 args.unshift(method); 1512 trekkie.push(args); 1513 if (method == 'track' || method == 'page') { 1514 try { 1515 if (window.__TREKKIE_SHIM_QUEUE == null) { 1516 window.__TREKKIE_SHIM_QUEUE = []; 1517 } 1518 window.__TREKKIE_SHIM_QUEUE.push({ 1519 from: 'trekkie-stub', 1520 method: method, 1521 args: args.slice(1) 1522 }); 1523 } catch (e) { 1524 // no-op 1525 } 1526 } 1527 return trekkie; 1528 }; 1529 }; 1530 for (var i = 0; i < trekkie.methods.length; i++) { 1531 var key = trekkie.methods[i]; 1532 trekkie[key] = trekkie.factory(key); 1533 } 1534 trekkie.load = function(config) { 1535 trekkie.config = config || {}; 1536 trekkie.config.initialDocumentCookie = document.cookie; 1537 var first = document.getElementsByTagName('script')[0]; 1538var script = document.createElement('script'); 1539script.type = 'text/javascript'; 1540script.onerror = function(e) { 1541 var scriptFallback = document.createElement('script'); 1542 scriptFallback.type = 'text/javascript'; 1543 scriptFallback.onerror = function(error) { 1544 var Monorail = { 1545 produce: function produce(monorailDomain, schemaId, payload) { 1546 var currentMs = new Date().getTime(); 1547 var event = { 1548 schema_id: schemaId, 1549 payload: payload, 1550 metadata: { 1551 event_created_at_ms: currentMs, 1552 event_sent_at_ms: currentMs 1553 } 1554 }; 1555 return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event)); 1556 }, 1557 sendRequest: function sendRequest(endpointUrl, payload) { 1558 // Try the sendBeacon API 1559 if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) { 1560 var blobData = new window.Blob([payload], { 1561 type: 'text/plain' 1562 }); 1563 1564 if (window.navigator.sendBeacon(endpointUrl, blobData)) { 1565 return true; 1566 } // sendBeacon was not successful 1567 1568 } // XHR beacon 1569 1570 var xhr = new XMLHttpRequest(); 1571 1572 try { 1573 xhr.open('POST', endpointUrl); 1574 xhr.setRequestHeader('Content-Type', 'text/plain'); 1575 xhr.send(payload); 1576 } catch (e) { 1577 console.log(e); 1578 } 1579 1580 return false; 1581 }, 1582 isIos12: function isIos12() { 1583 return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1; 1584 } 1585 }; 1586 Monorail.produce('monorail-edge.shopifysvc.com', 1587 'trekkie_storefront_load_errors/1.1', 1588 {shop_id: 66143911979, 1589 theme_id: 183716282411, 1590 app_name: "storefront", 1591 context_url: window.location.href, 1592 source_url: "//www.olay.com/cdn/s/trekkie.storefront.f1ba865b3fecd812ad617f74ac079261075e9edb.min.js"}); 1593 1594 }; 1595 scriptFallback.async = true; 1596 scriptFallback.src = '//www.olay.com/cdn/s/trekkie.storefront.f1ba865b3fecd812ad617f74ac079261075e9edb.min.js'; 1597 first.parentNode.insertBefore(scriptFallback, first); 1598}; 1599script.async = true; 1600script.src = '//www.olay.com/cdn/s/trekkie.storefront.f1ba865b3fecd812ad617f74ac079261075e9edb.min.js'; 1601first.parentNode.insertBefore(script, first); 1602 1603 }; 1604 trekkie.load( 1605 {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":66143911979,"isMerchantRequest":null,"themeId":183716282411,"themeCityHash":"93181347524902
160514294","contentLanguage":"en","currency":"USD","eventMetadataId":"831eee8c-5f10-4f0b-9329-c27fc05ce867"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}} 1606 ); 1607 1608 var loaded = false; 1609 trekkie.ready(function() { 1610 if (loaded) return; 1611 loaded = true; 1612 1613 window.ShopifyAnalytics.lib = window.trekkie; 1614 1615 var originalDocumentWrite = document.write; 1616 document.write = customDocumentWrite; 1617 try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {}; 1618 document.write = originalDocumentWrite; 1619 1620 var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/) 1621 var token = match? match[1]: undefined; 1622 if (!hasLoggedConversion(token)) { 1623 setCookieIfConversion(token); 1624 1625 } 1626 }); 1627 1628 window.ShopifyAnalytics.lib.page(null,{"pageType":"page","resourceType":"page","resourceId":699362705451,"requestId":"c101279f-f188-4f5e-854f-feb6a04251f4-1790274562","shopifyEmitted":true}); 1629 1630 var eventsListenerScript = document.createElement('script'); 1631 eventsListenerScript.async = true; 1632 eventsListenerScript.src = "//www.olay.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js"; 1633 document.getElementsByTagName('head')[0].appendChild(eventsListenerScript); 1634})();</script>
vendor: 1 bytes, line 1634
1634
1635<script 1636 defer 1637 src="https://www.olay.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js" 1638 data-application="storefront-renderer" 1639 data-shop-id="66143911979" 1640 data-render-region="gcp-us-central1" 1641 data-page-type="page" 1642 data-theme-instance-id="183716282411" 1643 data-theme-name="Blockshop" 1644 data-theme-version="13.0.1" 1645 data-monorail-region="shop_domain" 1646 data-resource-timing-sampling-rate="10" 1647 data-shs="true" 1648 data-shs-beacon="true" 1649 data-shs-export-with-fetch="true" 1650 data-shs-logs-sample-rate="1" 1651 data-shs-beacon-endpoint="https://www.olay.com/api/collect" 1652></script>
1652 1653<meta name="shopify-y" content="e6e252b5-4031-40a6-8b6d-0ec570b9cbd2" data-expiration="1821832163000"><meta name="shopify-s" content="16d46781-3658-422d-ae87-305f36a6a740" data-expiration="1790276363000"><meta name="new-cookie-storage-activated" content="t"> 1654</head> 1655 1656 <body 1657 class="template--page page-title--create-an-account-olay" 1658 data-theme-id="606" 1659 data-theme-name="Blockshop" 1660 data-theme-version="13.0.1" 1661 data-theme-preset="Madonna" 1662 > 1663 <!--[if IE]> 1664 <div style="text-align:center;padding:72px 16px;"> 1665 Browser unsupported, please update or try an alternative 1666 </div> 1667 <style> 1668 .layout--viewport { display: none; } 1669 </style> 1670 <![endif]--> 1671 1672 <a data-item="a11y-button" href="#main_content" id="a11y_skip">Skip to main content</a> 1673 1674 <div 1675 class="layout--viewport" 1676 data-button-transitions="false" 1677 data-drawer-status="closed" 1678 data-drop-shadows="true" 1679 data-cart-empty="true" 1680 data-logged-in="false" 1681 data-product-storage="4" 1682 data-transition-container="viewport" 1683 ><!-- BEGIN sections: header-group --> 1684<div id="shopify-section-sections--25816846729259__announcement" class="shopify-section shopify-section-group-header-group section--announcement"><!-- sections/announcement.liquid --><announcement-bar-element 1685 class="announcement--root" 1686 role="region" 1687 aria-label="Announcement bar" 1688 data-section-id="sections--25816846729259__announcement" 1689 data-section-type="announcement" 1690 data-countdown-container 1691 data-background-color="dark" 1692 data-border="bottom" 1693 data-border-color="#c11e33" 1694 data-rotate-frequency="5" 1695 data-scroll-text="true" 1696 data-sticky-enabled="true" 1697 data-text-color="white" 1698 1699 1700 style="--announcement--animation-speed:3;" 1701 1702> 1703 <div class="announcement--wrapper"> 1704 <div class="announcement--left" data-mq="medium-large"></div> 1705 1706 <div class="announcement--center"><div class="announcement--blocks"><div 1707 class="announcement--block"aria-hidden="false" 1708 data-transition-item="viewport" 1709 data-transition-trigger="custom" 1710 data-transition-type="slide-in" 1711 data-transition-active="false"data-mq="" 1712 ><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div><div class="announcement--block-wrapper"><div class="announcement--text" data-item="nav-text">Free Shipping for Club OLAY</div></div></div></div><button 1713 class="announcement--toggle" 1714 aria-label="Toggle announcement details" 1715 aria-expanded="false" 1716 data-announcement-toggle 1717 > 1718 <img 1719 src="//www.olay.com/cdn/shop/t/10/assets/icon-plus-circle.svg?v=83349728735137383871779203463" 1720 alt="Expand" 1721 class="announcement--toggle-icon announcement--toggle-icon-plus" 1722 width="16" 1723 height="16" 1724 > 1725 <img 1726 src="//www.olay.com/cdn/shop/t/10/assets/icon-minus-circle.svg?v=139521455512599798531779203462"
1727 alt="Collapse" 1728 class="announcement--toggle-icon announcement--toggle-icon-minus" 1729 width="18" 1730 height="18" 1731 style="display: none;" 1732 > 1733 </button></div> 1734 1735 <div class="announcement--right" data-mq="medium-large"></div> 1736 </div> 1737 1738</announcement-bar-element> 1739 1740<style> 1741 :root { 1742 --announcement--sticky: 1; 1743 } 1744 1745 .section--header ~ #shopify-section-sections--25816846729259__announcement { 1746 top: calc(var(--header--sticky, 0) * var(--header--height, 0px)); 1747 z-index: 4; 1748 }#shopify-section-sections--25816846729259__announcement .announcement--root {min-height: 40px;--border--color-dark: #c11e33;--border--thickness: 4px;}/* Announcement Toggle Button */ 1749 .announcement--toggle { 1750 display: flex; 1751 align-items: center; 1752 justify-content: center; 1753 background: none; 1754 border: none; 1755 cursor: pointer; 1756 padding: 0; 1757 margin-left: 12px; 1758 transition: opacity 0.2s ease; 1759 flex-shrink: 0; 1760 } 1761 1762 .announcement--toggle:hover { 1763 opacity: 0.7; 1764 } 1765 1766 .announcement--toggle-icon { 1767 display: block; 1768 } 1769 1770 /* Make announcement bar clickable when popup is enabled */#shopify-section-sections--25816846729259__announcement .announcement--blocks { 1771 cursor: pointer; 1772 user-select: none; 1773 }/* Popup positioning - styles moved to announcement-popup.liquid */ 1774 #shopify-section-sections--25816846729259__announcement { 1775 position: sticky; 1776 } 1777</style> 1778 1779
1780<script> 1781 (function() { 1782 // Measure announcement height 1783 const measureHeight = function() { 1784 const announcementRoot = document.querySelector('.announcement--root'); 1785 if (announcementRoot) { 1786 document.documentElement.style.setProperty( 1787 '--announcement--height', 1788 `${announcementRoot.offsetHeight.toFixed(2)}px` 1789 ); 1790 } 1791 }; 1792 1793 // Run immediately if possible 1794 if (document.readyState === 'loading') { 1795 document.addEventListener('DOMContentLoaded', measureHeight); 1796 } else { 1797 measureHeight(); 1798 } 1799 })(); 1800</script>
1800</div><header id="shopify-section-sections--25816846729259__header" class="shopify-section shopify-section-group-header-group section--header"><!-- sections/header.liquid --><header-element 1801 class="header--root" 1802 data-section-id="sections--25816846729259__header" 1803 data-section-type="header" 1804 data-container-width="6" 1805 data-icons="true" 1806 data-layout="left-left" 1807 data-mobile-spacing-above="none" 1808 data-mobile-spacing-below="none" 1809 data-spacing-above="none" 1810 data-spacing-below="none" 1811 data-sticky="false" 1812 data-sticky-enabled="true" 1813 aria-expanded="false" 1814 aria-hidden="false" 1815 data-hover-disabled="false" 1816 1817 data-background-color="light" 1818 1819 data-overlap-behavior="drawer" 1820 data-reduce-height="false" 1821 data-scroll-hide="false" 1822 data-text-color="body" 1823 data-transparent-enabled="false" 1824 data-transparent-text-color="white" 1825 1826> 1827 <div class="header--wrapper"><div class="header--logo"><div class="header--primary-logo" data-has-mobile-logo="true"> 1828 <div class="header--desktop-logo"><!-- snippets/logo.liquid --><a 1829 class="small-logo--root" 1830 href="/" 1831 title="OLAY" 1832 itemscope 1833 itemprop="url" 1834 itemtype="https://schema.org/Organization" 1835><img src="//www.olay.com/cdn/shop/files/olay-logo.webp?v=1779268456&width=194" alt="OLAY" srcset="//www.olay.com/cdn/shop/files/olay-logo.webp?v=1779268456&width=194 194w" width="194" height="56" loading="eager" itemprop="logo" style="--width:97px;--mobile-width:131px;" fetchpriority="high"></a> 1836 1837</div><div class="header--mobile-logo"><!-- snippets/logo.liquid --><a 1838 class="small-logo--root" 1839 href="/" 1840 title="OLAY" 1841 itemscope 1842 itemprop="url" 1843 itemtype="https://schema.org/Organization" 1844><img src="//www.olay.com/cdn/shop/files/olay-campaign-logo.webp?v=1779268453&width=78" alt="OLAY" srcset="//www.olay.com/cdn/shop/files/olay-campaign-logo.webp?v=1779268453&width=78 78w" width="78" height="76" loading="eager" itemprop="logo" style="--width:39px;--mobile-width:39px;" fetchpriority="high"></a> 1845 1846</div></div></div><nav 1847 class="header--primary-nav" 1848 aria-label="Primary navigation" 1849 1850 aria-hidden="true" 1851 1852 data-mq="medium-large" 1853 > 1854 <button 1855 class="header--drawer-toggle" 1856 data-drawer-open="left" 1857 data-drawer-view="y-menu" 1858 1859 aria-label="Toggle drawer" 1860 1861 aria-haspopup="menu" 1862 ><span></span><span></span><span></span></button><button 1863 class="header--search" 1864 data-drawer-open="top" 1865 data-drawer-view="search" 1866 data-item="nav-text" 1867 aria-label="search on olay.com" 1868 title="search on olay.com" 1869 tabindex="0" 1870 ><svg class="icon--root icon--search" role="img" aria-labelledby="icon-search-title" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> 1871 <title id="icon-search-title">Search</title> 1872 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 1873 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 1874 </mask> 1875 <g mask="url(#mask0_7204_6974)"> 1876 <path d="M17.8402 18.6339L10.8179 11.6117C10.2572 12.0891 9.61234 12.4586 8.88337 12.7203C8.1544 12.982 7.42187 13.1128 6.6858 13.1128C4.88954 13.1128 3.36927 12.491 2.12497 11.2475C0.88086 10.0039 0.258806 8.48458 0.258806 6.68944C0.258806 4.89412 0.88058 3.37347 2.12413 2.12749C3.36768 0.881701 4.88702 0.258806 6.68216 0.258806C8.47748 0.258806 9.99813 0.88086 11.2441 2.12497C12.4899 3.36927 13.1128 4.88954 13.1128 6.6858C13.1128 7.46505 12.9748 8.21916 12.6987 8.94813C12.4226 9.6771 12.0603 10.3004 11.6117 10.8179L18.6339 17.8404L17.8402 18.6339ZM6.6858 11.9913C8.17383 11.9913 9.43009 11.4791 10.4546 10.4546C11.4791 9.43028 11.9913 8.17402 11.9913 6.6858C11.9913 5.19758 11.4791 3.94132 10.4546 2.91702C9.43009 1.89254 8.17383 1.3803 6.6858 1.3803C5.19758 1.3803 3.94132 1.89254 2.91702 2.91702C1.89254 3.94132 1.3803 5.19758 1.3803 6.6858C1.3803 8.17402 1.89254 9.43028 2.91702 10.4546C3.94132 11.4791 5.19758 11.9913 6.6858 11.9913Z" fill="#161716" stroke="#161716" stroke-width="0.5"/> 1877 </g> 1878 </svg></button><!-- snippets/x-menu.liquid --><x-menu-element
1879 class="x-menu" 1880 aria-hidden="false" 1881 data-mq="medium-large" 1882 style="--highlight-color:#ffe379;" 1883> 1884 <ul class="x-menu--level-1--container"><li 1885 class="x-menu--level-1--link" 1886 data-depth="3" 1887 data-megamenu="true" 1888 1889 ><a 1890 href="#" 1891 data-item="nav-text" 1892 class="x-menu--level-1--link-anchor" 1893 1894 aria-haspopup="true" 1895 aria-expanded="false" 1896 aria-controls="x-menu_face" 1897 1898 ><span class="x-menu--level-1--text">Face</span></a><div 1899 class="x-menu--level-2--container" 1900 id="x-menu_face" 1901 aria-hidden="true" 1902 data-background-color="none" 1903 data-megamenu="true" 1904 data-text-color="body" 1905 1906 ><div class="x-menu--level-2--wrapper"><ul 1907 class="x-menu--level-2--list" 1908 1909 ><li class="x-menu--level-2--link"> 1910 <a href="#" data-item="nav-text">Featured</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1911 <a href="/collections/all-face-skincare" data-item="sub-nav-text">All Face Skincare</a> 1912 </li><li class="x-menu--level-3--link"> 1913 <a href="/collections/just-arrived" data-item="sub-nav-text">New to Face</a> 1914 </li><li class="x-menu--level-3--link"> 1915 <a href="/collections/best-sellers" data-item="sub-nav-text">Face Best Sellers</a> 1916 </li><li class="x-menu--level-3--link"> 1917 <a href="/collections/gift-sets-kits" data-item="sub-nav-text">Face Gift Sets & Bundles</a> 1918 </li><li class="x-menu--level-3--link"> 1919 <a href="/collections/trial-size" data-item="sub-nav-text">Face Travel Size & Minis</a> 1920 </li><li class="x-menu--level-3--link"> 1921 <a href="/collections/clearance" data-item="sub-nav-text">Face Clearance</a> 1922 </li></ul></li><li class="x-menu--level-2--link"> 1923 <a href="#" data-item="nav-text">Skin Goals</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1924 <a href="/collections/fine-lines-wrinkles" data-item="sub-nav-text">Wrinkles & Fine Lines</a> 1925 </li><li class="x-menu--level-3--link"> 1926 <a href="/collections/sagging-skin" data-item="sub-nav-text">Firmness & Elasticity</a> 1927 </li><li class="x-menu--level-3--link"> 1928 <a href="/collections/uneven-skin-tone" data-item="sub-nav-text">Dark Spots & Uneven Tone</a> 1929 </li><li class="x-menu--level-3--link"> 1930 <a href="/collections/hydration" data-item="sub-nav-text">Dry & Dehydrated Skin</a> 1931 </li><li class="x-menu--level-3--link"> 1932 <a href="/collections/sensitive-fragrance-free" data-item="sub-nav-text">Sensitive Skin</a> 1933 </li><li class="x-menu--level-3--link"> 1934 <a href="/collections/spf" data-item="sub-nav-text">SPF & Protection</a> 1935 </li></ul></li><li class="x-menu--level-2--link"> 1936 <a href="#" data-item="nav-text">Product Type</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1937 <a href="/collections/cleansers-toners-wipes" data-item="sub-nav-text">Facial Cleansers, Wipes & Toners</a> 1938 </li><li class="x-menu--level-3--link"> 1939 <a href="/collections/serums-treatments" data-item="sub-nav-text">Facial Serums & Treatments</a> 1940 </li><li class="x-menu--level-3--link"> 1941 <a href="/collections/eyes" data-item="sub-nav-text">Eye Care</a> 1942 </li><li class="x-menu--level-3--link"> 1943 <a href="/collections/moisturizers" data-item="sub-nav-text">Facial Moisturizers</a> 1944 </li><li class="x-menu--level-3--link"> 1945 <a href="/collections/spf" data-item="sub-nav-text">Sunscreen</a> 1946 </li></ul></li><li class="x-menu--level-2--link"> 1947 <a href="#" data-item="nav-text">Ingredient</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1948 <a href="/collections/retinoid-complex" data-item="sub-nav-text">Retinol</a> 1949 </li><li class="x-menu--level-3--link"> 1950 <a href="/collections/vitamin-c" data-item="sub-nav-text">Vitamin C</a> 1951 </li><li class="x-menu--level-3--link"> 1952 <a href="/collections/hyaluronic-acid" data-item="sub-nav-text">Hyaluronic Acid</a> 1953 </li><li class="x-menu--level-3--link"> 1954 <a href="/collections/niacinamide" data-item="sub-nav-text">Niacinamide</a> 1955 </li><li class="x-menu--level-3--link"> 1956 <a href="/collections/peptides" data-item="sub-nav-text">Collagen Peptide</a> 1957 </li><li class="x-menu--level-3--link"> 1958 <a href="/collections/spf" data-item="sub-nav-text">SPF</a> 1959 </li></ul></li></ul></div><div 1960 class="menu-block--subnav-card" 1961 1962 1963 > 1964 <div class="subnav-card--image-wrapper"><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--image-link"><div 1965 class="subnav-card--image" 1966 1967 ><img 1968 src="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454" 1969 srcset="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=227 227w, 1970 //www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454 454w" 1971 sizes="227px" 1972 alt="" 1973 title="" 1974 width="227" 1975 height="184" 1976 loading="eager" 1977 ></div></a></div> 1978 1979 <div class="subnav-card--content"> 1980 <div class="subnav-card--text"><div class="subnav-card--title"> 1981 Regenerist 1982 </div><div class="subnav-card--description"> 1983 Visibly firmer, younger-looking skin 1984 </div></div><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--cta">
1985 <span class="subnav-card--cta-text">SHOP OUR RED JAR</span><svg class="icon--root icon--cta-arrow" role="img" aria-labelledby="icon-cta-arrow-title" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> 1986 <title id="icon-cta-arrow-title">CTA Arrow</title> 1987 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 1988 <rect width="22" height="22" fill="#D9D9D9"/> 1989 </mask> 1990 <g mask="url(#mask0_7232_266)"> 1991 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 1992 </g> 1993 </svg></a></div> 1994 </div></div></li><li 1995 class="x-menu--level-1--link" 1996 data-depth="3" 1997 data-megamenu="true" 1998 1999 ><a 2000 href="#" 2001 data-item="nav-text" 2002 class="x-menu--level-1--link-anchor" 2003 2004 aria-haspopup="true" 2005 aria-expanded="false" 2006 aria-controls="x-menu_body" 2007 2008 ><span class="x-menu--level-1--text">Body</span></a><div 2009 class="x-menu--level-2--container" 2010 id="x-menu_body" 2011 aria-hidden="true" 2012 data-background-color="none" 2013 data-megamenu="true" 2014 data-text-color="body" 2015 2016 ><div class="x-menu--level-2--wrapper"><ul 2017 class="x-menu--level-2--list" 2018 2019 ><li class="x-menu--level-2--link"> 2020 <a href="#" data-item="nav-text">Featured</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2021 <a href="/collections/body-care" data-item="sub-nav-text">All Body Care</a> 2022 </li><li class="x-menu--level-3--link"> 2023 <a href="/collections/new-body-care" data-item="sub-nav-text">New to Body</a> 2024 </li><li class="x-menu--level-3--link"> 2025 <a href="/collections/body-care-best-sellers" data-item="sub-nav-text">Body Best Sellers</a> 2026 </li></ul></li><li class="x-menu--level-2--link"> 2027 <a href="#" data-item="nav-text">Body Wash & Bars</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2028 <a href="/collections/body-wash" data-item="sub-nav-text">All Body Wash & Bars</a> 2029 </li><li class="x-menu--level-3--link"> 2030 <a href="/collections/premium-body-wash-bars" data-item="sub-nav-text">Premium Body Wash</a> 2031 </li><li class="x-menu--level-3--link"> 2032 <a href="/collections/fresh-scent" data-item="sub-nav-text">Fresh Radiance</a> 2033 </li><li class="x-menu--level-3--link"> 2034 <a href="/collections/super-serum-body-wash" data-item="sub-nav-text">Super Serum Body Wash</a> 2035 </li><li class="x-menu--level-3--link"> 2036 <a href="/collections/seasonal-body-wash" data-item="sub-nav-text">Seasonal Body Wash</a> 2037 </li><li class="x-menu--level-3--link"> 2038 <a href="/collections/bar-soap" data-item="sub-nav-text">Bar Soap</a> 2039 </li></ul></li><li class="x-menu--level-2--link"> 2040 <a href="#" data-item="nav-text">Hand & Body Moisturizers</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2041 <a href="/collections/hand-body-lotion" data-item="sub-nav-text">All Hand & Body Moisturizers</a> 2042 </li><li class="x-menu--level-3--link"> 2043 <a href="/collections/super-serum-hand-body-lotion" data-item="sub-nav-text">Super Serum Lotions & Creams</a> 2044 </li></ul></li><li class="x-menu--level-2--link"> 2045 <a href="#" data-item="nav-text">Skin Type</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2046 <a href="/collections/body-care-for-sensitive-skin" data-item="sub-nav-text">Sensitive</a> 2047 </li><li class="x-menu--level-3--link"> 2048 <a href="/collections/body-care-for-normal-skin" data-item="sub-nav-text">Normal</a> 2049 </li><li class="x-menu--level-3--link"> 2050 <a href="/collections/body-care-for-rough-bumpy-skin" data-item="sub-nav-text">Rough & Bumpy</a> 2051 </li><li class="x-menu--level-3--link"> 2052 <a href="/collections/body-care-for-dry-skin" data-item="sub-nav-text">Dry</a> 2053 </li></ul></li><li class="x-menu--level-2--link"> 2054 <a href="#" data-item="nav-text">Ingredient</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2055 <a href="/collections/body-care-with-vitamin-b3" data-item="sub-nav-text">Vitamin B3</a> 2056 </li><li class="x-menu--level-3--link"> 2057 <a href="/collections/body-care-with-glycerin" data-item="sub-nav-text">Glycerin</a> 2058 </li><li class="x-menu--level-3--link"> 2059 <a href="/collections/body-care-with-shea-butter" data-item="sub-nav-text">Shea Butter</a> 2060 </li><li class="x-menu--level-3--link"> 2061 <a href="/collections/body-care-with-vitamin-e" data-item="sub-nav-text">Vitamin E</a> 2062 </li><li class="x-menu--level-3--link"> 2063 <a href="/collections/body-care-with-vitamin-c" data-item="sub-nav-text">Vitamin C</a> 2064 </li><li class="x-menu--level-3--link"> 2065 <a href="/collections/body-care-with-retinol" data-item="sub-nav-text">Retinol</a> 2066 </li><li class="x-menu--level-3--link"> 2067 <a href="/collections/body-care-with-collagen" data-item="sub-nav-text">Collagen</a> 2068 </li></ul></li></ul></div><div 2069 class="menu-block--subnav-card" 2070 2071 2072 > 2073 <div class="subnav-card--image-wrapper"><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--image-link"><div 2074 class="subnav-card--image" 2075 2076 ><img 2077 src="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454" 2078 srcset="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=227 227w, 2079 //www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454 454w" 2080 sizes="227px" 2081 alt="" 2082 title="" 2083 width="227" 2084 height="184" 2085 loading="eager" 2086 ></div></a></div> 2087 2088 <div class="subnav-card--content"> 2089 <div class="subnav-card--text"><div class="subnav-card--title"> 2090 Limited Edition Body Wash 2091 </div><div class="subnav-card--description"> 2092 Strawberry Fizz Scent 2093 </div></div><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--cta">
2094 <span class="subnav-card--cta-text">SHOP BODY</span><svg class="icon--root icon--cta-arrow" role="img" aria-labelledby="icon-cta-arrow-title" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> 2095 <title id="icon-cta-arrow-title">CTA Arrow</title> 2096 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 2097 <rect width="22" height="22" fill="#D9D9D9"/> 2098 </mask> 2099 <g mask="url(#mask0_7232_266)"> 2100 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 2101 </g> 2102 </svg></a></div> 2103 </div></div></li><li 2104 class="x-menu--level-1--link" 2105 data-depth="3" 2106 data-megamenu="true" 2107 2108 ><a 2109 href="#" 2110 data-item="nav-text" 2111 class="x-menu--level-1--link-anchor" 2112 2113 aria-haspopup="true" 2114 aria-expanded="false" 2115 aria-controls="x-menu_anti-aging" 2116 2117 ><span class="x-menu--level-1--text">Anti-aging</span></a><div 2118 class="x-menu--level-2--container" 2119 id="x-menu_anti-aging" 2120 aria-hidden="true" 2121 data-background-color="none" 2122 data-megamenu="true" 2123 data-text-color="body" 2124 2125 ><div class="x-menu--level-2--wrapper"><ul 2126 class="x-menu--level-2--list" 2127 2128 ><li class="x-menu--level-2--link"> 2129 <a href="#" data-item="nav-text">Solutions</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2130 <a href="/collections/anti-aging" data-item="sub-nav-text">All Anti-Aging</a> 2131 </li><li class="x-menu--level-3--link"> 2132 <a href="/collections/fine-lines-wrinkles" data-item="sub-nav-text">Wrinkles & Fine Lines</a> 2133 </li><li class="x-menu--level-3--link"> 2134 <a href="/collections/sagging-skin" data-item="sub-nav-text">Firmness & Elasticity</a> 2135 </li><li class="x-menu--level-3--link"> 2136 <a href="/collections/uneven-skin-tone" data-item="sub-nav-text"> Dark Spots & Uneven Tone</a> 2137 </li><li class="x-menu--level-3--link"> 2138 <a href="/collections/hydration" data-item="sub-nav-text"> Dry & Dehydrated Skin</a> 2139 </li></ul></li></ul></div><div 2140 class="menu-block--grid-with-slider" 2141 2142 2143 > 2144 <div 2145 id="grid-slider-grid_with_slider_Demo" 2146 class="grid-slider--slick" 2147 data-slides-to-show="3" 2148 data-slides-to-scroll="1" 2149 data-autoplay="false" 2150 data-autoplay-speed="3000" 2151 data-show-arrows="true" 2152 data-show-dots="true" 2153 data-infinite="false" 2154 ><div class="slider-card"><a href="/pages/cleansing-melts" class="slider-card--link"><div class="slider-card--image-wrapper"> 2155 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2156 class="image--root" 2157 data-background="false" 2158 data-display-type="aspect-ratio" 2159 data-full-width="" 2160 data-mobile-display-type="aspect-ratio" 2161 data-mobile-full-width="" 2162 data-mobile-overlay-style="" 2163 data-parallax="" 2164 data-overlay-style="" 2165 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2014;" 2166><img src="//www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=889" alt="Achieve Better Skin with Superior Cleansing" srcset="//www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=200 200w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=300 300w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=400 400w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=500 500w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=600 600w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=700 700w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=800 800w" width="889" height="740" loading="eager" sizes="100vw" draggable="false" title="Achieve Better Skin with Superior Cleansing"> 2167</picture></div> 2168 </div> 2169 2170 <div class="slider-card--content"> 2171 <div class="slider-card--text"><div class="slider-card--title"> 2172 Achieve Better Skin with Superior Cleansing 2173 </div><div class="slider-card--description"> 2174 Maintain your skin with our cleansing routine that fits and supports your career. 2175 </div></div><span class="slider-card--cta">
2176 <span class="slider-card--cta-text">SHOP CLEANSERS</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 2177 <title id="icon-arrow-right-title">Arrow Right</title> 2178 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 2179 </svg></span></div></a></div><div class="slider-card"><a href="/collections/serums-treatments" class="slider-card--link"><div class="slider-card--image-wrapper"> 2180 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2181 class="image--root" 2182 data-background="false" 2183 data-display-type="aspect-ratio" 2184 data-full-width="" 2185 data-mobile-display-type="aspect-ratio" 2186 data-mobile-full-width="" 2187 data-mobile-overlay-style="" 2188 data-parallax="" 2189 data-overlay-style="" 2190 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 2191><img src="//www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=889" alt="Erase Aging - Professional Results at Home" srcset="//www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=200 200w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=300 300w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=400 400w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=500 500w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=600 600w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=700 700w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=800 800w" width="889" height="737" loading="eager" sizes="100vw" draggable="false" title="Erase Aging - Professional Results at Home"> 2192</picture></div> 2193 </div> 2194 2195 <div class="slider-card--content"> 2196 <div class="slider-card--text"><div class="slider-card--title"> 2197 Erase Aging - Professional Results at Home 2198 </div><div class="slider-card--description"> 2199 Discover how our cutting-edge serums deliver advanced anti-aging results for a youthful glow. 2200 </div></div><span class="slider-card--cta"> 2201 <span class="slider-card--cta-text">SHOP SERUMS</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 2202 <title id="icon-arrow-right-title">Arrow Right</title> 2203 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 2204 </svg></span></div></a></div><div class="slider-card"><a href="/collections/hydration" class="slider-card--link"><div class="slider-card--image-wrapper"> 2205 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2206 class="image--root" 2207 data-background="false" 2208 data-display-type="aspect-ratio" 2209 data-full-width="" 2210 data-mobile-display-type="aspect-ratio" 2211 data-mobile-full-width="" 2212 data-mobile-overlay-style="" 2213 data-parallax="" 2214 data-overlay-style="" 2215 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 2216><img src="//www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=889" alt="Hydration Heroes" srcset="//www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=200 200w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=300 300w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=400 400w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=500 500w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=600 600w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=700 700w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=800 800w" width="889" height="737" loading="eager" sizes="100vw" draggable="false" title="Hydration Heroes"> 2217</picture></div> 2218 </div> 2219 2220 <div class="slider-card--content"> 2221 <div class="slider-card--text"><div class="slider-card--title"> 2222 Hydration Heroes 2223 </div><div class="slider-card--description"> 2224 Lock in moisture with our intensive hydration formulas for plump, radiant skin. 2225 </div></div><span class="slider-card--cta">
2226 <span class="slider-card--cta-text">SHOP MOISTURIZERS</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 2227 <title id="icon-arrow-right-title">Arrow Right</title> 2228 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 2229 </svg></span></div></a></div><div class="slider-card"><a href="/collections/uneven-skin-tone" class="slider-card--link"><div class="slider-card--image-wrapper"> 2230 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2231 class="image--root" 2232 data-background="false" 2233 data-display-type="aspect-ratio" 2234 data-full-width="" 2235 data-mobile-display-type="aspect-ratio" 2236 data-mobile-full-width="" 2237 data-mobile-overlay-style="" 2238 data-parallax="" 2239 data-overlay-style="" 2240 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 2241><img src="//www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=889" alt="Brighten & Glow" srcset="//www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=200 200w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=300 300w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=400 400w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=500 500w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=600 600w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=700 700w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=800 800w" width="889" height="737" loading="eager" sizes="100vw" draggable="false" title="Brighten & Glow"> 2242</picture></div> 2243 </div> 2244 2245 <div class="slider-card--content"> 2246 <div class="slider-card--text"><div class="slider-card--title"> 2247 Brighten & Glow 2248 </div><div class="slider-card--description"> 2249 Illuminate your complexion with targeted treatments for dark spots and uneven tone. 2250 </div></div><span class="slider-card--cta"> 2251 <span class="slider-card--cta-text">SHOP BRIGHTENING</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 2252 <title id="icon-arrow-right-title">Arrow Right</title> 2253 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 2254 </svg></span></div></a></div></div> 2255 </div></div></li><li 2256 class="x-menu--level-1--link" 2257 data-depth="1" 2258 data-megamenu="true" 2259 2260 ><a 2261 href="#" 2262 data-item="nav-text" 2263 class="x-menu--level-1--link-anchor" 2264 2265 aria-haspopup="true" 2266 aria-expanded="false" 2267 aria-controls="x-menu_find-my-routine" 2268 2269 ><span class="x-menu--level-1--text">Find My Routine</span></a><div 2270 class="x-menu--level-2--container" 2271 id="x-menu_find-my-routine" 2272 aria-hidden="true" 2273 data-background-color="none" 2274 data-megamenu="true" 2275 data-text-color="body" 2276 2277 ><div 2278 class="menu-block--osa-fifty" 2279 data-reverse-layout="true" 2280 style="background: linear-gradient(325.31deg, #ECECEC -1.07%, #D0D0D0, #AFAEAF -0.71%, #9A999A, #939293 1%, #ABAAAB 3.59%, #EAEAEA 19.43%, #FFFFFF 56.88%, #F2F2F2 64.24%, #EDEDED 68.7%, #FFFFFF 85.03%, #F3F2F2 96.96%, #D3D2D2 102.84%, #A19D9E 116.2%, #9B9798 119.17%);" 2281 2282 2283 > 2284 <div class="osa-fifty-content"> 2285 2286 <!-- Left Column - Text Content --> 2287 <div class="osa-fifty-text-column"> 2288 <div class="osa-fifty-superheading"> 2289 welcome to <span class="osa-fifty-powered">Powered by AI</span> 2290 </div> 2291 2292 <div class="osa-fifty-heading"> 2293 skin advisor 2294 </div><img 2295 src="//www.olay.com/cdn/shop/t/10/assets/Underline.png?v=15233172491784850011779203463" 2296 class="osa-fifty-underline" 2297 alt="underline decoration" 2298 loading="lazy" 2299 width="320" 2300 height="auto" 2301 ><div class="osa-fifty-text">
2302 <span class="osa-fifty-subheading">Confidence Starts with the Right Routine</span><p class="osa-fifty-description">The new Olay Skin Advisor analyzes your skin using advanced technology to deliver personalized routines designed to support your skin goals.</p></div><div class="osa-fifty-button-section"> 2303 <a 2304 href="/pages/skin-advisor?autostart=true" 2305 class="osa-fifty-cta" 2306 title="Get Started Now" 2307 aria-label="Get Started Now" 2308 > 2309 <span class="osa-fifty-cta-text">Get Started Now</span> 2310 </a> 2311 </div></div> 2312 2313 <!-- Right Column - Image --> 2314 <div class="osa-fifty-image-column"> 2315 <picture><source 2316 media="(min-width: 1200px)" 2317 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466" 2318 ><source 2319 media="(min-width: 768px)" 2320 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mobile.png?v=99265202458701537411779203462" 2321 ><source 2322 media="(min-width: 250px)" 2323 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mob.png?v=59333317371312214441779203466" 2324 ><img 2325 class="osa-fifty-image" 2326 height="100%" 2327 width="100%" 2328 loading="lazy" 2329 alt="Skin Advisor" 2330 title="Skin Advisor"src="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466"> 2331 </picture> 2332 </div> 2333 2334 </div> 2335 </div></div></li><li 2336 class="x-menu--level-1--link" 2337 data-depth="1" 2338 data-megamenu="true" 2339 2340 ><a 2341 href="#" 2342 data-item="nav-text" 2343 class="x-menu--level-1--link-anchor" 2344 2345 aria-haspopup="true" 2346 aria-expanded="false" 2347 aria-controls="x-menu_offers" 2348 2349 ><span class="x-menu--level-1--text">Offers</span></a><div 2350 class="x-menu--level-2--container" 2351 id="x-menu_offers" 2352 aria-hidden="true" 2353 data-background-color="none" 2354 data-megamenu="true" 2355 data-text-color="body" 2356 2357 ><div 2358 class="menu-block--grid-links" 2359 data-item-count="4" 2360 2361 2362 > 2363 <div class="grid-link-item"><a href="/pages/offers" class="grid-link-wrapper"><h3 class="grid-link-title">Current Offers & Coupons</h3><p class="grid-link-desc">Shop limited-time offers and<br> exclusive savings.</p></a></div><div class="grid-link-item"><a href="/apps/subscriptions/manage" class="grid-link-wrapper"><h3 class="grid-link-title">Subscribe & Save</h3><p class="grid-link-desc">Never run out and save on<br> every delivery.</p></a></div><div class="grid-link-item"><a href="/collections/clearance" class="grid-link-wrapper"><h3 class="grid-link-title">Clearance</h3><p class="grid-link-desc">Last chance deals at<br> special prices.</p></a></div><div class="grid-link-item"><a href="/pages/referral" class="grid-link-wrapper"><h3 class="grid-link-title">Give $10, Get $10</h3><p class="grid-link-desc">Share the love. Give your friends $10 off their first order of $40 <br> and youâll get a $10 coupon too. Win-win!</p></a></div> 2364 </div></div></li><li 2365 class="x-menu--level-1--link" 2366 data-depth="1" 2367 data-megamenu="true" 2368 2369 ><a 2370 href="#" 2371 data-item="nav-text" 2372 class="x-menu--level-1--link-anchor" 2373 2374 aria-haspopup="true" 2375 aria-expanded="false" 2376 aria-controls="x-menu_learn" 2377 2378 ><span class="x-menu--level-1--text">Learn</span></a><div 2379 class="x-menu--level-2--container" 2380 id="x-menu_learn" 2381 aria-hidden="true" 2382 data-background-color="none" 2383 data-megamenu="true" 2384 data-text-color="body" 2385 2386 ><div 2387 class="menu-block--grid-links" 2388 data-item-count="5" 2389 2390 2391 > 2392 <div class="grid-link-item"><a href="/pages/proven-science" class="grid-link-wrapper"><h3 class="grid-link-title">
2392Proven Science</h3><p class="grid-link-desc">Backed by decades of skin<br> 2393research and innovation.</p></a></div><div class="grid-link-item"><a href="/pages/why-olay" class="grid-link-wrapper"><h3 class="grid-link-title">Our Story</h3><p class="grid-link-desc">Discover what makes Olay<br> 2394a trusted skincare brand.</p></a></div><div class="grid-link-item"><a href="/blogs/olay-today" class="grid-link-wrapper"><h3 class="grid-link-title">Blog</h3><p class="grid-link-desc">Expert tips, trends and<br> 2395skincare advice.</p></a></div><div class="grid-link-item"><a href="/blogs/olay-today/tagged/tips#blog_filters" class="grid-link-wrapper"><h3 class="grid-link-title">Skincare Education</h3><p class="grid-link-desc">Learn how to care for your<br>skin the right way.</p></a></div><div class="grid-link-item"><a href="/pages/contact-us" class="grid-link-wrapper"><h3 class="grid-link-title">Contact Us</h3><p class="grid-link-desc">Weâre here to help.</p></a></div> 2396 </div></div></li></ul> 2397</x-menu-element> 2398 2399 2400<!-- Slick Slider CSS: deferred to avoid render-blocking --><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick.min.css?v=103443148378814735961779203468" media="print" onload="this.media='all'"> 2401<noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick.min.css?v=103443148378814735961779203468"></noscript> 2402<link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick-theme.min.css?v=132284215187113083101779203467" media="print" onload="this.media='all'"> 2403<noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick-theme.min.css?v=132284215187113083101779203467"></noscript> 2404
2405<script> 2406 (function() { 2407 // Load jQuery if not already loaded 2408 function loadJQuery(callback) { 2409 if (typeof jQuery !== 'undefined') { 2410 callback(); 2411 } else { 2412 const jQueryScript = document.createElement('script'); 2413 jQueryScript.src = '//www.olay.com/cdn/shop/t/10/assets/jquery.min.js?v=147293088974801289311779203466'; 2414 jQueryScript.onload = callback; 2415 document.head.appendChild(jQueryScript); 2416 } 2417 } 2418 2419 // Load Slick Slider 2420 function loadSlick(callback) { 2421 if (typeof jQuery.fn.slick !== 'undefined') { 2422 callback(); 2423 } else { 2424 const slickScript = document.createElement('script'); 2425 slickScript.src = '//www.olay.com/cdn/shop/t/10/assets/slick.min.js?v=71779134894361685811779203468'; 2426 slickScript.onload = callback; 2427 document.head.appendChild(slickScript); 2428 } 2429 } 2430 2431 function initOrRefreshSliders() { 2432 if (typeof jQuery === 'undefined' || typeof jQuery.fn.slick === 'undefined') return; 2433 2434 jQuery('.grid-slider--slick').each(function() { 2435 const $slider = jQuery(this); 2436 2437 // Get configuration from data attributes 2438 const slidesToShow = parseInt($slider.data('slides-to-show')) || 2; 2439 const slidesToScroll = parseInt($slider.data('slides-to-scroll')) || 1; 2440 const autoplay = $slider.data('autoplay') === 'true' || $slider.data('autoplay') === true; 2441 const autoplaySpeed = parseInt($slider.data('autoplay-speed')) || 3000; 2442 const showArrows = $slider.data('show-arrows') !== 'false' && $slider.data('show-arrows') !== false; 2443 const showDots = $slider.data('show-dots') !== 'false' && $slider.data('show-dots') !== false; 2444 const infinite = $slider.data('infinite') === 'true' || $slider.data('infinite') === true; 2445 2446 // Check if already initialized 2447 if (!$slider.hasClass('slick-initialized')) { 2448 // Initialize Slick Slider 2449 $slider.slick({ 2450 slidesToShow: slidesToShow, 2451 slidesToScroll: slidesToScroll, 2452 autoplay: autoplay, 2453 autoplaySpeed: autoplaySpeed, 2454 arrows: showArrows, 2455 dots: showDots, 2456 infinite: infinite, 2457 speed: 300, 2458 cssEase: 'ease-in-out', 2459 adaptiveHeight: false, 2460 variableWidth: false, 2461 responsive: [ 2462 { 2463 breakpoint: 1440, 2464 settings: { 2465 slidesToShow: Math.min(slidesToShow, 2), 2466 slidesToScroll: 1 2467 } 2468 }, 2469 { 2470 breakpoint: 1100, 2471 settings: { 2472 slidesToShow: Math.min(slidesToShow, 2), 2473 slidesToScroll: 1 2474 } 2475 }, 2476 { 2477 breakpoint: 768, 2478 settings: { 2479 slidesToShow: 1, 2480 slidesToScroll: 1, 2481 arrows: true, 2482 dots: true, 2483 centerMode: false, 2484 variableWidth: true, 2485 adaptiveHeight: false 2486 } 2487 } 2488 ] 2489 }); 2490 2491 // Prevent swipe/touch events from closing the menu 2492 $slider.on('touchstart touchmove touchend', function(e) { 2493 e.stopPropagation(); 2494 }); 2495 2496 // Prevent mouse drag events from closing the menu 2497 $slider.on('mousedown mousemove mouseup', function(e) { 2498 e.stopPropagation(); 2499 }); 2500 } 2501 2502 // Always refresh position 2503 setTimeout(function () { 2504 if ($slider.hasClass('slick-initialized')) { 2505 $slider.slick('setPosition'); 2506 } 2507 }, 50); 2508 }); 2509 } 2510 2511 function setupSliders() { 2512 if (window.__olayXMenuSlidersInitialized) return; 2513 window.__olayXMenuSlidersInitialized = true; 2514 2515 jQuery(function($) { 2516 initOrRefreshSliders(); 2517 2518 if (window.__olayXMenuSliderObserver) { 2519 window.__olayXMenuSliderObserver.disconnect(); 2520 } 2521 2522 // Watch for mega menu visibility changes 2523 const observer = new MutationObserver(function(mutations) { 2524 mutations.forEach(function(mutation) { 2525 if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') { 2526 const target = mutation.target; 2527 const ariaHiddenValue = target.getAttribute('aria-hidden'); 2528 2529 // Check if aria-hidden is false (as string) or falsy value 2530 if (target.classList.contains('x-menu--level-2--container') && 2531 (ariaHiddenValue === 'false' || ariaHiddenValue === false)) { 2532 // Mega menu just became visible - refresh sliders inside 2533 setTimeout(function() { 2534 const $slidersInMenu = $(target).find('.grid-slider--slick.slick-initialized'); 2535 if ($slidersInMenu.length) { 2536 $slidersInMenu.each(function() { 2537 $(this).slick('setPosition'); 2538 }); 2539 } 2540 }, 150); 2541 } 2542 } 2543 }); 2544 }); 2545 2546 window.__olayXMenuSliderObserver = observer; 2547 2548 // Observe all level-2 containers (mega menus) 2549 $('.x-menu--level-2--container').each(function() { 2550 observer.observe(this, { 2551 attributes: true, 2552 attributeFilter: ['aria-hidden'] 2553 }); 2554 }); 2555 // Also refresh sliders on initial menu open for safety 2556 $(document).on('click.xMenuSliders', '.x-menu--level-1--link > a', function() { 2557 setTimeout(function() { 2558 const $allSliders = $('.grid-slider--slick.slick-initialized'); 2559 if ($allSliders.length) { 2560 $allSliders.each(function() { 2561 if (!$(this).closest('.x-menu--level-2--container').attr('aria-hidden') || 2562 $(this).closest('.x-menu--level-2--container').attr('aria-hidden') === 'false') { 2563 $(this).slick('setPosition'); 2564 } 2565 }); 2566 } 2567 }, 200); 2568 }); 2569 2570 2571 // Global resize handler 2572 $(window).off('resize.xMenuSliders orientationchange.xMenuSliders'); 2573 $(window).on('resize.xMenuSliders orientationchange.xMenuSliders', function () { 2574 $('.grid-slider--slick.slick-initialized').each(function() { 2575 $(this).slick('setPosition'); 2576 }); 2577 }); 2578 2579 // Fallback: Refresh on menu item hover 2580 $('.x-menu--level-1--link').off('mouseenter.xMenuSliders'); 2581 $('.x-menu--level-1--link').on('mouseenter.xMenuSliders', function() { 2582 const $menuItem = $(this); 2583 setTimeout(function() { 2584 const $sliders = $menuItem.find('.grid-slider--slick.slick-initialized'); 2585 if ($sliders.length) { 2586 $sliders.each(function() { 2587 $(this).slick('setPosition'); 2588 }); 2589 } 2590 }, 150); 2591 }); 2592 }); 2593 } 2594 2595 function bootstrap() { 2596 loadJQuery(function() { 2597 loadSlick(function() { 2598 setupSliders(); 2599 }); 2600 }); 2601 } 2602 2603 if (document.readyState === 'loading') { 2604 document.addEventListener('DOMContentLoaded', bootstrap); 2605 } else { 2606 bootstrap(); 2607 } 2608 })(); 2609</script>
2609</nav> 2610 2611 <nav class="header--secondary-nav" aria-label="Secondary navigation" data-item="nav-text"><a 2612 class="olay-club-rewards-btn desktop-only" 2613 href="https://club.olay.com?locale=en&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkwODc5MzYzLCJuYmYiOjE3OTAyNzQ1NjN9.8KWa7jCQ16JRhY9iaakfBkVFT7oqobgaiqSfjo80AmY®ion_country=US" 2614 aria-label="Club Olay Rewards" 2615 title="Club Olay Rewards" 2616 > 2617 Club Olay Rewards 2618 </a><button 2619 class="header--search" 2620 data-drawer-open="top" 2621 data-drawer-view="search" 2622 data-item="nav-text" 2623 aria-label="search on olay.com" 2624 title="search on olay.com" 2625 tabindex="0" 2626 ><svg class="icon--root icon--search" role="img" aria-labelledby="icon-search-title" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> 2627 <title id="icon-search-title">Search</title> 2628 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 2629 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 2630 </mask> 2631 <g mask="url(#mask0_7204_6974)"> 2632 <path d="M17.8402 18.6339L10.8179 11.6117C10.2572 12.0891 9.61234 12.4586 8.88337 12.7203C8.1544 12.982 7.42187 13.1128 6.6858 13.1128C4.88954 13.1128 3.36927 12.491 2.12497 11.2475C0.88086 10.0039 0.258806 8.48458 0.258806 6.68944C0.258806 4.89412 0.88058 3.37347 2.12413 2.12749C3.36768 0.881701 4.88702 0.258806 6.68216 0.258806C8.47748 0.258806 9.99813 0.88086 11.2441 2.12497C12.4899 3.36927 13.1128 4.88954 13.1128 6.6858C13.1128 7.46505 12.9748 8.21916 12.6987 8.94813C12.4226 9.6771 12.0603 10.3004 11.6117 10.8179L18.6339 17.8404L17.8402 18.6339ZM6.6858 11.9913C8.17383 11.9913 9.43009 11.4791 10.4546 10.4546C11.4791 9.43028 11.9913 8.17402 11.9913 6.6858C11.9913 5.19758 11.4791 3.94132 10.4546 2.91702C9.43009 1.89254 8.17383 1.3803 6.6858 1.3803C5.19758 1.3803 3.94132 1.89254 2.91702 2.91702C1.89254 3.94132 1.3803 5.19758 1.3803 6.6858C1.3803 8.17402 1.89254 9.43028 2.91702 10.4546C3.94132 11.4791 5.19758 11.9913 6.6858 11.9913Z" fill="#161716" stroke="#161716" stroke-width="0.5"/> 2633 </g> 2634 </svg></button><a 2635 class="header--account" 2636 href="javascript:void(0);" 2637 aria-label="login to your ClubOlay account" 2638 title="login to your ClubOlay account" 2639 data-login-modal-open 2640 > 2641 2642<svg class="icon--root icon--account" role="img" aria-labelledby="icon-account-title" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none"> 2643 <title id="icon-account-title">login to your ClubOlay account</title> 2644 <mask id="mask0_7204_6977" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-3" y="-3" width="26" height="26"> 2645 <rect x="-3" y="-3" width="26" height="26" fill="#D9D9D9"/> 2646 </mask> 2647 <g mask="url(#mask0_7204_6977)"> 2648 <path d="M3.7126 15.9415C4.63344 15.2791 5.61051 14.7552 6.64383 14.3699C7.67715 13.9844 8.79587 13.7917 10 13.7917C11.2041 13.7917 12.3228 13.9844 13.3562 14.3699C14.3895 14.7552 15.3666 15.2791 16.2874 15.9415C17.0028 15.2013 17.5781 14.327 18.0134 13.3188C18.4489 12.3104 18.6667 11.2041 18.6667 10C18.6667 7.59861 17.8226 5.55382 16.1344 3.86563C14.4462 2.17743 12.4014 1.33333 10 1.33333C7.59861 1.33333 5.55382 2.17743 3.86563 3.86563C2.17743 5.55382 1.33333 7.59861 1.33333 10C1.33333 11.2041 1.55108 12.3104 1.98658 13.3188C2.4219 14.327 2.99724 15.2013 3.7126 15.9415ZM10.0005 10.5417C9.08765 10.5417 8.31767 10.2283 7.6906 9.60161C7.06354 8.9749 6.75 8.2051 6.75 7.29221C6.75 6.37932 7.06335 5.60934 7.69006 4.98227C8.31677 4.3552 9.08657 4.04167 9.99946 4.04167C10.9123 4.04167 11.6823 4.35502 12.3094 4.98173C12.9365 5.60844 13.25 6.37824 13.25 7.29112C13.25 8.20401 12.9366 8.97399 12.3099 9.60106C11.6832 10.2281 10.9134 10.5417 10.0005 10.5417ZM10 19.75C8.64024 19.75 7.36732 19.4969 6.18125 18.9906C4.99518 18.4843 3.96322 17.7923 3.08535 16.9146C2.20767 16.0368 1.51569 15.0048 1.00942 13.8188C0.503139 12.6327 0.25 11.3598 0.25 10C0.25 8.64024 0.503139 7.36732 1.00942 6.18125C1.51569 4.99518 2.20767 3.96322 3.08535 3.08535C3.96322 2.20767 4.99518 1.51569 6.18125 1.00942C7.36732 0.503138 8.64024 0.25 10 0.25C11.3598 0.25 12.6327 0.503138 13.8188 1.00942C15.0048 1.51569 16.0368 2.20767 16.9146 3.08535C17.7923 3.96322 18.4843 4.99518 18.9906 6.18125C19.4969 7.36732 19.75 8.64024 19.75 10C19.75 11.3598 19.4969 12.6327 18.9906 13.8188C18.4843 15.0048 17.7923 16.0368 16.9146 16.9146C16.0368 17.7923 15.0048 18.4843 13.8188 18.9906C12.6327 19.4969 11.3598 19.75 10 19.75ZM10 18.6667C10.9987 18.6667 11.9813 18.492 12.948 18.1426C13.9145 17.7934 14.7499 17.3153 15.454 16.7083C14.7499 16.143 13.9353 15.6961 13.0103 15.3676C12.0853 15.0392 11.0819 14.875 10 14.875C8.91811 14.875 7.91115 15.0358 6.97913 15.3574C6.04728 15.6789 5.23622 16.1292 4.54596 16.7083C5.25013 17.3153 6.08547 17.7934 7.05198 18.1426C8.01867 18.492 9.00135 18.6667 10 18.6667ZM10 9.45833C10.6083 9.45833 11.1215 9.24934 11.5397 8.83135C11.9577 8.41319 12.1667 7.89996 12.1667 7.29167C12.1667 6.68338 11.9577 6.17015 11.5397 5.75198C11.1215 5.33399 10.6083 5.125 10 5.125C9.39171 5.125 8.87848 5.33399 8.46031 5.75198C8.04233 6.17015 7.83333 6.68338 7.83333 7.29167C7.83333 7.89996 8.04233 8.41319 8.46031 8.83135C8.87848 9.24934 9.39171 9.45833 10 9.45833Z" fill="#161716" stroke="#161716" stroke-width="0.5"/> 2649 <circle cx="18" cy="18" r="5" fill="#C11E33"/> 2650 </g> 2651 </svg> 2652 </a><a 2653 class="header--cart" 2654 aria-label="items in your cart" 2655 title="items in your cart" 2656 2657 data-drawer-open="right" 2658 data-drawer-view="cart-drawer" 2659 aria-haspopup="menu" 2660 href="#" 2661 2662 data-cart-count="0" 2663 > 2664 <span class="header--cart-wrapper"><svg class="icon--root icon--bag" role="img" aria-labelledby="icon-bag-title" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20" fill="none"> 2665 <title id="icon-bag-title">Shopping Bag</title> 2666 <path d="M2.00012 19.75C1.51533 19.75 1.1024 19.5796 0.761333 19.2387C0.420445 18.8976 0.25 18.4847 0.25 17.9999V6.33346C0.25 5.84867 0.420445 5.43574 0.761333 5.09467C1.1024 4.75378 1.51533 4.58333 2.00012 4.58333H4.58333C4.58333 3.37632 5.00385 2.35239 5.84487 1.51154C6.68572 0.670514 7.70965 0.25 8.91667 0.25C10.1237 0.25 11.1476 0.670514 11.9885 1.51154C12.8295 2.35239 13.25 3.37632 13.25 4.58333H15.8332C16.318 4.58333 16.7309 4.75378 17.072 5.09467C17.4129 5.43574 17.5833 5.84867 17.5833 6.33346V17.9999C17.5833 18.4847 17.4129 18.8976 17.072 19.2387C16.7309 19.5796 16.318 19.75 15.8332 19.75H2.00012ZM2.00012 18.6667H15.8332C16 18.6667 16.1529 18.5972 16.2917 18.4584C16.4306 18.3195 16.5 18.1667 16.5 17.9999V6.33346C16.5 6.16663 16.4306 6.01379 16.2917 5.87494C16.1529 5.73609 16 5.66667 15.8332 5.66667H2.00012C1.83329 5.66667 1.68045 5.73609 1.5416 5.87494C1.40276 6.01379 1.33333 6.16663 1.33333 6.33346V17.9999C1.33333 18.1667 1.40276 18.3
2666195 1.5416 18.4584C1.68045 18.5972 1.83329 18.6667 2.00012 18.6667ZM8.91667 11.0833C10.1237 11.0833 11.1476 10.6628 11.9885 9.82179C12.8295 8.98095 13.25 7.95701 13.25 6.75H12.1667C12.1667 7.65278 11.8507 8.42014 11.2187 9.05208C10.5868 9.68403 9.81944 10 8.91667 10C8.01389 10 7.24653 9.68403 6.61458 9.05208C5.98264 8.42014 5.66667 7.65278 5.66667 6.75H4.58333C4.58333 7.95701 5.00385 8.98095 5.84487 9.82179C6.68572 10.6628 7.70965 11.0833 8.91667 11.0833ZM5.66667 4.58333H12.1667C12.1667 3.68056 11.8507 2.91319 11.2187 2.28125C10.5868 1.64931 9.81944 1.33333 8.91667 1.33333C8.01389 1.33333 7.24653 1.64931 6.61458 2.28125C5.98264 2.91319 5.66667 3.68056 5.66667 4.58333Z" fill="#161716"/> 2667 </svg></span> 2668 </a></nav> 2669 </div> 2670</header-element> 2671 2672<style> 2673 :root { 2674 --header--logo-height: 28px; 2675 --header--sticky: 1; 2676 --header--sidebar-height: calc( 2677 var(--spacing--block) + var(--spacing--section--y) + var(--header--logo-height) 2678 );--header--sidebar-width: 0px;} 2679 2680 .section--announcement ~ #shopify-section-sections--25816846729259__header { 2681 2682 top: calc((var(--announcement--sticky, 0) * var(--announcement--height, 0px)) + 4px); 2683 2684 z-index: 9; 2685 } 2686 2687 2688 #shopify-section-sections--25816846729259__header .header--root { 2689 position: relative; 2690 top: 4px; 2691 } 2692 2693 .section--announcement ~ #shopify-section-sections--25816846729259__header .header--root { 2694 top: 0; 2695 } 2696 2697 2698 /* Header border at bottom */ 2699 /* .header--root { 2700 border-bottom: 1px solid var(--border--color-light, #E5E5E5); 2701 } */ 2702 2703 /* Club Olay Rewards pill */ 2704 .olay-club-rewards-btn { 2705 display: inline-flex; 2706 align-items: center; 2707 justify-content: center; 2708 color: #161716; 2709 font-size: 14px; 2710 font-weight: 400; 2711 line-height: 1.21; 2712 padding: 6px 12px; 2713 border-radius: 4px; 2714 text-decoration: none; 2715 white-space: nowrap; 2716 transition: opacity 0.2s; 2717 } 2718 2719 .olay-club-rewards-btn:hover { 2720 opacity: 0.85; 2721 text-decoration: none; 2722 } 2723 2724 /* Header content sizing to fit within constrained height */ 2725 .header--logo, 2726 .header--primary-logo, 2727 .header--desktop-logo, 2728 .header--mobile-logo { 2729 display: flex; 2730 align-items: center; 2731 height: 100%; 2732 } 2733 2734 .header--logo img { 2735 max-height: 28px; 2736 width: auto; 2737 } 2738 2739 @media only screen and (max-width: 639px) { 2740 .header--logo img { 2741 max-height: 38px; 2742 } 2743 } 2744 2745 /* Ensure nav items and icons fit properly */ 2746 .header--primary-nav, 2747 .header--secondary-nav { 2748 height: 100%; 2749 display: flex; 2750 align-items: center; 2751 } 2752 2753 .header--search, 2754 .header--account, 2755 .header--cart { 2756 display: flex; 2757 align-items: center; 2758 justify-content: center; 2759 } 2760 2761 /* Mobile drawer toggle visibility and sizing */ 2762 @media only screen and (max-width: 639px) { 2763 .header--primary-nav { 2764 display: flex !important; 2765 visibility: visible !important; 2766 opacity: 1 !important; 2767 } 2768 2769 .header--drawer-toggle { 2770 display: flex !important; 2771 flex-direction: column; 2772 gap: 5px; 2773 padding: 8px; 2774 width: auto; 2775 height: auto; 2776 align-items: center; 2777 justify-content: center; 2778 position: relative; 2779 z-index: 10; 2780 } 2781 2782 .header--drawer-toggle span { 2783 display: block !important; 2784 width: 22px; 2785 height: 2px; 2786 background-color: var(--header--color, #161716); 2787 border-radius: 2px; 2788 } 2789 } 2790 2791 /* Figma-accurate header spacing */ 2792 /* @media only screen and (min-width: 640px) { 2793 .header--wrapper { 2794 column-gap: var(--spacing--6); 2795 } 2796 2797 .header--secondary-nav { 2798 gap: 24px; 2799 } 2800 } */ 2801 2802 /* Mobile & tablet logo swap */ 2803 .header--mobile-logo { 2804 display: none; 2805 } 2806 @media only screen and (max-width: 1023px) { 2807 [data-has-mobile-logo="true"] .header--desktop-logo { 2808 display: none; 2809 } 2810 [data-has-mobile-logo="true"] .header--mobile-logo { 2811 display: block; 2812 } 2813 } 2814 2815 @media only screen and (max-width: 639px) { 2816 .header--root[data-icons="true"] .header--primary-nav .header--search { 2817 display: none; 2818 } 2819 .header--root[data-icons="true"] .header--secondary-nav .header--search { 2820 display: flex; 2821 } 2822 } 2823 2824 @media only screen and (min-width: 640px) and (max-width: 1023px) { 2825 .header--root[data-layout="drawer"][data-icons="true"] .header--primary-nav .header--search { 2826 display: none; 2827 } 2828 .header--root[data-layout="drawer"][data-icons="true"] .header--secondary-nav .header--search { 2829 display: flex !important; 2830 } 2831 } 2832 2833 /* Keep drawer toggle visible on small tablet widths where drawer nav is used */ 2834 @media only screen and (min-width: 640px) and (max-width: 963px) { 2835 .header--root[data-layout="drawer"] .header--drawer-toggle { 2836 display: flex !important; 2837 align-items: center; 2838 justify-content: center; 2839 } 2840 } 2841 2842 /* ============================================ 2843 HEADER HEIGHT CONSTRAINTS & SPACING 2844 ============================================ 2845 Mobile (<640px): 68px max height, 24px top/bottom, 20px left/right 2846 Tablet (640-1023px): 76px max height, 24px top/bottom, 80px left/right 2847 Desktop (â¥1024px): 76px max height, 24px top/bottom, 80px left/right 2848 ============================================ */ 2849 2850 /* Mobile: 68px max height, 24px vertical, 20px horizontal */ 2851 @media only screen and (max-width: 639px) { 2852 .header--root { 2853 max-height: 68px; 2854 box-sizing: border-box; 2855 } 2856 2857 .header--root .header--wrapper { 2858 max-height: 68px; 2859 overflow: visible; 2860 box-sizing: border-box; 2861 align-items: center; 2862 padding: 20px !important; 2863 gap: 12px !important; 2864 } 2865 2866 .header--primary-nav { 2867 overflow: visible; 2868 } 2869 } 2870 2871 /* Tablet & Desktop: 76px max height, 24px vertical, 80px horizontal */ 2872 @media only screen and (min-width: 640px) { 2873 .header--root, 2874 .header--root .header--wrapper { 2875 max-height: 76px; 2876 box-sizing: border-box; 2877 } 2878 2879 .header--wrapper { 2880 align-items: center; 2881 padding: 24px 80px !important; 2882 } 2883 } 2884</style> 2885 2886
2887<script> 2888 const header_root = document.querySelector('.header--root'); 2889 header_root && document.documentElement.style.setProperty( 2890 '--header--height', `${header_root.offsetHeight.toFixed(2)}px` 2891 ); 2892 2893 const viewport = document.querySelector('.layout--viewport'); 2894 viewport?.setAttribute('data-header-layout', 'left-left'); 2895</script>
2895<element-relocator data-move-into=".mobile-nav--menu" data-mq="none"><!-- snippets/y-menu.liquid --><y-menu-element 2896 class="y-menu" 2897 data-id="y-menu_mobile-nav" 2898 data-hover-disabled="false" 2899 data-inside-drawer="" 2900 style="--highlight-color:#ffe379;" 2901> 2902 <ul 2903 class="y-menu--level-1--container" 2904 id="y-menu_mobile-nav" 2905 aria-current="true" 2906 2907 > 2908 2909<li 2910 class="y-menu--level-1--link" 2911 data-depth="3" 2912 2913 ><button 2914 data-item="nav-text" 2915 aria-haspopup="true" 2916 aria-expanded="false" 2917 aria-controls="y-menu_mobile-nav_face" 2918 2919 > 2920 <span>Face</span><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 2921 <title id="icon-chevron-right-small-title">Chevron Right</title> 2922 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 2923 </svg></button><ul 2924 class="y-menu--level-2--container" 2925 2926 id="y-menu_mobile-nav_face" 2927 aria-current="false" 2928 2929 > 2930 <li class="y-menu--back-link"> 2931 <button 2932 data-item="nav-text" 2933 aria-controls="y-menu_mobile-nav" 2934 2935 ><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 2936 <title id="icon-chevron-right-small-title">Chevron Right</title> 2937 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 2938 </svg><span>Face</span> 2939 </button> 2940 </li><li class="y-menu--level-2--link" data-item="nav-text"><button 2941 class="y-menu--accordion-toggle" 2942 data-item="nav-text" 2943 aria-expanded="false" 2944 aria-controls="y-menu_mobile-nav_face_featured" 2945 2946 > 2947 <span>Featured</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 2948 <title id="icon-chevron-down-title">Chevron Down</title> 2949 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 2950 </svg></button> 2951<ul 2952 class="y-menu--level-3--container" 2953 id="y-menu_mobile-nav_face_featured" 2954 aria-hidden="true" 2955 2956 ><li class="y-menu--level-3--link"> 2957 <a 2958 href="/collections/all-face-skincare" 2959 2960 > 2961 <span>All Face Skincare</span> 2962 </a> 2963 </li><li class="y-menu--level-3--link"> 2964 <a 2965 href="/collections/just-arrived" 2966 2967 > 2968 <span>New to Face</span> 2969 </a> 2970 </li><li class="y-menu--level-3--link"> 2971 <a 2972 href="/collections/best-sellers" 2973 2974 > 2975 <span>Face Best Sellers</span> 2976 </a> 2977 </li><li class="y-menu--level-3--link"> 2978 <a 2979 href="/collections/gift-sets-kits" 2980 2981 > 2982 <span>Face Gift Sets & Bundles</span> 2983 </a> 2984 </li><li class="y-menu--level-3--link"> 2985 <a 2986 href="/collections/trial-size" 2987 2988 >
2989 <span>Face Travel Size & Minis</span> 2990 </a> 2991 </li><li class="y-menu--level-3--link"> 2992 <a 2993 href="/collections/clearance" 2994 2995 > 2996 <span>Face Clearance</span> 2997 </a> 2998 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 2999 class="y-menu--accordion-toggle" 3000 data-item="nav-text" 3001 aria-expanded="false" 3002 aria-controls="y-menu_mobile-nav_face_skin-goals" 3003 3004 > 3005 <span>Skin Goals</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3006 <title id="icon-chevron-down-title">Chevron Down</title> 3007 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3008 </svg></button> 3009<ul 3010 class="y-menu--level-3--container" 3011 id="y-menu_mobile-nav_face_skin-goals" 3012 aria-hidden="true" 3013 3014 ><li class="y-menu--level-3--link"> 3015 <a 3016 href="/collections/fine-lines-wrinkles" 3017 3018 > 3019 <span>Wrinkles & Fine Lines</span> 3020 </a> 3021 </li><li class="y-menu--level-3--link"> 3022 <a 3023 href="/collections/sagging-skin" 3024 3025 > 3026 <span>Firmness & Elasticity</span> 3027 </a> 3028 </li><li class="y-menu--level-3--link"> 3029 <a 3030 href="/collections/uneven-skin-tone" 3031 3032 > 3033 <span>Dark Spots & Uneven Tone</span> 3034 </a> 3035 </li><li class="y-menu--level-3--link"> 3036 <a 3037 href="/collections/hydration" 3038 3039 > 3040 <span>Dry & Dehydrated Skin</span> 3041 </a> 3042 </li><li class="y-menu--level-3--link"> 3043 <a 3044 href="/collections/sensitive-fragrance-free" 3045 3046 > 3047 <span>Sensitive Skin</span> 3048 </a> 3049 </li><li class="y-menu--level-3--link"> 3050 <a 3051 href="/collections/spf" 3052 3053 > 3054 <span>SPF & Protection</span> 3055 </a> 3056 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3057 class="y-menu--accordion-toggle" 3058 data-item="nav-text" 3059 aria-expanded="false" 3060 aria-controls="y-menu_mobile-nav_face_product-type" 3061 3062 > 3063 <span>Product Type</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3064 <title id="icon-chevron-down-title">Chevron Down</title> 3065 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3066 </svg></button> 3067<ul 3068 class="y-menu--level-3--container" 3069 id="y-menu_mobile-nav_face_product-type" 3070 aria-hidden="true" 3071 3072 ><li class="y-menu--level-3--link"> 3073 <a 3074 href="/collections/cleansers-toners-wipes" 3075 3076 >
3077 <span>Facial Cleansers, Wipes & Toners</span> 3078 </a> 3079 </li><li class="y-menu--level-3--link"> 3080 <a 3081 href="/collections/serums-treatments" 3082 3083 > 3084 <span>Facial Serums & Treatments</span> 3085 </a> 3086 </li><li class="y-menu--level-3--link"> 3087 <a 3088 href="/collections/eyes" 3089 3090 > 3091 <span>Eye Care</span> 3092 </a> 3093 </li><li class="y-menu--level-3--link"> 3094 <a 3095 href="/collections/moisturizers" 3096 3097 > 3098 <span>Facial Moisturizers</span> 3099 </a> 3100 </li><li class="y-menu--level-3--link"> 3101 <a 3102 href="/collections/spf" 3103 3104 > 3105 <span>Sunscreen</span> 3106 </a> 3107 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3108 class="y-menu--accordion-toggle" 3109 data-item="nav-text" 3110 aria-expanded="false" 3111 aria-controls="y-menu_mobile-nav_face_ingredient" 3112 3113 > 3114 <span>Ingredient</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3115 <title id="icon-chevron-down-title">Chevron Down</title> 3116 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3117 </svg></button> 3118<ul 3119 class="y-menu--level-3--container" 3120 id="y-menu_mobile-nav_face_ingredient" 3121 aria-hidden="true" 3122 3123 ><li class="y-menu--level-3--link"> 3124 <a 3125 href="/collections/retinoid-complex" 3126 3127 > 3128 <span>Retinol</span> 3129 </a> 3130 </li><li class="y-menu--level-3--link"> 3131 <a 3132 href="/collections/vitamin-c" 3133 3134 > 3135 <span>Vitamin C</span> 3136 </a> 3137 </li><li class="y-menu--level-3--link"> 3138 <a 3139 href="/collections/hyaluronic-acid" 3140 3141 > 3142 <span>Hyaluronic Acid</span> 3143 </a> 3144 </li><li class="y-menu--level-3--link"> 3145 <a 3146 href="/collections/niacinamide" 3147 3148 > 3149 <span>Niacinamide</span> 3150 </a> 3151 </li><li class="y-menu--level-3--link"> 3152 <a 3153 href="/collections/peptides" 3154 3155 > 3156 <span>Collagen Peptide</span> 3157 </a> 3158 </li><li class="y-menu--level-3--link"> 3159 <a 3160 href="/collections/spf" 3161 3162 > 3163 <span>SPF</span> 3164 </a> 3165 </li></ul></li><li class="y-menu--blocks"><div 3166 class="menu-block--subnav-card" 3167 3168 3169 > 3170 <div class="subnav-card--image-wrapper"><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--image-link"><div 3171 class="subnav-card--image" 3172 3173 ><img 3174 src="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454" 3175 srcset="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=227 227w, 3176 //www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454 454w" 3177 sizes="227px" 3178 alt="" 3179 title="" 3180 width="227" 3181 height="184" 3182 loading="eager" 3183 ></div></a></div> 3184 3185 <div class="subnav-card--content"> 3186 <div class="subnav-card--text"><div class="subnav-card--title"> 3187 Regenerist 3188 </div><div class="subnav-card--description"> 3189 Visibly firmer, younger-looking skin 3190 </div></div><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--cta">
3191 <span class="subnav-card--cta-text">SHOP OUR RED JAR</span><svg class="icon--root icon--cta-arrow" role="img" aria-labelledby="icon-cta-arrow-title" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> 3192 <title id="icon-cta-arrow-title">CTA Arrow</title> 3193 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 3194 <rect width="22" height="22" fill="#D9D9D9"/> 3195 </mask> 3196 <g mask="url(#mask0_7232_266)"> 3197 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 3198 </g> 3199 </svg></a></div> 3200 </div></li></ul></li><li 3201 class="y-menu--level-1--link" 3202 data-depth="3" 3203 3204 ><button 3205 data-item="nav-text" 3206 aria-haspopup="true" 3207 aria-expanded="false" 3208 aria-controls="y-menu_mobile-nav_body" 3209 3210 > 3211 <span>Body</span><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3212 <title id="icon-chevron-right-small-title">Chevron Right</title> 3213 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3214 </svg></button><ul 3215 class="y-menu--level-2--container" 3216 3217 id="y-menu_mobile-nav_body" 3218 aria-current="false" 3219 3220 > 3221 <li class="y-menu--back-link"> 3222 <button 3223 data-item="nav-text" 3224 aria-controls="y-menu_mobile-nav" 3225 3226 ><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3227 <title id="icon-chevron-right-small-title">Chevron Right</title> 3228 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3229 </svg><span>Body</span> 3230 </button> 3231 </li><li class="y-menu--level-2--link" data-item="nav-text"><button 3232 class="y-menu--accordion-toggle" 3233 data-item="nav-text" 3234 aria-expanded="false" 3235 aria-controls="y-menu_mobile-nav_body_featured" 3236 3237 > 3238 <span>Featured</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3239 <title id="icon-chevron-down-title">Chevron Down</title> 3240 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3241 </svg></button> 3242<ul 3243 class="y-menu--level-3--container" 3244 id="y-menu_mobile-nav_body_featured" 3245 aria-hidden="true" 3246 3247 ><li class="y-menu--level-3--link"> 3248 <a 3249 href="/collections/body-care" 3250 3251 > 3252 <span>All Body Care</span> 3253 </a> 3254 </li><li class="y-menu--level-3--link"> 3255 <a 3256 href="/collections/new-body-care" 3257 3258 > 3259 <span>New to Body</span> 3260 </a> 3261 </li><li class="y-menu--level-3--link"> 3262 <a 3263 href="/collections/body-care-best-sellers" 3264 3265 > 3266 <span>Body Best Sellers</span> 3267 </a> 3268 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3269 class="y-menu--accordion-toggle" 3270 data-item="nav-text" 3271 aria-expanded="false" 3272 aria-controls="y-menu_mobile-nav_body_body-wash-bars" 3273 3274 >
3275 <span>Body Wash & Bars</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3276 <title id="icon-chevron-down-title">Chevron Down</title> 3277 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3278 </svg></button> 3279<ul 3280 class="y-menu--level-3--container" 3281 id="y-menu_mobile-nav_body_body-wash-bars" 3282 aria-hidden="true" 3283 3284 ><li class="y-menu--level-3--link"> 3285 <a 3286 href="/collections/body-wash" 3287 3288 > 3289 <span>All Body Wash & Bars</span> 3290 </a> 3291 </li><li class="y-menu--level-3--link"> 3292 <a 3293 href="/collections/premium-body-wash-bars" 3294 3295 > 3296 <span>Premium Body Wash</span> 3297 </a> 3298 </li><li class="y-menu--level-3--link"> 3299 <a 3300 href="/collections/fresh-scent" 3301 3302 > 3303 <span>Fresh Radiance</span> 3304 </a> 3305 </li><li class="y-menu--level-3--link"> 3306 <a 3307 href="/collections/super-serum-body-wash" 3308 3309 > 3310 <span>Super Serum Body Wash</span> 3311 </a> 3312 </li><li class="y-menu--level-3--link"> 3313 <a 3314 href="/collections/seasonal-body-wash" 3315 3316 > 3317 <span>Seasonal Body Wash</span> 3318 </a> 3319 </li><li class="y-menu--level-3--link"> 3320 <a 3321 href="/collections/bar-soap" 3322 3323 > 3324 <span>Bar Soap</span> 3325 </a> 3326 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3327 class="y-menu--accordion-toggle" 3328 data-item="nav-text" 3329 aria-expanded="false" 3330 aria-controls="y-menu_mobile-nav_body_hand-body-moisturizers" 3331 3332 > 3333 <span>Hand & Body Moisturizers</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3334 <title id="icon-chevron-down-title">Chevron Down</title> 3335 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3336 </svg></button> 3337<ul 3338 class="y-menu--level-3--container" 3339 id="y-menu_mobile-nav_body_hand-body-moisturizers" 3340 aria-hidden="true" 3341 3342 ><li class="y-menu--level-3--link"> 3343 <a 3344 href="/collections/hand-body-lotion" 3345 3346 > 3347 <span>All Hand & Body Moisturizers</span> 3348 </a> 3349 </li><li class="y-menu--level-3--link"> 3350 <a 3351 href="/collections/super-serum-hand-body-lotion" 3352 3353 > 3354 <span>Super Serum Lotions & Creams</span> 3355 </a> 3356 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3357 class="y-menu--accordion-toggle" 3358 data-item="nav-text" 3359 aria-expanded="false" 3360 aria-controls="y-menu_mobile-nav_body_skin-type" 3361 3362 >
3363 <span>Skin Type</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3364 <title id="icon-chevron-down-title">Chevron Down</title> 3365 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3366 </svg></button> 3367<ul 3368 class="y-menu--level-3--container" 3369 id="y-menu_mobile-nav_body_skin-type" 3370 aria-hidden="true" 3371 3372 ><li class="y-menu--level-3--link"> 3373 <a 3374 href="/collections/body-care-for-sensitive-skin" 3375 3376 > 3377 <span>Sensitive</span> 3378 </a> 3379 </li><li class="y-menu--level-3--link"> 3380 <a 3381 href="/collections/body-care-for-normal-skin" 3382 3383 > 3384 <span>Normal</span> 3385 </a> 3386 </li><li class="y-menu--level-3--link"> 3387 <a 3388 href="/collections/body-care-for-rough-bumpy-skin" 3389 3390 > 3391 <span>Rough & Bumpy</span> 3392 </a> 3393 </li><li class="y-menu--level-3--link"> 3394 <a 3395 href="/collections/body-care-for-dry-skin" 3396 3397 > 3398 <span>Dry</span> 3399 </a> 3400 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3401 class="y-menu--accordion-toggle" 3402 data-item="nav-text" 3403 aria-expanded="false" 3404 aria-controls="y-menu_mobile-nav_body_ingredient" 3405 3406 > 3407 <span>Ingredient</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3408 <title id="icon-chevron-down-title">Chevron Down</title> 3409 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3410 </svg></button> 3411<ul 3412 class="y-menu--level-3--container" 3413 id="y-menu_mobile-nav_body_ingredient" 3414 aria-hidden="true" 3415 3416 ><li class="y-menu--level-3--link"> 3417 <a 3418 href="/collections/body-care-with-vitamin-b3" 3419 3420 > 3421 <span>Vitamin B3</span> 3422 </a> 3423 </li><li class="y-menu--level-3--link"> 3424 <a 3425 href="/collections/body-care-with-glycerin" 3426 3427 > 3428 <span>Glycerin</span> 3429 </a> 3430 </li><li class="y-menu--level-3--link"> 3431 <a 3432 href="/collections/body-care-with-shea-butter" 3433 3434 > 3435 <span>Shea Butter</span> 3436 </a> 3437 </li><li class="y-menu--level-3--link"> 3438 <a 3439 href="/collections/body-care-with-vitamin-e" 3440 3441 > 3442 <span>Vitamin E</span> 3443 </a> 3444 </li><li class="y-menu--level-3--link"> 3445 <a 3446 href="/collections/body-care-with-vitamin-c" 3447 3448 >
3449 <span>Vitamin C</span> 3450 </a> 3451 </li><li class="y-menu--level-3--link"> 3452 <a 3453 href="/collections/body-care-with-retinol" 3454 3455 > 3456 <span>Retinol</span> 3457 </a> 3458 </li><li class="y-menu--level-3--link"> 3459 <a 3460 href="/collections/body-care-with-collagen" 3461 3462 > 3463 <span>Collagen</span> 3464 </a> 3465 </li></ul></li><li class="y-menu--blocks"><div 3466 class="menu-block--subnav-card" 3467 3468 3469 > 3470 <div class="subnav-card--image-wrapper"><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--image-link"><div 3471 class="subnav-card--image" 3472 3473 ><img 3474 src="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454" 3475 srcset="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=227 227w, 3476 //www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454 454w" 3477 sizes="227px" 3478 alt="" 3479 title="" 3480 width="227" 3481 height="184" 3482 loading="eager" 3483 ></div></a></div> 3484 3485 <div class="subnav-card--content"> 3486 <div class="subnav-card--text"><div class="subnav-card--title"> 3487 Limited Edition Body Wash 3488 </div><div class="subnav-card--description"> 3489 Strawberry Fizz Scent 3490 </div></div><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--cta"> 3491 <span class="subnav-card--cta-text">SHOP BODY</span><svg class="icon--root icon--cta-arrow" role="img" aria-labelledby="icon-cta-arrow-title" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> 3492 <title id="icon-cta-arrow-title">CTA Arrow</title> 3493 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 3494 <rect width="22" height="22" fill="#D9D9D9"/> 3495 </mask> 3496 <g mask="url(#mask0_7232_266)"> 3497 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 3498 </g> 3499 </svg></a></div> 3500 </div></li></ul></li><li 3501 class="y-menu--level-1--link" 3502 data-depth="3" 3503 3504 ><button 3505 data-item="nav-text" 3506 aria-haspopup="true" 3507 aria-expanded="false" 3508 aria-controls="y-menu_mobile-nav_anti-aging" 3509 3510 > 3511 <span>Anti-aging</span><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3512 <title id="icon-chevron-right-small-title">Chevron Right</title> 3513 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3514 </svg></button><ul 3515 class="y-menu--level-2--container" 3516 3517 id="y-menu_mobile-nav_anti-aging" 3518 aria-current="false" 3519 3520 > 3521 <li class="y-menu--back-link"> 3522 <button 3523 data-item="nav-text" 3524 aria-controls="y-menu_mobile-nav" 3525 3526 ><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3527 <title id="icon-chevron-right-small-title">Chevron Right</title> 3528 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3529 </svg><span>Anti-aging</span> 3530 </button> 3531 </li><li class="y-menu--level-2--link" data-item="nav-text"><button 3532 class="y-menu--accordion-toggle" 3533 data-item="nav-text" 3534 aria-expanded="false" 3535 aria-controls="y-menu_mobile-nav_anti-aging_solutions" 3536 3537 >
3538 <span>Solutions</span><svg class="icon--root icon--chevron-down" data-invertible="true" role="img" aria-labelledby="icon-chevron-down-title" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"> 3539 <title id="icon-chevron-down-title">Chevron Down</title> 3540 <path d="M5 4.058 8.53.528l.707.707-3.53 3.53L5 5.472.763 1.235 1.47.528 5 4.058Z" fill="currentColor" fill-rule="nonzero" /> 3541 </svg></button> 3542<ul 3543 class="y-menu--level-3--container" 3544 id="y-menu_mobile-nav_anti-aging_solutions" 3545 aria-hidden="true" 3546 3547 ><li class="y-menu--level-3--link"> 3548 <a 3549 href="/collections/anti-aging" 3550 3551 > 3552 <span>All Anti-Aging</span> 3553 </a> 3554 </li><li class="y-menu--level-3--link"> 3555 <a 3556 href="/collections/fine-lines-wrinkles" 3557 3558 > 3559 <span>Wrinkles & Fine Lines</span> 3560 </a> 3561 </li><li class="y-menu--level-3--link"> 3562 <a 3563 href="/collections/sagging-skin" 3564 3565 > 3566 <span>Firmness & Elasticity</span> 3567 </a> 3568 </li><li class="y-menu--level-3--link"> 3569 <a 3570 href="/collections/uneven-skin-tone" 3571 3572 > 3573 <span> Dark Spots & Uneven Tone</span> 3574 </a> 3575 </li><li class="y-menu--level-3--link"> 3576 <a 3577 href="/collections/hydration" 3578 3579 > 3580 <span> Dry & Dehydrated Skin</span> 3581 </a> 3582 </li></ul></li><li class="y-menu--blocks"><div 3583 class="menu-block--grid-with-slider" 3584 3585 3586 > 3587 <div 3588 id="grid-slider-grid_with_slider_Demo" 3589 class="grid-slider--slick" 3590 data-slides-to-show="3" 3591 data-slides-to-scroll="1" 3592 data-autoplay="false" 3593 data-autoplay-speed="3000" 3594 data-show-arrows="true" 3595 data-show-dots="true" 3596 data-infinite="false" 3597 ><div class="slider-card"><a href="/pages/cleansing-melts" class="slider-card--link"><div class="slider-card--image-wrapper"> 3598 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3599 class="image--root" 3600 data-background="false" 3601 data-display-type="aspect-ratio" 3602 data-full-width="" 3603 data-mobile-display-type="aspect-ratio" 3604 data-mobile-full-width="" 3605 data-mobile-overlay-style="" 3606 data-parallax="" 3607 data-overlay-style="" 3608 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2014;" 3609><img src="//www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=889" alt="Achieve Better Skin with Superior Cleansing" srcset="//www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=200 200w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=300 300w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=400 400w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=500 500w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=600 600w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=700 700w, //www.olay.com/cdn/shop/files/Achieve-Better-Skin-with-Superior-Cleansing-4x.jpg?v=1779268503&width=800 800w" width="889" height="740" loading="eager" sizes="100vw" draggable="false" title="Achieve Better Skin with Superior Cleansing"> 3610</picture></div> 3611 </div> 3612 3613 <div class="slider-card--content"> 3614 <div class="slider-card--text"><div class="slider-card--title"> 3615 Achieve Better Skin with Superior Cleansing 3616 </div><div class="slider-card--description"> 3617 Maintain your skin with our cleansing routine that fits and supports your career. 3618 </div></div><span class="slider-card--cta">
3619 <span class="slider-card--cta-text">SHOP CLEANSERS</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 3620 <title id="icon-arrow-right-title">Arrow Right</title> 3621 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 3622 </svg></span></div></a></div><div class="slider-card"><a href="/collections/serums-treatments" class="slider-card--link"><div class="slider-card--image-wrapper"> 3623 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3624 class="image--root" 3625 data-background="false" 3626 data-display-type="aspect-ratio" 3627 data-full-width="" 3628 data-mobile-display-type="aspect-ratio" 3629 data-mobile-full-width="" 3630 data-mobile-overlay-style="" 3631 data-parallax="" 3632 data-overlay-style="" 3633 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 3634><img src="//www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=889" alt="Erase Aging - Professional Results at Home" srcset="//www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=200 200w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=300 300w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=400 400w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=500 500w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=600 600w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=700 700w, //www.olay.com/cdn/shop/files/Multi-Benefit-Efficacy-without-the-Complexity-4x.jpg?v=1779268499&width=800 800w" width="889" height="737" loading="eager" sizes="100vw" draggable="false" title="Erase Aging - Professional Results at Home"> 3635</picture></div> 3636 </div> 3637 3638 <div class="slider-card--content"> 3639 <div class="slider-card--text"><div class="slider-card--title"> 3640 Erase Aging - Professional Results at Home 3641 </div><div class="slider-card--description"> 3642 Discover how our cutting-edge serums deliver advanced anti-aging results for a youthful glow. 3643 </div></div><span class="slider-card--cta"> 3644 <span class="slider-card--cta-text">SHOP SERUMS</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 3645 <title id="icon-arrow-right-title">Arrow Right</title> 3646 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 3647 </svg></span></div></a></div><div class="slider-card"><a href="/collections/hydration" class="slider-card--link"><div class="slider-card--image-wrapper"> 3648 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3649 class="image--root" 3650 data-background="false" 3651 data-display-type="aspect-ratio" 3652 data-full-width="" 3653 data-mobile-display-type="aspect-ratio" 3654 data-mobile-full-width="" 3655 data-mobile-overlay-style="" 3656 data-parallax="" 3657 data-overlay-style="" 3658 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 3659><img src="//www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=889" alt="Hydration Heroes" srcset="//www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=200 200w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=300 300w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=400 400w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=500 500w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=600 600w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=700 700w, //www.olay.com/cdn/shop/files/Erase-Aging-Professional-Results-at-Home-4x.jpg?v=1779268507&width=800 800w" width="889" height="737" loading="eager" sizes="100vw" draggable="false" title="Hydration Heroes"> 3660</picture></div> 3661 </div> 3662 3663 <div class="slider-card--content"> 3664 <div class="slider-card--text"><div class="slider-card--title"> 3665 Hydration Heroes 3666 </div><div class="slider-card--description"> 3667 Lock in moisture with our intensive hydration formulas for plump, radiant skin. 3668 </div></div><span class="slider-card--cta">
3669 <span class="slider-card--cta-text">SHOP MOISTURIZERS</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 3670 <title id="icon-arrow-right-title">Arrow Right</title> 3671 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 3672 </svg></span></div></a></div><div class="slider-card"><a href="/collections/uneven-skin-tone" class="slider-card--link"><div class="slider-card--image-wrapper"> 3673 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3674 class="image--root" 3675 data-background="false" 3676 data-display-type="aspect-ratio" 3677 data-full-width="" 3678 data-mobile-display-type="aspect-ratio" 3679 data-mobile-full-width="" 3680 data-mobile-overlay-style="" 3681 data-parallax="" 3682 data-overlay-style="" 3683 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 3684><img src="//www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=889" alt="Brighten & Glow" srcset="//www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=200 200w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=300 300w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=400 400w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=500 500w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=600 600w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=700 700w, //www.olay.com/cdn/shop/files/Effortless-Everyday-Skin-Care-without-Compromises-4x.jpg?v=1779268511&width=800 800w" width="889" height="737" loading="eager" sizes="100vw" draggable="false" title="Brighten & Glow"> 3685</picture></div> 3686 </div> 3687 3688 <div class="slider-card--content"> 3689 <div class="slider-card--text"><div class="slider-card--title"> 3690 Brighten & Glow 3691 </div><div class="slider-card--description"> 3692 Illuminate your complexion with targeted treatments for dark spots and uneven tone. 3693 </div></div><span class="slider-card--cta"> 3694 <span class="slider-card--cta-text">SHOP BRIGHTENING</span><svg class="icon--root icon--arrow-right" data-invertible="true" role="img" aria-labelledby="icon-arrow-right-title" width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"> 3695 <title id="icon-arrow-right-title">Arrow Right</title> 3696 <path d="M12.199 6.946H.53v-1.5h12.1L8.664 1.481l1.06-1.06 5.562 5.56-5.561 5.56-1.06-1.06 3.534-3.535Z" fill="currentColor" fill-rule="nonzero" /> 3697 </svg></span></div></a></div></div> 3698 </div></li></ul></li><li 3699 class="y-menu--level-1--link" 3700 data-depth="1" 3701 3702 ><button 3703 data-item="nav-text" 3704 aria-haspopup="true" 3705 aria-expanded="false" 3706 aria-controls="y-menu_mobile-nav_find-my-routine" 3707 3708 > 3709 <span>Find My Routine</span><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3710 <title id="icon-chevron-right-small-title">Chevron Right</title> 3711 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3712 </svg></button><ul 3713 class="y-menu--level-2--container" 3714 3715 id="y-menu_mobile-nav_find-my-routine" 3716 aria-current="false" 3717 3718 > 3719 <li class="y-menu--back-link"> 3720 <button 3721 data-item="nav-text" 3722 aria-controls="y-menu_mobile-nav" 3723 3724 ><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3725 <title id="icon-chevron-right-small-title">Chevron Right</title> 3726 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3727 </svg><span>Find My Routine</span> 3728 </button> 3729 </li><li class="y-menu--blocks"><div
3730 class="menu-block--osa-fifty" 3731 data-reverse-layout="true" 3732 style="background: linear-gradient(325.31deg, #ECECEC -1.07%, #D0D0D0, #AFAEAF -0.71%, #9A999A, #939293 1%, #ABAAAB 3.59%, #EAEAEA 19.43%, #FFFFFF 56.88%, #F2F2F2 64.24%, #EDEDED 68.7%, #FFFFFF 85.03%, #F3F2F2 96.96%, #D3D2D2 102.84%, #A19D9E 116.2%, #9B9798 119.17%);" 3733 3734 3735 > 3736 <div class="osa-fifty-content"> 3737 3738 <!-- Left Column - Text Content --> 3739 <div class="osa-fifty-text-column"> 3740 <div class="osa-fifty-superheading"> 3741 welcome to <span class="osa-fifty-powered">Powered by AI</span> 3742 </div> 3743 3744 <div class="osa-fifty-heading"> 3745 skin advisor 3746 </div><img 3747 src="//www.olay.com/cdn/shop/t/10/assets/Underline.png?v=15233172491784850011779203463" 3748 class="osa-fifty-underline" 3749 alt="underline decoration" 3750 loading="lazy" 3751 width="320" 3752 height="auto" 3753 ><div class="osa-fifty-text"> 3754 <span class="osa-fifty-subheading">Confidence Starts with the Right Routine</span><p class="osa-fifty-description">The new Olay Skin Advisor analyzes your skin using advanced technology to deliver personalized routines designed to support your skin goals.</p></div><div class="osa-fifty-button-section"> 3755 <a 3756 href="/pages/skin-advisor?autostart=true" 3757 class="osa-fifty-cta" 3758 title="Get Started Now" 3759 aria-label="Get Started Now" 3760 > 3761 <span class="osa-fifty-cta-text">Get Started Now</span> 3762 </a> 3763 </div></div> 3764 3765 <!-- Right Column - Image --> 3766 <div class="osa-fifty-image-column"> 3767 <picture><source 3768 media="(min-width: 1200px)" 3769 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466" 3770 ><source 3771 media="(min-width: 768px)" 3772 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mobile.png?v=99265202458701537411779203462" 3773 ><source 3774 media="(min-width: 250px)" 3775 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mob.png?v=59333317371312214441779203466" 3776 ><img 3777 class="osa-fifty-image" 3778 height="100%" 3779 width="100%" 3780 loading="lazy" 3781 alt="Skin Advisor" 3782 title="Skin Advisor"src="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466"> 3783 </picture> 3784 </div> 3785 3786 </div> 3787 </div></li></ul></li><li 3788 class="y-menu--level-1--link" 3789 data-depth="1" 3790 3791 ><button 3792 data-item="nav-text" 3793 aria-haspopup="true" 3794 aria-expanded="false" 3795 aria-controls="y-menu_mobile-nav_offers" 3796 3797 > 3798 <span>Offers</span><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3799 <title id="icon-chevron-right-small-title">Chevron Right</title> 3800 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3801 </svg></button><ul 3802 class="y-menu--level-2--container" 3803 3804 id="y-menu_mobile-nav_offers" 3805 aria-current="false" 3806 3807 > 3808 <li class="y-menu--back-link"> 3809 <button 3810 data-item="nav-text" 3811 aria-controls="y-menu_mobile-nav" 3812 3813 ><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3814 <title id="icon-chevron-right-small-title">Chevron Right</title> 3815 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3816 </svg><span>Offers</span> 3817 </button> 3818 </li><li class="y-menu--blocks"><div 3819 class="menu-block--grid-links" 3820 data-item-count="4" 3821 3822 3823 > 3824 <div class="grid-link-item"><a href="/pages/offers" class="grid-link-wrapper"><h3 class="grid-link-title">Current Offers & Coupons</h3><p class="grid-link-desc">Shop limited-time offers and<br> exclusive savings.</p></a></div><div class="grid-link-item"><a href="/apps/subscriptions/manage" class="grid-link-wrapper"><h3 class="grid-link-title">Subscribe & Save</h3><p class="grid-link-desc">Never run out and save on<br> every delivery.</p></a></div><div class="grid-link-item"><a href="/collections/clearance" class="grid-link-wrapper"><h3 class="grid-link-title">Clearance</h3><p class="grid-link-desc">Last chance deals at<br> special prices.</p></a></div><div class="grid-link-item"><a href="/pages/referral" class="grid-link-wrapper"><h3 class="grid-link-title">Give $10, Get $10</h3><p class="grid-link-desc">Share the love. Give your friends $10 off their first order of $40 <br> and youâll get a $10 coupon too. Win-win!</p></a></div> 3825 </div></li></ul></li><li 3826 class="y-menu--level-1--link" 3827 data-depth="1" 3828 3829 ><button 3830 data-item="nav-text" 3831 aria-haspopup="true" 3832 aria-expanded="false" 3833 aria-controls="y-menu_mobile-nav_learn" 3834 3835 >
3836 <span>Learn</span><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3837 <title id="icon-chevron-right-small-title">Chevron Right</title> 3838 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3839 </svg></button><ul 3840 class="y-menu--level-2--container" 3841 3842 id="y-menu_mobile-nav_learn" 3843 aria-current="false" 3844 3845 > 3846 <li class="y-menu--back-link"> 3847 <button 3848 data-item="nav-text" 3849 aria-controls="y-menu_mobile-nav" 3850 3851 ><svg class="icon--root icon--chevron-right--small" data-invertible="true" role="img" aria-labelledby="icon-chevron-right-small-title" width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"> 3852 <title id="icon-chevron-right-small-title">Chevron Right</title> 3853 <path d="M6.274 7.202.408 1.336l.707-.707 6.573 6.573-.096.096-6.573 6.573-.707-.707 5.962-5.962Z" fill="currentColor" fill-rule="nonzero" /> 3854 </svg><span>Learn</span> 3855 </button> 3856 </li><li class="y-menu--blocks"><div 3857 class="menu-block--grid-links" 3858 data-item-count="5" 3859 3860 3861 > 3862 <div class="grid-link-item"><a href="/pages/proven-science" class="grid-link-wrapper"><h3 class="grid-link-title">
3862Proven Science</h3><p class="grid-link-desc">Backed by decades of skin<br> 3863research and innovation.</p></a></div><div class="grid-link-item"><a href="/pages/why-olay" class="grid-link-wrapper"><h3 class="grid-link-title">Our Story</h3><p class="grid-link-desc">Discover what makes Olay<br> 3864a trusted skincare brand.</p></a></div><div class="grid-link-item"><a href="/blogs/olay-today" class="grid-link-wrapper"><h3 class="grid-link-title">Blog</h3><p class="grid-link-desc">Expert tips, trends and<br> 3865skincare advice.</p></a></div><div class="grid-link-item"><a href="/blogs/olay-today/tagged/tips#blog_filters" class="grid-link-wrapper"><h3 class="grid-link-title">Skincare Education</h3><p class="grid-link-desc">Learn how to care for your<br>skin the right way.</p></a></div><div class="grid-link-item"><a href="/pages/contact-us" class="grid-link-wrapper"><h3 class="grid-link-title">Contact Us</h3><p class="grid-link-desc">Weâre here to help.</p></a></div> 3866 </div></li></ul></li></ul></y-menu-element> 3867 3868 3869
3870<script> 3871 // Y-Menu Accordion Toggle for Level-3 Items 3872 document.addEventListener('DOMContentLoaded', function() { 3873 const accordionToggles = document.querySelectorAll('.y-menu--accordion-toggle'); 3874 3875 accordionToggles.forEach(toggle => { 3876 toggle.addEventListener('click', function(e) { 3877 e.preventDefault(); 3878 3879 const targetId = this.getAttribute('aria-controls'); 3880 const targetContainer = document.getElementById(targetId); 3881 3882 if (targetContainer) { 3883 const isExpanded = this.getAttribute('aria-expanded') === 'true'; 3884 3885 // Toggle aria-expanded on button 3886 this.setAttribute('aria-expanded', !isExpanded); 3887 3888 // Toggle aria-hidden on container 3889 targetContainer.setAttribute('aria-hidden', isExpanded); 3890 3891 // Optional: Close other accordions in the same level 3892 const parentList = this.closest('.y-menu--level-2--container'); 3893 if (parentList) { 3894 const otherToggles = parentList.querySelectorAll('.y-menu--accordion-toggle'); 3895 otherToggles.forEach(otherToggle => { 3896 if (otherToggle !== this && otherToggle.getAttribute('aria-expanded') === 'true') { 3897 const otherId = otherToggle.getAttribute('aria-controls'); 3898 const otherContainer = document.getElementById(otherId); 3899 otherToggle.setAttribute('aria-expanded', 'false'); 3900 if (otherContainer) { 3901 otherContainer.setAttribute('aria-hidden', 'true'); 3902 } 3903 } 3904 }); 3905 } 3906 } 3907 }); 3908 }); 3909 }); 3910</script>
3910 3911
3912<script> 3913 (function () { 3914 // ---------- Load jQuery (only if needed) ---------- 3915 function loadJQuery(cb) { 3916 if (window.jQuery) return cb(); 3917 var s = document.createElement('script'); 3918 s.src = '//www.olay.com/cdn/shop/t/10/assets/jquery.min.js?v=147293088974801289311779203466'; 3919 s.onload = cb; 3920 document.head.appendChild(s); 3921 } 3922 3923 // ---------- Load Slick (only if needed) ---------- 3924 function loadSlick(cb) { 3925 if (window.jQuery && window.jQuery.fn && window.jQuery.fn.slick) return cb(); 3926 3927 var s = document.createElement('script'); 3928 s.src = '//www.olay.com/cdn/shop/t/10/assets/slick.min.js?v=71779134894361685811779203468'; 3929 s.onload = cb; 3930 document.head.appendChild(s); 3931 } 3932 3933 // ---------- Helper: wait until element is measurable (not display:none / 0 width) ---------- 3934 function whenMeasurable(el, cb) { 3935 var tries = 0; 3936 (function loop() { 3937 var r = el && el.getBoundingClientRect ? el.getBoundingClientRect() : { width: 0, height: 0 }; 3938 if (r.width > 0 && r.height > 0) return cb(); 3939 if (++tries > 600) return; // safety stop 3940 requestAnimationFrame(loop); 3941 })(); 3942 } 3943 3944 function buildOptions($slider) { 3945 var slidesToShow = parseInt($slider.data('slides-to-show'), 10) || 2; 3946 3947 return { 3948 slidesToShow: slidesToShow, 3949 slidesToScroll: parseInt($slider.data('slides-to-scroll'), 10) || 1, 3950 autoplay: ($slider.data('autoplay') === true || $slider.data('autoplay') === 'true'), 3951 autoplaySpeed: parseInt($slider.data('autoplay-speed'), 10) || 3000, 3952 arrows: ($slider.data('show-arrows') !== false && $slider.data('show-arrows') !== 'false'), 3953 dots: ($slider.data('show-dots') !== false && $slider.data('show-dots') !== 'false'), 3954 infinite: ($slider.data('infinite') === true || $slider.data('infinite') === 'true'), 3955 speed: 300, 3956 cssEase: 'ease-in-out', 3957 adaptiveHeight: false, 3958 variableWidth: false, 3959 responsive: [ 3960 { breakpoint: 1440, settings: { slidesToShow: Math.min(slidesToShow, 2), slidesToScroll: 1 } }, 3961 { breakpoint: 1100, settings: { slidesToShow: Math.min(slidesToShow, 2), slidesToScroll: 1 } }, 3962 { breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: true, dots: true } } 3963 ] 3964 }; 3965 } 3966 3967 function initOrRefreshAll() { 3968 var $ = window.jQuery; 3969 if (!$ || !$.fn || !$.fn.slick) return; 3970 3971 $('.grid-slider--slick').each(function () { 3972 var $slider = $(this); 3973 var el = this; 3974 3975 whenMeasurable(el, function () { 3976 var opts = buildOptions($slider); 3977 3978 if (!$slider.hasClass('slick-initialized')) { 3979 $slider.slick(opts); 3980 } else { 3981 $slider.slick('refresh'); 3982 } 3983 3984 // replicate the "first next click fixes it" recalculation 3985 requestAnimationFrame(function () { $slider.slick('setPosition'); }); 3986 setTimeout(function () { $slider.slick('setPosition'); }, 120); 3987 }); 3988 }); 3989 } 3990 3991 function bootstrap() { 3992 loadJQuery(function () { 3993 loadSlick(function () { 3994 var $ = window.jQuery; 3995 3996 // 1) Initial run (in case menu already open) 3997 initOrRefreshAll(); 3998 3999 // 2) Watch for submenu visibility changes 4000 setTimeout(function() { 4001 try { 4002 var observer = new MutationObserver(function(mutations) { 4003 mutations.forEach(function(mutation) { 4004 if (mutation.type === 'attributes' && mutation.attributeName === 'aria-current') { 4005 var target = mutation.target; 4006 if (target.classList.contains('y-menu--level-2--container') && 4007 target.getAttribute('aria-current') === 'true') { 4008 // Submenu just became visible - refresh sliders inside it 4009 setTimeout(function() { 4010 initOrRefreshAll(); 4011 }, 50); 4012 } 4013 } 4014 }); 4015 }); 4016 4017 // Observe all level-2 containers 4018 var containers = document.querySelectorAll('.y-menu--level-2--container'); 4019 if (containers && containers.length > 0) {
4020 containers.forEach(function(container) { 4021 observer.observe(container, { attributes: true, attributeFilter: ['aria-current'] }); 4022 }); 4023 } 4024 } catch (e) { 4025 // Silent error 4026 } 4027 }, 150); 4028 4029 // 3) Global safety net 4030 $(window).on('resize orientationchange load', function () { 4031 if ($('.grid-slider--slick.slick-initialized').length) { 4032 $('.grid-slider--slick.slick-initialized').slick('setPosition'); 4033 } 4034 }); 4035 }); 4036 }); 4037 } 4038 4039 if (document.readyState === 'loading') { 4040 document.addEventListener('DOMContentLoaded', bootstrap); 4041 } else { 4042 bootstrap(); 4043 } 4044 })(); 4045</script>
4045</element-relocator></header> 4046<!-- END sections: header-group --><!-- BEGIN sections: overlay-group --> 4047<div id="shopify-section-sections--25816846762027__popup" class="shopify-section shopify-section-group-overlay-group section--popup"><!-- sections/popup.liquid --><div 4048 class="popup--root" 4049 data-consent-tracking="true" 4050 data-limit="false" 4051 data-size="1" 4052> 4053 <!-- snippets/consent-tracking.liquid --><consent-tracking 4054 class="popup--block--root" 4055 data-block-id="ConsentTracking" 4056 data-background-color="dark" 4057 data-translucent="true" 4058 data-text-color="white" 4059 data-position="left" 4060 data-transition-item="viewport" 4061 data-transition-type="scale-in" 4062 data-transition-trigger="custom" 4063 data-x-alignment="center" 4064 aria-hidden="true" 4065 4066> 4067 <div class="popup--block--container"><div class="popup--block--heading" data-item="block-heading"> 4068 Cookie consent 4069 </div><div class="popup--block--description" data-item="rte-content"><p>We use cookies and similar technologies to provide the best experience on our website. Refer to our Privacy Policy for more information.</p></div><div class="popup--block--button-container"> 4070 <button 4071 class="popup--block--accept" 4072 data-item="button-2" 4073 data-text="accept" 4074 > 4075 <span>accept</span> 4076 </button> 4077 4078 <button 4079 class="popup--block--decline" 4080 data-item="button-4" 4081 data-text="decline" 4082 > 4083 <span>decline</span> 4084 </button> 4085 </div> 4086 </div> 4087</consent-tracking> 4088</div> 4089 4090 4091 4092 4093</div><div id="shopify-section-sections--25816846762027__announcement_popup_3bB7cX" class="shopify-section shopify-section-group-overlay-group section--announcement-popup"><!-- sections/announcement-popup.liquid --><div 4094 class="announcement-popup--root" 4095 id="announcement-popup-sections--25816846762027__announcement_popup_3bB7cX" 4096 data-section-id="sections--25816846762027__announcement_popup_3bB7cX" 4097 data-section-type="announcement-popup" 4098 style="display: none;" 4099> 4100 <div class="announcement-popup--wrapper"> 4101 <div class="announcement-popup--content"><div class="announcement-popup--promos"><div class="announcement-popup--promo" > 4102 <div class="announcement-popup--promo-content"><div class="announcement-popup--promo-header"><div class="announcement-popup--promo-heading" style="color: #161716;">Subscribe & Save</div><div class="announcement-popup--promo-title" style="color: #161716;">ENJOY 5% OFF</div></div><div class="announcement-popup--promo-description" style="color: #161716;">Save 5% on all subscription orders and get exclusive free gifts.</div></div><a 4103 href="/pages/subscription" 4104 class="announcement-popup--promo-cta" 4105 style="color: #161716;" 4106 > 4107 <span class="announcement-popup--promo-cta-text">SHOP NOW</span> 4108 <svg class="announcement-popup--promo-cta-icon" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 4109 <polygon points="6,4 18,12 6,20" fill="black"></polygon> 4110 </svg> 4111 </a></div><div class="announcement-popup--promo" > 4112 <div class="announcement-popup--promo-content"><div class="announcement-popup--promo-header"><div class="announcement-popup--promo-heading" style="color: #161716;">Club Olay Exclusive</div><div class="announcement-popup--promo-title" style="color: #161716;">FREE STANDARD SHIPPING</div></div><div class="announcement-popup--promo-description" style="color: #161716;">Join Club Olay to unlock exclusive perks & enjoy FREE standard shipping on all orders.</div></div><a 4113 href="https://shopify.com/66143911979/account" 4114 class="announcement-popup--promo-cta" 4115 style="color: #161716;" 4116 > 4117 <span class="announcement-popup--promo-cta-text">JOIN CLUB OLAY TODAY</span> 4118 <svg class="announcement-popup--promo-cta-icon" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 4119 <polygon points="6,4 18,12 6,20" fill="black"></polygon> 4120 </svg> 4121 </a></div><div class="announcement-popup--promo" > 4122 <div class="announcement-popup--promo-content"><div class="announcement-popup--promo-header"><div class="announcement-popup--promo-heading" style="color: #161716;">Anti-Aging</div><div class="announcement-popup--promo-title" style="color: #161716;">DERMATOLOGIST RECOMMENDED</div></div><div class="announcement-popup--promo-description" style="color: #161716;">Dermatologists recommend Olay for anti-aging care. Visibly reduce fine lines and wrinkles for smoother, younger-looking skin.</div></div><a 4123 href="/collections/anti-aging" 4124 class="announcement-popup--promo-cta" 4125 style="color: #161716;" 4126 >
4127 <span class="announcement-popup--promo-cta-text">SHOP ANTI-AGING</span> 4128 <svg class="announcement-popup--promo-cta-icon" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 4129 <polygon points="6,4 18,12 6,20" fill="black"></polygon> 4130 </svg> 4131 </a></div></div></div> 4132 </div><div class="announcement-popup--footer"> 4133 <div class="announcement-popup--footer-logo"> 4134 <img src="//www.olay.com/cdn/shop/t/10/assets/popup-footer-img.png?v=137370635935801765381779203463" class="announcement-popup--footer-image" width="20" height="20"> 4135 </div> 4136 </div></div> 4137 4138<div 4139 class="announcement-popup--overlay" 4140 id="announcement-popup-overlay-sections--25816846762027__announcement_popup_3bB7cX" 4141 aria-hidden="true" 4142></div> 4143 4144<style> 4145 /* Position popup below announcement bar */ 4146 #shopify-section-sections--25816846762027__announcement_popup_3bB7cX { 4147 position: relative; 4148 z-index: 90; 4149 } 4150 4151 .announcement-popup--root { 4152 position: fixed; 4153 top: 0; 4154 left: 0; 4155 right: 0; 4156 width: 100%; 4157 background: #fdfdfd; 4158 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 4159 opacity: 0; 4160 transform: translateY(-10px); 4161 transition: opacity 0.3s ease, transform 0.3s ease; 4162 pointer-events: none; 4163 z-index: 95; 4164 overflow: visible; 4165 } 4166 4167 .announcement-popup--overlay { 4168 position: fixed; 4169 inset: 0; 4170 background: rgba(0, 0, 0, 0.8); 4171 opacity: 0; 4172 visibility: hidden; 4173 pointer-events: none; 4174 transition: opacity ease, visibility ease; 4175 z-index: 94; 4176 } 4177 4178 .announcement-popup--overlay[data-visible="true"] { 4179 opacity: 1; 4180 visibility: visible; 4181 pointer-events: auto; 4182 } 4183 4184 .announcement-popup--root[data-visible="true"] { 4185 display: block !important; 4186 opacity: 1; 4187 transform: translateY(0); 4188 pointer-events: auto; 4189 } 4190 4191 .announcement-popup--wrapper { 4192 display: flex; 4193 flex-direction: column; 4194 align-items: center; 4195 padding: 32px 0; 4196 position: relative; 4197 overflow: visible; 4198 } 4199 4200 .announcement-popup--content { 4201 width: 100%; 4202 max-width: 1440px; 4203 padding: 0 16px; 4204 } 4205 4206 .announcement-popup--promos { 4207 display: flex; 4208 flex-direction: column; 4209 gap: 32px; 4210 } 4211 4212 .announcement-popup--promo { 4213 display: flex; 4214 flex-direction: column; 4215 gap: 19px; 4216 } 4217 4218 .announcement-popup--promo-content { 4219 display: flex; 4220 flex-direction: column; 4221 gap: 12px; 4222 } 4223 4224 .announcement-popup--promo-header { 4225 display: flex; 4226 flex-direction: column; 4227 gap: 8px; 4228 } 4229 4230 .announcement-popup--promo-heading { 4231 font-family: 'Juana', serif; 4232 font-weight: 300; 4233 font-size: 14px; 4234 line-height: 1em; 4235 } 4236 4237 .announcement-popup--promo-title { 4238 font-family: 'Boston', sans-serif; 4239 font-weight: 700; 4240 font-size: 18.408px; 4241 line-height: 1em; 4242 letter-spacing: -0.02em; 4243 } 4244 4245 .announcement-popup--promo-description { 4246 font-family: 'Boston', sans-serif; 4247 font-weight: 400; 4248 font-size: 12px; 4249 line-height: 1.5em; 4250 } 4251 4252 .announcement-popup--promo-cta { 4253 display: flex; 4254 align-items: center; 4255 gap: 4px; 4256 height: 11px; 4257 width: fit-content; 4258 text-decoration: none; 4259 transition: color 0.2s ease; 4260 } 4261 4262 .announcement-popup--promo-cta:hover { 4263 color: #C11E33 !important; 4264 } 4265 4266 .announcement-popup--promo-cta:hover .announcement-popup--promo-cta-icon polygon { 4267 fill: #C11E33; 4268 } 4269 4270 .announcement-popup--promo-cta-text { 4271 font-family: 'Boston', sans-serif; 4272 font-weight: 700; 4273 font-size: 12px; 4274 line-height: 1em; 4275 letter-spacing: -0.02em; 4276 transition: color 0.2s ease; 4277 } 4278 4279 .announcement-popup--promo-cta-icon { 4280 width: 13px; 4281 height: 20px; 4282 } 4283 4284 .announcement-popup--promo-cta-icon polygon { 4285 transition: fill 0.2s ease; 4286 } 4287 4288 /* Footer styles */ 4289 .announcement-popup--footer { 4290 position: absolute; 4291 left: 0; 4292 right: 0; 4293 width: 100vw; 4294 height: 44px; 4295 margin-left: calc(-50vw + 50%); 4296 background: linear-gradient(62deg, 4297 rgba(219, 219, 219, 1) 0%, 4298 rgba(244, 244, 244, 1) 35%, 4299 rgba(244, 244, 244, 1) 62%, 4300 rgba(219, 219, 219, 1) 100%); 4301 display: flex; 4302 align-items: center; 4303 justify-content: center; 4304 } 4305 4306 .announcement-popup--footer-logo { 4307 display: flex; 4308 align-items: center; 4309 justify-content: center; 4310 } 4311 4312 .announcement-popup--footer-image { 4313 max-height: 28px; 4314 width: auto; 4315 } 4316 4317 /* Tablet (⥠768px) */ 4318 @media only screen and (min-width: 768px) { 4319 .announcement-popup--wrapper { 4320 padding: 56px 64px; 4321 } 4322 4323 .announcement-popup--content { 4324 padding: 0; 4325 max-width: none; 4326 width: 100%; 4327 } 4328 4329 .announcement-popup--promos { 4330 flex-direction: row; 4331 flex-wrap: wrap; 4332 justify-content: flex-start; 4333 gap: 36px; 4334 row-gap: 36px; 4335 } 4336 4337 .announcement-popup--promo { 4338 flex: 0 0 auto; 4339 width: 300px; 4340 min-height: 121px; 4341 } 4342 4343 .announcement-popup--promo-title { 4344 max-width: 300px; 4345 } 4346 } 4347 4348 /* Desktop (⥠1100px) */ 4349 @media only screen and (min-width: 1100px) { 4350 .announcement-popup--wrapper { 4351 padding: 56px 0; 4352 } 4353 4354 .announcement-popup--content { 4355 padding: 0 32px; 4356 max-width: 1440px; 4357 } 4358 4359 .announcement-popup--promos { 4360 flex-wrap: nowrap; 4361 justify-content: space-between; 4362 gap: 84px; 4363 } 4364 4365 .announcement-popup--promo { 4366 flex: 1; 4367 width: auto; 4368 height: auto; 4369 max-width: 350px; 4370 } 4371 } 4372</style> 4373 4374 4375
4376<script> 4377 (function() { 4378 // Announcement popup toggle functionality 4379 const initPopup = function() { 4380 const popup = document.querySelector('#announcement-popup-sections--25816846762027__announcement_popup_3bB7cX'); 4381 const overlay = document.querySelector('#announcement-popup-overlay-sections--25816846762027__announcement_popup_3bB7cX'); 4382 const toggleButton = document.querySelector('[data-announcement-toggle]'); 4383 const iconPlus = toggleButton?.querySelector('.announcement--toggle-icon-plus'); 4384 const iconMinus = toggleButton?.querySelector('.announcement--toggle-icon-minus'); 4385 const announcementBar = document.querySelector('.announcement--center'); 4386 4387 if (!popup) { 4388 return; 4389 } 4390 4391 if (!toggleButton || !iconPlus || !iconMinus) { 4392 return; 4393 } 4394 4395 let isOpen = false; 4396 4397 // Function to update popup position 4398 const updatePopupPosition = function() { 4399 if (!isOpen) return; 4400 const announcementSection = document.querySelector('.announcement--root'); 4401 if (announcementSection) { 4402 const rect = announcementSection.getBoundingClientRect(); 4403 popup.style.top = (rect.bottom + 3) + 'px'; 4404 } 4405 }; 4406 4407 const togglePopup = function(event) { 4408 event.preventDefault(); 4409 event.stopPropagation(); 4410 4411 isOpen = !isOpen; 4412 4413 // Get announcement bar position 4414 const announcementSection = document.querySelector('.announcement--root'); 4415 if (announcementSection && isOpen) { 4416 const rect = announcementSection.getBoundingClientRect(); 4417 popup.style.top = (rect.bottom + 3) + 'px'; 4418 } 4419 4420 // Toggle popup visibility 4421 popup.setAttribute('data-visible', isOpen.toString()); 4422 if (overlay) { 4423 overlay.setAttribute('data-visible', isOpen.toString()); 4424 overlay.setAttribute('aria-hidden', (!isOpen).toString()); 4425 } 4426 4427 if (isOpen) { 4428 window.dispatchEvent(new CustomEvent('theme:announcement-popup:opened')); 4429 } 4430 4431 toggleButton.setAttribute('aria-expanded', isOpen.toString()); 4432 4433 // Toggle body scroll 4434 if (isOpen) { 4435 document.body.style.overflow = 'hidden'; 4436 } else { 4437 document.body.style.overflow = ''; 4438 } 4439 4440 // Toggle icons 4441 if (isOpen) { 4442 iconPlus.style.display = 'none'; 4443 iconMinus.style.display = 'block'; 4444 } else { 4445 iconPlus.style.display = 'block'; 4446 iconMinus.style.display = 'none'; 4447 } 4448 }; 4449 4450 const closePopup = function() { 4451 if (isOpen) { 4452 isOpen = false; 4453 popup.setAttribute('data-visible', 'false'); 4454 if (overlay) { 4455 overlay.setAttribute('data-visible', 'false'); 4456 overlay.setAttribute('aria-hidden', 'true'); 4457 } 4458 toggleButton.setAttribute('aria-expanded', 'false'); 4459 document.body.style.overflow = ''; 4460 iconPlus.style.display = 'block'; 4461 iconMinus.style.display = 'none'; 4462 } 4463 }; 4464 4465 // Add click event to toggle button 4466 toggleButton.addEventListener('click', togglePopup); 4467 4468 if (overlay) { 4469 overlay.addEventListener('click', closePopup); 4470 } 4471 4472 // Make announcement bar clickable as well 4473 if (announcementBar) { 4474 announcementBar.addEventListener('click', function(event) { 4475 // Only toggle if clicking on the bar itself or the blocks, not navigation arrows 4476 if (!event.target.closest('.announcement--previous') && 4477 !event.target.closest('.announcement--next') && 4478 !event.target.closest('[data-announcement-toggle]') && 4479 !event.target.closest('a')) { 4480 togglePopup(event); 4481 } 4482 }); 4483 // Add cursor pointer to indicate clickability 4484 announcementBar.style.cursor = 'pointer'; 4485 } 4486 4487 // Close popup when clicking outside 4488 document.addEventListener('click', function(event) { 4489 const isClickInside = toggleButton.contains(event.target) || 4490 popup.contains(event.target) || 4491 announcementBar?.contains(event.target); 4492 4493 if (!isClickInside) { 4494 closePopup(); 4495 } 4496 }); 4497 4498 // Close on Escape key 4499 document.addEventListener('keydown', function(event) { 4500 if (event.key === 'Escape' && isOpen) { 4501 closePopup(); 4502 } 4503 }); 4504 4505 // Update popup position on scroll and resize 4506 window.addEventListener('scroll', updatePopupPosition); 4507 window.addEventListener('resize', updatePopupPosition); 4508 }; 4509 4510 // Initialize popup when DOM is ready 4511 if (document.readyState === 'loading') { 4512 document.addEventListener('DOMContentLoaded', initPopup); 4513 } else { 4514 // DOM already loaded, run immediately 4515 initPopup(); 4516 } 4517 })(); 4518</script>
4518 4519</div><section id="shopify-section-sections--25816846762027__login_model_E6879V" class="shopify-section shopify-section-group-overlay-group login-modal-section"><!-- sections/login-model.liquid --> 4520 4521<login-modal class="login-modal--root" data-login-modal> 4522 <!-- Signed Out Modal --> 4523 <div class="login-modal--tooltip" data-state="signed-out" aria-hidden="true"> 4524 4525 4526 <!-- Account Signed Out State --> 4527 <div class="login-modal--signed-out"> 4528 <div class="login-modal--header-section"> 4529 <div class="login-modal--header"> 4530 <div class="login-modal--header-content"> 4531 <div class="login-modal--icon-wrapper"> 4532 <img src="//www.olay.com/cdn/shop/t/10/assets/icon-madonna-positive.svg?v=75958632260707237271779203466" class="login-modal--icon" alt="Olay Icon" width="36" height="36"> 4533 </div> 4534 <div class="login-modal--text-wrapper"> 4535 <h3 class="login-modal--heading">Hello, Beauty Icon!</h3> 4536 <p class="login-modal--subheading">Your skin care journey continues here.</p> 4537 </div> 4538 </div> 4539 <button class="login-modal--close" aria-label="Close" data-login-modal-close> 4540 <img src="//www.olay.com/cdn/shop/t/10/assets/icon-close.svg?v=179749555907739525801779203464" class="login-modal--close-icon" alt="Close" width="20" height="20"> 4541 </button> 4542 </div> 4543 4544 <p class="login-modal--description">Join Club Olay to unlock exclusive perks and enjoy FREE standard shipping on all orders.</p> 4545 </div> 4546 4547 <div class="login-modal--actions"><a href="https://club.olay.com?locale=en&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkwODc5MzYzLCJuYmYiOjE3OTAyNzQ1NjN9.8KWa7jCQ16JRhY9iaakfBkVFT7oqobgaiqSfjo80AmY®ion_country=US" class="login-modal--button login-modal--button-primary"> 4548 SIGN IN 4549 </a> 4550 <a href="https://shopify.com/66143911979/account" class="login-modal--button login-modal--button-secondary"> 4551 JOIN CLUB OLAY 4552 </a> 4553 4554 </div> 4555 </div> 4556 4557 </div> 4558</login-modal>
4559<script> 4560let hour = new Date().getHours(); 4561let greeting = hour < 12 ? 'Good morning' : hour < 16 ? 'Good afternoon' : 'Good evening'; 4562document.getElementById('greeting-text').textContent = greeting; 4563</script>
4563 4564 4565 4566 4567 4568 4569</section> 4570<!-- END sections: overlay-group --><div class="layout--main-content"> 4571 <aside class="layout--sidebar" aria-label="Sidebar" data-mq="medium-large"></aside> 4572 4573 <main class="layout--template" id="main_content"> 4574 <section id="shopify-section-template--26540060639275__club_olay_banner" class="shopify-section section--club-olay-banner"><!-- sections/club-olay-banner.liquid --><style data-shopify>#club-olay-banner-template--26540060639275__club_olay_banner { 4575 background: #95113f; 4576 background: -webkit-linear-gradient(left, #95113f 0%, #6d0b98 50%, #7506e2 100%); 4577 background: linear-gradient(to right, #95113f 0%, #6d0b98 50%, #7506e2 100%); 4578 }</style><div class="club-olay-new" data-section-id="template--26540060639275__club_olay_banner"> 4579 <div id="club-olay-banner-template--26540060639275__club_olay_banner" class="club-olay-header-section"> 4580 4581 <div class="club-olay-banner"> 4582 <div class="club-olay-image"></div><div class="welcomeDiv"><p>WELCOME TO</p><picture class="club-olay-text-image club-olay-text-image--desktop"><img src="//www.olay.com/cdn/shop/files/asset_clubolay_textbanner_mobile.webp?v=1779954701&width=800" alt="Club Olay Logo" srcset="//www.olay.com/cdn/shop/files/asset_clubolay_textbanner_mobile.webp?v=1779954701&width=400 400w, //www.olay.com/cdn/shop/files/asset_clubolay_textbanner_mobile.webp?v=1779954701&width=600 600w, //www.olay.com/cdn/shop/files/asset_clubolay_textbanner_mobile.webp?v=1779954701&width=800 800w" width="800" height="145" loading="eager"></picture><picture class="club-olay-text-image club-olay-text-image--mobile"><img src="//www.olay.com/cdn/shop/files/asset_club_olay_banner_mobile.webp?v=1779954694&width=600" alt="Club Olay Logo" srcset="//www.olay.com/cdn/shop/files/asset_club_olay_banner_mobile.webp?v=1779954694&width=300 300w, //www.olay.com/cdn/shop/files/asset_club_olay_banner_mobile.webp?v=1779954694&width=400 400w, //www.olay.com/cdn/shop/files/asset_club_olay_banner_mobile.webp?v=1779954694&width=600 600w" width="600" height="284" loading="eager"> 4583 </picture></div><div class="club-olay-text-content"><div class="text-content"> 4584 <p>Join the club today to collect rewards, get exclusive deals, and much more!</p> 4585 </div><div class="club-button"> 4586 <a 4587 class="club-olay-cta-button button-secondary" 4588 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4589 >JOIN THE CLUB</a> 4590 </div><div class="sign-in-text">Already a member? <a href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US">Sign In</a></div></div> 4591 </div><div class="olay-Hero-img"> 4592 <picture class="Main-img"> 4593 <img src="//www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=1400" alt="Club Olay" srcset="//www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=400 400w, //www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=600 600w, //www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=800 800w, //www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=1000 1000w, //www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=1200 1200w, //www.olay.com/cdn/shop/files/ClubOlay-Signup-100.jpg?v=1779954745&width=1400 1400w" width="1400" height="1400" loading="eager"> 4594 </picture> 4595 </div></div> 4596</div> 4597 4598 4599 4600 4601<style> #shopify-section-template--26540060639275__club_olay_banner [data-section-id] {--section--padding-left: 0; --section--padding-right: 0;} </style></section><section id="shopify-section-template--26540060639275__club_olay_perks" class="shopify-section section--club-olay-perks"><!-- sections/club-olay-perks.liquid --><style data-shopify>#club-olay-perks-template--26540060639275__club_olay_perks .cop--heading { 4602 background-image: linear-gradient(to right, #95113f 0%, #6d0b98 27%, #7506e2 40%); 4603 -webkit-background-clip: text; 4604 background-clip: text; 4605 color: transparent; 4606 }</style><div class="cop--root" id="club-olay-perks-template--26540060639275__club_olay_perks" data-section-id="template--26540060639275__club_olay_perks"><h1 class="cop--heading">CLUB OLAY PERKS</h1><div class="cop--carousel-outer"> 4607 4608 <div class="cop--slick"><div class="cop--slide" > 4609 <div class="cop--card"> 4610 4611 <div class="cop--card-image"><img src="//www.olay.com/cdn/shop/files/earn_rewards_desktop.webp?v=1779954722&width=500" alt="Earn Rewards icon" srcset="//www.olay.com/cdn/shop/files/earn_rewards_desktop.webp?v=1779954722&width=300 300w, //www.olay.com/cdn/shop/files/earn_rewards_desktop.webp?v=1779954722&width=400 400w, //www.olay.com/cdn/shop/files/earn_rewards_desktop.webp?v=1779954722&width=500 500w" width="500" height="411" loading="lazy" class="cop--card-img"> 4612</div> 4613 4614 <div class="cop--card-body"><h2 class="cop--title">EARN REWARDS</h2><div class="cop--description"><p>Earn points for every purchase you make and redeem them for cash off in later purchases.</p><ul><li>Create a club OLAY account and earn 500 points right away</li><li>Earn 10 points for every dollar you spend</li><li>Redeem points for cash off for future purchases</li></ul></div></div><div class="cop--cta"> 4615 <a 4616 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4617 class="cop--cta-btn" 4618 >JOIN THE CLUB</a> 4619 </div></div> 4620 </div><div class="cop--slide" > 4621 <div class="cop--card"> 4622 4623 <div class="cop--card-image"><img src="//www.olay.com/cdn/shop/files/subscribetosave_desktop.webp?v=1779954719&width=500" alt="Subscribe to Save icon" srcset="//www.olay.com/cdn/shop/files/subscribetosave_desktop.webp?v=1779954719&width=300 300w, //www.olay.com/cdn/shop/files/subscribetosave_desktop.webp?v=1779954719&width=400 400w, //www.olay.com/cdn/shop/files/subscribetosave_desktop.webp?v=1779954719&width=500 500w" width="500" height="411" loading="lazy" class="cop--card-img"> 4624</div> 4625 4626 <div class="cop--card-body"><h2 class="cop--title">SUBSCRIBE TO SAVE</h2><div class="cop--description"><p>Save up to 5% when you subscribe to your favorite go-to products.</p><ul><li>Create a club OLAY account to begin subscribing</li><li>Select the "Subscribe" option when you add products to your cart</li><li>Easily manage your subscriptions in your club OLAY dashboard</li></ul></div></div><div class="cop--cta"> 4627 <a 4628 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4629 class="cop--cta-btn" 4630 >JOIN THE CLUB</a> 4631 </div></div> 4632 </div><div class="cop--slide" > 4633 <div class="cop--card"> 4634 4635 <div class="cop--card-image"><img src="//www.olay.com/cdn/shop/files/early-access.webp?v=1779954717&width=500" alt="Early Access icon" srcset="//www.olay.com/cdn/shop/files/early-access.webp?v=1779954717&width=300 300w, //www.olay.com/cdn/shop/files/early-access.webp?v=1779954717&width=400 400w, //www.olay.com/cdn/shop/files/early-access.webp?v=1779954717&width=500 500w" width="500" height="411" loading="lazy" class="cop--card-img"> 4636</div> 4637 4638 <div class="cop--card-body"><p class="cop--overline">EMAIL EXCLUSIVE</p><h2 class="cop--title cop--title-with-overline">EARLY ACCESS</h2><div class="cop--description"><p>Calling all trailblazers â stay in-the-know about new products from OLAY!</p><p></p><ul><li>Receive emails or texts about new and exclusive products before they can be found anywhere else.</li></ul></div></div><div class="cop--cta"> 4639 <a 4640 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4641 class="cop--cta-btn" 4642 >JOIN THE CLUB</a> 4643 </div></div> 4644 </div><div class="cop--slide" > 4645 <div class="cop--card"> 4646 4647 <div class="cop--card-image"><img src="//www.olay.com/cdn/shop/files/exclusive-deals.webp?v=1779954730&width=500" alt="Exclusive Deals icon" srcset="//www.olay.com/cdn/shop/files/exclusive-deals.webp?v=1779954730&width=300 300w, //www.olay.com/cdn/shop/files/exclusive-deals.webp?v=1779954730&width=400 400w, //www.olay.com/cdn/shop/files/exclusive-deals.webp?v=1779954730&width=500 500w" width="500" height="411" loading="lazy" class="cop--card-img"> 4648</div> 4649 4650 <div class="cop--card-body"><p class="cop--overline">TEXT EXCLUSIVE</p><h2 class="cop--title cop--title-with-overline">EXCLUSIVE DEALS</h2><div class="cop--description"><p>Enjoy amazing offers like free products or gifts with purchases!</p><p></p><ul><li>Check for emails or texts that include exclusive promotions for Club OLAY Members. We are talking BIG deals.</li></ul></div></div><div class="cop--cta"> 4651 <a 4652 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4653 class="cop--cta-btn" 4654 >JOIN THE CLUB</a> 4655 </div></div> 4656 </div></div> 4657 4658 </div><div class="cop--signin-row">Already a member? <a href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" class="cop--signin-link">Sign in</a></div></div> 4659
4660<script> 4661 (function () { 4662 var SECTION_ID = 'template--26540060639275__club_olay_perks'; 4663 var arrowPrevUrl = '//www.olay.com/cdn/shop/t/10/assets/left-arrow.svg?v=146974593307031605021779203465'; 4664 var arrowNextUrl = '//www.olay.com/cdn/shop/t/10/assets/right-arrow.svg?v=62160895858390047461779203466'; 4665 4666 function initPerksCarousel(root) { 4667 var $ = window.jQuery; 4668 var $root = $(root); 4669 var $track = $root.find('.cop--slick'); 4670 4671 if ($track.hasClass('slick-initialized')) { 4672 $track.slick('unslick'); 4673 } 4674 4675 $track.slick({ 4676 slidesToShow : 3, 4677 slidesToScroll: 1, 4678 infinite : false, 4679 arrows : true, 4680 prevArrow : '<button type="button" class="cop--arrow cop--arrow-prev" aria-label="Previous slide"><img src="' + arrowPrevUrl + '" alt="left arrow" width="24" height="42" loading="lazy"></button>', 4681 nextArrow : '<button type="button" class="cop--arrow cop--arrow-next" aria-label="Next slide"><img src="' + arrowNextUrl + '" alt="right arrow" width="24" height="42" loading="lazy"></button>', 4682 draggable : true, 4683 swipe : true, 4684 touchThreshold: 10, 4685 responsive: [ 4686 { 4687 breakpoint: 1024, 4688 settings: { slidesToShow: 2, slidesToScroll: 1 } 4689 }, 4690 { 4691 breakpoint: 768, 4692 settings: { 4693 slidesToShow : 1, 4694 slidesToScroll: 1 4695 } 4696 } 4697 ] 4698 }); 4699 } 4700 4701 function tryInit() { 4702 if (typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.slick === 'undefined') { 4703 setTimeout(tryInit, 50); 4704 return; 4705 } 4706 var root = document.getElementById('club-olay-perks-' + SECTION_ID); 4707 if (root) initPerksCarousel(root); 4708 } 4709 4710 tryInit(); 4711 4712 document.addEventListener('shopify:section:load', function (e) { 4713 if (e.detail && e.detail.sectionId === SECTION_ID) tryInit(); 4714 }); 4715 })(); 4716</script>
4716 4717 4718 4719 4720 4721</section><div id="shopify-section-template--26540060639275__custom_liquid_4Ui8Ay" class="shopify-section section--custom-liquid"><!-- sections/custom-liquid.liquid --><div 4722 class="custom-liquid--root" 4723 data-section-id="template--26540060639275__custom_liquid_4Ui8Ay" 4724 data-background-color="none" 4725 data-border="none" 4726 data-container-width="4" 4727 data-mobile-full-width="false" 4728 data-mobile-spacing-above="none" 4729 data-mobile-spacing-below="none" 4730 data-mobile-x-alignment="center" 4731 data-text-color="body" 4732 data-spacing-above="none" 4733 data-spacing-below="none" 4734 data-x-alignment="center" 4735> 4736 <div class="custom-liquid--wrapper"> 4737 <style> 4738body { 4739background: #f2f2f2; 4740} 4741</style> 4742 </div> 4743</div> 4744 4745</div> 4746 </main> 4747 </div> 4748 4749 <div class="layout--footer-group"><!-- BEGIN sections: footer-group --> 4750<footer id="shopify-section-sections--25816846696491__footer" class="shopify-section shopify-section-group-footer-group section--footer"><div class="olay-footer" aria-labelledby="footer-heading"><h2 id="footer-heading" class="sr-only">Footer</h2> 4751 4752 <div class="olay-footer__inner"><section class="olay-footer__brand" aria-label="Only Olay"><!-- > <a class="olay-footer__logo" href="#" aria-label="Only Olay Home" tabindex="0"> <--><img src="//www.olay.com/cdn/shop/files/OnlyOlayLogo.webp?v=1771334047&width=2400" alt="Only Olay Logo" srcset="//www.olay.com/cdn/shop/files/OnlyOlayLogo.webp?v=1771334047&width=352 352w, //www.olay.com/cdn/shop/files/OnlyOlayLogo.webp?v=1771334047&width=832 832w, //www.olay.com/cdn/shop/files/OnlyOlayLogo.webp?v=1771334047&width=1200 1200w, //www.olay.com/cdn/shop/files/OnlyOlayLogo.webp?v=1771334047&width=1920 1920w, //www.olay.com/cdn/shop/files/OnlyOlayLogo.webp?v=1771334047&width=2400 2400w" width="2400" height="1543" class="footer__logo-image"><!-- ></a><--> 4753 <div class="olay-footer__club"> 4754 <h3 class="olay-footer__club-title" tabindex="0">Join Club Olay</h3> 4755 <p class="olay-footer__club-text" tabindex="0"> 4756 Stay in-the-know about new launches, exclusive offers, and all things OLAY! 4757 </p> 4758 4759 <a 4760 class="olay-footer__btn" 4761 href="https://shopify.com/66143911979/account" 4762 role="button" 4763 tabindex="0" 4764 > 4765 REGISTER 4766 </a> 4767 </div> 4768 4769 </section><!-- Right: Link columns --> 4770 <nav class="olay-footer__nav" aria-label="Footer links" tabindex="0"> 4771 <div class="olay-footer__col"><h3 class="olay-footer__col-title" tabindex="0">About Olay</h3> 4772 <ul class="olay-footer__links"> 4773 4774 <li class="footer__menu-item"> 4775 <a 4776 href="/pages/why-olay" 4777 class="footer__menu-link event_internal_link" 4778 title="click here to About Olay" 4779 aria-label="click here to About Olay" 4780 data-action-detail="About Olay" 4781 tabindex="0" 4782 > 4783 About Olay 4784 </a> 4785 </li> 4786 4787 <li class="footer__menu-item"> 4788 <a 4789 href="/blogs/olay-today" 4790 class="footer__menu-link event_internal_link" 4791 title="click here to Blog" 4792 aria-label="click here to Blog" 4793 data-action-detail="Blog" 4794 tabindex="0" 4795 > 4796 Blog 4797 </a> 4798 </li> 4799 4800 <li class="footer__menu-item"> 4801 <a 4802 href="/pages/create-account" 4803 class="footer__menu-link event_internal_link" 4804 title="click here to Club Olay " 4805 aria-label="click here to Club Olay " 4806 data-action-detail="Club Olay " 4807 tabindex="0" 4808 > 4809 Club Olay 4810 </a> 4811 </li> 4812 4813 <li class="footer__menu-item"> 4814 <a 4815 href="/pages/referral" 4816 class="footer__menu-link event_internal_link" 4817 title="click here to Give $10, Get $10" 4818 aria-label="click here to Give $10, Get $10" 4819 data-action-detail="Give $10, Get $10" 4820 tabindex="0" 4821 > 4822 Give $10, Get $10 4823 </a> 4824 </li> 4825 4826 </ul> 4827 </div> 4828
4829 <div class="olay-footer__col"><h3 class="olay-footer__col-title" tabindex="0">Help</h3> 4830 <ul class="olay-footer__links"> 4831 4832 <li class="footer__menu-item"> 4833 <a 4834 href="/pages/contact-us#shopify-section-template--25816847319083__shopflex_nested_accordion_d3xDjA" 4835 class="footer__menu-link event_internal_link" 4836 title="click here to FAQ" 4837 aria-label="click here to FAQ" 4838 data-action-detail="FAQ" 4839 tabindex="0" 4840 > 4841 FAQ 4842 </a> 4843 </li> 4844 4845 <li class="footer__menu-item"> 4846 <a 4847 href="/pages/olay-policy" 4848 class="footer__menu-link event_internal_link" 4849 title="click here to Returns & Store Policy" 4850 aria-label="click here to Returns & Store Policy" 4851 data-action-detail="Returns & Store Policy" 4852 tabindex="0" 4853 > 4854 Returns & Store Policy 4855 </a> 4856 </li> 4857 4858 <li class="footer__menu-item"> 4859 <a 4860 href="https://club.olay.com/orders" 4861 class="footer__menu-link event_internal_link" 4862 title="click here to Order Status" 4863 aria-label="click here to Order Status" 4864 data-action-detail="Order Status" 4865 tabindex="0" 4866 > 4867 Order Status 4868 </a> 4869 </li> 4870 4871 <li class="footer__menu-item"> 4872 <a 4873 href="/account/orders" 4874 class="footer__menu-link event_internal_link" 4875 title="click here to Track Order" 4876 aria-label="click here to Track Order" 4877 data-action-detail="Track Order" 4878 tabindex="0" 4879 > 4880 Track Order 4881 </a> 4882 </li> 4883 4884 </ul> 4885 </div> 4886 4887 <div class="olay-footer__col"><h3 class="olay-footer__col-title" tabindex="0">Support</h3> 4888 <ul class="olay-footer__links"> 4889 4890 <li class="footer__menu-item"> 4891 <a 4892 href="/pages/contact-us" 4893 class="footer__menu-link event_internal_link" 4894 title="click here to Contact Us" 4895 aria-label="click here to Contact Us" 4896 data-action-detail="Contact Us" 4897 tabindex="0" 4898 > 4899 Contact Us 4900 </a> 4901 </li> 4902 4903 </ul> 4904 </div> 4905 </nav> 4906 </div><section class="footer-info social-links-ul"> 4907 <div class="footer-main tab-desktop-footer"> 4908 <div class="footer-main1"> 4909 <ul class="copyright-links"> 4910 4911 <li class="socialLinks-item"> 4912 <a 4913 class="icon1 icon--facebook event_socialmedia_exit" 4914 data-action-detail="facebook" 4915 href="https://www.facebook.com/OlayUS/" 4916 target="_blank" 4917 rel="noopener" 4918 alt="Link to Olay's facebook Account" 4919 aria-label="Click to go to Olay's facebook Account (opens in new window)" 4920 > 4921 <img 4922 class="lazyloaded ls-is-cached" 4923 loading="lazy" 4924 alt="facebook" 4925 width="24px" 4926 height="24px" 4927 src="//www.olay.com/cdn/shop/t/10/assets/FB.svg?v=176204749252861282551779203464" 4928 > 4929 </a> 4930 </li> 4931 4932 4933 <li class="socialLinks-item"> 4934 <a 4935 class="icon1 icon--instagram event_socialmedia_exit" 4936 data-action-detail="instagram" 4937 href="https://www.instagram.com/olay/?hl=en" 4938 target="_blank" 4939 rel="noopener" 4940 alt="Link to Olay's instagram Account" 4941 aria-label="Click to go to Olay's instagram Account (opens in new window)" 4942 > 4943 <img 4944 class="lazyloaded ls-is-cached" 4945 loading="lazy" 4946 alt="instagram" 4947 width="24px" 4948 height="24px" 4949 src="//www.olay.com/cdn/shop/t/10/assets/instagram.svg?v=38138225703551950561779203464" 4950 > 4951 </a> 4952 </li> 4953 4954 4955 <li class="socialLinks-item"> 4956 <a 4957 class="icon1 icon--pinterest event_socialmedia_exit" 4958 data-action-detail="pinterest" 4959 href="https://www.pinterest.com/OlayUS/" 4960 target="_blank" 4961 rel="noopener" 4962 alt="Link to Olay's pinterest Account" 4963 aria-label="Click to go to Olay's pinterest Account (opens in new window)" 4964 > 4965 <img 4966 class="lazyloaded ls-is-cached" 4967 loading="lazy" 4968 alt="pinterest" 4969 width="24px" 4970 height="24px" 4971 src="//www.olay.com/cdn/shop/t/10/assets/pinterest.svg?v=41553919368186424521779203463" 4972 > 4973 </a> 4974 </li> 4975 4976 4977 <li class="socialLinks-item"> 4978 <a 4979 class="icon1 icon--youtube event_socialmedia_exit" 4980 data-action-detail="youtube" 4981 href="https://www.youtube.com/channel/UCZ1CQE5_gNdcuvxwcZOahzA" 4982 target="_blank" 4983 rel="noopener" 4984 alt="Link to Olay's youtube Account" 4985 aria-label="Click to go to Olay's youtube Account (opens in new window)" 4986 > 4987 <img 4988 class="lazyloaded ls-is-cached" 4989 loading="lazy" 4990 alt="youtube" 4991 width="24px" 4992 height="24px" 4993 src="//www.olay.com/cdn/shop/t/10/assets/youtube.svg?v=24405244472099943571779203465" 4994 > 4995 </a> 4996 </li> 4997 4998<li class="mobile-break"></li> 4999 5000 5001 <li > 5002 <a 5003 5004 href="/pages/accessibility" 5005 5006 5007 class="event_internal_link" 5008 5009 5010 title="click here to Accessibility Statement" 5011 5012 5013 aria-label="click here to Accessibility Statement" 5014 5015
5016 alt="Olay Accessibility Statement" 5017 5018 5019 data-action-detail="Accessibility Statement" 5020 5021 5022 5023 5024 target="_blank" rel="noopener noreferrer" 5025 5026 >Accessibility Statement</a> 5027 </li> 5028 5029 5030 5031 5032 <li > 5033 <a 5034 5035 href="/pages/sitemap" 5036 5037 5038 class="event_internal_link" 5039 5040 5041 title="click here to Sitemap" 5042 5043 5044 aria-label="click here to Sitemap (opens in new window)" 5045 5046 5047 alt="Olay Site map" 5048 5049 5050 data-action-detail="Sitemap" 5051 5052 5053 5054 5055 target="_blank" rel="noopener noreferrer" 5056 5057 >Sitemap</a> 5058 </li> 5059 5060 5061 5062 5063 <li > 5064 <a 5065 5066 href="https://privacypolicy.pg.com/en/#statePrivacyNotice" 5067 5068 5069 class="event_external_link" 5070 5071 5072 title="click here to Privacy" 5073 5074 5075 aria-label="click here to Privacy (opens in new window)" 5076 5077 5078 alt="Privacy Policy" 5079 5080 5081 data-action-detail="Privacy" 5082 5083 5084 5085 5086 target="_blank" rel="noopener noreferrer" 5087 5088 >Privacy</a> 5089 </li> 5090 5091 5092 5093 5094 <li > 5095 <a 5096 5097 href="https://privacypolicy.pg.com/CHD-en" 5098 5099 5100 class="event_external_link" 5101 5102 5103 title="click here to Consumer Health Data Privacy Policy" 5104 5105 5106 aria-label="Consumer Health Data Privacy Policy (opens in new window)" 5107 5108 5109 5110 data-action-detail="Footer_Consumer Health Data Privacy Policy" 5111 5112 5113 5114 5115 target="_blank" rel="noopener noreferrer" 5116 5117 >Consumer Health Data Privacy Policy</a> 5118 </li> 5119 5120 5121 5122 5123 <li > 5124 <a 5125 5126 href="https://www.pg.com/en_US/terms_conditions/index.shtml" 5127 5128 5129 class="event_external_link" 5130 5131 5132 title="click here to Terms & Conditions" 5133 5134 5135 aria-label="click here to Terms & Conditions (opens in new window)" 5136 5137 5138 alt="terms and conditions" 5139 5140 5141 data-action-detail="Terms & Conditions" 5142 5143 5144 5145 5146 target="_blank" rel="noopener noreferrer" 5147 5148 >Terms & Conditions</a> 5149 </li> 5150 5151 5152 5153 5154 <li > 5155 <a 5156 5157 href="https://unsubscribe.pg.com/privacy/optsengine/en_US/cot_std_brandopts.do?brand=olay&sub=9999" 5158 5159 5160 class="event_internal_link" 5161 5162 5163 title="click here to Unsubscribe" 5164 5165 5166 aria-label="click here to Unsubscribe (opens in new window)" 5167 5168 5169 alt="unsubscribe" 5170 5171 5172 data-action-detail="Unsubscribe" 5173 5174 5175 5176 5177 target="_blank" rel="noopener noreferrer" 5178 5179 >Unsubscribe</a> 5180 </li> 5181 5182 5183 5184 5185<li > 5186 <a title="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advert
5186ising" class="event_external_link" aria-label="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising (opens in new window)" data-action-detail="Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" alt="Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" href="#" id="dontsell-personal-info-footer-link" onclick="Optanon.ToggleInfoDisplay();">Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising</a> 5187 </li> 5188 5189 5190 5191 <li > 5192 <span 5193 5194 class="event_external_link" 5195 5196 >NOTICE: We May Sell Your Sensitive Personal Data</span> 5197 </li> 5198 5199 5200 5201 5202 <li > 5203 <a 5204 5205 href="https://preferencecenter.pg.com/" 5206 5207 5208 class="event_external_link yourPrivacyChoices-logo" 5209 5210 5211 title="click here to Your Privacy Choices" 5212 5213 5214 aria-label="click here to Your Privacy Choices (opens in new window)" 5215 5216 5217 alt="Your Privacy Choices" 5218 5219 5220 data-action-detail="Your Privacy Choices" 5221 5222 5223 target="_blank" rel="noopener noreferrer" 5224 5225 > 5226 5227 <span>Your Privacy Choices</span> 5228 5229 5230 <img 5231 class="lazyloaded ls-is-cached" 5232 loading="lazy" 5233 src="//www.olay.com/cdn/shop/files/privacyoptions.webp?v=1779268524&width=180" 5234 alt="Logo" 5235 5236 width="45" 5237 height="20" 5238 > 5239 5240 </a> 5241 </li> 5242 5243 5244 5245 </ul> 5246 </div> 5247 <div class="footer-main2"> 5248 <ul class="copyright-links"> 5249 5250 <li> 5251 <a 5252 class="event_external_link" 5253 data-action-detail="Better Business Bureau" 5254 target="_blank" 5255 aria-label="click here to Better Business Bureau (opens in new window)" 5256 title="click here to Better Business Bureau " 5257 href="https://www.bbb.org/us/oh/cincinnati/profile/detergent/the-procter-gamble-company-0292-3036#bbbonlineclick" 5258 rel="noopener noreferrer" 5259 ><img 5260 class="lazyloaded BB-logo ls-is-cached" 5261 loading="lazy" 5262 src="//www.olay.com/cdn/shop/t/10/assets/bbb.svg?v=32291926550178936731779203462" 5263 width="84" 5264 height="32" 5265 alt=" " 5266 aria-hidden="true" 5267 ></a> 5268 </li> 5269 5270 </ul> 5271 </div> 5272 </div> 5273 <div class="footer-main mobile-only-footer"> 5274 <div class="mobile-footer-social-box"> 5275 <ul class="copyright-links mobile-footer-social-box1"> 5276 5277 <li class="socialLinks-item"> 5278 <a 5279 class="icon1 icon--facebook event_socialmedia_exit" 5280 data-action-detail="facebook" 5281 href="https://www.facebook.com/OlayUS/" 5282 target="_blank" 5283 rel="noopener" 5284 alt="Link to Olay's facebook Account" 5285 aria-label="Click to go to Olay's facebook Account (opens in new window)" 5286 > 5287 <img 5288 class="lazyloaded ls-is-cached" 5289 loading="lazy" 5290 alt="facebook" 5291 width="24px" 5292 height="24px" 5293 src="//www.olay.com/cdn/shop/t/10/assets/FB.svg?v=176204749252861282551779203464" 5294 > 5295 </a> 5296 </li> 5297 5298 5299 <li class="socialLinks-item"> 5300 <a 5301 class="icon1 icon--instagram event_socialmedia_exit" 5302 data-action-detail="instagram" 5303 href="https://www.instagram.com/olay/?hl=en" 5304 target="_blank" 5305 rel="noopener" 5306 alt="Link to Olay's instagram Account" 5307 aria-label="Click to go to Olay's instagram Account (opens in new window)" 5308 > 5309 <img 5310 class="lazyloaded ls-is-cached" 5311 loading="lazy" 5312 alt="instagram" 5313 width="24px" 5314 height="24px" 5315 src="//www.olay.com/cdn/shop/t/10/assets/instagram.svg?v=38138225703551950561779203464" 5316 > 5317 </a> 5318 </li> 5319 5320 5321 <li class="socialLinks-item"> 5322 <a 5323 class="icon1 icon--pinterest event_socialmedia_exit" 5324 data-action-detail="pinterest" 5325 href="https://www.pinterest.com/OlayUS/" 5326 target="_blank" 5327 rel="noopener" 5328 alt="Link to Olay's pinterest Account" 5329 aria-label="Click to go to Olay's pinterest Account (opens in new window)" 5330 > 5331 <img 5332 class="lazyloaded ls-is-cached" 5333 loading="lazy" 5334 alt="pinterest" 5335 width="24px" 5336 height="24px" 5337 src="//www.olay.com/cdn/shop/t/10/assets/pinterest.svg?v=41553919368186424521779203463" 5338 > 5339 </a> 5340 </li> 5341 5342 5343 <li class="socialLinks-item"> 5344 <a 5345 class="icon1 icon--youtube event_socialmedia_exit" 5346 data-action-detail="youtube" 5347 href="https://www.youtube.com/channel/UCZ1CQE5_gNdcuvxwcZOahzA" 5348 target="_blank" 5349 rel="noopener" 5350 alt="Link to Olay's youtube Account" 5351 aria-label="Click to go to Olay's youtube Account (opens in new window)" 5352 > 5353 <img 5354 class="lazyloaded ls-is-cached" 5355 loading="lazy" 5356 alt="youtube" 5357 width="24px" 5358 height="24px" 5359 src="//www.olay.com/cdn/shop/t/10/assets/youtube.svg?v=24405244472099943571779203465" 5360 > 5361 </a> 5362 </li> 5363 5364 </ul> 5365 <ul class="copyright-links mobile-footer-social-box2"> 5366 5367 <li> 5368 <a 5369 class="event_external_link" 5370 data-action-detail="Better Business Bureau" 5371 target="_blank" 5372 title="click here to Better Business Bureau " 5373 href="https://www.bbb.org/us/oh/cincinnati/profile/detergent/the-procter-gamble-company-0292-3036#bbbonlineclick" 5374 rel="noopener" 5375 ><img 5376 class="lazyloaded ls-is-cached" 5377 loading="lazy" 5378 aria-label="click here to Better Business Bureau (opens in new window)" 5379 src="//www.olay.com/cdn/shop/t/10/assets/bbb.svg?v=32291926550178936731779203462" 5380 width="84" 5381 height="32" 5382 alt="BBB logo" 5383 ></a> 5384 </li> 5385 5386 </ul> 5387 </div> 5388 <div class="footer-main1"> 5389 <ul class="copyright-links"><li class="mobile-break"></li> 5390 5391 5392 <li > 5393 <a 5394 5395 href="/pages/accessibility" 5396 5397 5398 class="event_internal_link" 5399 5400 5401 title="click here to Accessibility Statement" 5402 5403 5404 aria-label="click here to Accessibility Statement" 5405 5406
5407 alt="Olay Accessibility Statement" 5408 5409 5410 data-action-detail="Accessibility Statement" 5411 5412 5413 5414 5415 target="_blank" rel="noopener noreferrer" 5416 5417 >Accessibility Statement</a> 5418 </li> 5419 5420 5421 5422 5423 <li > 5424 <a 5425 5426 href="/pages/sitemap" 5427 5428 5429 class="event_internal_link" 5430 5431 5432 title="click here to Sitemap" 5433 5434 5435 aria-label="click here to Sitemap (opens in new window)" 5436 5437 5438 alt="Olay Site map" 5439 5440 5441 data-action-detail="Sitemap" 5442 5443 5444 5445 5446 target="_blank" rel="noopener noreferrer" 5447 5448 >Sitemap</a> 5449 </li> 5450 5451 5452 5453 5454 <li > 5455 <a 5456 5457 href="https://privacypolicy.pg.com/en/#statePrivacyNotice" 5458 5459 5460 class="event_external_link" 5461 5462 5463 title="click here to Privacy" 5464 5465 5466 aria-label="click here to Privacy (opens in new window)" 5467 5468 5469 alt="Privacy Policy" 5470 5471 5472 data-action-detail="Privacy" 5473 5474 5475 5476 5477 target="_blank" rel="noopener noreferrer" 5478 5479 >Privacy</a> 5480 </li> 5481 5482 5483 5484 5485 <li > 5486 <a 5487 5488 href="https://privacypolicy.pg.com/CHD-en" 5489 5490 5491 class="event_external_link" 5492 5493 5494 title="click here to Consumer Health Data Privacy Policy" 5495 5496 5497 aria-label="Consumer Health Data Privacy Policy (opens in new window)" 5498 5499 5500 5501 data-action-detail="Footer_Consumer Health Data Privacy Policy" 5502 5503 5504 5505 5506 target="_blank" rel="noopener noreferrer" 5507 5508 >Consumer Health Data Privacy Policy</a> 5509 </li> 5510 5511 5512 5513 5514 <li > 5515 <a 5516 5517 href="https://www.pg.com/en_US/terms_conditions/index.shtml" 5518 5519 5520 class="event_external_link" 5521 5522 5523 title="click here to Terms & Conditions" 5524 5525 5526 aria-label="click here to Terms & Conditions (opens in new window)" 5527 5528 5529 alt="terms and conditions" 5530 5531 5532 data-action-detail="Terms & Conditions" 5533 5534 5535 5536 5537 target="_blank" rel="noopener noreferrer" 5538 5539 >Terms & Conditions</a> 5540 </li> 5541 5542 5543 5544 5545 <li > 5546 <a 5547 5548 href="https://unsubscribe.pg.com/privacy/optsengine/en_US/cot_std_brandopts.do?brand=olay&sub=9999" 5549 5550 5551 class="event_internal_link" 5552 5553 5554 title="click here to Unsubscribe" 5555 5556 5557 aria-label="click here to Unsubscribe (opens in new window)" 5558 5559 5560 alt="unsubscribe" 5561 5562 5563 data-action-detail="Unsubscribe" 5564 5565 5566 5567 5568 target="_blank" rel="noopener noreferrer" 5569 5570 >Unsubscribe</a> 5571 </li> 5572 5573 5574 5575 5576<li > 5577 <a title="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advert
5577ising" class="event_external_link" aria-label="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising (opens in new window)" data-action-detail="Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" alt="Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" href="#" id="dontsell-personal-info-footer-link" onclick="Optanon.ToggleInfoDisplay();">Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising</a> 5578 </li> 5579 5580 5581 5582 <li > 5583 <span 5584 5585 class="event_external_link" 5586 5587 >NOTICE: We May Sell Your Sensitive Personal Data</span> 5588 </li> 5589 5590 5591 5592 5593 <li > 5594 <a 5595 5596 href="https://preferencecenter.pg.com/" 5597 5598 5599 class="event_external_link yourPrivacyChoices-logo" 5600 5601 5602 title="click here to Your Privacy Choices" 5603 5604 5605 aria-label="click here to Your Privacy Choices (opens in new window)" 5606 5607 5608 alt="Your Privacy Choices" 5609 5610 5611 data-action-detail="Your Privacy Choices" 5612 5613 5614 target="_blank" rel="noopener noreferrer" 5615 5616 > 5617 5618 <span>Your Privacy Choices</span> 5619 5620 5621 <img 5622 class="lazyloaded ls-is-cached" 5623 loading="lazy" 5624 src="//www.olay.com/cdn/shop/files/privacyoptions.webp?v=1779268524&width=180" 5625 alt="Logo" 5626 5627 width="45" 5628 height="20" 5629 > 5630 5631 </a> 5632 </li> 5633 5634 5635 5636 </ul> 5637 </div> 5638 </div> 5639 <!-- Secondary legal fine print lines --> 5640 <a style="cursor:pointer;color:white" title="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" class="event_external_link" aria-label="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising (opens in new window)" data-action-detail="Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" alt="Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising" href="#" id="dontsell-personal-info-footer-link" onclick="Optanon.ToggleInfoDisplay();">Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advertising</a> 5641 5642 <div class="olay-footer__fineprint"> 5643 <p class="olay-footer__fine-line olay-footer__copyright">©2026 Procter & Gamble</p> 5644 </div> 5645 </section> 5646</div> 5647<style type="text/css">/* --- Footer base --- */ 5648 .olay-footer { 5649 background: #000000; 5650 color: #ffffff !important; 5651 position: relative; 5652 /* padding: 56px 24px 26px; */ 5653 padding: 2.5rem 6rem; 5654 } 5655 5656 .olay-footer h2, 5657 .olay-footer h4, 5658 .olay-footer a { 5659 color: #ffffff !important; 5660 } 5661 .olay-footer__col-title, h4.olay-footer__col-title, 5662 .olay-footer .copyright-links li { 5663 color: #c3c3c3 !important; 5664 } 5665 .olay-footer .footer-main, 5666 .olay-footer__col-title { 5667 border-color: #c3c3c3 !important; 5668 } 5669 .olay-footer__logo { 5670 display: inline-block; 5671 text-decoration: none; 5672 color: #ffffff; 5673 margin-bottom: 22px; 5674 } 5675 5676 .olay-footer__logo:focus-visible { 5677 outline: 2px solid #c3c3c3; 5678 outline-offset: 4px; 5679 } 5680 5681 .olay-footer__links a { 5682 color: #ffffff !important; 5683 text-decoration: none !important; 5684 font-size: 14px; 5685 font-weight: 700; 5686 opacity: 0.95; 5687 } 5688 5689 /* Hover: only underline, no outline */ 5690 .olay-footer__links a:hover { 5691 text-decoration: underline; 5692 color: #c3c3c3 !important; 5693 } 5694 5695 /* Keyboard focus: underline + outline for visibility */ 5696 .olay-footer__links a:focus-visible { 5697 text-decoration: underline; 5698 outline: 2px solid #c3c3c3; 5699 outline-offset: 2px; 5700 } 5701 5702 /* Enhanced keyboard navigation */ 5703 .olay-footer__nav:focus-visible { 5704 outline: 2px dashed #c3c3c3; 5705 outline-offset: 4px; 5706 } 5707 5708 .olay-footer__club-title:focus-visible { 5709 outline: 2px solid #c3c3c3; 5710 outline-offset: 4px; 5711 } 5712 5713 .olay-footer__club-text:focus-visible { 5714 outline: 2px solid #c3c3c3; 5715 outline-offset: 4px; 5716 } 5717 5718 .olay-footer__btn:focus-visible { 5719 outline: 3px solid #c3c3c3; 5720 outline-offset: 3px; 5721 box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3); 5722 } 5723 5724 .olay-footer__club-title { 5725 font-size: 42px; 5726 font-weight: 500; 5727 margin: 0 0 10px; 5728 cursor: default !important; 5729 color: #ffffff; 5730 }</style> 5731<style data-shopify> 5732 .olay-footer .footer-main { 5733 display: flex; 5734 border-top: 1px solid; 5735 padding-top: 1rem; 5736 margin-top: 28px; 5737 } 5738 .olay-footer .mobile-footer-social-box { 5739 line-height: 1.5; 5740 color: #010101; 5741 font-weight: 700; 5742 font-style: normal; 5743 text-transform: none; 5744 font-size: 0; 5745 box-sizing: border-box; 5746 margin: 0; 5747 padding: 0; 5748 width: 100%; 5749 display: flex; 5750 flex-direction: column; 5751 } 5752 .olay-footer ul.copyright-links.mobile-footer-social-box1 { 5753 line-height: 1.5; 5754 color: #010101; 5755 font-weight: 700; 5756 font-style: normal; 5757 text-transform: none; 5758 box-sizing: border-box; 5759 padding: 0; 5760 list-style-position: outside; 5761 -webkit-box-pack: center; 5762 justify-content: center; 5763 -webkit-box-align: center;
5764 align-items: center; 5765 flex-wrap: wrap; 5766 margin: 0; 5767 display: block; 5768 font-size: 13px; 5769 -webkit-box-flex: 1; 5770 flex: 1; 5771 text-align: left; 5772 } 5773 .olay-footer .mobile-only-footer .footer-main1 { 5774 line-height: 1.5; 5775 color: #010101; 5776 font-weight: 700; 5777 font-style: normal; 5778 text-transform: none; 5779 font-size: 0; 5780 box-sizing: border-box; 5781 margin: 0; 5782 padding: 0; 5783 display: flex; 5784 -webkit-box-flex: 1; 5785 flex: 1; 5786 text-align: left; 5787 -webkit-box-pack: start; 5788 justify-content: flex-start; 5789 -webkit-box-align: start; 5790 align-items: flex-start; 5791 } 5792 .olay-footer ul.copyright-links.mobile-footer-social-box2 { 5793 line-height: 1.5; 5794 color: #010101; 5795 font-weight: 700; 5796 font-style: normal; 5797 text-transform: none; 5798 box-sizing: border-box; 5799 padding: 0; 5800 list-style-position: outside; 5801 text-align: center; 5802 -webkit-box-pack: center; 5803 justify-content: center; 5804 -webkit-box-align: center; 5805 align-items: center; 5806 flex-wrap: wrap; 5807 margin: 0; 5808 display: block; 5809 font-size: 13px; 5810 } 5811 .olay-footer .footer-main1 { 5812 line-height: 1.5; 5813 color: #010101; 5814 font-weight: 700; 5815 font-style: normal; 5816 text-transform: none; 5817 font-size: 0; 5818 box-sizing: border-box; 5819 margin: 0; 5820 padding: 0; 5821 display: flex; 5822 -webkit-box-flex: 1; 5823 flex: 1; 5824 text-align: left; 5825 -webkit-box-pack: start; 5826 justify-content: flex-start; 5827 -webkit-box-align: start; 5828 align-items: flex-start; 5829 } 5830 .olay-footer .footer-info { 5831 line-height: 1.5; 5832 color: #010101; 5833 font-weight: 700; 5834 font-style: normal; 5835 text-transform: none; 5836 box-sizing: border-box; 5837 display: block; 5838 max-width: none; 5839 width: auto; 5840 font-size: 0; 5841 margin: 0; 5842 margin-bottom: 80px; 5843 } 5844 .olay-footer .socialLinks-item img { 5845 width: 24px !important; 5846 } 5847 .olay-footer .yourPrivacyChoices-logo img { 5848 display: inline-block; 5849 width: 45px !important; 5850 height: 20px; 5851 margin-left: 5px; 5852 } 5853 .olay-footer .yourPrivacyChoices-logo { 5854 display: inline-flex; 5855 align-items: center; 5856 } 5857 .olay-footer .footer-main.mobile-only-footer { 5858 display: flex !important; 5859 flex-direction: column !important; 5860 } 5861 .olay-footer .footer-main.mobile-only-footer > div.mobile-footer-social-box > ul.copyright-links > li { 5862 display: inline-block !important; 5863 } 5864 .olay-footer 5865 .footer-main.mobile-only-footer 5866 > div.mobile-footer-social-box 5867 > ul.copyright-links.mobile-footer-social-box2 5868 > li 5869 img { 5870 max-width: 100%; 5871 width: 84px; 5872 } 5873 .olay-footer .footer-main.tab-desktop-footer { 5874 display: none !important; 5875 } 5876 5877 @media only screen and (max-width: 1000px) { 5878 .olay-footer .copyright-links .mobile-break { 5879 -ms-flex-preferred-size: 100%; 5880 flex-basis: 100%; 5881 } 5882 } 5883 @media (min-width: 551px) { 5884 .olay-footer .footer-main.mobile-only-footer { 5885 display: none !important; 5886 } 5887 .olay-footer .footer-main.tab-desktop-footer { 5888 display: flex !important; 5889 } 5890 } 5891 @media (max-width: 550px) { 5892 .olay-footer .footer-info { 5893 margin: 0px !important; 5894 } 5895 .olay-footer .mobile-footer-social-box { 5896 flex-direction: row !important; 5897 } 5898 .olay-footer { 5899 padding: 0 31px !important; 5900 } 5901 .olay-footer__brand .olay-footer__logo img { 5902 width: 220px; 5903 } 5904 .olay-footer .socialLinks-item { 5905 margin-right: 11px !important; 5906 } 5907 .olay-footer__brand { 5908 margin-top: 48px; 5909 } 5910 .olay-footer__inner { 5911 gap: 30px !important; 5912 } 5913 .olay-footer .footer-main ul li, 5914 .olay-footer .footer-main ul li a { 5915 font-size: 13px !important; 5916 } 5917 .olay-footer .copyright-links { 5918 gap: 8px !important; 5919 } 5920 .olay-footer__nav { 5921 margin-top: 0px !important; 5922 } 5923 .olay-footer .footer-info.social-links-ul { 5924 padding-bottom: 65px !important; 5925 } 5926 } 5927 @media (min-width: 913px) and (max-width: 1024px) { 5928 .olay-footer { 5929 padding: 30px 21px 60px 20px !important; 5930 } 5931 .olay-footer__inner { 5932 grid-template-columns: minmax(270px, 260px) 1fr !important; 5933 gap: 38px; 5934 } 5935 .olay-footer__brand { 5936 max-width: 270px; 5937 } 5938 .olay-footer__nav { 5939 grid-template-columns: repeat(3, 180px) !important; 5940 } 5941 .olay-footer .copyright-links { 5942 gap: 15px; 5943 } 5944 } 5945 .olay-footer .footer-main ul li, 5946 .olay-footer .footer-main ul li a { 5947 font-size: 14px; 5948 color: rgb(195, 195, 195) !important; 5949 } 5950 .olay-footer .copyright-links { 5951 gap: 20px; 5952 5953 line-height: 1.5; 5954 color: #010101; 5955 font-weight: 700; 5956 font-style: normal; 5957 text-transform: none; 5958 box-sizing: border-box; 5959 padding: 0; 5960 list-style-position: outside; 5961 flex-wrap: wrap; 5962 font-size: 1rem; 5963 display: flex; 5964 text-align: left; 5965 -webkit-box-pack: start; 5966 justify-content: flex-start; 5967 -webkit-box-align: start;
5968 align-items: flex-start; 5969 margin: 0; 5970 } 5971 .olay-footer .copyright-links li { 5972 line-height: 1.5; 5973 font-style: normal; 5974 text-transform: none; 5975 font-size: 1rem; 5976 text-align: left; 5977 box-sizing: border-box; 5978 margin: 0; 5979 padding: 0; 5980 font-weight: 400; 5981 list-style: none; 5982 } 5983 .olay-footer .copyright-links li a { 5984 color: white !important; 5985 text-decoration: underline !important; 5986 } 5987 /* --- Utility: screen-reader only --- */ 5988 .sr-only { 5989 position: absolute !important; 5990 width: 1px; 5991 height: 1px; 5992 padding: 0; 5993 margin: -1px; 5994 overflow: hidden; 5995 clip: rect(0, 0, 0, 0); 5996 white-space: nowrap; 5997 border: 0; 5998 } 5999 6000 .olay-footer__club a.olay-footer__btn { 6001 color: #000 !important; 6002 font-size: 14px !important; 6003 } 6004 6005 .olay-footer__inner { 6006 /* max-width: 1200px; */ 6007 margin: 0 auto; 6008 display: grid; 6009 grid-template-columns: minmax(320px, 400px) 1fr; 6010 gap: 48px; 6011 align-items: start; 6012 } 6013 6014 .olay-footer__inner--logged-in { 6015 display: block; 6016 } 6017 6018 .olay-footer__inner--logged-in .olay-footer__nav { 6019 margin-top: 15px; 6020 } 6021 6022 .olay-footer__club-text { 6023 margin: 0 0 22px; 6024 font-size: 23.8px; 6025 line-height: 1.35; 6026 opacity: 0.95; 6027 cursor: default !important; 6028 } 6029 6030 .olay-footer__btn { 6031 width: 100%; 6032 display: inline-flex; 6033 justify-content: center; 6034 align-items: center; 6035 height: 44px; 6036 min-width: 220px; 6037 padding: 0 18px; 6038 background: #fff; 6039 color: #000; 6040 text-decoration: none; 6041 font-weight: 700; 6042 letter-spacing: 0.5px; 6043 border: 2px solid #fff; 6044 transition: transform 160ms ease, background 160ms ease, color 160ms ease; 6045 } 6046 6047 /* --- Right side columns --- */ 6048 .olay-footer__nav { 6049 display: grid; 6050 grid-template-columns: repeat(3, minmax(180px, 1fr)); 6051 gap: 32px; 6052 margin-top: 80px; 6053 } 6054 .olay-footer__col-title { 6055 font-size: 14px; 6056 letter-spacing: 1.1px; 6057 font-weight: 800; 6058 margin: 6px 0 14px; 6059 padding-bottom: 10px; 6060 border-bottom: 1px solid; 6061 opacity: 0.95; 6062 text-transform: uppercase; 6063 cursor: default; 6064 color: #c3c3c3 !important; 6065 } 6066 .olay-footer__links { 6067 list-style: none; 6068 padding: 0; 6069 margin: 0; 6070 } 6071 .olay-footer__links li { 6072 margin: 10px 0; 6073 } 6074 6075 /* Fine print lines */ 6076 .olay-footer__fineprint { 6077 margin-top: 10px; 6078 } 6079 .olay-footer__fine-line { 6080 margin: 8px 0 0; 6081 font-size: 14px; 6082 line-height: 1.35; 6083 color: rgba(255, 255, 255, 0.85); 6084 font-weight: 400 !important; 6085 } 6086 .olay-footer__separator { 6087 margin: 0 10px; 6088 color: rgba(255, 255, 255, 0.55); 6089 } 6090 .olay-footer__copyright { 6091 color: rgba(255, 255, 255, 0.75); 6092 } 6093 6094 .footer__logo-image { 6095 max-width: 270px; 6096 } 6097 6098 @media (max-width: 900px) { 6099 .olay-footer__inner { 6100 grid-template-columns: 1fr; 6101 } 6102 .olay-footer__nav { 6103 grid-template-columns: 1fr; 6104 } 6105 .olay-footer__legal-links { 6106 justify-content: flex-start; 6107 } 6108 .olay-footer__help { 6109 position: fixed; 6110 right: 16px; 6111 bottom: 16px; 6112 top: auto; 6113 transform: none; 6114 z-index: 999; 6115 } 6116 } 6117 @media (min-width: 1200px) { 6118 .olay-footer__inner { 6119 /*padding: 0 8rem;*/ 6120 padding: 0; 6121 } 6122 } 6123 @media (min-width: 1025px) { 6124 .olay-footer__inner--logged-in .olay-footer__nav { 6125 grid-template-columns: repeat(3, 260px); 6126 } 6127 } 6128 @media (max-width: 912px) { 6129 /* ===== TOP FOOTER ===== */ 6130 6131 .olay-footer__inner { 6132 grid-template-columns: 1fr; 6133 } 6134 6135 /* â Two-column layout for About / Help */ 6136 .olay-footer__nav { 6137 grid-template-columns: 1fr 1fr; 6138 gap: 32px 24px; 6139 margin-top: 40px; 6140 } 6141 6142 /* â Support spans full width */ 6143 .olay-footer__nav .olay-footer__col:last-child { 6144 grid-column: 1 / -1; 6145 } 6146 6147 /* ===== COPYRIGHT ===== */ 6148 .olay-footer__fineprint { 6149 text-align: left; 6150 } 6151 6152 .olay-footer__copyright { 6153 margin-top: 16px; 6154 } 6155 } 6156 .olay-footer__bottom-inner { 6157 display: flex; 6158 flex-wrap: wrap; 6159 align-items: center; 6160 gap: 12px 16px; 6161 } 6162 6163 /* social + legal block takes full row */ 6164 .olay-footer__legal-links { 6165 display: flex; 6166 flex-wrap: wrap; 6167 align-items: center; 6168 gap: 12px; 6169 flex: 1 1 auto; 6170 } 6171 6172 /* Put social icon anchors first, then force legal anchors to next line */ 6173 .olay-footer__legal-links a:not(.icon1) { 6174 order: 2; 6175 } 6176 .ot-pc-footer-logo img { 6177 height: auto !important; 6178 } 6179</style> 6180 6181</footer> 6182<!-- END sections: footer-group --></div><!-- snippets/layout--navigation.liquid --><div class="layout--navigation"> 6183 <button 6184 class="layout--close" 6185 data-text-color="white" 6186 aria-label="close" 6187 aria-hidden="true" 6188 ></button> 6189 6190 <button 6191 class="layout--previous" 6192 aria-hidden="true" 6193 data-modal-button="previous" 6194 ><!-- snippets/nav-arrow.liquid --><div class="nav-arrow" data-direction="left"> 6195 <div></div> 6196 <div></div> 6197 <div></div> 6198</div> 6199</button> 6200 6201 <button 6202 class="layout--next" 6203 aria-hidden="true" 6204 data-modal-button="next" 6205 ><!-- snippets/nav-arrow.liquid --><div class="nav-arrow" data-direction="right"> 6206 <div></div> 6207 <div></div> 6208 <div></div> 6209</div> 6210</button> 6211 6212 <div class="layout--bottom"></div> 6213</div><!-- snippets/drawer.liquid -->
6213<drawer-element class="drawer--root"> 6214 <div class="drawer--overlay" aria-hidden="true"></div> 6215 6216 <div class="drawer--focus-trigger" tabindex="0"></div> 6217 <div class="drawer--focus-start" tabindex="0"></div> 6218 6219 <div 6220 class="drawer--side" 6221 data-side="top" 6222 data-focus-id="search_input" 6223 aria-expanded="false" 6224 > 6225 <div 6226 class="drawer--container" 6227 data-section-id="drawer-top-search" 6228 data-view="search" 6229 data-container-width="5" 6230 data-mobile-spacing-above="medium" 6231 data-mobile-spacing-below="medium" 6232 data-spacing-above="large" 6233 data-spacing-below="large" 6234 ><!-- snippets/main-search.liquid --><predictive-search-element 6235 class="search--root" 6236 data-background-color="none" 6237 aria-busy="false" 6238> 6239 <form action="/search" method="get" role="search"> 6240 <div class="search--bar-wrapper"> 6241 <div class="search--bar"> 6242 <div class="search--icon"><svg class="icon--root icon--search" role="img" aria-labelledby="icon-search-title" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> 6243 <title id="icon-search-title">Search</title> 6244 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 6245 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 6246 </mask> 6247 <g mask="url(#mask0_7204_6974)"> 6248 <path d="M17.8402 18.6339L10.8179 11.6117C10.2572 12.0891 9.61234 12.4586 8.88337 12.7203C8.1544 12.982 7.42187 13.1128 6.6858 13.1128C4.88954 13.1128 3.36927 12.491 2.12497 11.2475C0.88086 10.0039 0.258806 8.48458 0.258806 6.68944C0.258806 4.89412 0.88058 3.37347 2.12413 2.12749C3.36768 0.881701 4.88702 0.258806 6.68216 0.258806C8.47748 0.258806 9.99813 0.88086 11.2441 2.12497C12.4899 3.36927 13.1128 4.88954 13.1128 6.6858C13.1128 7.46505 12.9748 8.21916 12.6987 8.94813C12.4226 9.6771 12.0603 10.3004 11.6117 10.8179L18.6339 17.8404L17.8402 18.6339ZM6.6858 11.9913C8.17383 11.9913 9.43009 11.4791 10.4546 10.4546C11.4791 9.43028 11.9913 8.17402 11.9913 6.6858C11.9913 5.19758 11.4791 3.94132 10.4546 2.91702C9.43009 1.89254 8.17383 1.3803 6.6858 1.3803C5.19758 1.3803 3.94132 1.89254 2.91702 2.91702C1.89254 3.94132 1.3803 5.19758 1.3803 6.6858C1.3803 8.17402 1.89254 9.43028 2.91702 10.4546C3.94132 11.4791 5.19758 11.9913 6.6858 11.9913Z" fill="#161716" stroke="#161716" stroke-width="0.5"/> 6249 </g> 6250 </svg><svg class="icon--root icon--spinner" data-invertible="false"> 6251 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 6252 </svg></div> 6253 6254 <label for="search_input" data-item="hidden-text">Search here...</label> 6255 <input 6256 id="search_input" 6257 class="search--textbox" 6258 type="search" 6259 name="q" 6260 value="" 6261 placeholder="Search here..." 6262 data-item="paragraph" 6263 role="combobox" 6264 aria-owns="predictive_search_results_list" 6265 aria-controls="predictive_search_results_list" 6266 aria-autocomplete="list" 6267 autocorrect="off" 6268 autocomplete="off" 6269 autocapitalize="off" 6270 spellcheck="false" 6271 ><div class="search--clear" tabindex="-1" aria-label="clear" aria-hidden="true"><svg class="icon--root icon--x-mark" data-invertible="true" role="img" aria-labelledby="icon-x-mark-title" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 6272 <title id="icon-x-mark-title">Close</title> 6273 <path d="M9.997 0c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998C4.48 19.995 0 15.515 0 9.997 0 4.48 4.48 0 9.997 0Zm0 8.933L7.276 6.211a.749.749 0 1 0-1.062 1.061l2.722 2.722-2.728 2.728a.75.75 0 1 0 1.061 1.062l2.728-2.728 2.729 2.728a.75.75 0 0 0 1.06-1.062l-2.727-2.728 2.717-2.717a.75.75 0 0 0-.531-1.281.746.746 0 0 0-.531.22L9.997 8.933Z" fill="currentColor" /> 6274 </svg></div> 6275 </div> 6276 6277 <div class="search--cancel" data-item="block-link" tabindex="0" data-drawer-close> 6278 <span>Cancel</span> 6279 </div> 6280 </div> 6281 6282 <div 6283 class="search--results" 6284 id="predictive_search_results_list" 6285 6286 data-transition-container="search" 6287 data-transition-type="fade-in" 6288 data-transition-cascade="horizontal" 6289 data-transition-cascade-interval="200" 6290 6291 ><!-- snippets/predictive-search.liquid --><div class="predictive-search--products"><div class="predictive-search--heading" data-item="block-heading">Popular products</div><div 6292 class="predictive-search--product-grid" 6293 data-container="panel" data-columns="4" 6294 data-mobile-columns="2" 6295 ><!-- snippets/product-card.liquid --><div 6296 class="product-card--root" 6297 data-handle="olay-complete-rich-moisturizing-cream-sensitive" 6298 data-text-layout="left" 6299 data-aspect-ratio="square" 6300 6301 6302> 6303 <a 6304 href="/products/olay-complete-rich-moisturizing-cream-sensitive" 6305 class="product-card--image-wrapper" 6306 tabindex="-1" 6307 ><div class="product-card--image-slider"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=1280" alt="Olay Complete + Rich Moisturizing Cream Sensitive" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Cream__41025.jpg?v=1778858092&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete + Rich Moisturizing Cream Sensitive"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=1280" alt="Model applying moisturizer cream to face. Rich Non greasy moisturizer for dry skin" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_01__51262.jpg?v=1778858092&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--hover-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model applying moisturizer cream to face. Rich Non greasy moisturizer for dry skin"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=1280" alt="Model applying moisturizer cream to face. 3 in 1 Nourish, renew, strengthen." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_02__52901.jpg?v=1778858093&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model applying moisturizer cream to face. 3 in 1 Nourish, renew, strengthen."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=1280" alt="Visibly smooths and evens tone. Ingredients ceramides and Vitamin B3 and E" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_03__99880.jpg?v=1778858093&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Visibly smooths and evens tone. Ingredients ceramides and Vitamin B3 and E"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=1280" alt="Model posing with Olay Complete + Rich Moisturizing Cream container smiling. Sensitive Designed for sensitive skin. Dermatologically approved." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_04__00123.jpg?v=1778858093&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model posing with Olay Complete + Rich Moisturizing Cream container smiling. Sensitive Designed for sensitive skin. Dermatologically approved."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=1280" alt="Olay Complete + Rich Moisturizing Cream texture. Free of fragrance, parabens, pthalates, synthetic dyes." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_05__83133.jpg?v=1778858092&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete + Rich Moisturizing Cream texture. Free of fragrance, parabens, pthalates, synthetic dyes."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=1280" alt="3 models with different skin tone posing. Radiant, healthy looking skin" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_06__30931.jpg?v=1778858093&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="3 models with different skin tone posing. Radiant, healthy looking skin"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=1280" alt="Olay complete moisturizer SPF 40 bottle. SPF 40 by day. Olay Complete + Rich Moisturizing Cream container. Rich moisture by night." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=600 600w, //w
6307ww.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Cream_07__15872.jpg?v=1778858093&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay complete moisturizer SPF 40 bottle. SPF 40 by day. Olay Complete + Rich Moisturizing Cream container. Rich moisture by night."></div><div class="product-card--slider-dots"><button 6308 type="button" 6309 class="slider-dot active" 6310 data-slide="0" 6311 aria-label="Go to slide 1" 6312 aria-current="true" 6313 ></button><button 6314 type="button" 6315 class="slider-dot" 6316 data-slide="1" 6317 aria-label="Go to slide 2" 6318 6319 ></button><button 6320 type="button" 6321 class="slider-dot" 6322 data-slide="2" 6323 aria-label="Go to slide 3" 6324 6325 ></button><button 6326 type="button" 6327 class="slider-dot" 6328 data-slide="3" 6329 aria-label="Go to slide 4" 6330 6331 ></button><button 6332 type="button" 6333 class="slider-dot" 6334 data-slide="4" 6335 aria-label="Go to slide 5" 6336 6337 ></button><button 6338 type="button" 6339 class="slider-dot" 6340 data-slide="5" 6341 aria-label="Go to slide 6" 6342 6343 ></button><button 6344 type="button" 6345 class="slider-dot" 6346 data-slide="6" 6347 aria-label="Go to slide 7" 6348 6349 ></button><button 6350 type="button" 6351 class="slider-dot" 6352 data-slide="7" 6353 aria-label="Go to slide 8" 6354 6355 ></button></div><!-- snippets/product-quick-add.liquid --></a> 6356 6357 <div class="product-card--details"> 6358 <div class="product-details--title-wrapper"> 6359 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 6360 Face Moisturizer - Sensitive Skin 6361 </div></div> 6362 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609210655"></div> 6363 <!-- snippets/product-rating.liquid --> 6364</div> 6365 6366 </div> 6367 <div class="product-card--details-wrapper"><a href="/products/olay-complete-rich-moisturizing-cream-sensitive" class="product-card--title-link"> 6368 <p class="product-card--title" data-item="heading">Olay Complete + Rich Moisturizing Cream Sensitive</p> 6369 </a><p class="product-card--weight"> 6370 6371 $3.14/ oz 6372 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="8.5"> 6373 6374 </p> 6375 </div> 6376 6377 6378<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 6379 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $26.65"> 6380 6381$26.65 6382</span></div></div> 6383 6384<form method="post" action="/cart/add" id="search" accept-charset="UTF-8" class="product-card--form" enctype="multipart/form-data" data-product-card-form="true"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="â" /><input type="hidden" name="quantity" value="1"> 6385 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 6386<product-buy-buttons-element 6387 class="product-buy-buttons--root" 6388 data-id="search" 6389 data-cart-type="drawer" 6390 data-translations="" 6391 data-container="block" 6392 ><button 6393 class="product-buy-buttons--primary" 6394 type="submit" 6395 aria-busy="false" 6396 data-text="Add to cart" 6397 availability_disabled="false" 6398 title="click here to add Olay Complete + Rich Moisturizing Cream Sensitive to bag" 6399 6400 data-item="button-1" 6401 6402> 6403
6404 <span class="product-buy-buttons--cta-text">Add to cart</span> 6405 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 6406 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 6407 </svg></span> 6408 </button> 6409<input 6410 type="hidden" 6411 class="product-buy-buttons--input" 6412 name="id" 6413 data-id="44071654981675" 6414 data-sku="00075609210655" 6415 data-management="shopify" 6416 data-policy="deny" 6417 data-quantity="599" 6418 value="44071654981675" 6419 > 6420 6421
6421<script type="application/json"> 6422 { 6423 "add_to_cart": "Add to cart", 6424 "out_of_stock": "Out of stock", 6425 "unavailable": "Unavailable" 6426 } 6427 </script>
6427 6428 </product-buy-buttons-element><style data-shopify> 6429.ps-widget[ps-sku]::before { 6430 content: ''; 6431 display: inline-block; 6432 width: 18px; 6433 height: 18px; 6434 margin-left: 8px; 6435 margin-right: 8px; 6436 background-color: currentColor; 6437 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 6438 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 6439 mask-size: contain; 6440 -webkit-mask-size: contain; 6441 vertical-align: text-bottom; 6442 6443 @media only screen and (max-width: 767px) { 6444 width: 16px; 6445 height: 16px; 6446 margin-left: 0; 6447 } 6448 6449} 6450 6451.buy-now-wrap { 6452 flex-basis: 100%; 6453 width: 0; 6454 display: flex; 6455 gap: 16px; 6456} 6457button.product-buy-buttons--buy-now, 6458.ps-widget { 6459 background: white; 6460 color: black; 6461 font-family: var(--olay-font-inter); 6462 border: 1px solid var(--olay-neutral-30); 6463} 6464button.product-buy-buttons--buy-now:before { 6465 border: none; 6466} 6467button.product-buy-buttons--buy-now:focus-visible { 6468 outline: 2px solid var(--olay-color-primary); 6469 outline-offset: 2px; 6470 border-radius: var(--radius-sm); 6471} 6472button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 6473 outline: none; 6474} 6475 .product-buy-buttons--root { 6476 position: relative; 6477 gap: var(--spacing--3); 6478 6479 } 6480 product-buy-buttons-element.product-buy-buttons--root { 6481 display: flex; 6482 flex-direction: row; 6483 flex-wrap: wrap; 6484 align-items: center; 6485 margin-top: var(--spacing--4); 6486 } 6487 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 6488 flex-shrink: 0; 6489 } 6490 button.product-buy-buttons--primary { 6491 flex: 1; 6492 width: auto; 6493 display: flex; 6494 align-items: center; 6495 justify-content: center; 6496 gap: var(--spacing--2); 6497 } 6498 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 6499 width: 50%; 6500 flex-basis: 49%; 6501 } 6502 .product-buy-buttons--cart-icon { 6503 height: 12px; 6504 width: auto; 6505 flex-shrink: 0; 6506 filter: brightness(0) invert(1); 6507 @media screen and (min-width: 768px) { 6508 height: 15px; 6509 } 6510 } 6511 6512 .product-buy-buttons--buy-now, 6513 .product-buy-buttons--primary { 6514 width: 100%; 6515 6516 &[aria-busy='true'] { 6517 .product-buy-buttons--cta-text, 6518 .product-buy-buttons--buy-now-text { 6519 opacity: 0; 6520 } 6521 } 6522 6523 &[aria-busy='false'] { 6524 .product-buy-buttons--spinner { 6525 opacity: 0; 6526 } 6527 } 6528 } 6529 6530 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 6531 color: black !important; 6532 background-color: var(--button--bg-color-4) !important; 6533 border-color: var(--button--border-color-4) !important; 6534 font-family: var(--olay-font-inter) !important; 6535 border: 1px solid #D8D8D8 !important; 6536 font-size: 16px !important; 6537 border-width: 1px !important; 6538 padding: 12px 20px !important; 6539 background: white; 6540 border-radius: var(--button--radius) !important; 6541 display: inline-flex; 6542 align-items: normal; 6543 justify-content: space-between; 6544 } 6545 6546 6547 6548 @media only screen and (max-width: 767px) { 6549 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 6550 padding: 12px 0 !important; 6551 font-size: 12px !important; 6552 } 6553 .buy-now-wrap { 6554 flex-basis: 99%; 6555 gap: 10px; 6556 } 6557 } 6558 6559 .product-buy-buttons--smart { 6560 user-select: none; 6561 width: 100%; 6562 6563 &[data-style='button-1'] { 6564 --button--color: var(--button--color-1); 6565 --button--bg-color: var(--button--bg-color-1); 6566 --button--border-color: var(--button--border-color-1); 6567 } 6568 6569 &[data-style='button-2'] { 6570 --button--color: var(--button--color-2); 6571 --button--bg-color: var(--button--bg-color-2); 6572 --button--border-color: var(--button--border-color-2); 6573 } 6574 6575 &[data-style='button-3'] { 6576 --button--color: var(--button--color-3); 6577 --button--bg-color: var(--button--bg-color-3); 6578 --button--border-color: var(--button--border-color-3); 6579 } 6580 6581 &[data-style='button-4'] { 6582 --button--color: var(--button--color-4); 6583 --button--bg-color: var(--button--bg-color-4); 6584 --button--border-color: var(--button--border-color-4); 6585 } 6586 6587 .shopify-payment-button__button--unbranded { 6588 width: 100%; 6589 6590 &:hover:not([disabled]) { 6591 background-color: var(--button--bg-color); 6592 } 6593 } 6594 6595 .shopify-payment-button__more-options { 6596 margin: var(--spacing--item) 0 0 0; 6597 text-decoration: underline; 6598 color: var(--color--body); 6599 6600 &:is(:hover, :focus-visible) { 6601 background-color: unset; 6602 color: var(--color--body); 6603 } 6604 } 6605 6606 &[aria-hidden='true'] { 6607 pointer-events: none; 6608 opacity: 0.7; 6609 6610 .shopify-payment-button__button--unbranded { 6611 pointer-events: none; 6612 } 6613 } 6614 6615 &:empty { 6616 display: none; 6617 } 6618 } 6619 6620 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 6621 6622 /* Drawer info styles moved to assets/sticky-product-bar.css */ 6623 6624 .afterpay-section { 6625 width: 100%; 6626 margin-top: var(--spacing--2); 6627 } 6628 6629 @media screen and (max-width: 767px) { 6630 .afterpay-section { 6631 margin-top: var(--spacing--1); 6632 } 6633 } 6634 6635 .club-olay-badge-plp { 6636 display: flex; 6637 align-items: center; 6638 justify-content: center; 6639 padding: 8px 12px; 6640 background-color: #FFD700; 6641 border-radius: 4px; 6642 margin-bottom: 12px; 6643 width: 100%; 6644 6645 } 6646 6647 .club-olay-badge-plp--text { 6648 font-family: var(--olay-font-inter, Inter, sans-serif); 6649 font-size: 12px; 6650 font-weight: 600; 6651 color: #161716; 6652 text-align: center; 6653 } 6654 6655 @media (max-width: 767px) { 6656 .club-olay-badge-plp { 6657 padding: 6px 10px; 6658 } 6659 6660 .club-olay-badge-plp--text { 6661 font-size: 10px; 6662 } 6663 } 6664</style><input type="hidden" name="product-id" value="7918631125035" /></form></div> 6665</div> 6666 6667<style data-shopify> 6668.product_form_subtitle.plp-card { 6669 font-size: 10px; 6670} 6671 6672button.product-card--add-to-cart-button.empty { 6673 padding: 0 40px; 6674} 6675.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 6676 @media only screen and (min-width: 767px) { 6677 height: auto !important; 6678 } 6679} 6680.main-collection--grid span.product-buy-buttons--cta-text { 6681 @media only screen and (max-width: 767px) { 6682 padding: 0 40px; 6683 } 6684} 6685.product_form_subtitle { 6686 font-family: Inter; 6687 font-weight: 500; 6688 font-style: Medium; 6689 font-size: 16px; 6690 line-height: 100%; 6691 letter-spacing: 0%; 6692 color: #161716; 6693 text-transform: uppercase; 6694 margin-bottom: 8px; 6695 margin-top: 8px; 6696 6697 @media (max-width: 767px) { 6698 font-size: 10px; 6699 margin-top: 0; 6700 margin-bottom: 0; 6701 } 6702} 6703.product_subtitle{ 6704 font-family: var(--olay-font-inter); 6705 font-weight: 500; 6706 font-size: 10px; 6707 line-height: 1.2; 6708 letter-spacing: 0.01em; 6709 color: #161716; 6710 text-transform: uppercase; 6711 text-align: left; 6712 width: 100%; 6713 @media only screen and (max-width: 767px){ 6714 font-size: 8px; 6715 } 6716} 6717 .product-card--root { 6718 display: flex; 6719 flex-direction: column; 6720 gap: 20px; 6721 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 6722 width: 100%; 6723 text-align: var(--text-align, center); 6724 padding: 8px; 6725 background: #FFFFFF; 6726 border-radius: 8px; 6727 @media only screen and (max-width: 767px){ 6728 padding: 4px; 6729 gap: 8px; 6730 border-radius: 8px; 6731 } 6732 6733 @media (min-width: 768px) { 6734 border-radius: 12px; 6735 max-width: 348px; 6736 } 6737 &[data-text-layout='left'] { 6738 --text-align: left; 6739 } 6740 6741 &[data-text-layout='right'] { 6742 --text-align: right; 6743 6744 @media (min-width: 1024px) { 6745 --text-align: left; 6746 } 6747 } 6748 6749 > a { 6750 display: block; 6751 width: 100%; 6752 } 6753 6754 @media (max-width: 767px) { 6755 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 6756 --image--radius: 0; 6757 } 6758 } 6759 } 6760 6761 /* Labels & Badges */ 6762 6763 .product--labels { 6764 display: flex; 6765 flex-wrap: wrap; 6766 gap: 4px; 6767 position: absolute; 6768 top: 6px; 6769 left: 6px; 6770 right: 8px; 6771 z-index: 2; 6772 justify-content: flex-start;
6773 align-items: flex-start; 6774 6775 @media (max-width: 767px) { 6776 font-size: 9px; 6777 } 6778 } 6779 6780 .product--label { 6781 display: block; 6782 width: max-content; 6783 line-height: 1.21; 6784 font-family: var(--olay-font-inter); 6785 font-weight: 500; 6786 font-size: 10px; 6787 letter-spacing: 0.01em; 6788 text-transform: uppercase; 6789 padding: 4px 8px; 6790 border-radius: 0px; 6791 background-color: #161716; 6792 color: #F4F4F4; 6793 line-height: 1em; 6794 6795 @media (min-width: 768px) { 6796 font-size: 12px; 6797 } 6798 @media (max-width: 767px) { 6799 font-size: 8px; 6800 padding: 2px 4px !important; 6801 } 6802 6803 &:empty, 6804 &:has(span:empty) { 6805 display: none; 6806 } 6807 6808 &:last-child { 6809 height: fit-content; 6810 } 6811 6812 } 6813 6814 /* Image & Slider */ 6815 6816 .product-card--image-wrapper { 6817 width: 100%; 6818 max-width: 100%; 6819 display: flex; 6820 flex-direction: column; 6821 align-items: center; 6822 position: relative; 6823 border-radius: 8px; 6824 overflow: visible; 6825 6826 @media (min-width: 768px) { 6827 border-radius: 8px; 6828 } 6829 } 6830 6831 .product-card--image-slider { 6832 width: 100%; 6833 position: relative; 6834 overflow: hidden; 6835 border-radius: 8px; 6836 background: #F4F4F4; 6837 aspect-ratio: 1 / 1; 6838 @media only screen and (max-width: 767px){ 6839 border-radius: 4px; 6840 } 6841 } 6842 6843 .product-card--image, 6844 .product-card--slider-image { 6845 border-radius: 8px; 6846 opacity: 1; 6847 transition: opacity 0.5s; 6848 width: 100%; 6849 /* height: auto; */ 6850 object-fit: cover; 6851 6852 @media (min-width: 768px) { 6853 border-radius: 8px; 6854 } 6855 6856 @media only screen and (max-width: 767px){ 6857 border-radius: 4px; 6858 } 6859 6860 &[aria-hidden='true'] { 6861 opacity: 0; 6862 } 6863 } 6864 6865 .product-card--image { 6866 @media (hover: hover) { 6867 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 6868 opacity: 0; 6869 } 6870 } 6871 } 6872 6873 .product-card--hover-image { 6874 position: absolute; 6875 top: 0; 6876 left: 0; 6877 opacity: 0; 6878 height: 100%; 6879 width: 100%; 6880 transition: opacity 0.5s; 6881 overflow: hidden; 6882 border-radius: 8px; 6883 6884 @media (min-width: 768px) { 6885 border-radius: 8px; 6886 } 6887 6888 @media only screen and (max-width: 767px){ 6889 border-radius: 4px; 6890 } 6891 6892 @media (hover: hover) { 6893 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 6894 opacity: 1; 6895 } 6896 } 6897 } 6898 6899 .product-card--slider-image { 6900 position: absolute; 6901 top: 0; 6902 left: 0; 6903 width: 100%; 6904 height: 100%; 6905 object-fit: cover; 6906 opacity: 0; 6907 pointer-events: none; 6908 6909 &.active { 6910 opacity: 1; 6911 pointer-events: auto; 6912 } 6913 } 6914 6915 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 6916 6917 .slider-dot { 6918 width: 27px; 6919 height: 2px; 6920 border-radius: 1px; 6921 background-color: #D8D8D8; 6922 cursor: pointer; 6923 transition: background-color 0.3s ease; 6924 border: none; 6925 padding: 0; 6926 6927 &.active { 6928 background-color: #161716; 6929 } 6930 6931 &:hover { 6932 background-color: #707070; 6933 } 6934 } 6935 6936 /* Detail */ 6937 6938 .product-card--details-wrapper { 6939 display: flex; 6940 gap: 8px; 6941 flex-direction: column; 6942 width: 85%; 6943 @media only screen and (max-width: 767px){ 6944 width: 100%; 6945 gap: 4px; 6946 } 6947 } 6948 6949 .product-card--details { 6950 display: flex; 6951 flex-direction: column; 6952 gap: 8px; 6953 width: 100%; 6954 padding: 0 8px 12px; 6955 @media only screen and (max-width: 767px){ 6956 padding: 0 4px 4px; 6957 gap: 6px; 6958 } 6959 6960 .product-card--root[data-text-layout='left'] & { 6961 flex-direction: column; 6962 align-items: flex-start; 6963 } 6964 6965 .product-card--root[data-text-layout='right'] & { 6966 flex-direction: column; 6967 align-items: flex-end; 6968 } 6969 6970 @media (min-width: 768px) { 6971 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 6972 align-items: baseline; 6973 justify-content: space-between; 6974 } 6975 } 6976 6977 @media (max-width: 767px) { 6978 max-width: var(--max-width--x-small); 6979 margin: 0 auto; 6980 6981 [data-mobile-full-width='true'] & { 6982 padding-left: var(--spacing--item); 6983 } 6984 } 6985 } 6986 6987 /* Price */ 6988 6989 .product-card--price-wrapper { 6990 .product-card--root:not([data-text-layout='center']) & { 6991 align-items: center; 6992 } 6993 } 6994 6995 .product--price-container { 6996 display: flex; 6997 flex-direction: row; 6998 font-family: 'Boston', var(--olay-font-inter); 6999 font-weight: 600; 7000 font-size: 16px; 7001 line-height: 1; 7002 letter-spacing: 0.01em; 7003 color: #161716; 7004 cursor: default; 7005 @media only screen and (max-width: 767px){ 7006 font-family: var(--olay-font-inter); 7007 font-size: 16px; 7008 gap: 4px; 7009 } 7010 7011 @media (min-width: 768px) { 7012 font-size: 18px; 7013 } 7014 } 7015 7016 .product--price-wrapper { 7017 display: flex; 7018 gap: var(--spacing--0); 7019 7020 .product-card--root[data-text-layout='center'] & { 7021 justify-content: center; 7022 } 7023 7024 .product-card--root[data-text-layout='right'] & { 7025 text-align: right; 7026 justify-content: flex-end; 7027 flex-wrap: wrap; 7028 } 7029 7030 .product-card--root[data-text-layout='left'] & { 7031 flex-wrap: wrap; 7032 7033 @media (min-width: 1024px) { 7034 text-align: right; 7035 justify-content: flex-end; 7036 } 7037 } 7038 7039 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 7040 @media (min-width: 768px) { 7041 text-align: right; 7042 justify-content: end; 7043 } 7044 } 7045 7046 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 7047 &.club-olay-active { 7048 .product--price { 7049 order: 1; 7050 } 7051 7052 .product--compare-price { 7053 order: 2; 7054 } 7055 7056 .club-olay-savings { 7057 order: 3; 7058 width: 100%; 7059 } 7060 } 7061 } 7062 7063 .product--compare-price { 7064 text-decoration: line-through; 7065 font-family: var(--olay-font-inter); 7066 font-weight: 400; 7067 font-size: 16px; 7068 color: #6B6B6B; 7069 line-height: 1; 7070 } 7071 7072 .product--unit-price-container { 7073 padding: 0; 7074 font-family: var(--olay-font-inter); 7075 font-weight: 400; 7076 font-size: 10px; 7077 color: #6B6B6B; 7078 line-height: 1; 7079 align-self: center !important; 7080 margin-left: 8px; 7081 7082 .product-card--root:not([data-text-layout='center']) & { 7083 @media (min-width: 1024px) { 7084 align-self: flex-end; 7085 } 7086 } 7087 7088 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 7089 @media (min-width: 768px) { 7090 align-self: flex-end; 7091 } 7092 } 7093 } 7094 7095 .product--from[data-item] { 7096 text-transform: capitalize; 7097 padding: 0; 7098 flex-basis: initial; 7099 } 7100 7101 /* Info */ 7102 7103 .product-card--vendor { 7104 word-break: break-word; 7105 font-family: var(--olay-font-inter); 7106 font-weight: 500; 7107 font-size: 10px; 7108 line-height: 1; 7109 letter-spacing: 0.01em; 7110 color: #161716; 7111 text-transform: uppercase; 7112 7113 [data-text-color='white'] & { 7114 color: white; 7115 } 7116 7117 & a { 7118 color: var(--color--body--light); 7119 7120 @media (max-width: 767px) { 7121 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 7122 } 7123 } 7124 } 7125 7126 .product-card--title { 7127 .product-card--root & { 7128 word-break: break-word; 7129 font-family: 'Boston', var(--olay-font-inter); 7130 font-weight: 700; 7131 font-size: 14px; 7132 line-height: 1.2; 7133 color: #161716; 7134 @media only screen and (max-width: 767px){ 7135 font-size: 12px; 7136 } 7137 @media (min-width: 768px) { 7138 font-size: 16px; 7139 line-height: 1.2; 7140 } 7141 } 7142 7143 & a { 7144 @media (max-width: 767px) { 7145 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 7146 } 7147 } 7148 } 7149 7150 .product-card--weight { 7151 font-family: var(--olay-font-inter); 7152 font-weight: 500; 7153 font-size: 10px; 7154 line-height: 1.21; 7155 color: #707070; 7156 padding-block: 2%; 7157 7158 @media only screen and (max-width: 767px){ 7159 font-size: 8px; 7160 line-height: 1.21; 7161 } 7162 } 7163
7164 .product-card--details-wrapper .product-rating--root { 7165 &:empty { 7166 display: none; 7167 } 7168 7169 .product-card--root[data-text-layout='center'] & { 7170 justify-content: center; 7171 } 7172 7173 .product-card--root[data-text-layout='left'] & { 7174 justify-content: flex-start; 7175 } 7176 7177 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 7178 @media (min-width: 768px) { 7179 justify-content: flex-start; 7180 } 7181 } 7182 7183 .product-card--root[data-text-layout='right'] & { 7184 justify-content: flex-end; 7185 7186 @media (min-width: 1024px) { 7187 justify-content: flex-start; 7188 } 7189 } 7190 } 7191 7192 /* Swatches */ 7193 7194 .product-card--swatches--column-view { 7195 .product-card--root[data-text-layout='center'] & { 7196 width: fit-content; 7197 margin: 0 auto; 7198 } 7199 7200 .product-card--root:not([data-text-layout='center']) & { 7201 @media (min-width: 1024px) { 7202 display: none; 7203 } 7204 } 7205 7206 .product-card--root[data-text-layout='right'] & .swatches--container { 7207 justify-content: flex-end; 7208 } 7209 } 7210 7211 .product-card--swatches--horizontal-view { 7212 .product-card--root[data-text-layout='center'] & { 7213 display: none; 7214 } 7215 7216 .product-card--root:not([data-text-layout='center']) & { 7217 display: none; 7218 7219 @media (min-width: 1024px) { 7220 display: block; 7221 } 7222 } 7223 } 7224 7225 /* disables AR when products viewed from quick-add drawer */ 7226 .drawer--side[data-side='right'] .product-model--button[data-item] { 7227 display: none; 7228 } 7229 7230 /* Buy Buttons Section - Figma Specs */ 7231 .product-card--form { 7232 width: 100%; 7233 } 7234 7235 .product-card--add-to-cart-button, 7236 .product-card--root .product-buy-buttons--primary { 7237 width: 100%; 7238 box-sizing: border-box; 7239 height: auto; 7240 padding: 14px 16px; 7241 display: inline-flex; 7242 align-items: center; 7243 justify-content: center; 7244 background: #FFFFFF; 7245 border: 1px solid #D8D8D8; 7246 font-family: 'Boston', var(--olay-font-inter); 7247 font-weight: 500; 7248 font-size: 16px; 7249 line-height: 1; 7250 color: #161716; 7251 text-transform: uppercase; 7252 cursor: pointer; 7253 transition: all 0.3s ease; 7254 text-align: center; 7255 border-radius: 8px; 7256 @media (min-width: 1020px) and (max-width: 1080px) { 7257 font-size: 14px; 7258 } 7259 @media only screen and (max-width: 767px){ 7260 font-family: var(--olay-font-inter); 7261 font-size: 12px; 7262 border-radius: 4px; 7263 letter-spacing: 0.01em; 7264 padding: 12px 8px; 7265 } 7266 7267 &[disabled] { 7268 opacity: 0.5; 7269 cursor: not-allowed; 7270 background: #F4F4F4; 7271 @media only screen and (max-width: 767px){ 7272 font-size: 12px; 7273 width: 100%; 7274 } 7275 } 7276 7277 &[aria-busy='true'] { 7278 opacity: 0.7; 7279 7280 .product-buy-buttons--cta-text { 7281 opacity: 0; 7282 } 7283 7284 .product-buy-buttons--spinner { 7285 opacity: 1; 7286 } 7287 7288 .product-buy-buttons--spinner { 7289 opacity: 1; 7290 } 7291 7292 } 7293 7294 7295 &:before { 7296 border: none !important; 7297 } 7298 7299 .product-buy-buttons--spinner { 7300 opacity: 0; 7301 @media only screen and (max-width: 767px){ 7302 position: absolute; 7303 right: 65px; 7304 display: inline-block; 7305 top: -5px; 7306 } 7307 } 7308 } 7309 7310 @media only screen and (max-width: 767px){ 7311 .product-card--early-access-login { 7312 margin-top: 33% !important; 7313 } 7314 } 7315 7316 .product-card--root .product-buy-buttons--primary { 7317 @media only screen and (min-width: 768px){ 7318 padding: 2px 16px; 7319 } 7320 } 7321 7322 .product-card--root .product-buy-buttons--smart, 7323 .product-card--root .product-buy-buttons--buy-now, 7324 .product-card--root .product-buy-buttons--drawer { 7325 display: none; 7326 } 7327 7328 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 7329 .product-card--early-access-login { 7330 display: flex; 7331 flex-direction: row; 7332 align-items: center; 7333 margin-top: var(--spacing--4); 7334 width: 100%; 7335 } 7336 .product-card--early-access-login .product-card--add-to-cart-button { 7337 flex: 1; 7338 } 7339 7340 .club-olay-badge { 7341 display: flex; 7342 align-items: center; 7343 justify-content: center; 7344 padding: 8px 12px; 7345 background-color: #FFD700; 7346 border-radius: 4px; 7347 margin-bottom: 12px; 7348 } 7349 7350 .club-olay-badge--text { 7351 font-family: var(--olay-font-inter, Inter, sans-serif); 7352 font-size: 12px; 7353 font-weight: 600; 7354 color: #161716; 7355 text-align: center; 7356 } 7357 7358 @media (max-width: 767px) { 7359 .club-olay-badge { 7360 padding: 6px 10px; 7361 } 7362 7363 .club-olay-badge--text { 7364 font-size: 7px; 7365 letter-spacing: 0; 7366 } 7367 } 7368 7369@media only screen and (min-width:635px) and (max-width: 820px) { 7370 .product-buy-buttons--cta-text { 7371 font-size: 11px !important; 7372 } 7373} 7374</style><!-- snippets/product-card.liquid --><div 7375 class="product-card--root" 7376 data-handle="olay-complete-hydrating-lotion-sensitive" 7377 data-text-layout="left" 7378 data-aspect-ratio="square" 7379 7380 7381> 7382 <a 7383 href="/products/olay-complete-hydrating-lotion-sensitive" 7384 class="product-card--image-wrapper" 7385 tabindex="-1" 7386 ><div class="product-card--image-slider"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=1280" alt="Olay Complete + Hydrating Lotion Sensitive" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__MOI_Lotion__48004.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete + Hydrating Lotion Sensitive"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=1280" alt="Model posing with Olay Complete + Hydrating Lotion Sensitive bottle with pump applying lotion to fingers. Lightweight, non greasy hydration for all skin types." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_01__84923.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--hover-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model posing with Olay Complete + Hydrating Lotion Sensitive bottle with pump applying lotion to fingers. Lightweight, non greasy hydration for all skin types."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=1280" alt="Model applying Olay Complete + Hydrating Lotion to face. 3 in 1 nourish, renew, strengthen." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_02__84536.jpg?v=1778858092&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model applying Olay Complete + Hydrating Lotion to face. 3 in 1 nourish, renew, strengthen."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=1280" alt="Improves skin's natural moisture barrier. Ingredients ceramides, vitamin B3 and E" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_03__03341.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Improves skin's natural moisture barrier. Ingredients ceramides, vitamin B3 and E"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=1280" alt="Model posing with Complete + Hydrating Lotion bottle smiling. Designed for sensitive skin. Dermatologically approved." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_04__79568.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model posing with Complete + Hydrating Lotion bottle smiling. Designed for sensitive skin. Dermatologically approved."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=1280" alt="Complete + Hydrating Lotion texture. Free of fragrance, parabens, pthalates, synthetic dyes." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_05__30367.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Complete + Hydrating Lotion texture. Free of fragrance, parabens, pthalates, synthetic dyes."><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=1280" alt="3 models with different skin tone posing. Radiant, healthy looking skin" srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_06__12156.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="3 models with different skin tone posing. Radiant, healthy looking skin"><img src="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=1280" alt="Olay complete moisturizer SPF 40 bottle. SPF 40 by day. Complete + Hydrating Lotion. Hydration by night." srcset="//www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=200 200w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=300 300w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=400 400w, //www.olay.com/cdn/shop/fi
7386les/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=500 500w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=600 600w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=700 700w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=800 800w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=900 900w, //www.olay.com/cdn/shop/files/000049-42_eOLAY_eContent_Complete__Lotion_07__23291.jpg?v=1778858091&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay complete moisturizer SPF 40 bottle. SPF 40 by day. Complete + Hydrating Lotion. Hydration by night."></div><div class="product-card--slider-dots"><button 7387 type="button" 7388 class="slider-dot active" 7389 data-slide="0" 7390 aria-label="Go to slide 1" 7391 aria-current="true" 7392 ></button><button 7393 type="button" 7394 class="slider-dot" 7395 data-slide="1" 7396 aria-label="Go to slide 2" 7397 7398 ></button><button 7399 type="button" 7400 class="slider-dot" 7401 data-slide="2" 7402 aria-label="Go to slide 3" 7403 7404 ></button><button 7405 type="button" 7406 class="slider-dot" 7407 data-slide="3" 7408 aria-label="Go to slide 4" 7409 7410 ></button><button 7411 type="button" 7412 class="slider-dot" 7413 data-slide="4" 7414 aria-label="Go to slide 5" 7415 7416 ></button><button 7417 type="button" 7418 class="slider-dot" 7419 data-slide="5" 7420 aria-label="Go to slide 6" 7421 7422 ></button><button 7423 type="button" 7424 class="slider-dot" 7425 data-slide="6" 7426 aria-label="Go to slide 7" 7427 7428 ></button><button 7429 type="button" 7430 class="slider-dot" 7431 data-slide="7" 7432 aria-label="Go to slide 8" 7433 7434 ></button></div><!-- snippets/product-quick-add.liquid --></a> 7435 7436 <div class="product-card--details"> 7437 <div class="product-details--title-wrapper"> 7438 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 7439 Face Moisturizer - Sensitive Skin 7440 </div></div> 7441 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609210662"></div> 7442 <!-- snippets/product-rating.liquid --> 7443</div> 7444 7445 </div> 7446 <div class="product-card--details-wrapper"><a href="/products/olay-complete-hydrating-lotion-sensitive" class="product-card--title-link"> 7447 <p class="product-card--title" data-item="heading">Olay Complete + Hydrating Lotion Sensitive</p> 7448 </a><p class="product-card--weight"> 7449 7450 $2.64/ oz 7451 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="10.1"> 7452 7453 </p> 7454 </div> 7455 7456 7457<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 7458 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $26.65"> 7459 7460$26.65 7461</span></div></div> 7462 7463<form method="post" action="/cart/add" id="search" accept-charset="UTF-8" class="product-card--form" enctype="multipart/form-data" data-product-card-form="true"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="â" /><input type="hidden" name="quantity" value="1"> 7464 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 7465<product-buy-buttons-element 7466 class="product-buy-buttons--root" 7467 data-id="search" 7468 data-cart-type="drawer" 7469 data-translations="" 7470 data-container="block" 7471 ><button 7472 class="product-buy-buttons--primary" 7473 type="submit" 7474 aria-busy="false" 7475 data-text="Add to cart" 7476 availability_disabled="false" 7477 title="click here to add Olay Complete + Hydrating Lotion Sensitive to bag" 7478 7479 data-item="button-1" 7480 7481> 7482
7483 <span class="product-buy-buttons--cta-text">Add to cart</span> 7484 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 7485 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 7486 </svg></span> 7487 </button> 7488<input 7489 type="hidden" 7490 class="product-buy-buttons--input" 7491 name="id" 7492 data-id="44071654785067" 7493 data-sku="00075609210662" 7494 data-management="shopify" 7495 data-policy="deny" 7496 data-quantity="13" 7497 value="44071654785067" 7498 > 7499 7500
7500<script type="application/json"> 7501 { 7502 "add_to_cart": "Add to cart", 7503 "out_of_stock": "Out of stock", 7504 "unavailable": "Unavailable" 7505 } 7506 </script>
7506 7507 </product-buy-buttons-element><style data-shopify> 7508.ps-widget[ps-sku]::before { 7509 content: ''; 7510 display: inline-block; 7511 width: 18px; 7512 height: 18px; 7513 margin-left: 8px; 7514 margin-right: 8px; 7515 background-color: currentColor; 7516 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 7517 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 7518 mask-size: contain; 7519 -webkit-mask-size: contain; 7520 vertical-align: text-bottom; 7521 7522 @media only screen and (max-width: 767px) { 7523 width: 16px; 7524 height: 16px; 7525 margin-left: 0; 7526 } 7527 7528} 7529 7530.buy-now-wrap { 7531 flex-basis: 100%; 7532 width: 0; 7533 display: flex; 7534 gap: 16px; 7535} 7536button.product-buy-buttons--buy-now, 7537.ps-widget { 7538 background: white; 7539 color: black; 7540 font-family: var(--olay-font-inter); 7541 border: 1px solid var(--olay-neutral-30); 7542} 7543button.product-buy-buttons--buy-now:before { 7544 border: none; 7545} 7546button.product-buy-buttons--buy-now:focus-visible { 7547 outline: 2px solid var(--olay-color-primary); 7548 outline-offset: 2px; 7549 border-radius: var(--radius-sm); 7550} 7551button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 7552 outline: none; 7553} 7554 .product-buy-buttons--root { 7555 position: relative; 7556 gap: var(--spacing--3); 7557 7558 } 7559 product-buy-buttons-element.product-buy-buttons--root { 7560 display: flex; 7561 flex-direction: row; 7562 flex-wrap: wrap; 7563 align-items: center; 7564 margin-top: var(--spacing--4); 7565 } 7566 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 7567 flex-shrink: 0; 7568 } 7569 button.product-buy-buttons--primary { 7570 flex: 1; 7571 width: auto; 7572 display: flex; 7573 align-items: center; 7574 justify-content: center; 7575 gap: var(--spacing--2); 7576 } 7577 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 7578 width: 50%; 7579 flex-basis: 49%; 7580 } 7581 .product-buy-buttons--cart-icon { 7582 height: 12px; 7583 width: auto; 7584 flex-shrink: 0; 7585 filter: brightness(0) invert(1); 7586 @media screen and (min-width: 768px) { 7587 height: 15px; 7588 } 7589 } 7590 7591 .product-buy-buttons--buy-now, 7592 .product-buy-buttons--primary { 7593 width: 100%; 7594 7595 &[aria-busy='true'] { 7596 .product-buy-buttons--cta-text, 7597 .product-buy-buttons--buy-now-text { 7598 opacity: 0; 7599 } 7600 } 7601 7602 &[aria-busy='false'] { 7603 .product-buy-buttons--spinner { 7604 opacity: 0; 7605 } 7606 } 7607 } 7608 7609 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 7610 color: black !important; 7611 background-color: var(--button--bg-color-4) !important; 7612 border-color: var(--button--border-color-4) !important; 7613 font-family: var(--olay-font-inter) !important; 7614 border: 1px solid #D8D8D8 !important; 7615 font-size: 16px !important; 7616 border-width: 1px !important; 7617 padding: 12px 20px !important; 7618 background: white; 7619 border-radius: var(--button--radius) !important; 7620 display: inline-flex; 7621 align-items: normal; 7622 justify-content: space-between; 7623 } 7624 7625 7626 7627 @media only screen and (max-width: 767px) { 7628 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 7629 padding: 12px 0 !important; 7630 font-size: 12px !important; 7631 } 7632 .buy-now-wrap { 7633 flex-basis: 99%; 7634 gap: 10px; 7635 } 7636 } 7637 7638 .product-buy-buttons--smart { 7639 user-select: none; 7640 width: 100%; 7641 7642 &[data-style='button-1'] { 7643 --button--color: var(--button--color-1); 7644 --button--bg-color: var(--button--bg-color-1); 7645 --button--border-color: var(--button--border-color-1); 7646 } 7647 7648 &[data-style='button-2'] { 7649 --button--color: var(--button--color-2); 7650 --button--bg-color: var(--button--bg-color-2); 7651 --button--border-color: var(--button--border-color-2); 7652 } 7653 7654 &[data-style='button-3'] { 7655 --button--color: var(--button--color-3); 7656 --button--bg-color: var(--button--bg-color-3); 7657 --button--border-color: var(--button--border-color-3); 7658 } 7659 7660 &[data-style='button-4'] { 7661 --button--color: var(--button--color-4); 7662 --button--bg-color: var(--button--bg-color-4); 7663 --button--border-color: var(--button--border-color-4); 7664 } 7665 7666 .shopify-payment-button__button--unbranded { 7667 width: 100%; 7668 7669 &:hover:not([disabled]) { 7670 background-color: var(--button--bg-color); 7671 } 7672 } 7673 7674 .shopify-payment-button__more-options { 7675 margin: var(--spacing--item) 0 0 0; 7676 text-decoration: underline; 7677 color: var(--color--body); 7678 7679 &:is(:hover, :focus-visible) { 7680 background-color: unset; 7681 color: var(--color--body); 7682 } 7683 } 7684 7685 &[aria-hidden='true'] { 7686 pointer-events: none; 7687 opacity: 0.7; 7688 7689 .shopify-payment-button__button--unbranded { 7690 pointer-events: none; 7691 } 7692 } 7693 7694 &:empty { 7695 display: none; 7696 } 7697 } 7698 7699 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 7700 7701 /* Drawer info styles moved to assets/sticky-product-bar.css */ 7702 7703 .afterpay-section { 7704 width: 100%; 7705 margin-top: var(--spacing--2); 7706 } 7707 7708 @media screen and (max-width: 767px) { 7709 .afterpay-section { 7710 margin-top: var(--spacing--1); 7711 } 7712 } 7713 7714 .club-olay-badge-plp { 7715 display: flex; 7716 align-items: center; 7717 justify-content: center; 7718 padding: 8px 12px; 7719 background-color: #FFD700; 7720 border-radius: 4px; 7721 margin-bottom: 12px; 7722 width: 100%; 7723 7724 } 7725 7726 .club-olay-badge-plp--text { 7727 font-family: var(--olay-font-inter, Inter, sans-serif); 7728 font-size: 12px; 7729 font-weight: 600; 7730 color: #161716; 7731 text-align: center; 7732 } 7733 7734 @media (max-width: 767px) { 7735 .club-olay-badge-plp { 7736 padding: 6px 10px; 7737 } 7738 7739 .club-olay-badge-plp--text { 7740 font-size: 10px; 7741 } 7742 } 7743</style><input type="hidden" name="product-id" value="7918630862891" /></form></div> 7744</div> 7745 7746<style data-shopify> 7747.product_form_subtitle.plp-card { 7748 font-size: 10px; 7749} 7750 7751button.product-card--add-to-cart-button.empty { 7752 padding: 0 40px; 7753} 7754.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 7755 @media only screen and (min-width: 767px) { 7756 height: auto !important; 7757 } 7758} 7759.main-collection--grid span.product-buy-buttons--cta-text { 7760 @media only screen and (max-width: 767px) { 7761 padding: 0 40px; 7762 } 7763} 7764.product_form_subtitle { 7765 font-family: Inter; 7766 font-weight: 500; 7767 font-style: Medium; 7768 font-size: 16px; 7769 line-height: 100%; 7770 letter-spacing: 0%; 7771 color: #161716; 7772 text-transform: uppercase; 7773 margin-bottom: 8px; 7774 margin-top: 8px; 7775 7776 @media (max-width: 767px) { 7777 font-size: 10px; 7778 margin-top: 0; 7779 margin-bottom: 0; 7780 } 7781} 7782.product_subtitle{ 7783 font-family: var(--olay-font-inter); 7784 font-weight: 500; 7785 font-size: 10px; 7786 line-height: 1.2; 7787 letter-spacing: 0.01em; 7788 color: #161716; 7789 text-transform: uppercase; 7790 text-align: left; 7791 width: 100%; 7792 @media only screen and (max-width: 767px){ 7793 font-size: 8px; 7794 } 7795} 7796 .product-card--root { 7797 display: flex; 7798 flex-direction: column; 7799 gap: 20px; 7800 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 7801 width: 100%; 7802 text-align: var(--text-align, center); 7803 padding: 8px; 7804 background: #FFFFFF; 7805 border-radius: 8px; 7806 @media only screen and (max-width: 767px){ 7807 padding: 4px; 7808 gap: 8px; 7809 border-radius: 8px; 7810 } 7811 7812 @media (min-width: 768px) { 7813 border-radius: 12px; 7814 max-width: 348px; 7815 } 7816 &[data-text-layout='left'] { 7817 --text-align: left; 7818 } 7819 7820 &[data-text-layout='right'] { 7821 --text-align: right; 7822 7823 @media (min-width: 1024px) { 7824 --text-align: left; 7825 } 7826 } 7827 7828 > a { 7829 display: block; 7830 width: 100%; 7831 } 7832 7833 @media (max-width: 767px) { 7834 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 7835 --image--radius: 0; 7836 } 7837 } 7838 } 7839 7840 /* Labels & Badges */ 7841 7842 .product--labels { 7843 display: flex; 7844 flex-wrap: wrap; 7845 gap: 4px; 7846 position: absolute; 7847 top: 6px; 7848 left: 6px; 7849 right: 8px; 7850 z-index: 2; 7851 justify-content: flex-start;
7852 align-items: flex-start; 7853 7854 @media (max-width: 767px) { 7855 font-size: 9px; 7856 } 7857 } 7858 7859 .product--label { 7860 display: block; 7861 width: max-content; 7862 line-height: 1.21; 7863 font-family: var(--olay-font-inter); 7864 font-weight: 500; 7865 font-size: 10px; 7866 letter-spacing: 0.01em; 7867 text-transform: uppercase; 7868 padding: 4px 8px; 7869 border-radius: 0px; 7870 background-color: #161716; 7871 color: #F4F4F4; 7872 line-height: 1em; 7873 7874 @media (min-width: 768px) { 7875 font-size: 12px; 7876 } 7877 @media (max-width: 767px) { 7878 font-size: 8px; 7879 padding: 2px 4px !important; 7880 } 7881 7882 &:empty, 7883 &:has(span:empty) { 7884 display: none; 7885 } 7886 7887 &:last-child { 7888 height: fit-content; 7889 } 7890 7891 } 7892 7893 /* Image & Slider */ 7894 7895 .product-card--image-wrapper { 7896 width: 100%; 7897 max-width: 100%; 7898 display: flex; 7899 flex-direction: column; 7900 align-items: center; 7901 position: relative; 7902 border-radius: 8px; 7903 overflow: visible; 7904 7905 @media (min-width: 768px) { 7906 border-radius: 8px; 7907 } 7908 } 7909 7910 .product-card--image-slider { 7911 width: 100%; 7912 position: relative; 7913 overflow: hidden; 7914 border-radius: 8px; 7915 background: #F4F4F4; 7916 aspect-ratio: 1 / 1; 7917 @media only screen and (max-width: 767px){ 7918 border-radius: 4px; 7919 } 7920 } 7921 7922 .product-card--image, 7923 .product-card--slider-image { 7924 border-radius: 8px; 7925 opacity: 1; 7926 transition: opacity 0.5s; 7927 width: 100%; 7928 /* height: auto; */ 7929 object-fit: cover; 7930 7931 @media (min-width: 768px) { 7932 border-radius: 8px; 7933 } 7934 7935 @media only screen and (max-width: 767px){ 7936 border-radius: 4px; 7937 } 7938 7939 &[aria-hidden='true'] { 7940 opacity: 0; 7941 } 7942 } 7943 7944 .product-card--image { 7945 @media (hover: hover) { 7946 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 7947 opacity: 0; 7948 } 7949 } 7950 } 7951 7952 .product-card--hover-image { 7953 position: absolute; 7954 top: 0; 7955 left: 0; 7956 opacity: 0; 7957 height: 100%; 7958 width: 100%; 7959 transition: opacity 0.5s; 7960 overflow: hidden; 7961 border-radius: 8px; 7962 7963 @media (min-width: 768px) { 7964 border-radius: 8px; 7965 } 7966 7967 @media only screen and (max-width: 767px){ 7968 border-radius: 4px; 7969 } 7970 7971 @media (hover: hover) { 7972 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 7973 opacity: 1; 7974 } 7975 } 7976 } 7977 7978 .product-card--slider-image { 7979 position: absolute; 7980 top: 0; 7981 left: 0; 7982 width: 100%; 7983 height: 100%; 7984 object-fit: cover; 7985 opacity: 0; 7986 pointer-events: none; 7987 7988 &.active { 7989 opacity: 1; 7990 pointer-events: auto; 7991 } 7992 } 7993 7994 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 7995 7996 .slider-dot { 7997 width: 27px; 7998 height: 2px; 7999 border-radius: 1px; 8000 background-color: #D8D8D8; 8001 cursor: pointer; 8002 transition: background-color 0.3s ease; 8003 border: none; 8004 padding: 0; 8005 8006 &.active { 8007 background-color: #161716; 8008 } 8009 8010 &:hover { 8011 background-color: #707070; 8012 } 8013 } 8014 8015 /* Detail */ 8016 8017 .product-card--details-wrapper { 8018 display: flex; 8019 gap: 8px; 8020 flex-direction: column; 8021 width: 85%; 8022 @media only screen and (max-width: 767px){ 8023 width: 100%; 8024 gap: 4px; 8025 } 8026 } 8027 8028 .product-card--details { 8029 display: flex; 8030 flex-direction: column; 8031 gap: 8px; 8032 width: 100%; 8033 padding: 0 8px 12px; 8034 @media only screen and (max-width: 767px){ 8035 padding: 0 4px 4px; 8036 gap: 6px; 8037 } 8038 8039 .product-card--root[data-text-layout='left'] & { 8040 flex-direction: column; 8041 align-items: flex-start; 8042 } 8043 8044 .product-card--root[data-text-layout='right'] & { 8045 flex-direction: column; 8046 align-items: flex-end; 8047 } 8048 8049 @media (min-width: 768px) { 8050 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 8051 align-items: baseline; 8052 justify-content: space-between; 8053 } 8054 } 8055 8056 @media (max-width: 767px) { 8057 max-width: var(--max-width--x-small); 8058 margin: 0 auto; 8059 8060 [data-mobile-full-width='true'] & { 8061 padding-left: var(--spacing--item); 8062 } 8063 } 8064 } 8065 8066 /* Price */ 8067 8068 .product-card--price-wrapper { 8069 .product-card--root:not([data-text-layout='center']) & { 8070 align-items: center; 8071 } 8072 } 8073 8074 .product--price-container { 8075 display: flex; 8076 flex-direction: row; 8077 font-family: 'Boston', var(--olay-font-inter); 8078 font-weight: 600; 8079 font-size: 16px; 8080 line-height: 1; 8081 letter-spacing: 0.01em; 8082 color: #161716; 8083 cursor: default; 8084 @media only screen and (max-width: 767px){ 8085 font-family: var(--olay-font-inter); 8086 font-size: 16px; 8087 gap: 4px; 8088 } 8089 8090 @media (min-width: 768px) { 8091 font-size: 18px; 8092 } 8093 } 8094 8095 .product--price-wrapper { 8096 display: flex; 8097 gap: var(--spacing--0); 8098 8099 .product-card--root[data-text-layout='center'] & { 8100 justify-content: center; 8101 } 8102 8103 .product-card--root[data-text-layout='right'] & { 8104 text-align: right; 8105 justify-content: flex-end; 8106 flex-wrap: wrap; 8107 } 8108 8109 .product-card--root[data-text-layout='left'] & { 8110 flex-wrap: wrap; 8111 8112 @media (min-width: 1024px) { 8113 text-align: right; 8114 justify-content: flex-end; 8115 } 8116 } 8117 8118 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 8119 @media (min-width: 768px) { 8120 text-align: right; 8121 justify-content: end; 8122 } 8123 } 8124 8125 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 8126 &.club-olay-active { 8127 .product--price { 8128 order: 1; 8129 } 8130 8131 .product--compare-price { 8132 order: 2; 8133 } 8134 8135 .club-olay-savings { 8136 order: 3; 8137 width: 100%; 8138 } 8139 } 8140 } 8141 8142 .product--compare-price { 8143 text-decoration: line-through; 8144 font-family: var(--olay-font-inter); 8145 font-weight: 400; 8146 font-size: 16px; 8147 color: #6B6B6B; 8148 line-height: 1; 8149 } 8150 8151 .product--unit-price-container { 8152 padding: 0; 8153 font-family: var(--olay-font-inter); 8154 font-weight: 400; 8155 font-size: 10px; 8156 color: #6B6B6B; 8157 line-height: 1; 8158 align-self: center !important; 8159 margin-left: 8px; 8160 8161 .product-card--root:not([data-text-layout='center']) & { 8162 @media (min-width: 1024px) { 8163 align-self: flex-end; 8164 } 8165 } 8166 8167 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 8168 @media (min-width: 768px) { 8169 align-self: flex-end; 8170 } 8171 } 8172 } 8173 8174 .product--from[data-item] { 8175 text-transform: capitalize; 8176 padding: 0; 8177 flex-basis: initial; 8178 } 8179 8180 /* Info */ 8181 8182 .product-card--vendor { 8183 word-break: break-word; 8184 font-family: var(--olay-font-inter); 8185 font-weight: 500; 8186 font-size: 10px; 8187 line-height: 1; 8188 letter-spacing: 0.01em; 8189 color: #161716; 8190 text-transform: uppercase; 8191 8192 [data-text-color='white'] & { 8193 color: white; 8194 } 8195 8196 & a { 8197 color: var(--color--body--light); 8198 8199 @media (max-width: 767px) { 8200 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 8201 } 8202 } 8203 } 8204 8205 .product-card--title { 8206 .product-card--root & { 8207 word-break: break-word; 8208 font-family: 'Boston', var(--olay-font-inter); 8209 font-weight: 700; 8210 font-size: 14px; 8211 line-height: 1.2; 8212 color: #161716; 8213 @media only screen and (max-width: 767px){ 8214 font-size: 12px; 8215 } 8216 @media (min-width: 768px) { 8217 font-size: 16px; 8218 line-height: 1.2; 8219 } 8220 } 8221 8222 & a { 8223 @media (max-width: 767px) { 8224 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 8225 } 8226 } 8227 } 8228 8229 .product-card--weight { 8230 font-family: var(--olay-font-inter); 8231 font-weight: 500; 8232 font-size: 10px; 8233 line-height: 1.21; 8234 color: #707070; 8235 padding-block: 2%; 8236 8237 @media only screen and (max-width: 767px){ 8238 font-size: 8px; 8239 line-height: 1.21; 8240 } 8241 } 8242
8243 .product-card--details-wrapper .product-rating--root { 8244 &:empty { 8245 display: none; 8246 } 8247 8248 .product-card--root[data-text-layout='center'] & { 8249 justify-content: center; 8250 } 8251 8252 .product-card--root[data-text-layout='left'] & { 8253 justify-content: flex-start; 8254 } 8255 8256 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 8257 @media (min-width: 768px) { 8258 justify-content: flex-start; 8259 } 8260 } 8261 8262 .product-card--root[data-text-layout='right'] & { 8263 justify-content: flex-end; 8264 8265 @media (min-width: 1024px) { 8266 justify-content: flex-start; 8267 } 8268 } 8269 } 8270 8271 /* Swatches */ 8272 8273 .product-card--swatches--column-view { 8274 .product-card--root[data-text-layout='center'] & { 8275 width: fit-content; 8276 margin: 0 auto; 8277 } 8278 8279 .product-card--root:not([data-text-layout='center']) & { 8280 @media (min-width: 1024px) { 8281 display: none; 8282 } 8283 } 8284 8285 .product-card--root[data-text-layout='right'] & .swatches--container { 8286 justify-content: flex-end; 8287 } 8288 } 8289 8290 .product-card--swatches--horizontal-view { 8291 .product-card--root[data-text-layout='center'] & { 8292 display: none; 8293 } 8294 8295 .product-card--root:not([data-text-layout='center']) & { 8296 display: none; 8297 8298 @media (min-width: 1024px) { 8299 display: block; 8300 } 8301 } 8302 } 8303 8304 /* disables AR when products viewed from quick-add drawer */ 8305 .drawer--side[data-side='right'] .product-model--button[data-item] { 8306 display: none; 8307 } 8308 8309 /* Buy Buttons Section - Figma Specs */ 8310 .product-card--form { 8311 width: 100%; 8312 } 8313 8314 .product-card--add-to-cart-button, 8315 .product-card--root .product-buy-buttons--primary { 8316 width: 100%; 8317 box-sizing: border-box; 8318 height: auto; 8319 padding: 14px 16px; 8320 display: inline-flex; 8321 align-items: center; 8322 justify-content: center; 8323 background: #FFFFFF; 8324 border: 1px solid #D8D8D8; 8325 font-family: 'Boston', var(--olay-font-inter); 8326 font-weight: 500; 8327 font-size: 16px; 8328 line-height: 1; 8329 color: #161716; 8330 text-transform: uppercase; 8331 cursor: pointer; 8332 transition: all 0.3s ease; 8333 text-align: center; 8334 border-radius: 8px; 8335 @media (min-width: 1020px) and (max-width: 1080px) { 8336 font-size: 14px; 8337 } 8338 @media only screen and (max-width: 767px){ 8339 font-family: var(--olay-font-inter); 8340 font-size: 12px; 8341 border-radius: 4px; 8342 letter-spacing: 0.01em; 8343 padding: 12px 8px; 8344 } 8345 8346 &[disabled] { 8347 opacity: 0.5; 8348 cursor: not-allowed; 8349 background: #F4F4F4; 8350 @media only screen and (max-width: 767px){ 8351 font-size: 12px; 8352 width: 100%; 8353 } 8354 } 8355 8356 &[aria-busy='true'] { 8357 opacity: 0.7; 8358 8359 .product-buy-buttons--cta-text { 8360 opacity: 0; 8361 } 8362 8363 .product-buy-buttons--spinner { 8364 opacity: 1; 8365 } 8366 8367 .product-buy-buttons--spinner { 8368 opacity: 1; 8369 } 8370 8371 } 8372 8373 8374 &:before { 8375 border: none !important; 8376 } 8377 8378 .product-buy-buttons--spinner { 8379 opacity: 0; 8380 @media only screen and (max-width: 767px){ 8381 position: absolute; 8382 right: 65px; 8383 display: inline-block; 8384 top: -5px; 8385 } 8386 } 8387 } 8388 8389 @media only screen and (max-width: 767px){ 8390 .product-card--early-access-login { 8391 margin-top: 33% !important; 8392 } 8393 } 8394 8395 .product-card--root .product-buy-buttons--primary { 8396 @media only screen and (min-width: 768px){ 8397 padding: 2px 16px; 8398 } 8399 } 8400 8401 .product-card--root .product-buy-buttons--smart, 8402 .product-card--root .product-buy-buttons--buy-now, 8403 .product-card--root .product-buy-buttons--drawer { 8404 display: none; 8405 } 8406 8407 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 8408 .product-card--early-access-login { 8409 display: flex; 8410 flex-direction: row; 8411 align-items: center; 8412 margin-top: var(--spacing--4); 8413 width: 100%; 8414 } 8415 .product-card--early-access-login .product-card--add-to-cart-button { 8416 flex: 1; 8417 } 8418 8419 .club-olay-badge { 8420 display: flex; 8421 align-items: center; 8422 justify-content: center; 8423 padding: 8px 12px; 8424 background-color: #FFD700; 8425 border-radius: 4px; 8426 margin-bottom: 12px; 8427 } 8428 8429 .club-olay-badge--text { 8430 font-family: var(--olay-font-inter, Inter, sans-serif); 8431 font-size: 12px; 8432 font-weight: 600; 8433 color: #161716; 8434 text-align: center; 8435 } 8436 8437 @media (max-width: 767px) { 8438 .club-olay-badge { 8439 padding: 6px 10px; 8440 } 8441 8442 .club-olay-badge--text { 8443 font-size: 7px; 8444 letter-spacing: 0; 8445 } 8446 } 8447 8448@media only screen and (min-width:635px) and (max-width: 820px) { 8449 .product-buy-buttons--cta-text { 8450 font-size: 11px !important; 8451 } 8452} 8453</style><!-- snippets/product-card.liquid --><div 8454 class="product-card--root" 8455 data-handle="olay-complete-daily-facial-moisturizer-with-sunscreen-broad-spectrum-spf-40" 8456 data-text-layout="left" 8457 data-aspect-ratio="square" 8458 8459 8460> 8461 <a 8462 href="/products/olay-complete-daily-facial-moisturizer-with-sunscreen-broad-spectrum-spf-40" 8463 class="product-card--image-wrapper" 8464 tabindex="-1" 8465 ><div 8466 class="product--labels product-badges" 8467 data-item="overline" 8468 data-text-color="white" 8469 ><div 8470 class="product--label" 8471 data-background-color="dark" 8472 data-label-type="spf" 8473 >SPF</div></div><div class="product-card--image-slider"><img src="//www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=1280" alt="Olay Complete + Daily Facial Moisturizer with Sunscreen
8473SPF 40" srcset="//www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/MOI_Olay_Complete_SPF40_6oz__90154.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40"><img src="//www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=1280" alt="Olay Complete SPF 40 new and old design bottles. Same product, new look." srcset="//www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI01_EN_Complete_SPF40_PackConversion_AMZ__29884.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--hover-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete SPF 40 new and old design bottles. Same product, new look."><img src="//www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=1280" alt="Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle. No compromises. SPF40 uva/uvb protection. Safe for sensitive skin. All day hydration. No white cast" srcset="//www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI02_EN_Complete_SPF40_MultiBenefit_Value_AMZ__31483.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete + Daily Facial Moisturizer with Sunscreen
8473SPF 40 bottle. No compromises. SPF40 uva/uvb protection. Safe for sensitive skin. All day hydration. No white cast"><img src="//www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=1280" alt="Model posing and smiling. Protects against the #1 cause of skin aging- the sun" srcset="//www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI03_EN_Complete_SPF40_MultiBenefit_AMZ__42647.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model posing and smiling. Protects against the #1 cause of skin aging- the sun"><img src="//www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=1280" alt="Aloe ingredient. Nourishes skin's natural moisture barrier. Aloe, ceramides, vitamin E" srcset="//www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI04_EN_Complete_SPF40_Formula_AMZ__27245.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Aloe ingredient. Nourishes skin's natural moisture barrier. Aloe, ceramides, vitamin E"><img src="//www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=1280" alt="Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle in hand. SPF 40 protects from 97.5% of UVB rays" srcset="//www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI05_EN_Complete_SPF40_Trial_AMZ__41425.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay Complete + Daily Facial Moisturizer with Sunscreen
8473SPF 40 bottle in hand. SPF 40 protects from 97.5% of UVB rays"><img src="//www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=1280" alt="Texture swipe. Lightweight sunscreen designed for sensitive skin. Non-comedogenic. No fragrance. No parabens. No Phthalates" srcset="//www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ_ALT__49914.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Texture swipe. Lightweight sunscreen designed for sensitive skin. Non-comedogenic. No fragrance. No parabens. No Phthalates"><img src="//www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=1280" alt="Model holding a drop on Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 on finger. Lightweight sunscreen designed for sensitive skin. Non-comedogenic. No fragrance. No parabens. No Phthalates" srcset="//www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI06_EN_Complete_SPF40_Safety_AMZ__11600.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model holding a drop on Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 on finger. Lightweight sunscreen designed for sensitive skin. Non-comedogenic. No fragrance. No parabens. No Phthalates"><img src="//www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=1280" alt="Model holding Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle. National medical association dermatology accepted." srcset="//www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&
8473width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI07_EN_Complete_SPF40_Trust_AMZ__95424.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model holding Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle. National medical association dermatology accepted."><img src="//www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=1280" alt="Model applying Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 to face. 98% of women prefer Olay Complete + SPF50 to the leading brand* *based off past 12 months xAOC sales data" srcset="//www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI08_EN_Complete_SPF40_Performance_AMZ_copy__62785.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model applying Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 to face. 98% of women prefer Olay Complete + SPF50 to the leading brand* *based off past 12 months xAOC sales data"><img src="//www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=1280" alt="Olay cleansing Melts Vitamin C 32 count box and Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle. Brighten up your routine." srcset="//www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI09_EN_Complete_SPF40_Regimen_AMZ_copy__60771.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Olay cleansing Melts Vitamin C 32 count box and Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle. Brighten up your routine."><img src="//www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=1280" alt="Model holding Olay Complete + Daily Facial Moisturizer with Sunscreen
8473SPF 40 bottle. Only Olay over 70 years of cellular science research." srcset="//www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=200 200w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=300 300w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=400 400w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=500 500w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=600 600w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=700 700w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=800 800w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=900 900w, //www.olay.com/cdn/shop/files/Olay_SI10_EN_Complete_SPF40_OnlyOlay_AMZ__11035.jpg?v=1778858090&width=1000 1000w" width="1280" height="1280" loading="lazy" class="product-card--slider-image" sizes="(max-width: 767px) 50vw, 25vw" title="Model holding Olay Complete + Daily Facial Moisturizer with Sunscreen SPF 40 bottle. Only Olay over 70 years of cellular science research."></div><div class="product-card--slider-dots"><button 8474 type="button" 8475 class="slider-dot active" 8476 data-slide="0" 8477 aria-label="Go to slide 1" 8478 aria-current="true" 8479 ></button><button 8480 type="button" 8481 class="slider-dot" 8482 data-slide="1" 8483 aria-label="Go to slide 2" 8484 8485 ></button><button 8486 type="button" 8487 class="slider-dot" 8488 data-slide="2" 8489 aria-label="Go to slide 3" 8490 8491 ></button><button 8492 type="button" 8493 class="slider-dot" 8494 data-slide="3" 8495 aria-label="Go to slide 4" 8496 8497 ></button><button 8498 type="button" 8499 class="slider-dot" 8500 data-slide="4" 8501 aria-label="Go to slide 5" 8502 8503 ></button><button 8504 type="button" 8505 class="slider-dot" 8506 data-slide="5" 8507 aria-label="Go to slide 6" 8508 8509 ></button><button 8510 type="button" 8511 class="slider-dot" 8512 data-slide="6" 8513 aria-label="Go to slide 7" 8514 8515 ></button><button 8516 type="button" 8517 class="slider-dot" 8518 data-slide="7" 8519 aria-label="Go to slide 8" 8520 8521 ></button><button 8522 type="button" 8523 class="slider-dot" 8524 data-slide="8" 8525 aria-label="Go to slide 9" 8526 8527 ></button><button 8528 type="button" 8529 class="slider-dot" 8530 data-slide="9" 8531 aria-label="Go to slide 10" 8532 8533 ></button><button 8534 type="button" 8535 class="slider-dot" 8536 data-slide="10" 8537 aria-label="Go to slide 11" 8538 8539 ></button><button 8540 type="button" 8541 class="slider-dot" 8542 data-slide="11" 8543 aria-label="Go to slide 12" 8544 8545 ></button></div><!-- snippets/product-quick-add.liquid --></a> 8546 8547 <div class="product-card--details"> 8548 <div class="product-details--title-wrapper"> 8549 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 8550 Face Moisturizer - Protection 8551 </div></div> 8552 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609210679"></div> 8553 <!-- snippets/product-rating.liquid --> 8554</div> 8555 8556 </div>
8557 <div class="product-card--details-wrapper"><a href="/products/olay-complete-daily-facial-moisturizer-with-sunscreen-broad-spectrum-spf-40" class="product-card--title-link"> 8558 <p class="product-card--title" data-item="heading">Olay Complete + Daily Facial Moisturizer with Sunscreen Broad Spectrum SPF 40</p> 8559 </a><p class="product-card--weight"> 8560 8561 $4.44/ oz 8562 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="6"> 8563 8564 </p> 8565 </div> 8566 8567 8568<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 8569 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $26.65"> 8570 8571$26.65 8572</span></div></div> 8573 8574<form method="post" action="/cart/add" id="search" accept-charset="UTF-8" class="product-card--form" enctype="multipart/form-data" data-product-card-form="true"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="â" /><input type="hidden" name="quantity" value="1"> 8575 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 8576<product-buy-buttons-element 8577 class="product-buy-buttons--root" 8578 data-id="search" 8579 data-cart-type="drawer" 8580 data-translations="" 8581 data-container="block" 8582 ><button 8583 class="product-buy-buttons--primary" 8584 type="submit" 8585 aria-busy="false" 8586 data-text="Add to cart" 8587 availability_disabled="false" 8588 title="click here to add Olay Complete + Daily Facial Moisturizer with Sunscreen Broad Spectrum SPF 40 to bag" 8589 8590 data-item="button-1" 8591 8592> 8593 8594 <span class="product-buy-buttons--cta-text">Add to cart</span> 8595 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 8596 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 8597 </svg></span> 8598 </button> 8599<input 8600 type="hidden" 8601 class="product-buy-buttons--input" 8602 name="id" 8603 data-id="44071654621227" 8604 data-sku="00075609210679" 8605 data-management="shopify" 8606 data-policy="deny" 8607 data-quantity="93" 8608 value="44071654621227" 8609 > 8610 8611
8611<script type="application/json"> 8612 { 8613 "add_to_cart": "Add to cart", 8614 "out_of_stock": "Out of stock", 8615 "unavailable": "Unavailable" 8616 } 8617 </script>
8617 8618 </product-buy-buttons-element><style data-shopify> 8619.ps-widget[ps-sku]::before { 8620 content: ''; 8621 display: inline-block; 8622 width: 18px; 8623 height: 18px; 8624 margin-left: 8px; 8625 margin-right: 8px; 8626 background-color: currentColor; 8627 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 8628 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 8629 mask-size: contain; 8630 -webkit-mask-size: contain; 8631 vertical-align: text-bottom; 8632 8633 @media only screen and (max-width: 767px) { 8634 width: 16px; 8635 height: 16px; 8636 margin-left: 0; 8637 } 8638 8639} 8640 8641.buy-now-wrap { 8642 flex-basis: 100%; 8643 width: 0; 8644 display: flex; 8645 gap: 16px; 8646} 8647button.product-buy-buttons--buy-now, 8648.ps-widget { 8649 background: white; 8650 color: black; 8651 font-family: var(--olay-font-inter); 8652 border: 1px solid var(--olay-neutral-30); 8653} 8654button.product-buy-buttons--buy-now:before { 8655 border: none; 8656} 8657button.product-buy-buttons--buy-now:focus-visible { 8658 outline: 2px solid var(--olay-color-primary); 8659 outline-offset: 2px; 8660 border-radius: var(--radius-sm); 8661} 8662button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 8663 outline: none; 8664} 8665 .product-buy-buttons--root { 8666 position: relative; 8667 gap: var(--spacing--3); 8668 8669 } 8670 product-buy-buttons-element.product-buy-buttons--root { 8671 display: flex; 8672 flex-direction: row; 8673 flex-wrap: wrap; 8674 align-items: center; 8675 margin-top: var(--spacing--4); 8676 } 8677 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 8678 flex-shrink: 0; 8679 } 8680 button.product-buy-buttons--primary { 8681 flex: 1; 8682 width: auto; 8683 display: flex; 8684 align-items: center; 8685 justify-content: center; 8686 gap: var(--spacing--2); 8687 } 8688 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 8689 width: 50%; 8690 flex-basis: 49%; 8691 } 8692 .product-buy-buttons--cart-icon { 8693 height: 12px; 8694 width: auto; 8695 flex-shrink: 0; 8696 filter: brightness(0) invert(1); 8697 @media screen and (min-width: 768px) { 8698 height: 15px; 8699 } 8700 } 8701 8702 .product-buy-buttons--buy-now, 8703 .product-buy-buttons--primary { 8704 width: 100%; 8705 8706 &[aria-busy='true'] { 8707 .product-buy-buttons--cta-text, 8708 .product-buy-buttons--buy-now-text { 8709 opacity: 0; 8710 } 8711 } 8712 8713 &[aria-busy='false'] { 8714 .product-buy-buttons--spinner { 8715 opacity: 0; 8716 } 8717 } 8718 } 8719 8720 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 8721 color: black !important; 8722 background-color: var(--button--bg-color-4) !important; 8723 border-color: var(--button--border-color-4) !important; 8724 font-family: var(--olay-font-inter) !important; 8725 border: 1px solid #D8D8D8 !important; 8726 font-size: 16px !important; 8727 border-width: 1px !important; 8728 padding: 12px 20px !important; 8729 background: white; 8730 border-radius: var(--button--radius) !important; 8731 display: inline-flex; 8732 align-items: normal; 8733 justify-content: space-between; 8734 } 8735 8736 8737 8738 @media only screen and (max-width: 767px) { 8739 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 8740 padding: 12px 0 !important; 8741 font-size: 12px !important; 8742 } 8743 .buy-now-wrap { 8744 flex-basis: 99%; 8745 gap: 10px; 8746 } 8747 } 8748 8749 .product-buy-buttons--smart { 8750 user-select: none; 8751 width: 100%; 8752 8753 &[data-style='button-1'] { 8754 --button--color: var(--button--color-1); 8755 --button--bg-color: var(--button--bg-color-1); 8756 --button--border-color: var(--button--border-color-1); 8757 } 8758 8759 &[data-style='button-2'] { 8760 --button--color: var(--button--color-2); 8761 --button--bg-color: var(--button--bg-color-2); 8762 --button--border-color: var(--button--border-color-2); 8763 } 8764 8765 &[data-style='button-3'] { 8766 --button--color: var(--button--color-3); 8767 --button--bg-color: var(--button--bg-color-3); 8768 --button--border-color: var(--button--border-color-3); 8769 } 8770 8771 &[data-style='button-4'] { 8772 --button--color: var(--button--color-4); 8773 --button--bg-color: var(--button--bg-color-4); 8774 --button--border-color: var(--button--border-color-4); 8775 } 8776 8777 .shopify-payment-button__button--unbranded { 8778 width: 100%; 8779 8780 &:hover:not([disabled]) { 8781 background-color: var(--button--bg-color); 8782 } 8783 } 8784 8785 .shopify-payment-button__more-options { 8786 margin: var(--spacing--item) 0 0 0; 8787 text-decoration: underline; 8788 color: var(--color--body); 8789 8790 &:is(:hover, :focus-visible) { 8791 background-color: unset; 8792 color: var(--color--body); 8793 } 8794 } 8795 8796 &[aria-hidden='true'] { 8797 pointer-events: none; 8798 opacity: 0.7; 8799 8800 .shopify-payment-button__button--unbranded { 8801 pointer-events: none; 8802 } 8803 } 8804 8805 &:empty { 8806 display: none; 8807 } 8808 } 8809 8810 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 8811 8812 /* Drawer info styles moved to assets/sticky-product-bar.css */ 8813 8814 .afterpay-section { 8815 width: 100%; 8816 margin-top: var(--spacing--2); 8817 } 8818 8819 @media screen and (max-width: 767px) { 8820 .afterpay-section { 8821 margin-top: var(--spacing--1); 8822 } 8823 } 8824 8825 .club-olay-badge-plp { 8826 display: flex; 8827 align-items: center; 8828 justify-content: center; 8829 padding: 8px 12px; 8830 background-color: #FFD700; 8831 border-radius: 4px; 8832 margin-bottom: 12px; 8833 width: 100%; 8834 8835 } 8836 8837 .club-olay-badge-plp--text { 8838 font-family: var(--olay-font-inter, Inter, sans-serif); 8839 font-size: 12px; 8840 font-weight: 600; 8841 color: #161716; 8842 text-align: center; 8843 } 8844 8845 @media (max-width: 767px) { 8846 .club-olay-badge-plp { 8847 padding: 6px 10px; 8848 } 8849 8850 .club-olay-badge-plp--text { 8851 font-size: 10px; 8852 } 8853 } 8854</style><input type="hidden" name="product-id" value="7918630666283" /></form></div> 8855</div> 8856 8857<style data-shopify> 8858.product_form_subtitle.plp-card { 8859 font-size: 10px; 8860} 8861 8862button.product-card--add-to-cart-button.empty { 8863 padding: 0 40px; 8864} 8865.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 8866 @media only screen and (min-width: 767px) { 8867 height: auto !important; 8868 } 8869} 8870.main-collection--grid span.product-buy-buttons--cta-text { 8871 @media only screen and (max-width: 767px) { 8872 padding: 0 40px; 8873 } 8874} 8875.product_form_subtitle { 8876 font-family: Inter; 8877 font-weight: 500; 8878 font-style: Medium; 8879 font-size: 16px; 8880 line-height: 100%; 8881 letter-spacing: 0%; 8882 color: #161716; 8883 text-transform: uppercase; 8884 margin-bottom: 8px; 8885 margin-top: 8px; 8886 8887 @media (max-width: 767px) { 8888 font-size: 10px; 8889 margin-top: 0; 8890 margin-bottom: 0; 8891 } 8892} 8893.product_subtitle{ 8894 font-family: var(--olay-font-inter); 8895 font-weight: 500; 8896 font-size: 10px; 8897 line-height: 1.2; 8898 letter-spacing: 0.01em; 8899 color: #161716; 8900 text-transform: uppercase; 8901 text-align: left; 8902 width: 100%; 8903 @media only screen and (max-width: 767px){ 8904 font-size: 8px; 8905 } 8906} 8907 .product-card--root { 8908 display: flex; 8909 flex-direction: column; 8910 gap: 20px; 8911 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 8912 width: 100%; 8913 text-align: var(--text-align, center); 8914 padding: 8px; 8915 background: #FFFFFF; 8916 border-radius: 8px; 8917 @media only screen and (max-width: 767px){ 8918 padding: 4px; 8919 gap: 8px; 8920 border-radius: 8px; 8921 } 8922 8923 @media (min-width: 768px) { 8924 border-radius: 12px; 8925 max-width: 348px; 8926 } 8927 &[data-text-layout='left'] { 8928 --text-align: left; 8929 } 8930 8931 &[data-text-layout='right'] { 8932 --text-align: right; 8933 8934 @media (min-width: 1024px) { 8935 --text-align: left; 8936 } 8937 } 8938 8939 > a { 8940 display: block; 8941 width: 100%; 8942 } 8943 8944 @media (max-width: 767px) { 8945 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 8946 --image--radius: 0; 8947 } 8948 } 8949 } 8950 8951 /* Labels & Badges */ 8952 8953 .product--labels { 8954 display: flex; 8955 flex-wrap: wrap; 8956 gap: 4px; 8957 position: absolute; 8958 top: 6px; 8959 left: 6px; 8960 right: 8px; 8961 z-index: 2; 8962 justify-content: flex-start;
8963 align-items: flex-start; 8964 8965 @media (max-width: 767px) { 8966 font-size: 9px; 8967 } 8968 } 8969 8970 .product--label { 8971 display: block; 8972 width: max-content; 8973 line-height: 1.21; 8974 font-family: var(--olay-font-inter); 8975 font-weight: 500; 8976 font-size: 10px; 8977 letter-spacing: 0.01em; 8978 text-transform: uppercase; 8979 padding: 4px 8px; 8980 border-radius: 0px; 8981 background-color: #161716; 8982 color: #F4F4F4; 8983 line-height: 1em; 8984 8985 @media (min-width: 768px) { 8986 font-size: 12px; 8987 } 8988 @media (max-width: 767px) { 8989 font-size: 8px; 8990 padding: 2px 4px !important; 8991 } 8992 8993 &:empty, 8994 &:has(span:empty) { 8995 display: none; 8996 } 8997 8998 &:last-child { 8999 height: fit-content; 9000 } 9001 9002 } 9003 9004 /* Image & Slider */ 9005 9006 .product-card--image-wrapper { 9007 width: 100%; 9008 max-width: 100%; 9009 display: flex; 9010 flex-direction: column; 9011 align-items: center; 9012 position: relative; 9013 border-radius: 8px; 9014 overflow: visible; 9015 9016 @media (min-width: 768px) { 9017 border-radius: 8px; 9018 } 9019 } 9020 9021 .product-card--image-slider { 9022 width: 100%; 9023 position: relative; 9024 overflow: hidden; 9025 border-radius: 8px; 9026 background: #F4F4F4; 9027 aspect-ratio: 1 / 1; 9028 @media only screen and (max-width: 767px){ 9029 border-radius: 4px; 9030 } 9031 } 9032 9033 .product-card--image, 9034 .product-card--slider-image { 9035 border-radius: 8px; 9036 opacity: 1; 9037 transition: opacity 0.5s; 9038 width: 100%; 9039 /* height: auto; */ 9040 object-fit: cover; 9041 9042 @media (min-width: 768px) { 9043 border-radius: 8px; 9044 } 9045 9046 @media only screen and (max-width: 767px){ 9047 border-radius: 4px; 9048 } 9049 9050 &[aria-hidden='true'] { 9051 opacity: 0; 9052 } 9053 } 9054 9055 .product-card--image { 9056 @media (hover: hover) { 9057 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 9058 opacity: 0; 9059 } 9060 } 9061 } 9062 9063 .product-card--hover-image { 9064 position: absolute; 9065 top: 0; 9066 left: 0; 9067 opacity: 0; 9068 height: 100%; 9069 width: 100%; 9070 transition: opacity 0.5s; 9071 overflow: hidden; 9072 border-radius: 8px; 9073 9074 @media (min-width: 768px) { 9075 border-radius: 8px; 9076 } 9077 9078 @media only screen and (max-width: 767px){ 9079 border-radius: 4px; 9080 } 9081 9082 @media (hover: hover) { 9083 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 9084 opacity: 1; 9085 } 9086 } 9087 } 9088 9089 .product-card--slider-image { 9090 position: absolute; 9091 top: 0; 9092 left: 0; 9093 width: 100%; 9094 height: 100%; 9095 object-fit: cover; 9096 opacity: 0; 9097 pointer-events: none; 9098 9099 &.active { 9100 opacity: 1; 9101 pointer-events: auto; 9102 } 9103 } 9104 9105 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 9106 9107 .slider-dot { 9108 width: 27px; 9109 height: 2px; 9110 border-radius: 1px; 9111 background-color: #D8D8D8; 9112 cursor: pointer; 9113 transition: background-color 0.3s ease; 9114 border: none; 9115 padding: 0; 9116 9117 &.active { 9118 background-color: #161716; 9119 } 9120 9121 &:hover { 9122 background-color: #707070; 9123 } 9124 } 9125 9126 /* Detail */ 9127 9128 .product-card--details-wrapper { 9129 display: flex; 9130 gap: 8px; 9131 flex-direction: column; 9132 width: 85%; 9133 @media only screen and (max-width: 767px){ 9134 width: 100%; 9135 gap: 4px; 9136 } 9137 } 9138 9139 .product-card--details { 9140 display: flex; 9141 flex-direction: column; 9142 gap: 8px; 9143 width: 100%; 9144 padding: 0 8px 12px; 9145 @media only screen and (max-width: 767px){ 9146 padding: 0 4px 4px; 9147 gap: 6px; 9148 } 9149 9150 .product-card--root[data-text-layout='left'] & { 9151 flex-direction: column; 9152 align-items: flex-start; 9153 } 9154 9155 .product-card--root[data-text-layout='right'] & { 9156 flex-direction: column; 9157 align-items: flex-end; 9158 } 9159 9160 @media (min-width: 768px) { 9161 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 9162 align-items: baseline; 9163 justify-content: space-between; 9164 } 9165 } 9166 9167 @media (max-width: 767px) { 9168 max-width: var(--max-width--x-small); 9169 margin: 0 auto; 9170 9171 [data-mobile-full-width='true'] & { 9172 padding-left: var(--spacing--item); 9173 } 9174 } 9175 } 9176 9177 /* Price */ 9178 9179 .product-card--price-wrapper { 9180 .product-card--root:not([data-text-layout='center']) & { 9181 align-items: center; 9182 } 9183 } 9184 9185 .product--price-container { 9186 display: flex; 9187 flex-direction: row; 9188 font-family: 'Boston', var(--olay-font-inter); 9189 font-weight: 600; 9190 font-size: 16px; 9191 line-height: 1; 9192 letter-spacing: 0.01em; 9193 color: #161716; 9194 cursor: default; 9195 @media only screen and (max-width: 767px){ 9196 font-family: var(--olay-font-inter); 9197 font-size: 16px; 9198 gap: 4px; 9199 } 9200 9201 @media (min-width: 768px) { 9202 font-size: 18px; 9203 } 9204 } 9205 9206 .product--price-wrapper { 9207 display: flex; 9208 gap: var(--spacing--0); 9209 9210 .product-card--root[data-text-layout='center'] & { 9211 justify-content: center; 9212 } 9213 9214 .product-card--root[data-text-layout='right'] & { 9215 text-align: right; 9216 justify-content: flex-end; 9217 flex-wrap: wrap; 9218 } 9219 9220 .product-card--root[data-text-layout='left'] & { 9221 flex-wrap: wrap; 9222 9223 @media (min-width: 1024px) { 9224 text-align: right; 9225 justify-content: flex-end; 9226 } 9227 } 9228 9229 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 9230 @media (min-width: 768px) { 9231 text-align: right; 9232 justify-content: end; 9233 } 9234 } 9235 9236 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 9237 &.club-olay-active { 9238 .product--price { 9239 order: 1; 9240 } 9241 9242 .product--compare-price { 9243 order: 2; 9244 } 9245 9246 .club-olay-savings { 9247 order: 3; 9248 width: 100%; 9249 } 9250 } 9251 } 9252 9253 .product--compare-price { 9254 text-decoration: line-through; 9255 font-family: var(--olay-font-inter); 9256 font-weight: 400; 9257 font-size: 16px; 9258 color: #6B6B6B; 9259 line-height: 1; 9260 } 9261 9262 .product--unit-price-container { 9263 padding: 0; 9264 font-family: var(--olay-font-inter); 9265 font-weight: 400; 9266 font-size: 10px; 9267 color: #6B6B6B; 9268 line-height: 1; 9269 align-self: center !important; 9270 margin-left: 8px; 9271 9272 .product-card--root:not([data-text-layout='center']) & { 9273 @media (min-width: 1024px) { 9274 align-self: flex-end; 9275 } 9276 } 9277 9278 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 9279 @media (min-width: 768px) { 9280 align-self: flex-end; 9281 } 9282 } 9283 } 9284 9285 .product--from[data-item] { 9286 text-transform: capitalize; 9287 padding: 0; 9288 flex-basis: initial; 9289 } 9290 9291 /* Info */ 9292 9293 .product-card--vendor { 9294 word-break: break-word; 9295 font-family: var(--olay-font-inter); 9296 font-weight: 500; 9297 font-size: 10px; 9298 line-height: 1; 9299 letter-spacing: 0.01em; 9300 color: #161716; 9301 text-transform: uppercase; 9302 9303 [data-text-color='white'] & { 9304 color: white; 9305 } 9306 9307 & a { 9308 color: var(--color--body--light); 9309 9310 @media (max-width: 767px) { 9311 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 9312 } 9313 } 9314 } 9315 9316 .product-card--title { 9317 .product-card--root & { 9318 word-break: break-word; 9319 font-family: 'Boston', var(--olay-font-inter); 9320 font-weight: 700; 9321 font-size: 14px; 9322 line-height: 1.2; 9323 color: #161716; 9324 @media only screen and (max-width: 767px){ 9325 font-size: 12px; 9326 } 9327 @media (min-width: 768px) { 9328 font-size: 16px; 9329 line-height: 1.2; 9330 } 9331 } 9332 9333 & a { 9334 @media (max-width: 767px) { 9335 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 9336 } 9337 } 9338 } 9339 9340 .product-card--weight { 9341 font-family: var(--olay-font-inter); 9342 font-weight: 500; 9343 font-size: 10px; 9344 line-height: 1.21; 9345 color: #707070; 9346 padding-block: 2%; 9347 9348 @media only screen and (max-width: 767px){ 9349 font-size: 8px; 9350 line-height: 1.21; 9351 } 9352 } 9353
9354 .product-card--details-wrapper .product-rating--root { 9355 &:empty { 9356 display: none; 9357 } 9358 9359 .product-card--root[data-text-layout='center'] & { 9360 justify-content: center; 9361 } 9362 9363 .product-card--root[data-text-layout='left'] & { 9364 justify-content: flex-start; 9365 } 9366 9367 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 9368 @media (min-width: 768px) { 9369 justify-content: flex-start; 9370 } 9371 } 9372 9373 .product-card--root[data-text-layout='right'] & { 9374 justify-content: flex-end; 9375 9376 @media (min-width: 1024px) { 9377 justify-content: flex-start; 9378 } 9379 } 9380 } 9381 9382 /* Swatches */ 9383 9384 .product-card--swatches--column-view { 9385 .product-card--root[data-text-layout='center'] & { 9386 width: fit-content; 9387 margin: 0 auto; 9388 } 9389 9390 .product-card--root:not([data-text-layout='center']) & { 9391 @media (min-width: 1024px) { 9392 display: none; 9393 } 9394 } 9395 9396 .product-card--root[data-text-layout='right'] & .swatches--container { 9397 justify-content: flex-end; 9398 } 9399 } 9400 9401 .product-card--swatches--horizontal-view { 9402 .product-card--root[data-text-layout='center'] & { 9403 display: none; 9404 } 9405 9406 .product-card--root:not([data-text-layout='center']) & { 9407 display: none; 9408 9409 @media (min-width: 1024px) { 9410 display: block; 9411 } 9412 } 9413 } 9414 9415 /* disables AR when products viewed from quick-add drawer */ 9416 .drawer--side[data-side='right'] .product-model--button[data-item] { 9417 display: none; 9418 } 9419 9420 /* Buy Buttons Section - Figma Specs */ 9421 .product-card--form { 9422 width: 100%; 9423 } 9424 9425 .product-card--add-to-cart-button, 9426 .product-card--root .product-buy-buttons--primary { 9427 width: 100%; 9428 box-sizing: border-box; 9429 height: auto; 9430 padding: 14px 16px; 9431 display: inline-flex; 9432 align-items: center; 9433 justify-content: center; 9434 background: #FFFFFF; 9435 border: 1px solid #D8D8D8; 9436 font-family: 'Boston', var(--olay-font-inter); 9437 font-weight: 500; 9438 font-size: 16px; 9439 line-height: 1; 9440 color: #161716; 9441 text-transform: uppercase; 9442 cursor: pointer; 9443 transition: all 0.3s ease; 9444 text-align: center; 9445 border-radius: 8px; 9446 @media (min-width: 1020px) and (max-width: 1080px) { 9447 font-size: 14px; 9448 } 9449 @media only screen and (max-width: 767px){ 9450 font-family: var(--olay-font-inter); 9451 font-size: 12px; 9452 border-radius: 4px; 9453 letter-spacing: 0.01em; 9454 padding: 12px 8px; 9455 } 9456 9457 &[disabled] { 9458 opacity: 0.5; 9459 cursor: not-allowed; 9460 background: #F4F4F4; 9461 @media only screen and (max-width: 767px){ 9462 font-size: 12px; 9463 width: 100%; 9464 } 9465 } 9466 9467 &[aria-busy='true'] { 9468 opacity: 0.7; 9469 9470 .product-buy-buttons--cta-text { 9471 opacity: 0; 9472 } 9473 9474 .product-buy-buttons--spinner { 9475 opacity: 1; 9476 } 9477 9478 .product-buy-buttons--spinner { 9479 opacity: 1; 9480 } 9481 9482 } 9483 9484 9485 &:before { 9486 border: none !important; 9487 } 9488 9489 .product-buy-buttons--spinner { 9490 opacity: 0; 9491 @media only screen and (max-width: 767px){ 9492 position: absolute; 9493 right: 65px; 9494 display: inline-block; 9495 top: -5px; 9496 } 9497 } 9498 } 9499 9500 @media only screen and (max-width: 767px){ 9501 .product-card--early-access-login { 9502 margin-top: 33% !important; 9503 } 9504 } 9505 9506 .product-card--root .product-buy-buttons--primary { 9507 @media only screen and (min-width: 768px){ 9508 padding: 2px 16px; 9509 } 9510 } 9511 9512 .product-card--root .product-buy-buttons--smart, 9513 .product-card--root .product-buy-buttons--buy-now, 9514 .product-card--root .product-buy-buttons--drawer { 9515 display: none; 9516 } 9517 9518 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 9519 .product-card--early-access-login { 9520 display: flex; 9521 flex-direction: row; 9522 align-items: center; 9523 margin-top: var(--spacing--4); 9524 width: 100%; 9525 } 9526 .product-card--early-access-login .product-card--add-to-cart-button { 9527 flex: 1; 9528 } 9529 9530 .club-olay-badge { 9531 display: flex; 9532 align-items: center; 9533 justify-content: center; 9534 padding: 8px 12px; 9535 background-color: #FFD700; 9536 border-radius: 4px; 9537 margin-bottom: 12px; 9538 } 9539 9540 .club-olay-badge--text { 9541 font-family: var(--olay-font-inter, Inter, sans-serif); 9542 font-size: 12px; 9543 font-weight: 600; 9544 color: #161716; 9545 text-align: center; 9546 } 9547 9548 @media (max-width: 767px) { 9549 .club-olay-badge { 9550 padding: 6px 10px; 9551 } 9552 9553 .club-olay-badge--text { 9554 font-size: 7px; 9555 letter-spacing: 0; 9556 } 9557 } 9558 9559@media only screen and (min-width:635px) and (max-width: 820px) { 9560 .product-buy-buttons--cta-text { 9561 font-size: 11px !important; 9562 } 9563} 9564</style><!-- snippets/product-card.liquid --><div 9565 class="product-card--root" 9566 data-handle="olay-collagen-peptide-visibly-firming-serum" 9567 data-text-layout="left" 9568 data-aspect-ratio="square" 9569 9570 9571> 9572 <a 9573 href="/products/olay-collagen-peptide-visibly-firming-serum" 9574 class="product-card--image-wrapper" 9575 tabindex="-1" 9576 ><div 9577 class="product--labels product-badges" 9578 data-item="overline" 9579 data-text-color="white" 9580 ><div 9581 class="product--label" 9582 data-background-color="dark" 9583 data-label-type="firming" 9584 >Firming</div><div 9585 class="product--label" 9586 data-background-color="dark" 9587 data-label-type="fragrance-free" 9588 >Fragrance Free</div></div><div class="product-card--image-slider"><img src="//www.olay.com/cdn/shop/files/Olay_Regenerist_Collagen_Peptide24_Serum_Environment__44161.jpg?v=1778858103&width=600" alt="Regenerist Collagen Peptide 24 | Serum | Fragrance Free" srcset="//www.olay.com/cdn/shop/files/Olay_Regenerist_Collagen_Peptide24_Serum_Environment__44161.jpg?v=1778858103&width=200 200w, //www.olay.com/cdn/shop/files/Olay_Regenerist_Collagen_Peptide24_Serum_Environment__44161.jpg?v=1778858103&width=300 300w, //www.olay.com/cdn/shop/files/Olay_Regenerist_Collagen_Peptide24_Serum_Environment__44161.jpg?v=1778858103&width=400 400w, //www.olay.com/cdn/shop/files/Olay_Regenerist_Collagen_Peptide24_Serum_Environment__44161.jpg?v=1778858103&width=500 500w, //www.olay.com/cdn/shop/files/Olay_Regenerist_Collagen_Peptide24_Serum_Environment__44161.jpg?v=1778858103&width=600 600w" width="600" height="600" loading="lazy" class="product-card--image" sizes="(max-width: 767px) 50vw, 25vw" title="Regenerist Collagen Peptide 24 | Serum | Fragrance Free"></div><!-- snippets/product-quick-add.liquid --></a> 9589
9590 <div class="product-card--details"> 9591 <div class="product-details--title-wrapper"> 9592 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 9593 Serum - Hydrating 9594 </div></div> 9595 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609199950"></div> 9596 <!-- snippets/product-rating.liquid --> 9597</div> 9598 9599 </div> 9600 <div class="product-card--details-wrapper"><a href="/products/olay-collagen-peptide-visibly-firming-serum" class="product-card--title-link"> 9601 <p class="product-card--title" data-item="heading">Olay Collagen Peptide Visibly Firming Serum</p> 9602 </a><p class="product-card--weight"> 9603 9604 $30.76/ oz 9605 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="1.3"> 9606 9607 </p> 9608 </div> 9609 9610 9611<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 9612 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $39.99"> 9613 9614$39.99 9615</span></div></div> 9616 9617<form method="post" action="/cart/add" id="search" accept-charset="UTF-8" class="product-card--form" enctype="multipart/form-data" data-product-card-form="true"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="â" /><input type="hidden" name="quantity" value="1"> 9618 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 9619<product-buy-buttons-element 9620 class="product-buy-buttons--root" 9621 data-id="search" 9622 data-cart-type="drawer" 9623 data-translations="" 9624 data-container="block" 9625 ><button 9626 class="product-buy-buttons--primary" 9627 type="submit" 9628 aria-busy="false" 9629 data-text="Add to cart" 9630 availability_disabled="false" 9631 title="click here to add Olay Collagen Peptide Visibly Firming Serum to bag" 9632 9633 data-item="button-1" 9634 9635> 9636 9637 <span class="product-buy-buttons--cta-text">Add to cart</span> 9638 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 9639 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 9640 </svg></span> 9641 </button> 9642<input 9643 type="hidden" 9644 class="product-buy-buttons--input" 9645 name="id" 9646 data-id="44071658094635" 9647 data-sku="00075609199950" 9648 data-management="shopify" 9649 data-policy="deny" 9650 data-quantity="451" 9651 value="44071658094635" 9652 > 9653 9654
9654<script type="application/json"> 9655 { 9656 "add_to_cart": "Add to cart", 9657 "out_of_stock": "Out of stock", 9658 "unavailable": "Unavailable" 9659 } 9660 </script>
9660 9661 </product-buy-buttons-element><style data-shopify> 9662.ps-widget[ps-sku]::before { 9663 content: ''; 9664 display: inline-block; 9665 width: 18px; 9666 height: 18px; 9667 margin-left: 8px; 9668 margin-right: 8px; 9669 background-color: currentColor; 9670 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 9671 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center; 9672 mask-size: contain; 9673 -webkit-mask-size: contain; 9674 vertical-align: text-bottom; 9675 9676 @media only screen and (max-width: 767px) { 9677 width: 16px; 9678 height: 16px; 9679 margin-left: 0; 9680 } 9681 9682} 9683 9684.buy-now-wrap { 9685 flex-basis: 100%; 9686 width: 0; 9687 display: flex; 9688 gap: 16px; 9689} 9690button.product-buy-buttons--buy-now, 9691.ps-widget { 9692 background: white; 9693 color: black; 9694 font-family: var(--olay-font-inter); 9695 border: 1px solid var(--olay-neutral-30); 9696} 9697button.product-buy-buttons--buy-now:before { 9698 border: none; 9699} 9700button.product-buy-buttons--buy-now:focus-visible { 9701 outline: 2px solid var(--olay-color-primary); 9702 outline-offset: 2px; 9703 border-radius: var(--radius-sm); 9704} 9705button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 9706 outline: none; 9707} 9708 .product-buy-buttons--root { 9709 position: relative; 9710 gap: var(--spacing--3); 9711 9712 } 9713 product-buy-buttons-element.product-buy-buttons--root { 9714 display: flex; 9715 flex-direction: row; 9716 flex-wrap: wrap; 9717 align-items: center; 9718 margin-top: var(--spacing--4); 9719 } 9720 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 9721 flex-shrink: 0; 9722 } 9723 button.product-buy-buttons--primary { 9724 flex: 1; 9725 width: auto; 9726 display: flex; 9727 align-items: center; 9728 justify-content: center; 9729 gap: var(--spacing--2); 9730 } 9731 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 9732 width: 50%; 9733 flex-basis: 49%; 9734 } 9735 .product-buy-buttons--cart-icon { 9736 height: 12px; 9737 width: auto; 9738 flex-shrink: 0; 9739 filter: brightness(0) invert(1); 9740 @media screen and (min-width: 768px) { 9741 height: 15px; 9742 } 9743 } 9744 9745 .product-buy-buttons--buy-now, 9746 .product-buy-buttons--primary { 9747 width: 100%; 9748 9749 &[aria-busy='true'] { 9750 .product-buy-buttons--cta-text, 9751 .product-buy-buttons--buy-now-text { 9752 opacity: 0; 9753 } 9754 } 9755 9756 &[aria-busy='false'] { 9757 .product-buy-buttons--spinner { 9758 opacity: 0; 9759 } 9760 } 9761 } 9762 9763 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 9764 color: black !important; 9765 background-color: var(--button--bg-color-4) !important; 9766 border-color: var(--button--border-color-4) !important; 9767 font-family: var(--olay-font-inter) !important; 9768 border: 1px solid #D8D8D8 !important; 9769 font-size: 16px !important; 9770 border-width: 1px !important; 9771 padding: 12px 20px !important; 9772 background: white; 9773 border-radius: var(--button--radius) !important; 9774 display: inline-flex; 9775 align-items: normal; 9776 justify-content: space-between; 9777 } 9778 9779 9780 9781 @media only screen and (max-width: 767px) { 9782 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 9783 padding: 12px 0 !important; 9784 font-size: 12px !important; 9785 } 9786 .buy-now-wrap { 9787 flex-basis: 99%; 9788 gap: 10px; 9789 } 9790 } 9791 9792 .product-buy-buttons--smart { 9793 user-select: none; 9794 width: 100%; 9795 9796 &[data-style='button-1'] { 9797 --button--color: var(--button--color-1); 9798 --button--bg-color: var(--button--bg-color-1); 9799 --button--border-color: var(--button--border-color-1); 9800 } 9801 9802 &[data-style='button-2'] { 9803 --button--color: var(--button--color-2); 9804 --button--bg-color: var(--button--bg-color-2); 9805 --button--border-color: var(--button--border-color-2); 9806 } 9807 9808 &[data-style='button-3'] { 9809 --button--color: var(--button--color-3); 9810 --button--bg-color: var(--button--bg-color-3); 9811 --button--border-color: var(--button--border-color-3); 9812 } 9813 9814 &[data-style='button-4'] { 9815 --button--color: var(--button--color-4); 9816 --button--bg-color: var(--button--bg-color-4); 9817 --button--border-color: var(--button--border-color-4); 9818 } 9819 9820 .shopify-payment-button__button--unbranded { 9821 width: 100%; 9822 9823 &:hover:not([disabled]) { 9824 background-color: var(--button--bg-color); 9825 } 9826 } 9827 9828 .shopify-payment-button__more-options { 9829 margin: var(--spacing--item) 0 0 0; 9830 text-decoration: underline; 9831 color: var(--color--body); 9832 9833 &:is(:hover, :focus-visible) { 9834 background-color: unset; 9835 color: var(--color--body); 9836 } 9837 } 9838 9839 &[aria-hidden='true'] { 9840 pointer-events: none; 9841 opacity: 0.7; 9842 9843 .shopify-payment-button__button--unbranded { 9844 pointer-events: none; 9845 } 9846 } 9847 9848 &:empty { 9849 display: none; 9850 } 9851 } 9852 9853 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 9854 9855 /* Drawer info styles moved to assets/sticky-product-bar.css */ 9856 9857 .afterpay-section { 9858 width: 100%; 9859 margin-top: var(--spacing--2); 9860 } 9861 9862 @media screen and (max-width: 767px) { 9863 .afterpay-section { 9864 margin-top: var(--spacing--1); 9865 } 9866 } 9867 9868 .club-olay-badge-plp { 9869 display: flex; 9870 align-items: center; 9871 justify-content: center; 9872 padding: 8px 12px; 9873 background-color: #FFD700; 9874 border-radius: 4px; 9875 margin-bottom: 12px; 9876 width: 100%; 9877 9878 } 9879 9880 .club-olay-badge-plp--text { 9881 font-family: var(--olay-font-inter, Inter, sans-serif); 9882 font-size: 12px; 9883 font-weight: 600; 9884 color: #161716; 9885 text-align: center; 9886 } 9887 9888 @media (max-width: 767px) { 9889 .club-olay-badge-plp { 9890 padding: 6px 10px; 9891 } 9892 9893 .club-olay-badge-plp--text { 9894 font-size: 10px; 9895 } 9896 } 9897</style><input type="hidden" name="product-id" value="7918632730667" /></form></div> 9898</div> 9899 9900<style data-shopify> 9901.product_form_subtitle.plp-card { 9902 font-size: 10px; 9903} 9904 9905button.product-card--add-to-cart-button.empty { 9906 padding: 0 40px; 9907} 9908.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 9909 @media only screen and (min-width: 767px) { 9910 height: auto !important; 9911 } 9912} 9913.main-collection--grid span.product-buy-buttons--cta-text { 9914 @media only screen and (max-width: 767px) { 9915 padding: 0 40px; 9916 } 9917} 9918.product_form_subtitle { 9919 font-family: Inter; 9920 font-weight: 500; 9921 font-style: Medium; 9922 font-size: 16px; 9923 line-height: 100%; 9924 letter-spacing: 0%; 9925 color: #161716; 9926 text-transform: uppercase; 9927 margin-bottom: 8px; 9928 margin-top: 8px; 9929 9930 @media (max-width: 767px) { 9931 font-size: 10px; 9932 margin-top: 0; 9933 margin-bottom: 0; 9934 } 9935} 9936.product_subtitle{ 9937 font-family: var(--olay-font-inter); 9938 font-weight: 500; 9939 font-size: 10px; 9940 line-height: 1.2; 9941 letter-spacing: 0.01em; 9942 color: #161716; 9943 text-transform: uppercase; 9944 text-align: left; 9945 width: 100%; 9946 @media only screen and (max-width: 767px){ 9947 font-size: 8px; 9948 } 9949} 9950 .product-card--root { 9951 display: flex; 9952 flex-direction: column; 9953 gap: 20px; 9954 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 9955 width: 100%; 9956 text-align: var(--text-align, center); 9957 padding: 8px; 9958 background: #FFFFFF; 9959 border-radius: 8px; 9960 @media only screen and (max-width: 767px){ 9961 padding: 4px; 9962 gap: 8px; 9963 border-radius: 8px; 9964 } 9965 9966 @media (min-width: 768px) { 9967 border-radius: 12px; 9968 max-width: 348px; 9969 } 9970 &[data-text-layout='left'] { 9971 --text-align: left; 9972 } 9973 9974 &[data-text-layout='right'] { 9975 --text-align: right; 9976 9977 @media (min-width: 1024px) { 9978 --text-align: left; 9979 } 9980 } 9981 9982 > a { 9983 display: block; 9984 width: 100%; 9985 } 9986 9987 @media (max-width: 767px) { 9988 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 9989 --image--radius: 0; 9990 } 9991 } 9992 } 9993 9994 /* Labels & Badges */ 9995 9996 .product--labels { 9997 display: flex; 9998 flex-wrap: wrap; 9999 gap: 4px; 10000 position: absolute; 10001 top: 6px; 10002 left: 6px; 10003 right: 8px; 10004 z-index: 2; 10005 justify-content: flex-start;
10006 align-items: flex-start; 10007 10008 @media (max-width: 767px) { 10009 font-size: 9px; 10010 } 10011 } 10012 10013 .product--label { 10014 display: block; 10015 width: max-content; 10016 line-height: 1.21; 10017 font-family: var(--olay-font-inter); 10018 font-weight: 500; 10019 font-size: 10px; 10020 letter-spacing: 0.01em; 10021 text-transform: uppercase; 10022 padding: 4px 8px; 10023 border-radius: 0px; 10024 background-color: #161716; 10025 color: #F4F4F4; 10026 line-height: 1em; 10027 10028 @media (min-width: 768px) { 10029 font-size: 12px; 10030 } 10031 @media (max-width: 767px) { 10032 font-size: 8px; 10033 padding: 2px 4px !important; 10034 } 10035 10036 &:empty, 10037 &:has(span:empty) { 10038 display: none; 10039 } 10040 10041 &:last-child { 10042 height: fit-content; 10043 } 10044 10045 } 10046 10047 /* Image & Slider */ 10048 10049 .product-card--image-wrapper { 10050 width: 100%; 10051 max-width: 100%; 10052 display: flex; 10053 flex-direction: column; 10054 align-items: center; 10055 position: relative; 10056 border-radius: 8px; 10057 overflow: visible; 10058 10059 @media (min-width: 768px) { 10060 border-radius: 8px; 10061 } 10062 } 10063 10064 .product-card--image-slider { 10065 width: 100%; 10066 position: relative; 10067 overflow: hidden; 10068 border-radius: 8px; 10069 background: #F4F4F4; 10070 aspect-ratio: 1 / 1; 10071 @media only screen and (max-width: 767px){ 10072 border-radius: 4px; 10073 } 10074 } 10075 10076 .product-card--image, 10077 .product-card--slider-image { 10078 border-radius: 8px; 10079 opacity: 1; 10080 transition: opacity 0.5s; 10081 width: 100%; 10082 /* height: auto; */ 10083 object-fit: cover; 10084 10085 @media (min-width: 768px) { 10086 border-radius: 8px; 10087 } 10088 10089 @media only screen and (max-width: 767px){ 10090 border-radius: 4px; 10091 } 10092 10093 &[aria-hidden='true'] { 10094 opacity: 0; 10095 } 10096 } 10097 10098 .product-card--image { 10099 @media (hover: hover) { 10100 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 10101 opacity: 0; 10102 } 10103 } 10104 } 10105 10106 .product-card--hover-image { 10107 position: absolute; 10108 top: 0; 10109 left: 0; 10110 opacity: 0; 10111 height: 100%; 10112 width: 100%; 10113 transition: opacity 0.5s; 10114 overflow: hidden; 10115 border-radius: 8px; 10116 10117 @media (min-width: 768px) { 10118 border-radius: 8px; 10119 } 10120 10121 @media only screen and (max-width: 767px){ 10122 border-radius: 4px; 10123 } 10124 10125 @media (hover: hover) { 10126 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 10127 opacity: 1; 10128 } 10129 } 10130 } 10131 10132 .product-card--slider-image { 10133 position: absolute; 10134 top: 0; 10135 left: 0; 10136 width: 100%; 10137 height: 100%; 10138 object-fit: cover; 10139 opacity: 0; 10140 pointer-events: none; 10141 10142 &.active { 10143 opacity: 1; 10144 pointer-events: auto; 10145 } 10146 } 10147 10148 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 10149 10150 .slider-dot { 10151 width: 27px; 10152 height: 2px; 10153 border-radius: 1px; 10154 background-color: #D8D8D8; 10155 cursor: pointer; 10156 transition: background-color 0.3s ease; 10157 border: none; 10158 padding: 0; 10159 10160 &.active { 10161 background-color: #161716; 10162 } 10163 10164 &:hover { 10165 background-color: #707070; 10166 } 10167 } 10168 10169 /* Detail */ 10170 10171 .product-card--details-wrapper { 10172 display: flex; 10173 gap: 8px; 10174 flex-direction: column; 10175 width: 85%; 10176 @media only screen and (max-width: 767px){ 10177 width: 100%; 10178 gap: 4px; 10179 } 10180 } 10181 10182 .product-card--details { 10183 display: flex; 10184 flex-direction: column; 10185 gap: 8px; 10186 width: 100%; 10187 padding: 0 8px 12px; 10188 @media only screen and (max-width: 767px){ 10189 padding: 0 4px 4px; 10190 gap: 6px; 10191 } 10192 10193 .product-card--root[data-text-layout='left'] & { 10194 flex-direction: column; 10195 align-items: flex-start; 10196 } 10197 10198 .product-card--root[data-text-layout='right'] & { 10199 flex-direction: column; 10200 align-items: flex-end; 10201 } 10202 10203 @media (min-width: 768px) { 10204 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 10205 align-items: baseline; 10206 justify-content: space-between; 10207 } 10208 } 10209 10210 @media (max-width: 767px) { 10211 max-width: var(--max-width--x-small); 10212 margin: 0 auto; 10213 10214 [data-mobile-full-width='true'] & { 10215 padding-left: var(--spacing--item); 10216 } 10217 } 10218 } 10219 10220 /* Price */ 10221 10222 .product-card--price-wrapper { 10223 .product-card--root:not([data-text-layout='center']) & { 10224 align-items: center; 10225 } 10226 } 10227 10228 .product--price-container { 10229 display: flex; 10230 flex-direction: row; 10231 font-family: 'Boston', var(--olay-font-inter); 10232 font-weight: 600; 10233 font-size: 16px; 10234 line-height: 1; 10235 letter-spacing: 0.01em; 10236 color: #161716; 10237 cursor: default; 10238 @media only screen and (max-width: 767px){ 10239 font-family: var(--olay-font-inter); 10240 font-size: 16px; 10241 gap: 4px; 10242 } 10243 10244 @media (min-width: 768px) { 10245 font-size: 18px; 10246 } 10247 } 10248 10249 .product--price-wrapper { 10250 display: flex; 10251 gap: var(--spacing--0); 10252 10253 .product-card--root[data-text-layout='center'] & { 10254 justify-content: center; 10255 } 10256 10257 .product-card--root[data-text-layout='right'] & { 10258 text-align: right; 10259 justify-content: flex-end; 10260 flex-wrap: wrap; 10261 } 10262 10263 .product-card--root[data-text-layout='left'] & { 10264 flex-wrap: wrap; 10265 10266 @media (min-width: 1024px) { 10267 text-align: right; 10268 justify-content: flex-end; 10269 } 10270 } 10271 10272 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 10273 @media (min-width: 768px) { 10274 text-align: right; 10275 justify-content: end; 10276 } 10277 } 10278 10279 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 10280 &.club-olay-active { 10281 .product--price { 10282 order: 1; 10283 } 10284 10285 .product--compare-price { 10286 order: 2; 10287 } 10288 10289 .club-olay-savings { 10290 order: 3; 10291 width: 100%; 10292 } 10293 } 10294 } 10295 10296 .product--compare-price { 10297 text-decoration: line-through; 10298 font-family: var(--olay-font-inter); 10299 font-weight: 400; 10300 font-size: 16px; 10301 color: #6B6B6B; 10302 line-height: 1; 10303 } 10304 10305 .product--unit-price-container { 10306 padding: 0; 10307 font-family: var(--olay-font-inter); 10308 font-weight: 400; 10309 font-size: 10px; 10310 color: #6B6B6B; 10311 line-height: 1; 10312 align-self: center !important; 10313 margin-left: 8px; 10314 10315 .product-card--root:not([data-text-layout='center']) & { 10316 @media (min-width: 1024px) { 10317 align-self: flex-end; 10318 } 10319 } 10320 10321 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 10322 @media (min-width: 768px) { 10323 align-self: flex-end; 10324 } 10325 } 10326 } 10327 10328 .product--from[data-item] { 10329 text-transform: capitalize; 10330 padding: 0; 10331 flex-basis: initial; 10332 } 10333 10334 /* Info */ 10335 10336 .product-card--vendor { 10337 word-break: break-word; 10338 font-family: var(--olay-font-inter); 10339 font-weight: 500; 10340 font-size: 10px; 10341 line-height: 1; 10342 letter-spacing: 0.01em; 10343 color: #161716; 10344 text-transform: uppercase; 10345 10346 [data-text-color='white'] & { 10347 color: white; 10348 } 10349 10350 & a { 10351 color: var(--color--body--light); 10352 10353 @media (max-width: 767px) { 10354 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 10355 } 10356 } 10357 } 10358 10359 .product-card--title { 10360 .product-card--root & { 10361 word-break: break-word; 10362 font-family: 'Boston', var(--olay-font-inter); 10363 font-weight: 700; 10364 font-size: 14px; 10365 line-height: 1.2; 10366 color: #161716; 10367 @media only screen and (max-width: 767px){ 10368 font-size: 12px; 10369 } 10370 @media (min-width: 768px) { 10371 font-size: 16px; 10372 line-height: 1.2; 10373 } 10374 } 10375 10376 & a { 10377 @media (max-width: 767px) { 10378 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 10379 } 10380 } 10381 } 10382 10383 .product-card--weight { 10384 font-family: var(--olay-font-inter); 10385 font-weight: 500; 10386 font-size: 10px; 10387 line-height: 1.21; 10388 color: #707070; 10389 padding-block: 2%; 10390 10391 @media only screen and (max-width: 767px){ 10392 font-size: 8px; 10393 line-height: 1.21; 10394 } 10395 } 10396
10397 .product-card--details-wrapper .product-rating--root { 10398 &:empty { 10399 display: none; 10400 } 10401 10402 .product-card--root[data-text-layout='center'] & { 10403 justify-content: center; 10404 } 10405 10406 .product-card--root[data-text-layout='left'] & { 10407 justify-content: flex-start; 10408 } 10409 10410 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 10411 @media (min-width: 768px) { 10412 justify-content: flex-start; 10413 } 10414 } 10415 10416 .product-card--root[data-text-layout='right'] & { 10417 justify-content: flex-end; 10418 10419 @media (min-width: 1024px) { 10420 justify-content: flex-start; 10421 } 10422 } 10423 } 10424 10425 /* Swatches */ 10426 10427 .product-card--swatches--column-view { 10428 .product-card--root[data-text-layout='center'] & { 10429 width: fit-content; 10430 margin: 0 auto; 10431 } 10432 10433 .product-card--root:not([data-text-layout='center']) & { 10434 @media (min-width: 1024px) { 10435 display: none; 10436 } 10437 } 10438 10439 .product-card--root[data-text-layout='right'] & .swatches--container { 10440 justify-content: flex-end; 10441 } 10442 } 10443 10444 .product-card--swatches--horizontal-view { 10445 .product-card--root[data-text-layout='center'] & { 10446 display: none; 10447 } 10448 10449 .product-card--root:not([data-text-layout='center']) & { 10450 display: none; 10451 10452 @media (min-width: 1024px) { 10453 display: block; 10454 } 10455 } 10456 } 10457 10458 /* disables AR when products viewed from quick-add drawer */ 10459 .drawer--side[data-side='right'] .product-model--button[data-item] { 10460 display: none; 10461 } 10462 10463 /* Buy Buttons Section - Figma Specs */ 10464 .product-card--form { 10465 width: 100%; 10466 } 10467 10468 .product-card--add-to-cart-button, 10469 .product-card--root .product-buy-buttons--primary { 10470 width: 100%; 10471 box-sizing: border-box; 10472 height: auto; 10473 padding: 14px 16px; 10474 display: inline-flex; 10475 align-items: center; 10476 justify-content: center; 10477 background: #FFFFFF; 10478 border: 1px solid #D8D8D8; 10479 font-family: 'Boston', var(--olay-font-inter); 10480 font-weight: 500; 10481 font-size: 16px; 10482 line-height: 1; 10483 color: #161716; 10484 text-transform: uppercase; 10485 cursor: pointer; 10486 transition: all 0.3s ease; 10487 text-align: center; 10488 border-radius: 8px; 10489 @media (min-width: 1020px) and (max-width: 1080px) { 10490 font-size: 14px; 10491 } 10492 @media only screen and (max-width: 767px){ 10493 font-family: var(--olay-font-inter); 10494 font-size: 12px; 10495 border-radius: 4px; 10496 letter-spacing: 0.01em; 10497 padding: 12px 8px; 10498 } 10499 10500 &[disabled] { 10501 opacity: 0.5; 10502 cursor: not-allowed; 10503 background: #F4F4F4; 10504 @media only screen and (max-width: 767px){ 10505 font-size: 12px; 10506 width: 100%; 10507 } 10508 } 10509 10510 &[aria-busy='true'] { 10511 opacity: 0.7; 10512 10513 .product-buy-buttons--cta-text { 10514 opacity: 0; 10515 } 10516 10517 .product-buy-buttons--spinner { 10518 opacity: 1; 10519 } 10520 10521 .product-buy-buttons--spinner { 10522 opacity: 1; 10523 } 10524 10525 } 10526 10527 10528 &:before { 10529 border: none !important; 10530 } 10531 10532 .product-buy-buttons--spinner { 10533 opacity: 0; 10534 @media only screen and (max-width: 767px){ 10535 position: absolute; 10536 right: 65px; 10537 display: inline-block; 10538 top: -5px; 10539 } 10540 } 10541 } 10542 10543 @media only screen and (max-width: 767px){ 10544 .product-card--early-access-login { 10545 margin-top: 33% !important; 10546 } 10547 } 10548 10549 .product-card--root .product-buy-buttons--primary { 10550 @media only screen and (min-width: 768px){ 10551 padding: 2px 16px; 10552 } 10553 } 10554 10555 .product-card--root .product-buy-buttons--smart, 10556 .product-card--root .product-buy-buttons--buy-now, 10557 .product-card--root .product-buy-buttons--drawer { 10558 display: none; 10559 } 10560 10561 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 10562 .product-card--early-access-login { 10563 display: flex; 10564 flex-direction: row; 10565 align-items: center; 10566 margin-top: var(--spacing--4); 10567 width: 100%; 10568 } 10569 .product-card--early-access-login .product-card--add-to-cart-button { 10570 flex: 1; 10571 } 10572 10573 .club-olay-badge { 10574 display: flex; 10575 align-items: center; 10576 justify-content: center; 10577 padding: 8px 12px; 10578 background-color: #FFD700; 10579 border-radius: 4px; 10580 margin-bottom: 12px; 10581 } 10582 10583 .club-olay-badge--text { 10584 font-family: var(--olay-font-inter, Inter, sans-serif); 10585 font-size: 12px; 10586 font-weight: 600; 10587 color: #161716; 10588 text-align: center; 10589 } 10590 10591 @media (max-width: 767px) { 10592 .club-olay-badge { 10593 padding: 6px 10px; 10594 } 10595 10596 .club-olay-badge--text { 10597 font-size: 7px; 10598 letter-spacing: 0; 10599 } 10600 } 10601 10602@media only screen and (min-width:635px) and (max-width: 820px) { 10603 .product-buy-buttons--cta-text { 10604 font-size: 11px !important; 10605 } 10606} 10607</style></div></div> 10608 10609</div> 10610 </form> 10611</predictive-search-element></div> 10612 </div> 10613 10614 <div
10615 class="drawer--side" 10616 data-side="right" 10617 aria-expanded="false" 10618 ><div class="drawer--container" data-view="cart-drawer"><!-- snippets/cart.liquid --><!-- Widget : Labor Day 2026 GWP $15 - Invisible Sunscreen --> 10619<div data-rebuy-id="309317" style="display:none;"></div> 10620<!-- End Widget : Labor Day 2026 GWP $15 - Invisible Sunscreen --><cart-element 10621 class="cart--root" 10622 10623 data-background-color="none" 10624 data-view="drawer" 10625 data-container-width="3" 10626 data-customer-logged-in="false" 10627 data-block-guest-subscription="true" 10628 10629 10630 10631 role="dialog" 10632 aria-modal="true" 10633 aria-labelledby="cart-drawer-title" 10634 10635> 10636 <form 10637 class="cart--form" 10638 action="/cart" 10639 method="post" 10640 novalidate="" 10641 10642 data-drawer-scroll-container 10643 10644 > 10645 <div class="cart--wrapper"><div 10646 class="visually-hidden" 10647 role="status" 10648 aria-live="polite" 10649 aria-atomic="true" 10650 data-cart-status 10651 ></div><div class="cart--header cart-header-new"> 10652 <div class="cart-header-row"><h2 10653 class="cart-title" 10654 10655 id="cart-drawer-title" 10656 10657 > 10658 Your Cart 10659<span class="pill" data-cart-count style="display: none;">0</span></h2> 10660 10661 10662 <button type="button" class="cart-close" data-drawer-close aria-label="Close cart">â</button> 10663 10664 </div> 10665 </div><div class="cart-shipping"> 10666 <div 10667 class="cart-shipping-bar " 10668 10669 style="--progress: 0.0%;" 10670 data-shipping-bar 10671 data-free-shipping-limit="1500.0" 10672 data-shipping-message-before="You are [$] from free shipping." 10673 data-shipping-message-after="Congratulations! You qualify for free shipping." 10674 ></div> 10675 10676 <div class="cart-shipping-message" data-item="paragraph" data-shipping-message>You are $15.00 from free shipping.</div> 10677 </div><div 10678 class="cart--body" 10679 10680 style="display: none;" 10681 10682 ><style> 10683 .cart--item--gift .quantity-selector--container, 10684 .cart--item--gift .quantity-selector--label { display: none !important; } 10685 .cart-line-item--gift .cart-line-item__qty > quantity-selector .quantity-selector--container { display: none !important; } 10686 </style></div><div 10687 10688 style="display: none;" 10689 10690 ></div><div class="cart-empty-state" style="display: flex;"> 10691 <div class="cart-empty-icon"> 10692 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> 10693 <mask id="mask0_7325_5158" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48"> 10694 <rect x="0.5" y="0.5" width="47" height="47" fill="#D9D9D9" stroke="#707070"/> 10695 </mask> 10696 <g mask="url(#mask0_7325_5158)"> 10697 <path d="M11.2322 42C10.3372 42 9.57489 41.6853 8.94522 41.056C8.31589 40.4263 8.00122 39.664 8.00122 38.769V17.231C8.00122 16.336 8.31589 15.5737 8.94522 14.944C9.57489 14.3147 10.3372 14 11.2322 14H16.0012C16.0012 11.7717 16.7776 9.88133 18.3302 8.329C19.8826 6.77633 21.7729 6 24.0012 6C26.2296 6 28.1199 6.77633 29.6722 8.329C31.2249 9.88133 32.0012 11.7717 32.0012 14H36.7702C37.6652 14 38.4276 14.3147 39.0572 14.944C39.6866 15.5737 40.0012 16.336 40.0012 17.231V38.769C40.0012 39.664 39.6866 40.4263 39.0572 41.056C38.4276 41.6853 37.6652 42 36.7702 42H11.2322ZM11.2322 40H36.7702C37.0782 40 37.3604 39.8718 37.6167 39.6155C37.8731 39.3592 38.0012 39.077 38.0012 38.769V17.231C38.0012 16.923 37.8731 16.6408 37.6167 16.3845C37.3604 16.1282 37.0782 16 36.7702 16H11.2322C10.9242 16 10.6421 16.1282 10.3857 16.3845C10.1294 16.6408 10.0012 16.923 10.0012 17.231V38.769C10.0012 39.077 10.1294 39.3592 10.3857 39.6155C10.6421 39.8718 10.9242 40 11.2322 40ZM24.0012 26C26.2296 26 28.1199 25.2237 29.6722 23.671C31.2249 22.1187 32.0012 20.2283 32.0012 18H30.0012C30.0012 19.6667 29.4179 21.0833 28.2512 22.25C27.0846 23.4167 25.6679 24 24.0012 24C22.3346 24 20.9179 23.4167 19.7512 22.25C18.5846 21.0833 18.0012 19.6667 18.0012 18H16.0012C16.0012 20.2283 16.7776 22.1187 18.3302 23.671C19.8826 25.2237 21.7729 26 24.0012 26Z
10697M18.0012 14H30.0012C30.0012 12.3333 29.4179 10.9167 28.2512 9.75C27.0846 8.58333 25.6679 8 24.0012 8C22.3346 8 20.9179 8.58333 19.7512 9.75C18.5846 10.9167 18.0012 12.3333 18.0012 14Z" fill="#707070"/> 10698 </g> 10699 </svg> 10700 </div> 10701 <p class="cart-empty-message">Your cart is empty</p> 10702 <div class="cart-empty-actions"> 10703 <a href="/collections/best-sellers" class="cart-empty-button"> 10704 Shop Skincare Bestsellers 10705 </a> 10706 <a href="/collections/body-care" class="cart-empty-button"> 10707 Shop Body Care Sets 10708 </a> 10709 </div> 10710 </div> 10711 </div><div class="cart--totals"> 10712 <div class="cart--summary cart-footer-new"> 10713 10714 <!-- Recommended Products Section --><!-- Promo/Discount Section --> 10715 <cart-discount class="cart-promo-section"> 10716 <!-- State 1: Default Button / State 2: Input Form / State 3: Applied (managed by JS) --> 10717 <div class="cart-promo-wrapper" data-promo-wrapper> 10718 10719 <!-- Default: Add Promo Button --> 10720 <button type="button" class="cart-promo-button" data-promo-toggle> 10721 <span>Add Promo or Discount</span> 10722 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10723 <path d="M3 8H13M8 3V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 10724 </svg> 10725 </button> 10726 10727 <!-- State 2: Input Form (hidden by default) --> 10728 <div class="cart-promo-form-container" data-promo-form style="display: none;"> 10729 <!-- Header with title and close button --> 10730 <div class="cart-promo-header"> 10731 <span class="cart-promo-title">Add Promo or Discount</span> 10732 <button type="button" class="cart-promo-close" data-promo-close aria-label="Close promo form"> 10733 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10734 <path d="M3 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 10735 </svg> 10736 </button> 10737 </div> 10738 10739 <!-- Input and Apply button in same row --> 10740 <div class="cart-promo-form" data-discount-form> 10741 <div class="cart-promo-row"> 10742 <input 10743 type="text" 10744 class="cart-promo-input" 10745 data-promo-input 10746 name="discount_code" 10747 placeholder="Enter promo code" 10748 aria-label="Discount code" 10749 /> 10750 <button type="button" class="cart-promo-apply" data-promo-apply>apply</button> 10751 </div> 10752 <!-- Error Message (hidden by default) --> 10753 <div class="cart-promo-error" data-promo-error style="display: none;"> 10754 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10755 <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1"/> 10756 <path d="M8 4V8.5M8 11.5V11.51" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 10757 </svg> 10758 <span data-error-message>Sorry, that is not a valid code</span> 10759 </div> 10760 </div> 10761 </div> 10762 </div> 10763 </cart-discount> 10764 <div class="cart-quantity-error" data-qty-error-block style="display: none;"> 10765 <div class="cart-qty-error-icon"> 10766 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 10767 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5"/> 10768 <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> 10769 </svg> 10770 </div> 10771 <div class="cart-qty-error-message" data-item="paragraph" data-qty-error-text> 10772 Total quantity cannot exceed 5 10773 </div> 10774 </div> 10775 <!-- Total Section --> 10776 <div class="cart-total-section"> 10777 <div class="cart-total-row">
10778 <span class="cart-total-label">Total</span> 10779 <div class="cart-total-price-group"><span class="cart-total-price money">$0.00</span></div> 10780 </div> 10781 <p class="cart-total-helper">Taxes and shipping calculated at checkout</p> 10782 </div><!-- Secure Checkout Button --> 10783 <button 10784 type="submit" 10785 name="checkout" 10786 class="cart--button cart-checkout-button" 10787 > 10788 <span>Secure checkout</span> 10789 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10790 <path d="M11 7V4.5C11 3.70435 10.6839 2.94129 10.1213 2.37868C9.55871 1.81607 8.79565 1.5 8 1.5C7.20435 1.5 6.44129 1.81607 5.87868 2.37868C5.31607 2.94129 5 3.70435 5 4.5V7M4.5 14.5H11.5C11.8978 14.5 12.2794 14.342 12.5607 14.0607C12.842 13.7794 13 13.3978 13 13V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7H4.5C4.10218 7 3.72064 7.15804 3.43934 7.43934C3.15804 7.72064 3 8.10218 3 8.5V13C3 13.3978 3.15804 13.7794 3.43934 14.0607C3.72064 14.342 4.10218 14.5 4.5 14.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 10791 </svg> 10792 10793 </button> 10794 10795 <!-- Or Separator --> 10796 <span class="cart-separator">or</span> 10797 10798 <!-- Payment Buttons --> 10799 <div class="cart-drawer__accelerated-checkout cart-payment-buttons"> 10800 <div class="dynamic-checkout__content" id="dynamic-checkout-cart" data-shopify="dynamic-checkout-cart"> <shopify-accelerated-checkout-cart wallet-configs="[{"supports_subs":true,"supports_def_opts":false,"name":"shop_pay","wallet_params":{"shopId":66143911979,"merchantName":"OLAY","personalized":true}},{"supports_subs":true,"supports_def_opts":false,"name":"paypal","wallet_params":{"shopId":66143911979,"countryCode":"US","merchantName":"OLAY","phoneRequired":false,"companyRequired":false,"shippingType":"shipping","shopifyPaymentsEnabled":true,"hasManagedSellingPlanState":false,"requiresBillingAgreement":false,"gatewayType":"MANAGED","merchantId":"QMXXQ624FUZS2","sdkUrl":"https://www.paypal.com/sdk/js?components=buttons\u0026commit=false\u0026currency=USD\u0026locale=en_US\u0026client-id=AbasDhzlU0HbpiStJiN1KRJ_cNJJ7xYBip7JJoMO0GQpLi8ePNgdbLXkC7_KMeyTg8tnAKW4WKrh9qmf\u0026merchant-id=QMXXQ624FUZS2\u0026intent=authorize","serviceableCountryCodes":["AE","AT","AU","BE","CA","CH","CZ","DE","DK","ES","FI","FR","GB","HK","IE","IL","IT","JP","KR","MY","NL","NO","NZ","PL","PT","SE","SG","US"]}}]" access-token="ef90b86b193b1c9350ef0912ac6f90ec" buyer-country="US" buyer-locale="en" buyer-currency="USD" shop-id="66143911979" cart-id="a3b0a176ef6eb9e643b501248d27d6f6" enabled-flags="["1172c16a","a1d1f9a1","f5afabb3","370070f3"]" > <div class="wallet-button-wrapper"> <ul class='wallet-cart-grid wallet-cart-grid--skeleton' role="list" data-shopify-buttoncontainer="true"> <li data-testid='grid-cell' class='wallet-cart-button-container'><div class='wallet-cart-button wallet-cart-button__skeleton' role='button' disabled aria-hidden='true'> </div></li><li data-testid='grid-cell' class='wallet-cart-button-container'><div class='wallet-cart-button wallet-cart-button__skeleton' role='button' disabled aria-hidden='true'> </div></li> </ul> </div> </shopify-accelerated-checkout-cart> </div> 10801 </div> 10802 10803</div> 10804 </div></form> 10805</cart-element>
10805<script src="//www.olay.com/cdn/shop/t/10/assets/cart-discount.js?v=131307065866294037091790077657" defer></script>
10805 10806
10807<script> 10808(function() { 10809 const drawer = document.querySelector('.drawer--side[data-side="right"]'); 10810 if (!drawer) return; 10811 10812 let loaded = false; 10813 const load = () => { 10814 if (loaded) return; 10815 10816 loaded = true; 10817 // Load CSS 10818 const css = document.createElement('link'); 10819 css.rel = 'stylesheet'; 10820 css.href = '//www.olay.com/cdn/shop/t/10/assets/cart-overlay.css?v=88798406061663488631789024915'; 10821 document.head.appendChild(css); 10822 10823 const rebuyCss = document.createElement('link'); 10824 rebuyCss.rel = 'stylesheet'; 10825 rebuyCss.href = '//www.olay.com/cdn/shop/t/10/assets/rebuy-cart-fix.css?v=155418972504299389161779203464'; 10826 document.head.appendChild(rebuyCss); 10827 10828 [ "//www.olay.com/cdn/shop/t/10/assets/cart-discount.js?v=131307065866294037091790077657", "//www.olay.com/cdn/shop/t/10/assets/cart-og-styles.js?v=52920904216225492371790077658", "//www.olay.com/cdn/shop/t/10/assets/cart-accessibility.js?v=47002449217655001031780736833", "//www.olay.com/cdn/shop/t/10/assets/rebuy-cart-fix.js?v=162588278479567118451785409404", "//www.olay.com/cdn/shop/t/10/assets/rebuy-cart-slider-fix.js?v=67809487067189956821779203465"].forEach(f => { 10829 const s = document.createElement('script'); 10830 s.src = f; 10831 s.defer = true; 10832 document.head.appendChild(s); 10833 }); 10834 }; 10835 10836 if (drawer.getAttribute('aria-expanded') === 'true') load(); 10837 else new MutationObserver(() => drawer.getAttribute('aria-expanded') === 'true' && load()) 10838 .observe(drawer, { attributes: true, attributeFilter: ['aria-expanded'] }); 10839})(); 10840</script>
10840<script> 10841 //redirect from cart to homepage if user tries to access cart page directly 10842 (function () { 10843 if (window.location.pathname !== '/cart') return; 10844 10845 var params = new URLSearchParams(window.location.search); 10846 var alreadyRedirected = params.get('from_cart') === '1'; 10847 10848 if (alreadyRedirected) return; 10849 document.body.style.visibility = 'hidden'; 10850 10851 var destUrl = new URL('/', window.location.origin); 10852 destUrl.searchParams.set('open_cart', '1'); 10853 destUrl.searchParams.set('from_cart', '1'); 10854 10855 window.location.replace(destUrl.toString()); 10856 })(); 10857 document.addEventListener('DOMContentLoaded', function () { 10858 const urlParams = new URLSearchParams(window.location.search); 10859 if (urlParams.get('open_cart') === '1') { 10860 const cartButton = document.querySelector('.header--cart'); 10861 if (cartButton) { 10862 cartButton.click(); 10863 } 10864 } 10865 }); 10866 // Fix checkout button reference and update cart counter after cart updates 10867 document.addEventListener('DOMContentLoaded', function () { 10868 function updateCheckoutButtonReference() { 10869 const cartElements = document.querySelectorAll('.cart--root'); 10870 cartElements.forEach(function (cartEl) { 10871 if (cartEl.checkout_button) { 10872 const newButton = cartEl.querySelector('.cart--button'); 10873 if (newButton && newButton !== cartEl.checkout_button) { 10874 cartEl.checkout_button = newButton; 10875 } 10876 } 10877 }); 10878 } 10879 10880 // Fetch cart data from Shopify Cart API 10881 async function fetchCartData() { 10882 try { 10883 const response = await fetch('/cart.js', { 10884 method: 'GET', 10885 headers: { 10886 'Content-Type': 'application/json', 10887 Accept: 'application/json', 10888 }, 10889 }); 10890 10891 if (!response.ok) { 10892 return null; 10893 } 10894 10895 return await response.json(); 10896 } catch (error) { 10897 return null; 10898 } 10899 } 10900 10901 // Deduped fetch wrapper: reuse in-flight request and short cache 10902 (function () { 10903 let inFlight = null; 10904 let lastResult = null; 10905 let lastAt = 0; 10906 const CACHE_TTL = 400; // ms 10907 10908 window.fetchCartDataOnce = function (fetchForce) { 10909 if (!fetchForce && lastResult && Date.now() - lastAt < CACHE_TTL) { 10910 return Promise.resolve(lastResult); 10911 } 10912 10913 if (inFlight) return inFlight; 10914 10915 inFlight = fetchCartData() 10916 .then((res) => { 10917 lastResult = res; 10918 lastAt = Date.now(); 10919 inFlight = null; 10920 return res; 10921 }) 10922 .catch((err) => { 10923 inFlight = null; 10924 throw err; 10925 }); 10926 10927 return inFlight; 10928 }; 10929 })(); 10930 10931 // Update cart counter pill with cart data 10932 function updateCartCountBadge(cart) { 10933 if (!cart) return; 10934 10935 const counterPills = document.querySelectorAll('.cart-title .pill'); 10936 counterPills.forEach((pill) => { 10937 pill.textContent = cart.item_count; 10938 // Hide pill when cart is empty 10939 pill.style.display = cart.item_count === 0 ? 'none' : 'inline-flex'; 10940 }); 10941 } 10942 10943 // Update shipping progress bar with cart data 10944 function updateShippingProgressBar(cart) { 10945 if (!cart) return; 10946 10947 const shippingBars = document.querySelectorAll('[data-shipping-bar]'); 10948 if (shippingBars.length === 0) return; 10949 10950 shippingBars.forEach((bar) => { 10951 const freeShippingLimit = parseFloat(bar.getAttribute('data-free-shipping-limit')); 10952 const messageBefore = bar.getAttribute('data-shipping-message-before'); 10953 const messageAfter = bar.getAttribute('data-shipping-message-after'); 10954 const messageElement = bar.parentElement.querySelector('[data-shipping-message]'); 10955 10956 if (!freeShippingLimit) return; 10957 10958 const cartTotal = cart.total_price; 10959 let progress = 0; 10960 let message = messageAfter; 10961 10962 if (cartTotal >= freeShippingLimit) { 10963 progress = 100; 10964 bar.classList.add('is-complete'); 10965 message = messageAfter; 10966 } else { 10967 progress = (cartTotal / freeShippingLimit) * 100; 10968 bar.classList.remove('is-complete'); 10969 10970 // Calculate remaining amount and format message 10971 const remaining = freeShippingLimit - cartTotal; 10972 const formattedRemaining = new Intl.NumberFormat('en-US', { 10973 style: 'currency', 10974 currency: cart.currency || 'USD', 10975 }).format(remaining / 100); 10976 10977 message = messageBefore.replace('[$]', formattedRemaining); 10978 } 10979 10980 // Update progress bar 10981 bar.style.setProperty('--progress', progress + '%'); 10982 10983 // Update message 10984 if (messageElement) { 10985 messageElement.textContent = message; 10986 } 10987 }); 10988 } 10989 10990 // Update all cart-related UI elements 10991 // Fast-path: if called with an event that includes a detail (cart-element 10992 // DOM or cart JSON) we use that to immediately update count + empty-state 10993 // to avoid flicker. We always start fetching /cart.js in parallel and use 10994 // that result for shipping progress and final summary height. 10995 async function updateCartUI(evt) { 10996 // Start authoritative fetch immediately so network call is in-flight 10997 const fetchPromise = window.fetchCartDataOnce(); 10998
10999 try { 11000 if (evt && evt.detail) { 11001 // Use event.detail only to decide empty-state immediately 11002 let derivedCount = null; 11003 11004 if (evt.detail instanceof HTMLElement) { 11005 const pill = evt.detail.querySelector('[data-cart-count]'); 11006 if (pill) { 11007 derivedCount = parseInt(pill.getAttribute('data-cart-count') || pill.textContent) || 0; 11008 } else { 11009 derivedCount = evt.detail.querySelectorAll('.cart--item').length; 11010 } 11011 } else if (typeof evt.detail === 'object' && evt.detail !== null && 'item_count' in evt.detail) { 11012 derivedCount = parseInt(evt.detail.item_count) || 0; 11013 } 11014 11015 if (derivedCount !== null) { 11016 // Immediate empty-state update from event payload to avoid flicker 11017 updateEmptyCartState({ item_count: derivedCount }); 11018 } 11019 11020 // When fetch completes, update count, shipping, and summary height 11021 try { 11022 const fetched = await fetchPromise; 11023 if (fetched) { 11024 updateCartCountBadge(fetched); 11025 updateShippingProgressBar(fetched); 11026 updateCartSummaryHeight(); 11027 } 11028 } catch (err) { 11029 // Silent error 11030 } 11031 11032 return; 11033 } 11034 } catch (e) { 11035 // fallthrough to fallback below 11036 } 11037 11038 // No event.detail: await fetch and update authoritative UI 11039 const cart = await fetchPromise; 11040 if (cart) { 11041 updateCartCountBadge(cart); 11042 updateShippingProgressBar(cart); 11043 updateEmptyCartState(cart); 11044 updateCartSummaryHeight(); 11045 } 11046 } 11047 11048 // Update cart summary height for drawer view 11049 function updateCartSummaryHeight() { 11050 const drawerCarts = document.querySelectorAll('.cart--root[data-view="drawer"]'); 11051 drawerCarts.forEach((cartRoot) => { 11052 const summary = cartRoot.querySelector('.cart--summary'); 11053 if (summary) { 11054 const height = summary.offsetHeight; 11055 cartRoot.style.setProperty('--summary-height', `${height}px`); 11056 } 11057 }); 11058 } 11059 11060 // Show/hide empty cart state based on cart items 11061 function updateEmptyCartState(cart) { 11062 const emptyStates = document.querySelectorAll('.cart-empty-state'); 11063 const cartBodies = document.querySelectorAll('.cart--body'); 11064 const cartFooters = document.querySelectorAll('.cart--footer'); 11065 11066 const isEmpty = !cart || cart.item_count === 0; 11067 11068 cartBodies.forEach((body) => { 11069 body.style.display = isEmpty ? 'none' : 'block'; 11070 }); 11071 11072 cartFooters.forEach((footer) => { 11073 footer.style.display = isEmpty ? 'none' : 'block'; 11074 }); 11075 11076 emptyStates.forEach((state) => { 11077 state.style.display = isEmpty ? 'flex' : 'none'; 11078 }); 11079 11080 // Also hide any cart notes wrappers in drawer view 11081 document 11082 .querySelectorAll( 11083 '.cart--wrapper > div:not(.cart--header):not(.cart-shipping):not(.cart--body):not(.cart-empty-state)' 11084 ) 11085 .forEach((el) => { 11086 if (el.textContent.trim() && el !== emptyStates[0]) { 11087 el.style.display = isEmpty ? 'none' : 'block'; 11088 } 11089 }); 11090 } 11091 11092 // Re-enable function to clear disabled state when cart updates 11093 function enableDeleteButtons() { 11094 document.querySelectorAll('.cart-line-item__remove.is-disabled').forEach((btn) => { 11095 btn.classList.remove('is-disabled'); 11096 }); 11097 } 11098 11099 // Listen for theme update to re-enable deletes 11100 window.addEventListener('theme:cart:updated', enableDeleteButtons); 11101 // Delete button click handler function 11102 function attachDeleteButtonListeners() { 11103 // Use event delegation: attach a single click handler to container 11104 if (attachDeleteButtonListeners._attached) return; 11105 11106 const container = document; 11107 container.addEventListener('click', function (e) { 11108 const btn = e.target.closest && e.target.closest('.cart-line-item__remove'); 11109 if (!btn) return; 11110 11111 const lineItem = btn.closest('.cart-line-item'); 11112 if (!lineItem) return; 11113 11114 // Disable all other delete buttons immediately to prevent double actions 11115 document.querySelectorAll('.cart-line-item__remove').forEach((other) => { 11116 if (other !== btn) { 11117 other.classList.add('is-disabled'); 11118 } 11119 }); 11120 11121 const quantityRemoveBtn = lineItem.querySelector('.quantity-selector--remove'); 11122 if (quantityRemoveBtn) { 11123 quantityRemoveBtn.click(); 11124 } 11125 }); 11126 11127 attachDeleteButtonListeners._attached = true; 11128 } 11129 11130 // Update all cart UI after cart updates 11131 window.addEventListener('theme:cart:updated', updateCartUI); 11132 11133 // Update button reference after cart updates 11134 window.addEventListener('theme:cart:updated', updateCheckoutButtonReference); 11135 11136 // Update summary height after cart updates 11137 window.addEventListener('theme:cart:updated', updateCartSummaryHeight); 11138 11139 // Initial setup 11140 updateCheckoutButtonReference(); 11141 attachDeleteButtonListeners(); 11142 updateCartSummaryHeight(); 11143 11144 // Observe .cart--summary for size changes caused by async content (e.g. Rebuy widget). 11145 // The fixed footer grows when Rebuy renders its carousel, but ResizeObserver on the 11146 // cart-element root never fires for fixed-position children, so --summary-height stays 11147 // stale and hides items 3+ behind the footer. Watching the summary element directly fixes this. 11148 document.querySelectorAll('.cart--root[data-view="drawer"]').forEach((cartRoot) => { 11149 const summary = cartRoot.querySelector('.cart--summary'); 11150 if (summary) { 11151 new ResizeObserver(() => { 11152 requestAnimationFrame(updateCartSummaryHeight); 11153 }).observe(summary); 11154 } 11155 }); 11156 11157 // Also update on window resize 11158 window.addEventListener('resize', updateCartSummaryHeight); 11159 }); 11160 11161 /** 11162 * Helper function to open the offer container for a specific cart line item 11163 * This function is called when the "Change" button is clicked 11164 */ 11165 function openOfferContainer(event) { 11166 // Get the button that was clicked (event.target will be the button) 11167 const button = event ? event.target : event; 11168 11169 // Find the closest parent container that has both elements 11170 const purchaseContainer = button ? button.closest('.cart-line-item__purchase') : null; 11171 11172 if (!purchaseContainer) { 11173 // Fallback: if no event, find the first instance 11174 const firstPurchaseContainer = document.querySelector('.cart-line-item__purchase'); 11175 if (firstPurchaseContainer) {
11176 const selectedOffer = firstPurchaseContainer.querySelector('.og-selected-offer'); 11177 const offerContainer = firstPurchaseContainer.querySelector('.og-offer-container'); 11178 11179 if (selectedOffer) selectedOffer.style.display = 'none'; 11180 if (offerContainer) offerContainer.style.display = 'block'; 11181 } 11182 return; 11183 } 11184 11185 // Find the og-selected-offer and og-offer-container within this purchase container 11186 const selectedOffer = purchaseContainer.querySelector('.og-selected-offer'); 11187 const offerContainer = purchaseContainer.querySelector('.og-offer-container'); 11188 11189 // Hide the selected offer and show the offer container 11190 if (selectedOffer) { 11191 selectedOffer.style.display = 'none'; 11192 } 11193 11194 if (offerContainer) { 11195 offerContainer.style.display = 'block'; 11196 } 11197 11198 // Trigger payment button layout recalculation after offer container opens 11199 if (window.recalculatePaymentButtons) { 11200 window.recalculatePaymentButtons(); 11201 } 11202 } 11203 11204 /** 11205 * Global window function to handle when the offer save button is clicked 11206 * This hides all offer containers and shows the selected offer for the specific item 11207 */ 11208 window.offerSaveClicked = function (event) { 11209 // Get the button or element that triggered the save 11210 const target = event ? event.target : event; 11211 11212 // Find the closest cart line item purchase container 11213 const purchaseContainer = target ? target.closest('.cart-line-item__purchase') : null; 11214 11215 if (!purchaseContainer) { 11216 // Fallback: hide all offer containers and show all selected offers 11217 const allOfferContainers = document.querySelectorAll('.og-offer-container'); 11218 const allSelectedOffers = document.querySelectorAll('.og-selected-offer'); 11219 11220 allOfferContainers.forEach((container) => { 11221 container.style.display = 'none'; 11222 }); 11223 11224 allSelectedOffers.forEach((offer) => { 11225 offer.style.display = 'block'; 11226 }); 11227 return; 11228 } 11229 11230 // Hide the offer container and show the selected offer for this specific item 11231 const offerContainer = purchaseContainer.querySelector('.og-offer-container'); 11232 const selectedOffer = purchaseContainer.querySelector('.og-selected-offer'); 11233 11234 if (offerContainer) { 11235 offerContainer.style.display = 'none'; 11236 } 11237 11238 if (selectedOffer) { 11239 selectedOffer.style.display = 'block'; 11240 } 11241 }; 11242 11243 // Also make openOfferContainer available on window for inline onclick handlers 11244 window.openOfferContainer = openOfferContainer; 11245 11246 document.addEventListener('og-cart-updated', (ev) => { 11247 ev.preventDefault(); 11248 window.trigger('theme:cart:refresh'); 11249 }); 11250</script>
11250<script> 11251 (function() { 11252 'use strict'; 11253 11254 var LOGIN_URL = "https:\/\/club.olay.com?locale=en\u0026buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkwODc5MzYzLCJuYmYiOjE3OTAyNzQ1NjN9.8KWa7jCQ16JRhY9iaakfBkVFT7oqobgaiqSfjo80AmY\u0026region_country=US"; 11255 var GUEST_MESSAGE = "\u003cp\u003eGuest users are not allowed to place orders for \u003cstrong\u003esubscription products\u003c\/strong\u003e. Please \u003ca href=\"\/account\/login\"\u003elog in\u003c\/a\u003e to your account to continue your purchase.\u003c\/p\u003e"; 11256 11257 /** 11258 * Check if cart has subscription items via Cart API 11259 * Returns a Promise resolving to boolean 11260 */ 11261 function cartHasSubscription(cartData) { 11262 if (!cartData || !cartData.items) return false; 11263 return cartData.items.some(function(item) { 11264 return item.selling_plan_allocation != null; 11265 }); 11266 } 11267 11268 /** 11269 * Build the guest subscription block HTML 11270 */ 11271 function buildGuestBlockHTML() { 11272 return '<div class="cart-guest-subscription-block" data-guest-subscription-block>' + 11273 '<div class="cart-guest-subscription-icon">' + 11274 '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' + 11275 '<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5"/>' + 11276 '<path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' + 11277 '</svg>' + 11278 '</div>' + 11279 '<div class="cart-guest-subscription-message" data-item="paragraph">' + 11280 GUEST_MESSAGE + 11281 '</div>' + 11282 '<a href="' + LOGIN_URL + '" class="cart-guest-subscription-login-btn">' + 11283 'Log in to continue' + 11284 '</a>' + 11285 '</div>'; 11286 } 11287 11288 /** 11289 * Build checkout button HTML (restored when subscription items are removed) 11290 */ 11291 function buildCheckoutHTML() { 11292 return '<button type="submit" name="checkout" class="cart--button cart-checkout-button">' + 11293 '<span>Secure checkout</span>' + 11294 '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' + 11295 '<path d="M11 7V4.5C11 3.70435 10.6839 2.94129 10.1213 2.37868C9.55871 1.81607 8.79565 1.5 8 1.5C7.20435 1.5 6.44129 1.81607 5.87868 2.37868C5.31607 2.94129 5 3.70435 5 4.5V7M4.5 14.5H11.5C11.8978 14.5 12.2794 14.342 12.5607 14.0607C12.842 13.7794 13 13.3978 13 13V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7H4.5C4.10218 7 3.72064 7.15804 3.43934 7.43934C3.15804 7.72064 3 8.10218 3 8.5V13C3 13.3978 3.15804 13.7794 3.43934 14.0607C3.72064 14.342 4.10218 14.5 4.5 14.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' + 11296 '</svg>' + 11297 '</button>'; 11298 } 11299 11300 /** 11301 * Toggle cart footer between guest block and checkout button 11302 * Called on every cart update (add/remove/change subscription) 11303 */ 11304 function updateGuestSubscriptionBlock(hasSubscription) { 11305 var summaries = document.querySelectorAll('.cart--summary.cart-footer-new'); 11306 11307 summaries.forEach(function(summary) { 11308 var existingBlock = summary.querySelector('[data-guest-subscription-block]'); 11309 var checkoutBtn = summary.querySelector('.cart--button.cart-checkout-button'); 11310 var separator = summary.querySelector('.cart-separator'); 11311 var expressCheckout = summary.querySelector('.cart-payment-buttons'); 11312 11313 if (hasSubscription) { 11314 // Hide checkout button and express checkout 11315 if (checkoutBtn) checkoutBtn.style.display = 'none'; 11316 if (separator) separator.style.display = 'none'; 11317 if (expressCheckout) expressCheckout.style.display = 'none'; 11318 11319 // Show or insert guest block 11320 if (existingBlock) { 11321 existingBlock.style.display = ''; 11322 } else { 11323 // Insert guest block after total section 11324 var totalSection = summary.querySelector('.cart-total-section'); 11325 if (totalSection) { 11326 totalSection.insertAdjacentHTML('afterend', buildGuestBlockHTML()); 11327 } else { 11328 summary.insertAdjacentHTML('beforeend', buildGuestBlockHTML()); 11329 } 11330 } 11331 } else { 11332 // Remove guest block 11333 if (existingBlock) existingBlock.style.display = 'none'; 11334 11335 // Show checkout button (or re-create if it was server-rendered without it) 11336 if (checkoutBtn) { 11337 checkoutBtn.style.display = ''; 11338 } else if (!summary.querySelector('.cart--button.cart-checkout-button')) { 11339 var totalSection = summary.querySelector('.cart-total-section'); 11340 if (totalSection) { 11341 totalSection.insertAdjacentHTML('afterend', buildCheckoutHTML()); 11342 } 11343 } 11344 11345 if (separator) separator.style.display = ''; 11346 if (expressCheckout) expressCheckout.style.display = ''; 11347 } 11348 }); 11349 } 11350 11351 /** 11352 * Fetch cart and toggle UI accordingly 11353 */ 11354 async function checkAndToggle() {
11355 try { 11356 var cartData = window.fetchCartDataOnce 11357 ? await window.fetchCartDataOnce(true) 11358 : await fetch('/cart.js').then(function(r) { return r.json(); }); 11359 var hasSub = cartHasSubscription(cartData); 11360 updateGuestSubscriptionBlock(hasSub); 11361 window.__guestHasSubscription = hasSub; 11362 } catch (e) { 11363 // Silent error 11364 } 11365 } 11366 11367 // Listen for cart updates (theme fires this on any cart change) 11368 window.addEventListener('theme:cart:updated', function() { 11369 // Small delay to let /cart.js cache invalidate 11370 setTimeout(checkAndToggle, 300); 11371 }); 11372 11373 // Listen for OrderGroove-specific cart update events 11374 document.addEventListener('og-cart-updated', function() { 11375 setTimeout(checkAndToggle, 500); 11376 }); 11377 11378 // Initial check on DOM ready 11379 if (document.readyState === 'loading') { 11380 document.addEventListener('DOMContentLoaded', checkAndToggle); 11381 } else { 11382 checkAndToggle(); 11383 } 11384 11385 /** 11386 * Checkout URL protection: 11387 * Block direct navigation to /checkout for guest users with subscription items 11388 */ 11389 function blockCheckoutNavigation() { 11390 // Intercept form submissions to /checkout 11391 document.addEventListener('submit', function(e) { 11392 var form = e.target; 11393 if (!form || form.tagName !== 'FORM') return; 11394 11395 var action = form.getAttribute('action') || ''; 11396 var hasCheckoutBtn = form.querySelector('[name="checkout"]'); 11397 11398 if ((action.indexOf('/checkout') !== -1 || hasCheckoutBtn) && window.__guestHasSubscription) { 11399 e.preventDefault(); 11400 e.stopPropagation(); 11401 alert('Please log in to your account to purchase subscription products.'); 11402 window.location.href = LOGIN_URL; 11403 } 11404 }, true); 11405 11406 // Intercept direct /checkout URL navigation 11407 var origPushState = history.pushState; 11408 var origReplaceState = history.replaceState; 11409 11410 function checkUrlNavigation(url) { 11411 if (url && typeof url === 'string' && url.indexOf('/checkout') !== -1 && window.__guestHasSubscription) { 11412 window.location.href = LOGIN_URL; 11413 return true; 11414 } 11415 return false; 11416 } 11417 11418 history.pushState = function() { 11419 if (checkUrlNavigation(arguments[2])) return; 11420 return origPushState.apply(this, arguments); 11421 }; 11422 11423 history.replaceState = function() { 11424 if (checkUrlNavigation(arguments[2])) return; 11425 return origReplaceState.apply(this, arguments); 11426 }; 11427 11428 // Intercept link clicks to /checkout 11429 document.addEventListener('click', function(e) { 11430 var link = e.target.closest ? e.target.closest('a[href]') : null; 11431 if (!link) return; 11432 11433 var href = link.getAttribute('href') || ''; 11434 if (href.indexOf('/checkout') !== -1 && window.__guestHasSubscription) { 11435 e.preventDefault(); 11436 e.stopPropagation(); 11437 window.location.href = LOGIN_URL; 11438 } 11439 }, true); 11440 } 11441 11442 blockCheckoutNavigation(); 11443 })(); 11444</script>
vendor: 1 bytes, line 11444
11444
11445<script> 11446 (function() { 11447 var checkoutPath = '/checkout'; 11448 var loginUrl = 'https://club.olay.com?locale=en&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkwODc5MzYzLCJuYmYiOjE3OTAyNzQ1NjN9.8KWa7jCQ16JRhY9iaakfBkVFT7oqobgaiqSfjo80AmY®ion_country=US'; 11449 11450 // Only intercept /checkout paths 11451 if (window.location.pathname.indexOf(checkoutPath) !== 0) return; 11452 11453 // Hide page immediately to prevent flash 11454 document.documentElement.style.visibility = 'hidden'; 11455 11456 // Check cart for subscription items 11457 fetch('/cart.js', { 11458 method: 'GET', 11459 headers: { 'Content-Type': 'application/json' } 11460 }) 11461 .then(function(r) { return r.json(); }) 11462 .then(function(cart) { 11463 var hasSubscription = cart.items && cart.items.some(function(item) { 11464 return item.selling_plan_allocation != null; 11465 }); 11466 11467 if (hasSubscription) { 11468 // Redirect to homepage with cart drawer open 11469 var dest = new URL('/', window.location.origin); 11470 dest.searchParams.set('open_cart', '1'); 11471 dest.searchParams.set('guest_sub_block', '1'); 11472 window.location.replace(dest.toString()); 11473 } else { 11474 // No subscription items, allow checkout 11475 document.documentElement.style.visibility = ''; 11476 } 11477 }) 11478 .catch(function() { 11479 // On error, allow checkout to proceed 11480 document.documentElement.style.visibility = ''; 11481 }); 11482 })(); 11483 </script>
11483</div></div> 11484 11485 <div 11486 class="drawer--side" 11487 data-side="left" 11488 aria-expanded="false" 11489 > 11490 <div class="drawer--container" data-view="y-menu"><!-- snippets/mobile-nav.liquid --><div class="mobile-nav"> 11491 <ul class="mobile-nav--utilities" data-mq="small"> 11492 <li class="mobile-nav--search"></li> 11493 <li class="mobile-nav--account"></li> 11494 </ul> 11495 11496 <div class="mobile-nav--header"> 11497 <button 11498 class="mobile-nav--close" 11499 data-drawer-close 11500 aria-label="Toggle drawer" 11501 ><svg class="icon--root icon--cross" data-invertible="true" role="img" aria-labelledby="icon-cross-title" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 11502 <title id="icon-cross-title">Close</title> 11503 <path d="M10 8.727 17.944.783l1.273 1.273L11.273 10l7.944 7.944-1.273 1.273L10 11.273l-7.944 7.944-1.273-1.273L8.727 10 .783 2.056 2.056.783 10 8.727Z" fill="currentColor" fill-rule="nonzero" /> 11504 </svg></button> 11505<a 11506 class="small-logo--root" 11507 href="/" 11508 title="OLAY" 11509 itemscope 11510 itemprop="url" 11511 itemtype="https://schema.org/Organization" 11512> 11513 <div class="mobile-nav--logo" data-mobile-nav-logo> 11514 <span class="mobile-nav--logo-text">OLAY</span> 11515 </div> 11516 </a> 11517 <div class="mobile-nav--actions"> 11518 <button 11519 class="mobile-nav--search" 11520 data-drawer-open="top" 11521 data-drawer-view="search" 11522 aria-label="search on olay.com" 11523 title="search on olay.com" 11524 ><svg class="icon--root icon--search" role="img" aria-labelledby="icon-search-title" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none"> 11525 <title id="icon-search-title">Search</title> 11526 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 11527 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 11528 </mask> 11529 <g mask="url(#mask0_7204_6974)"> 11530 <path d="M17.8402 18.6339L10.8179 11.6117C10.2572 12.0891 9.61234 12.4586 8.88337 12.7203C8.1544 12.982 7.42187 13.1128 6.6858 13.1128C4.88954 13.1128 3.36927 12.491 2.12497 11.2475C0.88086 10.0039 0.258806 8.48458 0.258806 6.68944C0.258806 4.89412 0.88058 3.37347 2.12413 2.12749C3.36768 0.881701 4.88702 0.258806 6.68216 0.258806C8.47748 0.258806 9.99813 0.88086 11.2441 2.12497C12.4899 3.36927 13.1128 4.88954 13.1128 6.6858C13.1128 7.46505 12.9748 8.21916 12.6987 8.94813C12.4226 9.6771 12.0603 10.3004 11.6117 10.8179L18.6339 17.8404L17.8402 18.6339ZM6.6858 11.9913C8.17383 11.9913 9.43009 11.4791 10.4546 10.4546C11.4791 9.43028 11.9913 8.17402 11.9913 6.6858C11.9913 5.19758 11.4791 3.94132 10.4546 2.91702C9.43009 1.89254 8.17383 1.3803 6.6858 1.3803C5.19758 1.3803 3.94132 1.89254 2.91702 2.91702C1.89254 3.94132 1.3803 5.19758 1.3803 6.6858C1.3803 8.17402 1.89254 9.43028 2.91702 10.4546C3.94132 11.4791 5.19758 11.9913 6.6858 11.9913Z" fill="#161716" stroke="#161716" stroke-width="0.5"/> 11531 </g> 11532 </svg></button><a 11533 class="mobile-nav--account" 11534 href="https://club.olay.com?locale=en&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkwODc5MzYzLCJuYmYiOjE3OTAyNzQ1NjN9.8KWa7jCQ16JRhY9iaakfBkVFT7oqobgaiqSfjo80AmY®ion_country=US" 11535 aria-label="login to your ClubOlay account" 11536 title="login to your ClubOlay account" 11537 > 11538 11539<svg class="icon--root icon--account" role="img" aria-labelledby="icon-account-title" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none"> 11540 <title id="icon-account-title">login to your ClubOlay account</title> 11541 <mask id="mask0_7204_6977" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-3" y="-3" width="26" height="26"> 11542 <rect x="-3" y="-3" width="26" height="26" fill="#D9D9D9"/> 11543 </mask> 11544 <g mask="url(#mask0_7204_6977)"> 11545 <path d="M3.7126 15.9415C4.63344 15.2791 5.61051 14.7552 6.64383 14.3699C7.67715 13.9844 8.79587 13.7917 10 13.7917C11.2041 13.7917 12.3228 13.9844 13.3562 14.3699C14.3895 14.7552 15.3666 15.2791 16.2874 15.9415C17.0028 15.2013 17.5781 14.327 18.0134 13.3188C18.4489 12.3104 18.6667 11.2041 18.6667 10C18.6667 7.59861 17.8226 5.55382 16.1344 3.86563C14.4462 2.17743 12.4014 1.33333 10 1.33333C7.59861 1.33333 5.55382 2.17743 3.86563 3.86563C2.17743 5.55382 1.33333 7.59861 1.33333 10C1.33333 11.2041 1.55108 12.3104 1.98658
1154513.3188C2.4219 14.327 2.99724 15.2013 3.7126 15.9415ZM10.0005 10.5417C9.08765 10.5417 8.31767 10.2283 7.6906 9.60161C7.06354 8.9749 6.75 8.2051 6.75 7.29221C6.75 6.37932 7.06335 5.60934 7.69006 4.98227C8.31677 4.3552 9.08657 4.04167 9.99946 4.04167C10.9123 4.04167 11.6823 4.35502 12.3094 4.98173C12.9365 5.60844 13.25 6.37824 13.25 7.29112C13.25 8.20401 12.9366 8.97399 12.3099 9.60106C11.6832 10.2281 10.9134 10.5417 10.0005 10.5417ZM10 19.75C8.64024 19.75 7.36732 19.4969 6.18125 18.9906C4.99518 18.4843 3.96322 17.7923 3.08535 16.9146C2.20767 16.0368 1.51569 15.0048 1.00942 13.8188C0.503139 12.6327 0.25 11.3598 0.25 10C0.25 8.64024 0.503139 7.36732 1.00942 6.18125C1.51569 4.99518 2.20767 3.96322 3.08535 3.08535C3.96322 2.20767 4.99518 1.51569 6.18125 1.00942C7.36732 0.503138 8.64024 0.25 10 0.25C11.3598 0.25 12.6327 0.503138 13.8188 1.00942C15.0048 1.51569 16.0368 2.20767 16.9146 3.08535C17.7923 3.96322 18.4843 4.99518 18.9906 6.18125C19.4969 7.36732 19.75 8.64024 19.75 10C19.75 11.3598 19.4969 12.6327 18.9906 13.8188C18.4843 15.0048 17.7923 16.0368 16.9146 16.9146C16.0368 17.7923 15.0048 18.4843 13.8188 18.9906C12.6327 19.4969 11.3598 19.75 10 19.75ZM10 18.6667C10.9987 18.6667 11.9813 18.492 12.948 18.1426C13.9145 17.7934 14.7499 17.3153 15.454 16.7083C14.7499 16.143 13.9353 15.6961 13.0103 15.3676C12.0853 15.0392 11.0819 14.875 10 14.875C8.91811 14.875 7.91115 15.0358 6.97913 15.3574C6.04728 15.6789 5.23622 16.1292 4.54596 16.7083C5.25013 17.3153 6.08547 17.7934 7.05198 18.1426C8.01867 18.492 9.00135 18.6667 10 18.6667ZM10 9.45833C10.6083 9.45833 11.1215 9.24934 11.5397 8.83135C11.9577 8.41319 12.1667 7.89996 12.1667 7.29167C12.1667 6.68338 11.9577 6.17015 11.5397 5.75198C11.1215 5.33399 10.6083 5.125 10 5.125C9.39171 5.125 8.87848 5.33399 8.46031 5.75198C8.04233 6.17015 7.83333 6.68338 7.83333 7.29167C7.83333 7.89996 8.04233 8.41319 8.46031 8.83135C8.87848 9.24934 9.39171 9.45833 10 9.45833Z" fill="#161716" stroke="#161716" stroke-width="0.5"/> 11546 <circle cx="18" cy="18" r="5" fill="#C11E33"/> 11547 </g> 11548 </svg> 11549 </a><a 11550 class="mobile-nav--cart" 11551 11552 data-drawer-open="right" 11553 data-drawer-view="cart-drawer" 11554 aria-haspopup="menu" 11555 href="#" 11556 11557 aria-label="items in your cart" 11558 title="items in your cart" 11559 data-cart-count="0" 11560 ><svg class="icon--root icon--bag" role="img" aria-labelledby="icon-bag-title" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20" fill="none"> 11561 <title id="icon-bag-title">Shopping Bag</title> 11562 <path d="M2.00012 19.75C1.51533 19.75 1.1024 19.5796 0.761333 19.2387C0.420445 18.8976 0.25 18.4847 0.25 17.9999V6.33346C0.25 5.84867 0.420445 5.43574 0.761333 5.09467C1.1024 4.75378 1.51533 4.58333 2.00012 4.58333H4.58333C4.58333 3.37632 5.00385 2.35239 5.84487 1.51154C6.68572 0.670514 7.70965 0.25 8.91667 0.25C10.1237 0.25 11.1476 0.670514 11.9885 1.51154C12.8295 2.35239 13.25 3.37632 13.25 4.58333H15.8332C16.318 4.58333 16.7309 4.75378 17.072 5.09467C17.4129 5.43574 17.5833 5.84867 17.5833 6.33346V17.9999C17.5833 18.4847 17.4129 18.8976 17.072 19.2387C16.7309 19.5796 16.318 19.75 15.8332 19.75H2.00012ZM2.00012 18.6667H15.8332C16 18.6667 16.1529 18.5972 16.2917 18.4584C16.4306 18.3195 16.5 18.1667 16.5 17.9999V6.33346C16.5 6.16663 16.4306 6.01379 16.2917 5.87494C16.1529 5.73609 16 5.66667 15.8332 5.66667H2.00012C1.83329 5.66667 1.68045 5.73609 1.5416 5.87494C1.40276 6.01379 1.33333 6.16663 1.33333 6.33346V17.9999C1.33333 18.1667 1.40276 18.3195 1.5416 18.4584C1.68045 18.5972 1.83329 18.6667 2.00012 18.6667ZM8.91667 11.0833C10.1237 11.0833 11.1476 10.6628 11.9885 9.82179C12.8295 8.98095 13.25 7.95701 13.25 6.75H12.1667C12.1667 7.65278 11.8507 8.42014 11.2187 9.05208C10.5868 9.68403 9.81944 10 8.91667 10C8.01389 10 7.24653 9.68403 6.61458 9.05208C5.98264 8.42014 5.66667 7.65278 5.66667 6.75H4.58333C4.58333 7.95701 5.00385 8.98095 5.84487 9.82179C6.68572 10.6628 7.70965 11.0833 8.91667 11.0833ZM5.66667 4.58333H12.1667C12.1667 3.68056 11.8507 2.91319 11.2187 2.28125C10.5868 1.64931 9.81944 1.33333 8.91667 1.33333C8.01389 1.33333 7.24653 1.64931 6.61458 2.28125C5.98264 2.91319 5.66667 3.68056 5.66667 4.58333Z" fill="#161716"/> 11563 </svg></a> 11564 </div> 11565 </div> 11566 11567 <nav class="mobile-nav--menu" data-item="nav-text"></nav> 11568 11569 <div class="mobile-nav--footer" data-mq="small"> 11570 <div class="mobile-nav--social-icons"></div> 11571 11572 <div class="mobile-nav--localization"></div> 11573 </div> 11574</div> 11575 11576 11577
11578<script> 11579 // Copy logo from header to mobile nav drawer 11580 (function() { 11581 function initMobileNavLogo() { 11582 const mobileNavLogo = document.querySelector('[data-mobile-nav-logo]'); 11583 if (!mobileNavLogo) return; 11584 11585 // Check if logo already initialized 11586 if (mobileNavLogo.hasAttribute('data-logo-initialized')) return; 11587 11588 // Find the mobile logo from header (prioritize mobile-logo, fallback to desktop logo) 11589 const headerMobileLogo = document.querySelector('.header--mobile-logo img'); 11590 const headerDesktopLogo = document.querySelector('.header--desktop-logo img'); 11591 const logoToClone = headerMobileLogo || headerDesktopLogo; 11592 11593 if (logoToClone) { 11594 // Clone the logo 11595 const clonedLogo = logoToClone.cloneNode(true); 11596 clonedLogo.classList.add('mobile-nav--logo-image'); 11597 11598 // Clear existing content and append cloned logo 11599 mobileNavLogo.innerHTML = ''; 11600 mobileNavLogo.appendChild(clonedLogo); 11601 11602 // Mark as initialized 11603 mobileNavLogo.setAttribute('data-logo-initialized', 'true'); 11604 } 11605 } 11606 11607 // Initialize on page load 11608 if (document.readyState === 'loading') { 11609 document.addEventListener('DOMContentLoaded', initMobileNavLogo); 11610 } else { 11611 initMobileNavLogo(); 11612 } 11613 11614 // Re-initialize when drawer opens (in case header logo changes or loads late) 11615 document.addEventListener('click', function(e) { 11616 if (e.target.closest('[data-drawer-open="left"]')) { 11617 setTimeout(initMobileNavLogo, 50); 11618 } 11619 }); 11620 11621 })(); 11622 11623 // Handle mobile nav account click: trigger header account click and close mobile nav 11624 (function() { 11625 function handleMobileAccountClick() { 11626 // Target the account link in mobile-nav--actions, not the empty li in utilities 11627 const mobileNavAccount = document.querySelector('.mobile-nav--actions .mobile-nav--account'); 11628 const headerAccount = document.querySelector('.header--account'); 11629 11630 if (!mobileNavAccount || !headerAccount) return; 11631 11632 mobileNavAccount.addEventListener('click', function(e) { 11633 e.preventDefault(); 11634 e.stopPropagation(); 11635 11636 // Close the mobile nav drawer first 11637 const closeButton = document.querySelector('.mobile-nav--close[data-drawer-close]'); 11638 if (closeButton) { 11639 closeButton.click(); 11640 } else if (typeof Drawer !== 'undefined' && Drawer.close) { 11641 Drawer.close(); 11642 } 11643 11644 // Trigger header account click after drawer starts closing 11645 setTimeout(function() { 11646 headerAccount.click(); 11647 }, 100); 11648 }); 11649 } 11650 11651 // Initialize on page load 11652 if (document.readyState === 'loading') { 11653 document.addEventListener('DOMContentLoaded', handleMobileAccountClick); 11654 } else { 11655 handleMobileAccountClick(); 11656 } 11657 })(); 11658</script>
11658</div> 11659 </div> 11660 11661 11662 <div class="drawer--focus-trigger" tabindex="0"></div> 11663</drawer-element><!-- snippets/feedback-bar.liquid --><feedback-bar-element 11664 class="feedback-bar--root" 11665 data-transition-item="viewport" 11666 data-transition-type="slide-in" 11667 data-transition-trigger="custom" 11668 aria-hidden="true" 11669> 11670 <div 11671 id="feedback" 11672 class="feedback-bar--message" 11673 data-background-color="dark" 11674 data-translucent="true" 11675 data-text-color="white" 11676 data-item="nav-text" 11677 ></div> 11678
11678<script type="application/json"> 11679 { 11680 "copied": "Link copied to clipboard", 11681 "comment": "Thank you, your comment has been posted.", 11682 "comment--moderated": "Thanks for your comment. It will have to be approved by the blog owner first before showing up.", 11683 "contact-form": "Thanks for contacting us! We'll get back to you as soon as possible.", 11684 "email-invalid": "Please enter a valid email address", 11685 "newsletter": "Thanks for signing up!", 11686 "product-form": "We'll notify you when this becomes available", 11687 "product--no-items": "The max number of items have already been added", 11688 "product--one-item": "There is only one item left to add to the cart", 11689 "product--n-items": "There are only [num_items] items left to add to the cart" 11690 } 11691 </script>
11691 11692</feedback-bar-element> 11693 11694<svg class="icon--root icon--defs" data-invertible="true"> 11695 <defs> 11696 <radialGradient id="instagram-hover" r="150%" cx="30%" cy="107%"> 11697 <stop offset="0%" stop-color="#fdf497" /> 11698 <stop offset="5%" stop-color="#fdf497" /> 11699 <stop offset="45%" stop-color="#fd5949" /> 11700 <stop offset="60%" stop-color="#d6249f" /> 11701 <stop offset="90%" stop-color="#285aeb" /> 11702 </radialGradient> 11703 <symbol id="loading-spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 11704 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor"> 11705 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.8391608391608392s" repeatCount="indefinite" /> 11706 </rect> 11707 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(27.692 50 50)"> 11708 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.7692307692307692s" repeatCount="indefinite" /> 11709 </rect> 11710 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(55.385 50 50)"> 11711 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.6993006993006993s" repeatCount="indefinite" /> 11712 </rect> 11713 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(83.077 50 50)"> 11714 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.6293706293706294s" repeatCount="indefinite" /> 11715 </rect> 11716 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(110.77 50 50)"> 11717 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.5594405594405594s" repeatCount="indefinite" /> 11718 </rect> 11719 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(138.462 50 50)"> 11720 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.4895104895104895s" repeatCount="indefinite" /> 11721 </rect> 11722 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(166.154 50 50)"> 11723 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.4195804195804196s" repeatCount="indefinite" /> 11724 </rect> 11725 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(193.846 50 50)"> 11726 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.34965034965034963s" repeatCount="indefinite" /> 11727 </rect> 11728 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(221.538 50 50)"> 11729 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.2797202797202797s" repeatCount="indefinite" /> 11730 </rect> 11731 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(249.23 50 50)"> 11732 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.2097902097902098s" repeatCount="indefinite" /> 11733 </rect> 11734 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(276.923 50 50)"> 11735 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.13986013986013984s" repeatCount="indefinite" /> 11736 </rect> 11737 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(304.615 50 50)"> 11738 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.06993006993006992s" repeatCount="indefinite" /> 11739 </rect> 11740 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(332.308 50 50)"> 11741 <animate attributeName="opacity" values="1;0" keyTimes="0;
117411" dur="0.9090909090909091s" begin="0s" repeatCount="indefinite" /> 11742 </rect> 11743 </symbol> 11744 <filter id="glow-text" color-interpolation-filters="sRGB" x="-50%" y="-200%" width="200%" height="500%"> 11745 <feGaussianBlur in="SourceGraphic" data-target-blur="4" stdDeviation="4" result="blur4" /> 11746 <feGaussianBlur in="SourceGraphic" data-target-blur="19" stdDeviation="19" result="blur19" /> 11747 <feGaussianBlur in="SourceGraphic" data-target-blur="9" stdDeviation="9" result="blur9" /> 11748 <feGaussianBlur in="SourceGraphic" data-target-blur="30" stdDeviation="30" result="blur30" /> 11749 <feColorMatrix in="blur4" result="color-0-blur" values="1 0 0 0 0 0 0.9803921568627451 0 0 0 0 0 0.9647058823529412 0 0 0 0 0 0.8 0" /> 11750 <feOffset in="color-0-blur" result="layer-0-offsetted" data-target-offset-y="0" /> 11751 <feColorMatrix in="blur19" result="color-1-blur" values="0.8156862745098039 0 0 0 0 0 0.49411764705882355 0 0 0 0 0 0.2627450980392157 0 0 0 0 0 0.7 0" /> 11752 <feOffset in="color-1-blur" result="layer-1-offsetted" dy="2" data-target-offset-y="2" /> 11753 <feColorMatrix in="blur9" result="color-2-blur" values="1 0 0 0 0 0 0.6666666666666666 0 0 0 0 0 0.36470588235294116 0 0 0 0 0 0.5 0" /> 11754 <feOffset in="color-2-blur" result="layer-2-offsetted" dy="2" data-target-offset-y="2" /> 11755 <feColorMatrix in="blur30" result="color-3-blur" values="1 0 0 0 0 0 0.611764705882353 0 0 0 0 0 0.39215686274509803 0 0 0 0 0 0.4 0" /> 11756 <feOffset in="color-3-blur" result="layer-3-offsetted" dy="2" data-target-offset-y="2" /> 11757 <feColorMatrix in="blur30" result="color-4-blur" values="0.4549019607843137 0 0 0 0 0 0.16470588235294117 0 0 0 0 0 0 0 0 0 0 0 0.3 0" /> 11758 <feOffset in="color-4-blur" result="layer-4-offsetted" dy="16" data-target-offset-y="16" /> 11759 <feColorMatrix in="blur30" result="color-5-blur" values="0.4235294117647059 0 0 0 0 0 0.19607843137254902 0 0 0 0 0 0.11372549019607843 0 0 0 0 0 0.2 0" /> 11760 <feOffset in="color-5-blur" result="layer-5-offsetted" dy="64" data-target-offset-y="64" /> 11761 <feColorMatrix in="blur30" result="color-6-blur" values="0.21176470588235294 0 0 0 0 0 0.10980392156862745 0 0 0 0 0 0.07450980392156863 0 0 0 0 0 0.1 0" /> 11762 <feOffset in="color-6-blur" result="layer-6-offsetted" dy="64" data-target-offset-y="64" /> 11763 <feColorMatrix in="blur30" result="color-7-blur" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" /> 11764 <feOffset in="color-7-blur" result="layer-7-offsetted" dy="64" data-target-offset-y="64" /> 11765 <feMerge> 11766 <feMergeNode in="layer-0-offsetted" /> 11767 <feMergeNode in="layer-1-offsetted" /> 11768 <feMergeNode in="layer-2-offsetted" /> 11769 <feMergeNode in="layer-3-offsetted" /> 11770 <feMergeNode in="layer-4-offsetted" /> 11771 <feMergeNode in="layer-5-offsetted" /> 11772 <feMergeNode in="layer-6-offsetted" /> 11773 <feMergeNode in="layer-7-offsetted" /> 11774 <feMergeNode in="layer-0-offsetted" /> 11775 <feMergeNode in="SourceGraphic" /> 11776 </feMerge> 11777 </filter> 11778 </defs> 11779 </svg></div> 11780 11781 11782 11783
11783<script> 11784 (function() { 11785 var subscriptionPath = '/apps/subscriptions/manage'; 11786 var loginUrl = 'https://club.olay.com?locale=en&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkwODc5MzYzLCJuYmYiOjE3OTAyNzQ1NjN9.8KWa7jCQ16JRhY9iaakfBkVFT7oqobgaiqSfjo80AmY®ion_country=US'; 11787 11788 // 1. Check if user landed directly on subscription page 11789 if (window.location.pathname === subscriptionPath) { 11790 // Hide content immediately to prevent error flash 11791 var mainContent = document.querySelector('.layout--main-content'); 11792 if (mainContent) { 11793 mainContent.style.display = 'none'; 11794 mainContent.style.visibility = 'hidden'; 11795 } 11796 // Use replace() to avoid adding to browser history - faster redirect 11797 window.location.replace(loginUrl + '?return_url=' + encodeURIComponent(subscriptionPath)); 11798 return; 11799 } 11800 11801 // 2. Handler for subscription link clicks 11802 function handleSubscriptionClick(e) { 11803 e.preventDefault(); 11804 window.location.href = loginUrl + '?return_url=' + encodeURIComponent(subscriptionPath); 11805 } 11806 11807 // 3. Attach listeners only to subscription links 11808 function attachSubscriptionListeners() { 11809 var links = document.querySelectorAll('a[href*="' + subscriptionPath + '"]'); 11810 links.forEach(function(link) { 11811 if (!link.dataset.subscriptionProtected) { 11812 link.addEventListener('click', handleSubscriptionClick); 11813 link.dataset.subscriptionProtected = 'true'; 11814 } 11815 }); 11816 } 11817 11818 // Attach listeners when DOM is ready 11819 if (document.readyState === 'loading') { 11820 document.addEventListener('DOMContentLoaded', attachSubscriptionListeners); 11821 } else { 11822 attachSubscriptionListeners(); 11823 } 11824 11825 // 4. Watch for dynamically added links (e.g., via AJAX, drawers) 11826 var observer = new MutationObserver(function(mutations) { 11827 var shouldAttach = false; 11828 mutations.forEach(function(mutation) { 11829 if (mutation.addedNodes.length) { 11830 shouldAttach = true; 11831 } 11832 }); 11833 if (shouldAttach) { 11834 attachSubscriptionListeners(); 11835 } 11836 }); 11837 11838 // Start observing after DOM is ready 11839 if (document.readyState === 'loading') { 11840 document.addEventListener('DOMContentLoaded', function() { 11841 observer.observe(document.body, { childList: true, subtree: true }); 11842 }); 11843 } else { 11844 observer.observe(document.body, { childList: true, subtree: true }); 11845 } 11846 })(); 11847 </script>
11847 11848 11849 <style> @media only screen and (min-width: 640px) {:is(.template--blog, .template--article) .layout--main-content [data-section-id][data-background-color="none"]:not( [data-outer-background="false"] ) {--section--alignment: center; }} .template--article [data-item~="section-heading"],[data-item="rte-content"] h2 {margin: 10px 0;} .article--content .articlePage-product-SKU {display: none;} [data-item="rte-content"] .section-block table {margin: 10px 0;} </style> 11850<div id="shopify-block-AeWtjZE1LT2Irb3pva__7079518687644006178" class="shopify-block shopify-app-block">
11850<script> 11851 (function () { 11852 const cartAttributes = {}; 11853 11854 // Helper function to retrieve the UTM from Url 11855 function getUTMFromUrl() { 11856 const url_string = window.location.href; 11857 const url = new URL(url_string); 11858 11859 const utm_id = url.searchParams.get("utm_id"); 11860 const utm_source = url.searchParams.get("utm_source"); 11861 const utm_medium = url.searchParams.get("utm_medium"); 11862 const utm_campaign = url.searchParams.get("utm_campaign"); 11863 const utm_term = url.searchParams.get("utm_term"); 11864 const ref = url.searchParams.get("ref"); 11865 11866 if (!utm_id && !utm_source && !utm_medium && !utm_campaign && !ref) { 11867 return null; 11868 } 11869 11870 let utmParameters = {}; 11871 11872 if (utm_id) { 11873 utmParameters.utm_id = utm_id; 11874 } 11875 if (utm_source) { 11876 utmParameters.utm_source = utm_source; 11877 } 11878 if (utm_medium) { 11879 utmParameters.utm_medium = utm_medium; 11880 } 11881 if (utm_campaign) { 11882 utmParameters.utm_campaign = utm_campaign; 11883 } 11884 if (utm_term) { 11885 utmParameters.utm_term = utm_term; 11886 } 11887 if (ref) { 11888 utmParameters.ref = ref; 11889 } 11890 11891 11892 return Object.keys(utmParameters).length === 0 11893 ? null 11894 : utmParameters; 11895 } 11896 11897 // Helper function to retrieve the UTM from Cookie 11898 function getUTMAttributes() { 11899 const urlUtmParams = getUTMFromUrl(); 11900 11901 if (urlUtmParams) { 11902 return urlUtmParams; 11903 } 11904 11905 // No longer reading from deprecated Shopify cookies 11906 return undefined; 11907 } 11908 11909 function saveUtmParameters() { 11910 const utmParams = getUTMAttributes(); 11911 if (utmParams) { 11912 const cartHasUtmAttributes = Object.keys(cartAttributes).find(attributeKey => attributeKey.startsWith("utm_") || attributeKey === "ref"); 11913 if (cartHasUtmAttributes) { 11914 // Don't call API if it already contains our UTM parameters 11915 return; 11916 } 11917 11918 // Handle both Shopify.routes.root and routes.root_url for better compatibility 11919 var rootUrl = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) 11920 || (window.routes && window.routes.root_url) 11921 || '/'; 11922 11923 var updateCart = fetch(rootUrl + 'cart/update.js', 11924 { 11925 headers: { 11926 'Content-Type': 'application/json', 11927 }, 11928 method: "POST", 11929 body: JSON.stringify({ 11930 attributes: { 11931 ...utmParams 11932 }, 11933 }) 11934 }) 11935 .then(response => response.json()) 11936 .then(data => { 11937 return data 11938 }); 11939 } 11940 } 11941 11942 saveUtmParameters(); 11943 })(); 11944</script>
11944 11945 11946 11947 11948 11949</div><div id="shopify-block-AQVRUbEQvdXlid0dWQ__11735689235857492391" class="shopify-block shopify-app-block"> 11950 11951<style> 11952 :root{--aa-search-input-height:44px;--aa-input-icon-size:20px;--aa-base-unit:16;--aa-spacing-factor:1;--aa-spacing:calc(var(--aa-base-unit)*var(--aa-spacing-factor)*1px);--aa-spacing-half:calc(var(--aa-spacing)/2);--aa-panel-max-height-max:650px;--aa-panel-max-height:var(--aa-panel-max-height-max);--aa-base-z-index:9999;--aa-font-size:calc(var(--aa-base-unit)*1px);--aa-font-family:inherit;--aa-font-weight-medium:500;--aa-font-weight-semibold:600;--aa-font-weight-bold:700;--aa-icon-size:20px;--aa-icon-stroke-width:1.6;--aa-icon-color-rgb:119,119,163;--aa-icon-color-alpha:1;--aa-action-icon-size:20px;--aa-text-color-rgb:38,38,39;--aa-text-color-alpha:1;--aa-primary-color-rgb:62,52,211;--aa-primary-color-alpha:0.2;--aa-muted-color-rgb:128,126,163;--aa-muted-color-alpha:0.6;--aa-highlight-color-rgb:62,52,211;--aa-panel-border-color-rgb:128,126,163;--aa-panel-border-color-alpha:0.3;--aa-input-border-color-rgb:128,126,163;--aa-input-border-color-alpha:0.8;--aa-background-color-rgb:255,255,255;--aa-background-color-alpha:1;--aa-input-background-color-rgb:255,255,255;--aa-input-background-color-alpha:1;--aa-selected-color-rgb:179,173,214;--aa-selected-color-alpha:0.205;--aa-description-highlight-background-color-rgb:245,223,77;--aa-description-highlight-background-color-alpha:0.5;--aa-detached-media-query:(max-width:680px);--aa-detached-modal-media-query:(min-width:680px);--aa-detached-modal-max-width:680px;--aa-detached-modal-max-height:500px;--aa-overlay-color-rgb:115,114,129;--aa-overlay-color-alpha:0.4;--aa-panel-shadow:0 0 0 1px rgba(35,38,59,.1),0 6px 16px -4px rgba(35,38,59,.15);--aa-scrollbar-width:13px;--aa-scrollbar-track-background-color-rgb:234,234,234;--aa-scrollbar-track-background-color-alpha:1;--aa-scrollbar-thumb-background-color-rgb:var(--aa-background-color-rgb);--aa-scrollbar-thumb-background-color-alpha:1}@media (hover:none) and (pointer:coarse){:root{--aa-spacing-factor:1.2;--aa-action-icon-size:22px}}body.dark,body[data-theme=dark]{--aa-text-color-rgb:183,192,199;--aa-primary-color-rgb:146,138,255;--aa-muted-color-rgb:146,138,255;--aa-input-background-color-rgb:0,3,9;--aa-background-color-rgb:21,24,42;--aa-selected-color-rgb:146,138,255;--aa-selected-color-alpha:0.25;--aa-description-highlight-background-color-rgb:0 255 255;--aa-description-highlight-background-color-alpha:0.25;--aa-icon-color-rgb:119,119,163;--aa-panel-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--aa-scrollbar-track-background-color-rgb:44,46,64;--aa-scrollbar-thumb-background-color-rgb:var(--aa-background-color-rgb)}.aa-Autocomplete *,.aa-DetachedFormContainer *,.aa-Panel *{box-sizing:border-box}.aa-Autocomplete,.aa-DetachedFormContainer,.aa-Panel{color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));font-family:var(--aa-font-family);font-size:var(--aa-font-size);font-weight:400;line-height:1em;margin:0;padding:0;text-align:left}.aa-MainContainer{min-width:650px}.aa-Form{align-items:center;background-color:rgba(var(--aa-input-background-color-rgb),var(--aa-input-background-color-alpha));border:1px solid rgba(var(--aa-input-border-color-rgb),var(--aa-input-border-color-alpha));border-radius:3px;display:flex;line-height:1em;margin:0;position:relative;width:100%}.aa-Form:focus-within{border-color:rgba(var(--aa-primary-color-rgb),1);box-shadow:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px,inset rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px;outline:medium none currentColor}.aa-InputWrapperPrefix{align-items:center;display:flex;flex-shrink:0;height:var(--aa-search-input-height);order:1}.aa-Label,.aa-LoadingIndicator{cursor:auto;flex-shrink:0;height:100%;padding:0;text-align:left}.aa-Label svg,.aa-LoadingIndicator svg{color:rgba(var(--aa-primary-color-rgb),1);height:auto;max-height:var(--aa-input-icon-size);stroke-width:var(--aa-icon-stroke-width);width:var(--aa-input-icon-size)}.aa-LoadingIndicator,.aa-SubmitButton{height:100%;padding-left:calc(var(--aa-spacing)*.75 - 1px);padding-right:var(--aa-spacing-half);width:calc(var(--aa-spacing)*1.75 + var(--aa-icon-size) - 1px)}@media (hover:none) and (pointer:coarse){.aa-LoadingIndicator,.aa-SubmitButton{padding-left:calc(var(--aa-spacing-half)/2 - 1px);width:calc(var(--aa-icon-size) + var(--aa-spacing)*1.25 - 1px)}}.aa-SubmitButton{appearance:none;background:none;border:0;margin:0}.aa-LoadingIndicator{align-items:center;display:flex;justify-content:center}.aa-LoadingIndicator[hidden]{display:none}.aa-InputWrapper{order:3;position:relative;width:100%}.aa-Input{appearance:none;background:none;border:0;color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));font:inherit;height:var(--aa-search-input-height);padding:0;width:100%}.aa-Input::placeholder{color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));opacity:1}.aa-Input:focus{border-color:none;box-shadow:none;outline:none}.aa-Input::-webkit-search-cancel-button,.aa-Input::-webkit-search-decoration,.aa-Input::-webkit-search-results-button,.aa-Input::-webkit-search-results-decoration{appearance:none}.aa-InputWrapperSuffix{align-items:center;display:flex;height:var(--aa-search-input-height);order:4}.aa-ClearButton{align-items:center;background:none;border:0;color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));cursor:pointer;display:flex;height:100%;margin:0;padding:0 calc(var(--aa-spacing)*.83333 - .5px)}@media (hover:none) and (pointer:coarse){.aa-ClearButton{padding:0 calc(var(--aa-spacing)*.66667 - .5px)}}.aa-ClearButton:focus,.aa-ClearButton:hover{color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha))}.aa-ClearButton[hidden]{display:none}.aa-ClearButton svg{stroke-width:var(--aa-icon-stroke-width);width:var(--aa-icon-size)}.aa-Panel{background-color:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));border-radius:calc(var(--aa-spacing)/4);box-shadow:var(--aa-panel-shadow);display:block;margin:16px 0 0;overflow:hidden;position:absolute;transition:opacity .2s ease-in,filter .2s ease-in;z-index:1200}@media screen and (prefers-reduced-motion){.aa-Panel{transition:none}}.aa-Panel button{appearance:none;background:none;border:0;margin:0;padding:0}.aa-PanelLayout{height:100%;margin:0;max-height:var(--aa-panel-max-height);overflow-y:auto;padding:0;position:relative;text-align:left}.aa-PanelLayoutColumns--twoGolden{display:grid;grid-template-columns:39.2% auto;overflow:hidden;padding:0}.aa-PanelLayoutColumns--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;padding:0}.aa-PanelLayoutColumns--three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;padding:0}.aa-Panel--stalled .aa-Source{filter:grayscale(1);opacity:.8}.aa-Panel--scrollable{margin:0;max-height:var(--aa-panel-max-height);overflow-x:hidden;overflow-y:auto;padding:var(--aa-spacing-half);scrollbar-color:rgba(var(--aa-scrollbar-thumb-background-color-rgb),var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha));scrollbar-width:thin}.aa-Panel--scrollable::-webkit-scrollbar{width:var(--aa-scrollbar-width)}.aa-Panel--scrollable::-webkit-scrollbar-track{background-color:rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha))}.aa-Panel--scrollable::-webkit-scrollbar-thumb{background-color:rgba(var(--aa-scrollbar-thumb-background-color-rgb),var(--aa-scrollbar-thumb-background-color-alpha));border-color:rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha));border-radius:9999px;border-style:solid;border-width:3px 2px 3px 3px}.aa-Source{margin:0;padding:0;position:relative;width:100%}.aa-Source:empty{display:none}.aa-SourceNoResults{font-size:1em;margin:0;padding:var(--aa-spacing)}.aa-List{list-style:none;margin:0}.aa-List,.aa-SourceHeader{padding:0;position:relative}.aa-SourceHeader{margin:var(--aa-spacing-half) .5em var(--aa-spacing-half) 0}.aa-SourceHeader:empty{display:none}.aa-SourceHeaderTitle{background:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));color:rgba(var(--aa-primary-color-rgb),1);
11952display:inline-block;font-size:.9em;font-weight:var(--aa-font-weight-semibold);margin:0;padding:0 var(--aa-spacing-half) 0 0;position:relative;z-index:var(--aa-base-z-index)}.aa-SourceHeaderLine{border-bottom:1px solid rgba(var(--aa-primary-color-rgb),1);display:block!important;height:2px;left:0;margin:0;opacity:.3;padding:0;position:absolute;right:0;top:var(--aa-spacing-half);z-index:calc(var(--aa-base-z-index) - 1)}.aa-SourceFooterSeeAll{background:linear-gradient(180deg,rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha)),rgba(128,126,163,.14));border:1px solid rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));border-radius:5px;box-shadow:inset 0 0 2px #fff,0 2px 2px -1px rgba(76,69,88,.15);color:inherit;font-size:.95em;font-weight:var(--aa-font-weight-medium);padding:.475em 1em .6em;text-decoration:none}.aa-SourceFooterSeeAll:focus,.aa-SourceFooterSeeAll:hover{border:1px solid rgba(var(--aa-primary-color-rgb),1);color:rgba(var(--aa-primary-color-rgb),1)}.aa-Item{align-items:center;border-radius:3px;cursor:pointer;display:grid;min-height:calc(var(--aa-spacing)*2.5);padding:calc(var(--aa-spacing-half)/2)}.aa-Item[aria-selected=true]{background-color:rgba(var(--aa-selected-color-rgb),var(--aa-selected-color-alpha))}.aa-Item[aria-selected=true] .aa-ActiveOnly,.aa-Item[aria-selected=true] .aa-ItemActionButton{visibility:visible}.aa-ItemIcon{align-items:center;background:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));border-radius:3px;box-shadow:inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha));color:rgba(var(--aa-icon-color-rgb),var(--aa-icon-color-alpha));display:flex;flex-shrink:0;font-size:.7em;height:calc(var(--aa-icon-size) + var(--aa-spacing-half));justify-content:center;overflow:hidden;stroke-width:var(--aa-icon-stroke-width);text-align:center;width:calc(var(--aa-icon-size) + var(--aa-spacing-half))}.aa-ItemIcon img{height:auto;max-height:calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);max-width:calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);width:auto}.aa-ItemIcon svg{height:var(--aa-icon-size);width:var(--aa-icon-size)}.aa-ItemIcon--alignTop{align-self:flex-start}.aa-ItemIcon--noBorder{background:none;box-shadow:none}.aa-ItemIcon--picture{height:96px;width:96px}.aa-ItemIcon--picture img{max-height:100%;max-width:100%;padding:var(--aa-spacing-half)}.aa-ItemContent{align-items:center;cursor:pointer;display:grid;gap:var(--aa-spacing-half);grid-auto-flow:column;line-height:1.25em;overflow:hidden}.aa-ItemContent:empty{display:none}.aa-ItemContent mark{background:none;color:rgba(var(--aa-highlight-color-rgb),1);font-style:normal;font-weight:var(--aa-font-weight-bold)}.aa-ItemContent--dual{display:flex;flex-direction:column;justify-content:space-between;text-align:left}.aa-ItemContent--dual .aa-ItemContentSubtitle,.aa-ItemContent--dual .aa-ItemContentTitle{display:block}.aa-ItemContent--indented{padding-left:calc(var(--aa-icon-size) + var(--aa-spacing))}.aa-ItemContentBody{display:grid;gap:calc(var(--aa-spacing-half)/2)}.aa-ItemContentTitle{display:inline-block;margin:0 .5em 0 0;max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.aa-ItemContentSubtitle{font-size:.92em}.aa-ItemContentSubtitleIcon:before{border-color:rgba(var(--aa-muted-color-rgb),.64);border-style:solid;content:"";display:inline-block;left:1px;position:relative;top:-3px}.aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon:before{border-width:0 0 1.5px;margin-left:var(--aa-spacing-half);margin-right:calc(var(--aa-spacing-half)/2);width:calc(var(--aa-spacing-half) + 2px)}.aa-ItemContentSubtitle--standalone{align-items:center;color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));display:grid;gap:var(--aa-spacing-half);grid-auto-flow:column;justify-content:start}.aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon:before{border-radius:0 0 0 3px;border-width:0 0 1.5px 1.5px;height:var(--aa-spacing-half);width:var(--aa-spacing-half)}.aa-ItemContentSubtitleCategory{color:rgba(var(--aa-muted-color-rgb),1);font-weight:500}.aa-ItemContentDescription{color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));font-size:.85em;max-width:100%;overflow-x:hidden;text-overflow:ellipsis}.aa-ItemContentDescription:empty{display:none}.aa-ItemContentDescription mark{background:rgba(var(--aa-description-highlight-background-color-rgb),var(--aa-description-highlight-background-color-alpha));color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));font-style:normal;font-weight:var(--aa-font-weight-medium)}.aa-ItemContentDash{color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
11952display:none;opacity:.4}.aa-ItemContentTag{background-color:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha));border-radius:3px;margin:0 .4em 0 0;padding:.08em .3em}.aa-ItemLink,.aa-ItemWrapper{align-items:center;color:inherit;display:grid;gap:calc(var(--aa-spacing-half)/2);grid-auto-flow:column;justify-content:space-between;width:100%}.aa-ItemLink{color:inherit;text-decoration:none}.aa-ItemActions{display:grid;grid-auto-flow:column;height:100%;justify-self:end;margin:0 calc(var(--aa-spacing)/-3);padding:0 2px 0 0}.aa-ItemActionButton{align-items:center;background:none;border:0;color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));cursor:pointer;display:flex;flex-shrink:0;padding:0}.aa-ItemActionButton:focus svg,.aa-ItemActionButton:hover svg{color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha))}@media (hover:none) and (pointer:coarse){.aa-ItemActionButton:focus svg,.aa-ItemActionButton:hover svg{color:inherit}}.aa-ItemActionButton svg{color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));margin:0;margin:calc(var(--aa-spacing)/3);stroke-width:var(--aa-icon-stroke-width);width:var(--aa-action-icon-size)}.aa-ActiveOnly{visibility:hidden}.aa-PanelHeader{align-items:center;background:rgba(var(--aa-primary-color-rgb),1);color:#fff;display:grid;height:var(--aa-modal-header-height);margin:0;padding:var(--aa-spacing-half) var(--aa-spacing);position:relative}.aa-PanelHeader:after{background-image:linear-gradient(rgba(var(--aa-background-color-rgb),1),rgba(var(--aa-background-color-rgb),0));bottom:calc(var(--aa-spacing-half)*-1);content:"";height:var(--aa-spacing-half);left:0;pointer-events:none;position:absolute;right:0;z-index:var(--aa-base-z-index)}.aa-PanelFooter{background-color:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));box-shadow:inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha));display:flex;justify-content:space-between;margin:0;padding:var(--aa-spacing);position:relative;z-index:var(--aa-base-z-index)}.aa-PanelFooter:after{background-image:linear-gradient(rgba(var(--aa-background-color-rgb),0),rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha)));content:"";height:var(--aa-spacing);left:0;opacity:.12;pointer-events:none;position:absolute;right:0;top:calc(var(--aa-spacing)*-1);z-index:calc(var(--aa-base-z-index) - 1)}.aa-DetachedContainer{background:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));bottom:0;box-shadow:var(--aa-panel-shadow);display:flex;flex-direction:column;left:0;margin:0;overflow:hidden;padding:0;position:fixed;right:0;top:0;z-index:var(--aa-base-z-index)}.aa-DetachedContainer:after{height:32px}.aa-DetachedContainer .aa-SourceHeader{margin:var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px}.aa-DetachedContainer .aa-Panel{background-color:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));border-radius:0;box-shadow:none;flex-grow:1;margin:0;padding:0;position:relative}.aa-DetachedContainer .aa-PanelLayout{bottom:0;box-shadow:none;left:0;margin:0;max-height:none;overflow-y:auto;position:absolute;right:0;top:0;width:100%}.aa-DetachedFormContainer{border-bottom:1px solid rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha));display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:var(--aa-spacing-half)}.aa-DetachedCancelButton{background:none;border:0;border-radius:3px;color:inherit;color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));cursor:pointer;font:inherit;margin:0 0 0 var(--aa-spacing-half);padding:0 var(--aa-spacing-half)}.aa-DetachedCancelButton:focus,.aa-DetachedCancelButton:hover{box-shadow:inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha))}.aa-DetachedContainer--modal{border-radius:6px;bottom:inherit;height:auto;margin:0 auto;max-width:var(--aa-detached-modal-max-width);position:absolute;top:3%}.aa-DetachedContainer--modal .aa-PanelLayout{max-height:var(--aa-detached-modal-max-height);padding-bottom:var(--aa-spacing-half);position:static}.aa-DetachedSearchButton{align-items:center;background-color:rgba(var(--aa-input-background-color-rgb),var(--aa-input-background-color-alpha));border:1px solid rgba(var(--aa-input-border-color-rgb),var(--aa-input-border-color-alpha));border-radius:3px;color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));cursor:pointer;display:flex;font:inherit;font-family:var(--aa-font-family);font-size:var(--aa-font-size);height:var(--aa-search-input-height);margin:0;padding:0 calc(var(--aa-search-input-height)/8);position:relative;text-align:left;width:100%}.aa-DetachedSearchButton:focus{border-color:rgba(var(--aa-primary-color-rgb),1);box-shadow:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 3px,inset rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px;outline:medium none currentColor}.aa-DetachedSearchButtonIcon{align-items:center;color:rgba(var(--aa-primary-color-rgb),1);cursor:auto;display:flex;height:100%;justify-content:center;width:calc(var(--aa-icon-size) + var(--aa-spacing))}.aa-Detached{height:100vh;overflow:hidden}.aa-DetachedOverlay{background-color:rgba(var(--aa-overlay-color-rgb),var(--aa-overlay-color-alpha));height:100vh;left:0;margin:0;padding:0;position:fixed;right:0;top:0;z-index:calc(var(--aa-base-z-index) - 1)}.aa-GradientBottom,.aa-GradientTop{height:var(--aa-spacing-half);left:0;pointer-events:none;position:absolute;right:0;z-index:var(--aa-base-z-index)}.aa-GradientTop{background-image:linear-gradient(rgba(var(--aa-background-color-rgb),1),rgba(var(--aa-background-color-rgb),0));top:0}.aa-GradientBottom{background-image:linear-gradient(rgba(var(--aa-background-color-rgb),0),rgba(var(--aa-background-color-rgb),1));border-bottom-left-radius:calc(var(--aa-spacing)/4);border-bottom-right-radius:calc(var(--aa-spacing)/4);bottom:0}@media (hover:none) and (pointer:coarse){.aa-DesktopOnly{display:none}}@media (hover:hover){.aa-TouchOnly{display:none}}.aa-PanelSections{column-gap:var(--aa-spacing);display:flex}
11952.aa-PanelSection{display:flex;flex-direction:column}.aa-PanelSection--left{width:30%}.aa-PanelSection--right{width:70%}.aa-ItemPicture{border-radius:3px;height:100%;overflow:hidden;width:100%}.aa-ItemPicture img{height:auto;max-height:150px;object-fit:scale-down;opacity:0;transition:opacity .2s ease-out;width:100%}.aa-ItemPicture--loaded img{opacity:1}.aa-NoResultsHeader{font-size:1.15em;line-height:1.3;margin-bottom:var(--aa-spacing)}.aa-NoResultsContent{font-size:.9em}.aa-NoResultsLink{color:rgba(var(--aa-primary-color-rgb),1);font-size:.8em;text-decoration:underline}.aa-Source[data-autocomplete-source-id=products] .aa-List{display:grid;grid-template-columns:repeat(3,1fr)}.aa-Source[data-autocomplete-source-id=products] .aa-Item{padding:var(--aa-spacing-half)}.aa-Source[data-autocomplete-source-id=products] .aa-ItemLink{height:100%;justify-content:stretch}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContent{display:flex;flex-direction:column;height:100%}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContent mark{color:rgb(var(--aa-highlight-color-rgb))}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentBody{display:flex;flex-direction:column;gap:var(--aa-spacing-half);justify-content:space-between;width:100%}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentBrand{color:rgb(var(--aa-muted-color-rgb));font-size:.7em;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentBrand mark{font-weight:400}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentTitleWrapper{height:calc(var(--aa-spacing)*2.5)}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentTitle{display:-webkit-box;font-size:.9em;margin:0;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentPrice{column-gap:var(--aa-spacing-half);display:flex}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentPriceCurrent{font-weight:700}.aa-Source[data-autocomplete-source-id=products] .aa-ItemContentPriceDiscounted{color:rgb(var(--aa-muted-color-rgb));font-size:.9em;text-decoration:line-through}.aa-footer{text-align:center}.aa-SeeAllBtn,.aa-SeeAllLink{display:inline-block;font-size:.9em;font-weight:600;margin:var(--aa-spacing) auto 0 auto;text-decoration:none}.aa-SeeAllBtn{background-color:rgba(var(--aa-primary-color-rgb),.8);border-radius:calc(var(--aa-spacing-half)/2);color:#fff;padding:calc(var(--aa-spacing-half)*1.5) var(--aa-spacing);transition:background .2s ease-out}.aa-SeeAllLink{color:rgb(var(--aa-primary-color-rgb));margin-bottom:var(--aa-spacing-half);transition:opacity .2s ease-out}.aa-SeeAllBtn:hover{background-color:rgba(var(--aa-primary-color-rgb),1)}.aa-SeeAllLink:hover{opacity:.8}.aa-SeeAllBtn:not([disabled]):hover{color:#fff}@media screen and (max-width:680px){.aa-MainContainer{min-width:inherit}.aa-PanelSections{flex-direction:column;row-gap:var(--aa-spacing)}.aa-PanelSection--left,.aa-PanelSection--right{width:100%}.aa-Source[data-autocomplete-source-id=products] .aa-List{display:flex;flex-wrap:wrap;gap:var(--aa-spacing-half)}.aa-Source[data-autocomplete-source-id=products] .aa-Item{width:calc(50% - var(--aa-spacing-half)/2)}}
11952.algolia-horizon-theme{--algolia-horizon-accent-rgb:14,71,251}.algolia-horizon-theme [role=dialog]:has(>.aa-Panel),.algolia-horizon-theme dialog:has(>.aa-Panel){overflow:visible}.algolia-horizon-theme [role=dialog][open]:has(.aa-Autocomplete),.algolia-horizon-theme dialog[open]:has(.aa-Autocomplete){align-content:start;align-items:center;display:grid!important;grid-template-columns:1fr auto;padding:var(--aa-spacing);row-gap:var(--aa-spacing-half)}.algolia-horizon-theme [role=dialog][open]:has(.aa-Autocomplete)>#search-modal-heading,.algolia-horizon-theme dialog[open]:has(.aa-Autocomplete)>#search-modal-heading{clip:auto;color:rgb(var(--aa-muted-color-rgb));font-size:calc(var(--aa-font-size)*.75);font-weight:var(--aa-font-weight-semibold);grid-area:1/1;height:auto;letter-spacing:.08em;line-height:1;margin:0;overflow:visible;position:static!important;text-transform:uppercase;width:auto}.algolia-horizon-theme [role=dialog]>predictive-search-component,.algolia-horizon-theme dialog>predictive-search-component{grid-column:1/-1;grid-row:2}.algolia-horizon-theme [role=dialog]>.aa-Panel,.algolia-horizon-theme dialog>.aa-Panel{--aa-panel-max-height:clamp(120px,calc(100dvh - var(--aa-dialog-field-bottom, 0px) - var(--aa-spacing)*2),var(--aa-panel-max-height-max));border-radius:0;box-shadow:none;grid-column:1/-1;grid-row:3;margin:0!important;max-width:none!important;position:static!important;width:auto!important}.algolia-horizon-theme .aa-MainContainer{align-items:center;display:flex;min-width:0}.algolia-horizon-theme .aa-MainContainer>.aa-Autocomplete{flex:1 1 auto;min-width:0}.algolia-horizon-theme .aa-Input,.algolia-horizon-theme .aa-Input:focus{background:none}.algolia-horizon-theme .aa-Form,.algolia-horizon-theme .aa-Form:focus-within{border:1px solid rgba(var(--aa-input-border-color-rgb),var(--aa-input-border-color-alpha));border-radius:var(--style-border-radius-inputs,var(--aa-spacing-half));box-shadow:none}.algolia-horizon-theme .aa-Form:focus-within{border-color:rgba(var(--algolia-horizon-accent-rgb),1);outline:2px solid rgba(var(--algolia-horizon-accent-rgb),var(--aa-primary-color-alpha));outline-offset:1px}.algolia-horizon-theme .aa-NoResultsLink{color:rgba(var(--algolia-horizon-accent-rgb),1);text-decoration:none}.algolia-horizon-theme .aa-NoResultsLink:after{content:"\2192";margin-left:calc(var(--aa-spacing-half)/2)}.algolia-horizon-theme .aa-ClearButton,.algolia-horizon-theme .aa-ClearButton:focus,.algolia-horizon-theme .aa-ClearButton:hover{color:rgba(var(--algolia-horizon-accent-rgb),1);font:inherit;font-weight:var(--aa-font-weight-medium)}.algolia-horizon-theme .aa-ClearButton:focus,.algolia-horizon-theme .aa-ClearButton:hover{text-decoration:underline}.algolia-horizon-theme .aa-HorizonModalCloseButton{align-items:center;background:none;border:0;color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));cursor:pointer;display:flex;grid-area:1/2;height:calc(var(--aa-spacing)*1.5);justify-content:center;margin:0;padding:0;width:calc(var(--aa-spacing)*1.5)}.algolia-horizon-theme .aa-HorizonModalCloseButton svg{height:var(--aa-icon-size);stroke-width:var(--aa-icon-stroke-width);width:var(--aa-icon-size)}@media screen and (max-width:749px){.algolia-horizon-theme [role=dialog]:has(>.aa-Panel),.algolia-horizon-theme dialog:has(>.aa-Panel){overflow-x:hidden;overflow-y:auto}.algolia-horizon-theme [role=dialog]>predictive-search-component,.algolia-horizon-theme dialog>predictive-search-component{position:sticky;top:0}.algolia-horizon-theme [role=dialog]>.aa-Panel,.algolia-horizon-theme dialog>.aa-Panel{overflow:visible!important}.algolia-horizon-theme .aa-Panel--scrollable,.algolia-horizon-theme .aa-PanelLayout,.algolia-horizon-theme [role=dialog] .aa-Panel--scrollable,.algolia-horizon-theme [role=dialog] .aa-PanelLayout,.algolia-horizon-theme dialog .aa-Panel--scrollable,.algolia-horizon-theme dialog .aa-PanelLayout{max-height:none;overflow:visible}} 11953</style> 11954 11955 11956 11957<div class="algolia-config-money-format" style="display: none;">${{amount}}</div> 11958 11959<!-- BEGIN app snippet: algolia_config -->
11959<script> 11960 window.algoliaShopify = window.algoliaShopify || {}; 11961 11962 window.algoliaShopify.config = window.algoliaShopify.config || {}; 11963 window.algoliaShopify.config = {"app_id":"WE2H0QJH45","search_api_key":"edd314b478a21bdd13e306ba5496550f","index_prefix":"Shopify_Olay_EN_US_Prod_","index_products":true,"index_collections":true,"index_articles":true,"index_pages":true,"autocomplete_see_all":false,"colors":{"main":"#000","secondary":"#707070","muted":"#736fb2","highlight":"#000"},"autocomplete_enabled":true,"autocomplete_debug":false,"input_selector":"form[action=\"\/search\"]","products_autocomplete_hits_per_page":6,"collections_autocomplete_hits_per_page":2,"articles_autocomplete_hits_per_page":2,"pages_autocomplete_hits_per_page":2,"instant_search_enabled":true,"instant_search_enabled_on_collection":true,"results_selector":"#MainContent","products_full_results_hits_per_page":20,"collections_full_results_hits_per_page":10,"show_products":false,"analytics_enabled":true,"usertoken_with_cookies":"disabled","collection_id_indexing":true,"collection_id_query_rules":false,"collection_search_feature_enabled":true,"collection_css_selector":"#MainContent","stock_policy":"allow","billed_by_shopify":false,"billing_paused_at":null,"billing_paused_reason":null,"autocomplete_query_suggestions":false,"query_suggestions_index_name":"Shopify_Olay_EN_US_Prod_products_query_suggestions","suggestions_autocomplete_hits_per_page":2,"locations_inventory_enabled":false,"markets_indexing_enabled":false,"markets_mapping":[],"markets_available":[],"markets_webhooks":{"product_incremental_sync":"","product_feeds":[]},"dynamic_selector":false,"store_currency":"USD","restart_index_enabled":false,"app_block_analytics_disabled":true,"stream_translate_option_names_enabled":false,"default_facet_param_limit":10,"app_blocks_dynamic_widgets_beta_enabled":false,"app_block_inv_avail_replace_can_order":true,"app_block_version":"92521fc3cb"}; 11964 11965 11966 window.algoliaShopify.config.sort_orders = [{"key":"recently_ordered_count","title":"Popularity","desc":{"active":true,"title":"Best Sellers","replica_type":"standard"}},{"key":"price_ratio","title":"Price ratio","asc":{"active":false,"title":"Highest discount first","replica_type":"standard"}},{"key":"published_at","title":"Publication date","asc":{"active":false,"title":"Oldest first","replica_type":"standard"}},{"key":"vendor","title":"Vendor","desc":{"active":false,"title":"Vendor Z-A","replica_type":"standard"}},{"key":"vendor","title":"Vendor","asc":{"active":false,"title":"Vendor","replica_type":"standard"}},{"key":"inventory_quantity","title":"Inventory quantity","desc":{"active":false,"title":"Most available","replica_type":"standard"}},{"key":"grams","title":"Weight","desc":{"active":false,"title":"Heaviest first","replica_type":"standard"}},{"key":"grams","title":"Weight","asc":{"active":false,"title":"Lightest first","replica_type":"standard"}},{"key":"price","title":"Price","asc":{"active":true,"title":"Price (low to high)","replica_type":"standard"}},{"key":"price","title":"Price","desc":{"active":true,"title":"Price (high to low)","replica_type":"standard"}},{"key":"title","title":"Name","desc":{"active":true,"title":"Name Z-A","replica_type":"standard"}},{"key":"title","title":"Name","asc":{"active":true,"title":"Name A-Z","replica_type":"standard"}},{"key":"published_at","title":"Publication date","desc":{"active":true,"title":"New Arrivals","replica_type":"standard"}}]; 11967 11968 11969 11970 11971 window.algoliaShopify.config.facets = [{"enabled":true,"name":"meta.custom.skin_concern","title":"Skin Concern","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"meta.custom.skin_benefit","title":"Skin Benefit","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"price","title":"Price","type":"slider","available_types":["slider"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"tags","title":"Tags","type":"conjunctive","available_types":["menu","conjunctive","disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"product_type","title":"Type","type":"conjunctive","available_types":["menu","conjunctive","disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null}
11971,{"enabled":false,"name":"price_range","title":"Price range","type":"disjunctive","available_types":["disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"vendor","title":"Vendor","type":"conjunctive","available_types":["menu","conjunctive","disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":true,"name":"availability","title":"Availability","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"key_ingredient","title":"Key Ingredient","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"inventory_available","title":"Availability","type":"conjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null}]; 11972 11973 11974 11975 11976 11977 11978 window.algoliaShopify.config.collection_sort_orders = null 11979 11980 11981 11982 11983 window.algoliaShopify.config.collection_facets = null 11984 11985</script>
11985 11986<!-- END app snippet --> 11987<!-- BEGIN app snippet: algolia_config_markets --> 11988 11989
11990<script> 11991 window.algoliaShopify = window.algoliaShopify || {}; 11992 window.algoliaShopify.shopify = window.algoliaShopify.shopify || {} 11993 window.algoliaShopify.shopify.routes = window.algoliaShopify.shopify.routes || {}; 11994 11995 window.algoliaShopify.shopify.routes.search_url = window.algoliaShopify.shopify.routes.search_url || "/search"; 11996 window.algoliaShopify.shopify.market = window.algoliaShopify.shopify.market || { 11997 "id": 108953501739, 11998 "language": {"shop_locale":{"locale":"en","enabled":true,"primary":true,"published":true}}, 11999 "currency": null, 12000 "multicurrency_default_format": "USD:${{amount}}", 12001 } 12002 12003 window.algoliaShopify.shopify.market.translations = window.algoliaShopify.shopify.market.translations || { 12004 facets: [{"enabled":true,"name":"meta.custom.skin_concern","title":"Skin Concern","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"meta.custom.skin_benefit","title":"Skin Benefit","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"price","title":"Price","type":"slider","available_types":["slider"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"tags","title":"Tags","type":"conjunctive","available_types":["menu","conjunctive","disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"product_type","title":"Type","type":"conjunctive","available_types":["menu","conjunctive","disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"price_range","title":"Price range","type":"disjunctive","available_types":["disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":false,"name":"vendor","title":"Vendor","type":"conjunctive","available_types":["menu","conjunctive","disjunctive"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":null,"limit":null},{"enabled":true,"name":"availability","title":"Availability","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"key_ingredient","title":"Key Ingredient","type":"disjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null},{"enabled":true,"name":"inventory_available","title":"Availability","type":"conjunctive","available_types":["slider","conjunctive","disjunctive","menu","hierarchical"],"forgettable":null,"searchable":false,"refined_first":false,"removeAble":true,"limit":null}], 12005 sort_orders: [{"key":"recently_ordered_count","title":"Popularity","desc":{"active":true,"title":"Best Sellers","replica_type":"standard"}},{"key":"price_ratio","title":"Price ratio","asc":{"active":false,"title":"Highest discount first","replica_type":"standard"}},{"key":"published_at","title":"Publication date","asc":{"active":false,"title":"Oldest first","replica_type":"standard"}},{"key":"vendor","title":"Vendor","desc":{"active":false,"title":"Vendor Z-A","replica_type":"standard"}},{"key":"vendor","title":"Vendor","asc":{"active":false,"title":"Vendor","replica_type":"standard"}},{"key":"inventory_quantity","title":"Inventory quantity","desc":{"active":false,"title":"Most available","replica_type":"standard"}},{"key":"grams","title":"Weight","desc":{"active":false,"title":"Heaviest first","replica_type":"standard"}},{"key":"grams","title":"Weight","asc":{"active":false,"title":"Lightest first","replica_type":"standard"}},{"key":"price","title":"Price","asc":{"active":true,"title":"Price (low to high)","replica_type":"standard"}},{"key":"price","title":"Price","desc":{"active":true,"title":"Price (high to low)","replica_type":"standard"}},{"key":"title","title":"Name","desc":{"active":true,"title":"Name Z-A","replica_type":"standard"}},{"key":"title","title":"Name","asc":{"active":true,"title":"Name A-Z","replica_type":"standard"}},{"key":"published_at","title":"Publication date","desc":{"active":true,"title":"New Arrivals","replica_type":"standard"}}], 12006 addToCart: "Add to cart", 12007 allProducts: "See all products ", 12008 articles: "Articles", 12009 by: "by", 12010 changeInput: "changing your input", 12011 clear: "Clear", 12012 clearAll: "Clear all", 12013 clearFilters: "clearing the filters", 12014 close: "Close search", 12015 collections: "Collections", 12016 in: "in", 12017 matching: "matching", 12018 noResultFor: "No results for ", 12019 noResultFound: "No result found", 12020 oneResultFound: "1 result found", 12021 or: "or", 12022 outOf: "out of", 12023 outOfStock: "Out of stock", 12024 pages: "Pages", 12025 products: "Products", 12026 relevance: "Relevance", 12027 resultsFound: "results found", 12028 search: "Current search", 12029 searchForProduct: "Search for products", 12030 searchTitle: "Search result", 12031 selectedFilter: "Selected filters", 12032 showLess: "Show less", 12033 showMore: "Show more", 12034 showFilters: "Show filters", 12035 sortBy: "Sorted by", 12036 suggestions: "Suggestions", 12037 taxFree: "Tax free", 12038 try: "Try", 12039 } 12040</script>
12040 12041<!-- END app snippet --> 12042<!-- BEGIN app snippet: algolia_config_b2b -->
12042<script> 12043 window.algoliaShopify = window.algoliaShopify || {}; 12044 window.algoliaShopify.b2b = window.algoliaShopify.b2b || {}; 12045 12046 12047 window.algoliaShopify.b2b.is_b2b_customer = false; 12048 12049</script>
12049 12050<!-- END app snippet --> 12051 12052 12053</div><div id="shopify-block-AcnNqaVIzdnNGdEE3a__2640576625794464016" class="shopify-block shopify-app-block"> 12054 12055<!-- BEGIN app snippet: spotlight-drawer-app-embed-body --> 12056<style> 12057 .yotpo-widget-loyalty-spotlight { 12058 --loyalty-heading-font-fallback-families: sans-serif; 12059 --loyalty-body-font-fallback-families: sans-serif; 12060 } 12061</style> 12062
12063<script> 12064 (function(window) { 12065 window.yotpoWidgetsContainer = window.yotpoWidgetsContainer || {}; 12066 window.yotpoWidgetsContainer.shopifySpotlightDrawerCustomization = { 12067 loyaltyName: "My Loyalty Program", 12068 greetingText: "\u003cp\u003eHey ##name##,\u003cbr\u003eCheck out your perks\u003c\/p\u003e", 12069 pointsSectionLabel: "You Earned", 12070 rewardsSectionTitle: "Your Rewards", 12071 applyRewardButtonText: "Apply to cart", 12072 applyRewardSuccessMessage: "Reward applied. Refresh page to see it.", 12073 removeRewardButtonText: "Remove from cart", 12074 backgroundColor: "#ffffff", 12075 pointsBgColor: "#D6D6D6", 12076 buttonBgColor: "#262626", 12077 buttonTextColor: "#ffffff", 12078 headingFontNameAndUrl: "Inter@600|\/\/www.olay.com\/cdn\/fonts\/inter\/inter_n6.771af0474a71b3797eb38f3487d6fb79d43b6877.woff2", 12079 headingColor: "#262626", 12080 bodyFontNameAndUrl: "Inter@400|\/\/www.olay.com\/cdn\/fonts\/inter\/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2", 12081 bodyColor: "#4D4D4D", 12082 showPointsExpiry: true, 12083 expiryDateFormat: "long", 12084 expiryLabel: "exp.", 12085 pointsLabel: "points", 12086 showPointsWorth: true, 12087 pointsWorthLabel: "Worth", 12088 tierSuffix: "Member", 12089 directRewardsLabel: "Free", 12090 daysLeftText: "##days## day(s) left", 12091 rewardExpiryColor: "#C93400", 12092 cartEmptyMessage: "Add items to cart first", 12093 collectionRequirementText: "Collection items only", 12094 missingCollectionItemMessage: "No collection items in your cart.", 12095 cartRequirementText: "Requires ##value## in cart", 12096 itemRequirementText: "Requires item in cart", 12097 pointsRequirementText: "Requires ##points## more pts", 12098 rewardStackingText: "Can't combine with applied rewards", 12099 signupEnabled: true, 12100 nonMemberPreview: false, 12101 signupHeading: "Start earning rewards today.", 12102 signupConsentText: "\u003cp\u003eBy joining you agree to our Terms \u0026 Conditions.\u003c\/p\u003e", 12103 signupButtonText: "Join", 12104 signupSuccessMessage: "You're in! Start exploring your rewards." 12105}; 12106 })(window); 12107</script>
12107 12108 12109<!-- END app snippet --> 12110 12111 12112
12113<script> 12114 document.dispatchEvent(new CustomEvent('yotpo-loyalty-spotlight-customizations-loaded')); 12115</script>
12115</div><div id="shopify-block-AQTlTWDBDUEVwNWNoZ__10641372206048101839" class="shopify-block shopify-app-block">
12116<script> 12117 window.Rebuy = window.Rebuy || {}; 12118 window.Rebuy.customer = window.Rebuy.customer || {}; 12119 12120 window.Rebuy.market = window.Rebuy.market || {}; 12121 12122 window.Rebuy.market.country = "US"; 12123 12124 12125 window.Rebuy.market.locale = "en"; 12126 12127</script>
12127 12128 12129 12130 12131 12132 12133</div>
12133<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
12133 12134</body> 12135</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.