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=62143060262189715421790848129" 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=4904') 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<link rel="ucp" href="/.well-known/ucp" version="2026-08-25">
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":"865af0f1-65e6-45ff-bd6e-6e70d31dfa45-1790914715","pageurl":"www.olay.com\/pages\/create-account","s":"pages-699362705451","u":"f98dbb3e934f","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=136341862400782382911790848132">
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=62143060262189715421790848129" 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/ab-tasty/blocks/abtasty-tag/50439cd8-89e0-4240-838a-2948c07c763d --> 1314 1315
1315<script 1316 type="text/javascript" 1317 src="https://try.abtasty.com/4946d8bf53d0549ab361173996360343.js" 1318 async 1319 ></script>
1319 1320 1321
1321<script type="text/javascript"> 1322 // This waits for all the external ressources (including ABTasty tag) to load before executing the callback function. 1323 window.addEventListener('load', function () { 1324 if(!window.ABTasty) { 1325 // AB Tasty tag is not loaded so exit. 1326 return 1327 } 1328 1329 if (window.ABTasty.eventState?.['consentValid']?.status === 'complete') { 1330 updateShopifyDataForWebPixel(); 1331 } else { 1332 window.addEventListener('abtasty_consentValid', () => { 1333 updateShopifyDataForWebPixel(); 1334 }); 1335 } 1336 1337 1338 async function waitForVisitorId(maxRetries = 5, delayMs = 500) { 1339 for (let i = 0; i < maxRetries; i++) { 1340 const visitorId = ABTasty.api.v1.getValue('visitorId') 1341 if (visitorId) { 1342 return visitorId; 1343 } 1344 await new Promise(resolve => setTimeout(resolve, delayMs)); 1345 } 1346 return null; 1347 } 1348 1349 1350 async function updateShopifyDataForWebPixel() { 1351 const STORAGE_KEY = 'ABTastyShopify'; 1352 const consentReady = ABTasty.consentReady; 1353 const shouldHandleSubdomain = "false" === "true"; 1354 1355 if(!consentReady) { 1356 if(shouldHandleSubdomain) { 1357 await cookieStore.delete(STORAGE_KEY); 1358 } 1359 return localStorage.removeItem(STORAGE_KEY); 1360 } 1361 1362 const visitorId = await waitForVisitorId(5, 500); 1363 1364 if (!visitorId) { 1365 console.error('[AB Tasty] Unable to get AB Tasty visitorID after 5 retry'); 1366 return; 1367 } 1368 1369 const ABTastyData = { 1370 identifier: "4946d8bf53d0549ab361173996360343", 1371 campaigns: ABTasty.getCampaignHistory(), 1372 visitorId: visitorId, 1373 accountId: ABTasty.getAccountSettings().id, 1374 consent: ABTasty.consentReady, 1375 }; 1376 1377 if (shouldHandleSubdomain) { 1378 await cookieStore.set({ 1379 name: STORAGE_KEY, 1380 value: JSON.stringify(ABTastyData), 1381 expires: Date.now() + 1 * 24 * 60 * 60 * 1000, // 1 day 1382 domain: window.location.hostname, 1383 }); 1384 } 1385 localStorage.setItem(STORAGE_KEY, JSON.stringify(ABTastyData)); 1386 } 1387 }); 1388 </script>
1388 1389 1390 1391 1392 1393 1394<!-- END app block --><!-- BEGIN app block: shopify://apps/attentive/blocks/attn-tag/8df62c72-8fe4-407e-a5b3-72132be30a0d -->
1394<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>
1394 1395 1396 1397<!-- END app block --><!-- BEGIN app block: shopify://apps/yotpo-loyalty-rewards/blocks/loader-app-embed-block/2f9660df-5018-4e02-9868-ee1fb88d6ccd --> 1398
1398<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/-521omSQ7xo5NUlge295Qw" async></script>
1398 1399 1400 1401 1402 1403 1404 1405 1406<!-- END app block --><!-- BEGIN app block: shopify://apps/bazaarvoice-reviews-photos/blocks/bvjs_block/766ed9d3-b120-48f3-8444-448f45152f47 --> 1407
1408<script> 1409 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","bvjs_base_url":"https:\/\/apps.bazaarvoice.com","seo_geo_rendering_enabled":false,"seo_geo_product_schema_enabled":false,"cookie_consent_integration_enabled":false,"rating_and_reviews_enabled":true,"seo_geo_node_id_url_format":"exclude_shop_url","seo_geo_node_id_include_fragment":true,"social_commerce_enabled":false,"gallery_site_name":null,"locale_mapping":{"en":["en_US"]},"deployment_zone_mapping":{"Main Site":["*"]}})); 1410</script>
1410 1411 1412
1412<script src="https://apps.bazaarvoice.com/deployments/olay/main_site/production/en_US/bv.js" async></script>
1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424<!-- END app block --><!-- BEGIN app block: shopify://apps/rebuy-personalization-engine/blocks/rebuy-global-embed/a26ae9b9-933b-40bf-bbc6-bf1220bbc4dc -->
1425<script> 1426 window.Rebuy = window.Rebuy || {}; 1427 window.Rebuy.customer = window.Rebuy.customer || {}; 1428 1429 window.Rebuy.market = window.Rebuy.market || {}; 1430 1431 window.Rebuy.market.country = "US"; 1432 1433 1434 window.Rebuy.market.locale = "en"; 1435 1436</script>
1436 1437 1438 1439 1440 1441 1442<!-- END app block --><!-- BEGIN app block: shopify://apps/ordergroove-subscriptions/blocks/main-app-embed/cf69fc68-e893-4d33-87e3-4e71e2f5822f --> 1443 1444 1445 1446 1447 1448
1449<script 1450 type="text/javascript" 1451 src="https://static.ordergroove.com/17242c24d4c311e98de1bc764e10b970/main.js" 1452 defer 1453 data-shopify-selling-plans 1454 ></script>
1454 1455 1456
1457<script> 1458 document.addEventListener("DOMContentLoaded", (event) => { 1459 const ordergrooveJsInstances = Array.from(document.querySelectorAll('script[src*="ordergroove.js"]')); 1460 if (ordergrooveJsInstances.length > 0) { 1461 console.warn("Multiple Ordergroove Theme Integrations appear to be in use. Subscriptions may not work as intended. Please check your theme setup."); 1462 } 1463 }); 1464</script>
1464 1465 1466 1467<!-- END app block -->
1467<script src="https://cdn.shopify.com/extensions/01a0f901-c01d-7898-9a57-bf992224279a/001ab9e1f5877edc39d366715dcd1b4e1186bb72-37796/assets/algolia_autocomplete.js" type="text/javascript" defer="defer"></script>
1467 1468<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0661/4391/1979/files/home-og-image-pref.jpg?v=1783585746" /> 1469<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" /> 1470<meta property="og:image:width" content="1200" /> 1471<meta property="og:image:height" content="1108" /> 1472<link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
1473<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 1473
1473
1474<script> 1475 window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || []; 1476</script>
vendor: 1 bytes, line 1476
1476
1477<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}
1477).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: ["4c64608a","16072cab","8450a54b","7ee89bf1"],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\\\"]}
1477\"}","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","
1477isCollective":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}]}
1477,{"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","5982071ew7ea472e3p69b68784m2150dfea",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"183716282411","themePublished":"true","eventMetadataId":"e47437e2-2b8e-429b-8067-24b1bcb53e8d","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":"[\"4c64608a\", \"16072cab\", \"8450a54b\", \"7ee89bf1\"]","isMerchantRequest":"false","hashVersion":"5982071ew7ea472e3p69b68784m2150dfea","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
1477<script> 1478 window.ShopifyAnalytics = window.ShopifyAnalytics || {}; 1479 window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {}; 1480 window.ShopifyAnalytics.meta.currency = 'USD'; 1481 var meta = {"page":{"pageType":"page","resourceType":"page","resourceId":699362705451,"requestId":"865af0f1-65e6-45ff-bd6e-6e70d31dfa45-1790914715"}}; 1482 for (var attr in meta) { 1483 window.ShopifyAnalytics.meta[attr] = meta[attr]; 1484 } 1485</script>
vendor: 1 bytes, line 1485
1485
1486<script class="analytics"> 1487 (function () { 1488 var customDocumentWrite = function(content) { 1489 var jquery = null; 1490 1491 if (window.jQuery) { 1492 jquery = window.jQuery; 1493 } else if (window.Checkout && window.Checkout.$) { 1494 jquery = window.Checkout.$; 1495 } 1496 1497 if (jquery) { 1498 jquery('body').append(content); 1499 } 1500 }; 1501 1502 var hasLoggedConversion = function(token) { 1503 if (token) { 1504 return document.cookie.indexOf('loggedConversion=' + token) !== -1; 1505 } 1506 return false; 1507 } 1508 1509 var setCookieIfConversion = function(token) { 1510 if (token) { 1511 var twoMonthsFromNow = new Date(Date.now()); 1512 twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2); 1513 1514 document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow; 1515 } 1516 } 1517 1518 var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || []; 1519 window.ShopifyAnalytics.lib.trekkie = window.trekkie; 1520 if (trekkie.integrations) { 1521 return; 1522 } 1523 trekkie.methods = [ 1524 'identify', 1525 'page', 1526 'ready', 1527 'track', 1528 'trackForm', 1529 'trackLink' 1530 ]; 1531 trekkie.factory = function(method) { 1532 return function() { 1533 var args = Array.prototype.slice.call(arguments); 1534 args.unshift(method); 1535 trekkie.push(args); 1536 if (method == 'track' || method == 'page') { 1537 var pageUrl; 1538 try { 1539 pageUrl = window.location.href; 1540 } catch (e) {} 1541 var pageReferrer; 1542 try { 1543 pageReferrer = document.referrer; 1544 } catch (e) {} 1545 try { 1546 if (window.__TREKKIE_SHIM_QUEUE == null) { 1547 window.__TREKKIE_SHIM_QUEUE = []; 1548 } 1549 window.__TREKKIE_SHIM_QUEUE.push({ 1550 from: 'trekkie-stub', 1551 method: method, 1552 args: args.slice(1), 1553 pageContext: { 1554 url: pageUrl, 1555 referrer: pageReferrer 1556 } 1557 }); 1558 } catch (e) { 1559 // no-op 1560 } 1561 } 1562 return trekkie; 1563 }; 1564 }; 1565 for (var i = 0; i < trekkie.methods.length; i++) { 1566 var key = trekkie.methods[i]; 1567 trekkie[key] = trekkie.factory(key); 1568 } 1569 trekkie.load = function(config) { 1570 trekkie.config = config || {}; 1571 trekkie.config.initialDocumentCookie = document.cookie; 1572 var first = document.getElementsByTagName('script')[0]; 1573var script = document.createElement('script'); 1574script.type = 'text/javascript'; 1575script.onerror = function(e) { 1576 var scriptFallback = document.createElement('script'); 1577 scriptFallback.type = 'text/javascript'; 1578 scriptFallback.onerror = function(error) { 1579 var Monorail = { 1580 produce: function produce(monorailDomain, schemaId, payload) { 1581 var currentMs = new Date().getTime(); 1582 var event = { 1583 schema_id: schemaId, 1584 payload: payload, 1585 metadata: { 1586 event_created_at_ms: currentMs, 1587 event_sent_at_ms: currentMs 1588 } 1589 }; 1590 return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event)); 1591 }, 1592 sendRequest: function sendRequest(endpointUrl, payload) { 1593 // Try the sendBeacon API 1594 if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) { 1595 var blobData = new window.Blob([payload], { 1596 type: 'text/plain' 1597 }); 1598 1599 if (window.navigator.sendBeacon(endpointUrl, blobData)) { 1600 return true; 1601 } // sendBeacon was not successful 1602 1603 } // XHR beacon 1604 1605 var xhr = new XMLHttpRequest(); 1606 1607 try { 1608 xhr.open('POST', endpointUrl); 1609 xhr.setRequestHeader('Content-Type', 'text/plain'); 1610 xhr.send(payload); 1611 } catch (e) { 1612 console.log(e); 1613 } 1614 1615 return false; 1616 }, 1617 isIos12: function isIos12() { 1618 return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1; 1619 } 1620 }; 1621 Monorail.produce('monorail-edge.shopifysvc.com', 1622 'trekkie_storefront_load_errors/1.1', 1623 {shop_id: 66143911979, 1624 theme_id: 183716282411, 1625 app_name: "storefront", 1626 context_url: window.location.href, 1627 source_url: "//www.olay.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js"}); 1628 1629 }; 1630 scriptFallback.async = true; 1631 scriptFallback.src = '//www.olay.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js'; 1632 first.parentNode.insertBefore(scriptFallback, first); 1633}; 1634script.async = true; 1635script.src = '//www.olay.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js'; 1636first.parentNode.insertBefore(script, first); 1637 1638 }; 1639 trekkie.load( 1640 {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":66143911979,"isMerchantRequest":null,"themeId":183716282411,"themeCityHash":"93181347524902
164014294","contentLanguage":"en","currency":"USD","eventMetadataId":"e47437e2-2b8e-429b-8067-24b1bcb53e8d"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b","7ee89bf1","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}} 1641 ); 1642 1643 var loaded = false; 1644 trekkie.ready(function() { 1645 if (loaded) return; 1646 loaded = true; 1647 1648 window.ShopifyAnalytics.lib = window.trekkie; 1649 1650 var originalDocumentWrite = document.write; 1651 document.write = customDocumentWrite; 1652 try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {}; 1653 document.write = originalDocumentWrite; 1654 1655 var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/) 1656 var token = match? match[1]: undefined; 1657 if (!hasLoggedConversion(token)) { 1658 setCookieIfConversion(token); 1659 1660 } 1661 }); 1662 1663 window.ShopifyAnalytics.lib.page(null,{"pageType":"page","resourceType":"page","resourceId":699362705451,"requestId":"865af0f1-65e6-45ff-bd6e-6e70d31dfa45-1790914715","shopifyEmitted":true}); 1664 1665 var eventsListenerScript = document.createElement('script'); 1666 eventsListenerScript.async = true; 1667 eventsListenerScript.src = "//www.olay.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js"; 1668 document.getElementsByTagName('head')[0].appendChild(eventsListenerScript); 1669})();</script>
vendor: 1 bytes, line 1669
1669
1670<script 1671 defer 1672 src="https://www.olay.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js" 1673 data-application="storefront-renderer" 1674 data-shop-id="66143911979" 1675 data-render-region="gcp-us-central1" 1676 data-page-type="page" 1677 data-theme-instance-id="183716282411" 1678 data-theme-name="Blockshop" 1679 data-theme-version="13.0.1" 1680 data-monorail-region="shop_domain" 1681 data-resource-timing-sampling-rate="10" 1682 data-shs="true" 1683 data-shs-beacon="true" 1684 data-shs-export-with-fetch="true" 1685 data-shs-logs-sample-rate="1" 1686 data-shs-beacon-endpoint="https://www.olay.com/api/collect" 1687></script>
1687 1688<meta name="shopify-y" content="75e65c69-f3e7-4c03-b45a-5f7392d09522" data-expiration="1822472315000"><meta name="shopify-s" content="88ecbbb1-f809-4270-b19a-578635d0fbfd" data-expiration="1790916515000"><meta name="new-cookie-storage-activated" content="t"> 1689</head> 1690 1691 <body 1692 class="template--page page-title--create-an-account-olay" 1693 data-theme-id="606" 1694 data-theme-name="Blockshop" 1695 data-theme-version="13.0.1" 1696 data-theme-preset="Madonna" 1697 > 1698 <!--[if IE]> 1699 <div style="text-align:center;padding:72px 16px;"> 1700 Browser unsupported, please update or try an alternative 1701 </div> 1702 <style> 1703 .layout--viewport { display: none; } 1704 </style> 1705 <![endif]--> 1706 1707 <a data-item="a11y-button" href="#main_content" id="a11y_skip">Skip to main content</a> 1708 1709 <div 1710 class="layout--viewport" 1711 data-button-transitions="false" 1712 data-drawer-status="closed" 1713 data-drop-shadows="true" 1714 data-cart-empty="true" 1715 data-logged-in="false" 1716 data-product-storage="4" 1717 data-transition-container="viewport" 1718 ><!-- BEGIN sections: header-group --> 1719<div id="shopify-section-sections--25816846729259__announcement" class="shopify-section shopify-section-group-header-group section--announcement"><!-- sections/announcement.liquid --><announcement-bar-element 1720 class="announcement--root" 1721 role="region" 1722 aria-label="Announcement bar" 1723 data-section-id="sections--25816846729259__announcement" 1724 data-section-type="announcement" 1725 data-countdown-container 1726 data-background-color="dark" 1727 data-border="bottom" 1728 data-border-color="#c11e33" 1729 data-rotate-frequency="5" 1730 data-scroll-text="true" 1731 data-sticky-enabled="true" 1732 data-text-color="white" 1733 1734 1735 style="--announcement--animation-speed:3;" 1736 1737> 1738 <div class="announcement--wrapper"> 1739 <div class="announcement--left" data-mq="medium-large"></div> 1740 1741 <div class="announcement--center"><div class="announcement--blocks"><div 1742 class="announcement--block"aria-hidden="false" 1743 data-transition-item="viewport" 1744 data-transition-trigger="custom" 1745 data-transition-type="slide-in" 1746 data-transition-active="false"data-mq="" 1747 ><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 1748 class="announcement--toggle" 1749 aria-label="Toggle announcement details" 1750 aria-expanded="false" 1751 data-announcement-toggle 1752 > 1753 <img 1754 src="//www.olay.com/cdn/shop/t/10/assets/icon-plus-circle.svg?v=83349728735137383871779203463" 1755 alt="Expand" 1756 class="announcement--toggle-icon announcement--toggle-icon-plus" 1757 width="16" 1758 height="16" 1759 > 1760 <img 1761 src="//www.olay.com/cdn/shop/t/10/assets/icon-minus-circle.svg?v=139521455512599798531779203462"
1762 alt="Collapse" 1763 class="announcement--toggle-icon announcement--toggle-icon-minus" 1764 width="18" 1765 height="18" 1766 style="display: none;" 1767 > 1768 </button></div> 1769 1770 <div class="announcement--right" data-mq="medium-large"></div> 1771 </div> 1772 1773</announcement-bar-element> 1774 1775<style> 1776 :root { 1777 --announcement--sticky: 1; 1778 } 1779 1780 .section--header ~ #shopify-section-sections--25816846729259__announcement { 1781 top: calc(var(--header--sticky, 0) * var(--header--height, 0px)); 1782 z-index: 4; 1783 }#shopify-section-sections--25816846729259__announcement .announcement--root {min-height: 40px;--border--color-dark: #c11e33;--border--thickness: 4px;}/* Announcement Toggle Button */ 1784 .announcement--toggle { 1785 display: flex; 1786 align-items: center; 1787 justify-content: center; 1788 background: none; 1789 border: none; 1790 cursor: pointer; 1791 padding: 0; 1792 margin-left: 12px; 1793 transition: opacity 0.2s ease; 1794 flex-shrink: 0; 1795 } 1796 1797 .announcement--toggle:hover { 1798 opacity: 0.7; 1799 } 1800 1801 .announcement--toggle-icon { 1802 display: block; 1803 } 1804 1805 /* Make announcement bar clickable when popup is enabled */#shopify-section-sections--25816846729259__announcement .announcement--blocks { 1806 cursor: pointer; 1807 user-select: none; 1808 }/* Popup positioning - styles moved to announcement-popup.liquid */ 1809 #shopify-section-sections--25816846729259__announcement { 1810 position: sticky; 1811 } 1812</style> 1813 1814
1815<script> 1816 (function() { 1817 // Measure announcement height 1818 const measureHeight = function() { 1819 const announcementRoot = document.querySelector('.announcement--root'); 1820 if (announcementRoot) { 1821 document.documentElement.style.setProperty( 1822 '--announcement--height', 1823 `${announcementRoot.offsetHeight.toFixed(2)}px` 1824 ); 1825 } 1826 }; 1827 1828 // Run immediately if possible 1829 if (document.readyState === 'loading') { 1830 document.addEventListener('DOMContentLoaded', measureHeight); 1831 } else { 1832 measureHeight(); 1833 } 1834 })(); 1835</script>
1835</div><header id="shopify-section-sections--25816846729259__header" class="shopify-section shopify-section-group-header-group section--header"><!-- sections/header.liquid --><header-element 1836 class="header--root" 1837 data-section-id="sections--25816846729259__header" 1838 data-section-type="header" 1839 data-container-width="6" 1840 data-icons="true" 1841 data-layout="left-left" 1842 data-mobile-spacing-above="none" 1843 data-mobile-spacing-below="none" 1844 data-spacing-above="none" 1845 data-spacing-below="none" 1846 data-sticky="false" 1847 data-sticky-enabled="true" 1848 aria-expanded="false" 1849 aria-hidden="false" 1850 data-hover-disabled="false" 1851 1852 data-background-color="light" 1853 1854 data-overlap-behavior="drawer" 1855 data-reduce-height="false" 1856 data-scroll-hide="false" 1857 data-text-color="body" 1858 data-transparent-enabled="false" 1859 data-transparent-text-color="white" 1860 1861> 1862 <div class="header--wrapper"><div class="header--logo"><div class="header--primary-logo" data-has-mobile-logo="true"> 1863 <div class="header--desktop-logo"><!-- snippets/logo.liquid --><a 1864 class="small-logo--root" 1865 href="/" 1866 title="OLAY" 1867 itemscope 1868 itemprop="url" 1869 itemtype="https://schema.org/Organization" 1870><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> 1871 1872</div><div class="header--mobile-logo"><!-- snippets/logo.liquid --><a 1873 class="small-logo--root" 1874 href="/" 1875 title="OLAY" 1876 itemscope 1877 itemprop="url" 1878 itemtype="https://schema.org/Organization" 1879><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> 1880 1881</div></div></div><nav 1882 class="header--primary-nav" 1883 aria-label="Primary navigation" 1884 1885 aria-hidden="true" 1886 1887 data-mq="medium-large" 1888 > 1889 <button 1890 class="header--drawer-toggle" 1891 data-drawer-open="left" 1892 data-drawer-view="y-menu" 1893 1894 aria-label="Toggle drawer" 1895 1896 aria-haspopup="menu" 1897 ><span></span><span></span><span></span></button><button 1898 class="header--search" 1899 data-drawer-open="top" 1900 data-drawer-view="search" 1901 data-item="nav-text" 1902 aria-label="search on olay.com" 1903 title="search on olay.com" 1904 tabindex="0" 1905 ><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"> 1906 <title id="icon-search-title">Search</title> 1907 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 1908 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 1909 </mask> 1910 <g mask="url(#mask0_7204_6974)"> 1911 <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"/> 1912 </g> 1913 </svg></button><!-- snippets/x-menu.liquid --><x-menu-element
1914 class="x-menu" 1915 aria-hidden="false" 1916 data-mq="medium-large" 1917 style="--highlight-color:#ffe379;" 1918> 1919 <ul class="x-menu--level-1--container"><li 1920 class="x-menu--level-1--link" 1921 data-depth="3" 1922 data-megamenu="true" 1923 1924 ><a 1925 href="#" 1926 data-item="nav-text" 1927 class="x-menu--level-1--link-anchor" 1928 1929 aria-haspopup="true" 1930 aria-expanded="false" 1931 aria-controls="x-menu_face" 1932 1933 ><span class="x-menu--level-1--text">Face</span></a><div 1934 class="x-menu--level-2--container" 1935 id="x-menu_face" 1936 aria-hidden="true" 1937 data-background-color="none" 1938 data-megamenu="true" 1939 data-text-color="body" 1940 1941 ><div class="x-menu--level-2--wrapper"><ul 1942 class="x-menu--level-2--list" 1943 1944 ><li class="x-menu--level-2--link"> 1945 <a href="#" data-item="nav-text">Featured</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1946 <a href="/collections/all-face-skincare" data-item="sub-nav-text">All Face Skincare</a> 1947 </li><li class="x-menu--level-3--link"> 1948 <a href="/collections/just-arrived" data-item="sub-nav-text">New to Face</a> 1949 </li><li class="x-menu--level-3--link"> 1950 <a href="/collections/best-sellers" data-item="sub-nav-text">Face Best Sellers</a> 1951 </li><li class="x-menu--level-3--link"> 1952 <a href="/collections/gift-sets-kits" data-item="sub-nav-text">Face Gift Sets & Bundles</a> 1953 </li><li class="x-menu--level-3--link"> 1954 <a href="/collections/trial-size" data-item="sub-nav-text">Face Travel Size & Minis</a> 1955 </li><li class="x-menu--level-3--link"> 1956 <a href="/collections/clearance" data-item="sub-nav-text">Face Clearance</a> 1957 </li></ul></li><li class="x-menu--level-2--link"> 1958 <a href="#" data-item="nav-text">Skin Goals</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1959 <a href="/collections/fine-lines-wrinkles" data-item="sub-nav-text">Wrinkles & Fine Lines</a> 1960 </li><li class="x-menu--level-3--link"> 1961 <a href="/collections/sagging-skin" data-item="sub-nav-text">Firmness & Elasticity</a> 1962 </li><li class="x-menu--level-3--link"> 1963 <a href="/collections/uneven-skin-tone" data-item="sub-nav-text">Dark Spots & Uneven Tone</a> 1964 </li><li class="x-menu--level-3--link"> 1965 <a href="/collections/hydration" data-item="sub-nav-text">Dry & Dehydrated Skin</a> 1966 </li><li class="x-menu--level-3--link"> 1967 <a href="/collections/sensitive-fragrance-free" data-item="sub-nav-text">Sensitive Skin</a> 1968 </li><li class="x-menu--level-3--link"> 1969 <a href="/collections/spf" data-item="sub-nav-text">SPF & Protection</a> 1970 </li></ul></li><li class="x-menu--level-2--link"> 1971 <a href="#" data-item="nav-text">Product Type</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1972 <a href="/collections/cleansers-toners-wipes" data-item="sub-nav-text">Facial Cleansers, Wipes & Toners</a> 1973 </li><li class="x-menu--level-3--link"> 1974 <a href="/collections/serums-treatments" data-item="sub-nav-text">Facial Serums & Treatments</a> 1975 </li><li class="x-menu--level-3--link"> 1976 <a href="/collections/eyes" data-item="sub-nav-text">Eye Care</a> 1977 </li><li class="x-menu--level-3--link"> 1978 <a href="/collections/moisturizers" data-item="sub-nav-text">Facial Moisturizers</a> 1979 </li><li class="x-menu--level-3--link"> 1980 <a href="/collections/spf" data-item="sub-nav-text">Sunscreen</a> 1981 </li></ul></li><li class="x-menu--level-2--link"> 1982 <a href="#" data-item="nav-text">Ingredient</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 1983 <a href="/collections/retinoid-complex" data-item="sub-nav-text">Retinol</a> 1984 </li><li class="x-menu--level-3--link"> 1985 <a href="/collections/vitamin-c" data-item="sub-nav-text">Vitamin C</a> 1986 </li><li class="x-menu--level-3--link"> 1987 <a href="/collections/hyaluronic-acid" data-item="sub-nav-text">Hyaluronic Acid</a> 1988 </li><li class="x-menu--level-3--link"> 1989 <a href="/collections/niacinamide" data-item="sub-nav-text">Niacinamide</a> 1990 </li><li class="x-menu--level-3--link"> 1991 <a href="/collections/peptides" data-item="sub-nav-text">Collagen Peptide</a> 1992 </li><li class="x-menu--level-3--link"> 1993 <a href="/collections/spf" data-item="sub-nav-text">SPF</a> 1994 </li></ul></li></ul></div><div 1995 class="menu-block--subnav-card" 1996 1997 1998 > 1999 <div class="subnav-card--image-wrapper"><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--image-link"><div 2000 class="subnav-card--image" 2001 2002 ><img 2003 src="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454" 2004 srcset="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=227 227w, 2005 //www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454 454w" 2006 sizes="227px" 2007 alt="" 2008 title="" 2009 width="227" 2010 height="184" 2011 loading="eager" 2012 ></div></a></div> 2013 2014 <div class="subnav-card--content"> 2015 <div class="subnav-card--text"><div class="subnav-card--title"> 2016 Regenerist 2017 </div><div class="subnav-card--description"> 2018 Visibly firmer, younger-looking skin 2019 </div></div><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--cta">
2020 <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"> 2021 <title id="icon-cta-arrow-title">CTA Arrow</title> 2022 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 2023 <rect width="22" height="22" fill="#D9D9D9"/> 2024 </mask> 2025 <g mask="url(#mask0_7232_266)"> 2026 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 2027 </g> 2028 </svg></a></div> 2029 </div></div></li><li 2030 class="x-menu--level-1--link" 2031 data-depth="3" 2032 data-megamenu="true" 2033 2034 ><a 2035 href="#" 2036 data-item="nav-text" 2037 class="x-menu--level-1--link-anchor" 2038 2039 aria-haspopup="true" 2040 aria-expanded="false" 2041 aria-controls="x-menu_body" 2042 2043 ><span class="x-menu--level-1--text">Body</span></a><div 2044 class="x-menu--level-2--container" 2045 id="x-menu_body" 2046 aria-hidden="true" 2047 data-background-color="none" 2048 data-megamenu="true" 2049 data-text-color="body" 2050 2051 ><div class="x-menu--level-2--wrapper"><ul 2052 class="x-menu--level-2--list" 2053 2054 ><li class="x-menu--level-2--link"> 2055 <a href="#" data-item="nav-text">Featured</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2056 <a href="/collections/body-care" data-item="sub-nav-text">All Body Care</a> 2057 </li><li class="x-menu--level-3--link"> 2058 <a href="/collections/new-body-care" data-item="sub-nav-text">New to Body</a> 2059 </li><li class="x-menu--level-3--link"> 2060 <a href="/collections/body-care-best-sellers" data-item="sub-nav-text">Body Best Sellers</a> 2061 </li></ul></li><li class="x-menu--level-2--link"> 2062 <a href="#" data-item="nav-text">Body Wash & Bars</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2063 <a href="/collections/body-wash" data-item="sub-nav-text">All Body Wash & Bars</a> 2064 </li><li class="x-menu--level-3--link"> 2065 <a href="/collections/premium-body-wash-bars" data-item="sub-nav-text">Premium Body Wash</a> 2066 </li><li class="x-menu--level-3--link"> 2067 <a href="/collections/fresh-scent" data-item="sub-nav-text">Fresh Radiance</a> 2068 </li><li class="x-menu--level-3--link"> 2069 <a href="/collections/super-serum-body-wash" data-item="sub-nav-text">Super Serum Body Wash</a> 2070 </li><li class="x-menu--level-3--link"> 2071 <a href="/collections/seasonal-body-wash" data-item="sub-nav-text">Seasonal Body Wash</a> 2072 </li><li class="x-menu--level-3--link"> 2073 <a href="/collections/bar-soap" data-item="sub-nav-text">Bar Soap</a> 2074 </li></ul></li><li class="x-menu--level-2--link"> 2075 <a href="#" data-item="nav-text">Hand & Body Moisturizers</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2076 <a href="/collections/hand-body-lotion" data-item="sub-nav-text">All Hand & Body Moisturizers</a> 2077 </li><li class="x-menu--level-3--link"> 2078 <a href="/collections/super-serum-hand-body-lotion" data-item="sub-nav-text">Super Serum Lotions & Creams</a> 2079 </li></ul></li><li class="x-menu--level-2--link"> 2080 <a href="#" data-item="nav-text">Skin Type</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2081 <a href="/collections/body-care-for-sensitive-skin" data-item="sub-nav-text">Sensitive</a> 2082 </li><li class="x-menu--level-3--link"> 2083 <a href="/collections/body-care-for-normal-skin" data-item="sub-nav-text">Normal</a> 2084 </li><li class="x-menu--level-3--link"> 2085 <a href="/collections/body-care-for-rough-bumpy-skin" data-item="sub-nav-text">Rough & Bumpy</a> 2086 </li><li class="x-menu--level-3--link"> 2087 <a href="/collections/body-care-for-dry-skin" data-item="sub-nav-text">Dry</a> 2088 </li></ul></li><li class="x-menu--level-2--link"> 2089 <a href="#" data-item="nav-text">Ingredient</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2090 <a href="/collections/body-care-with-vitamin-b3" data-item="sub-nav-text">Vitamin B3</a> 2091 </li><li class="x-menu--level-3--link"> 2092 <a href="/collections/body-care-with-glycerin" data-item="sub-nav-text">Glycerin</a> 2093 </li><li class="x-menu--level-3--link"> 2094 <a href="/collections/body-care-with-shea-butter" data-item="sub-nav-text">Shea Butter</a> 2095 </li><li class="x-menu--level-3--link"> 2096 <a href="/collections/body-care-with-vitamin-e" data-item="sub-nav-text">Vitamin E</a> 2097 </li><li class="x-menu--level-3--link"> 2098 <a href="/collections/body-care-with-vitamin-c" data-item="sub-nav-text">Vitamin C</a> 2099 </li><li class="x-menu--level-3--link"> 2100 <a href="/collections/body-care-with-retinol" data-item="sub-nav-text">Retinol</a> 2101 </li><li class="x-menu--level-3--link"> 2102 <a href="/collections/body-care-with-collagen" data-item="sub-nav-text">Collagen</a> 2103 </li></ul></li></ul></div><div 2104 class="menu-block--subnav-card" 2105 2106 2107 > 2108 <div class="subnav-card--image-wrapper"><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--image-link"><div 2109 class="subnav-card--image" 2110 2111 ><img 2112 src="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454" 2113 srcset="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=227 227w, 2114 //www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454 454w" 2115 sizes="227px" 2116 alt="" 2117 title="" 2118 width="227" 2119 height="184" 2120 loading="eager" 2121 ></div></a></div> 2122 2123 <div class="subnav-card--content"> 2124 <div class="subnav-card--text"><div class="subnav-card--title"> 2125 Limited Edition Body Wash 2126 </div><div class="subnav-card--description"> 2127 Strawberry Fizz Scent 2128 </div></div><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--cta">
2129 <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"> 2130 <title id="icon-cta-arrow-title">CTA Arrow</title> 2131 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 2132 <rect width="22" height="22" fill="#D9D9D9"/> 2133 </mask> 2134 <g mask="url(#mask0_7232_266)"> 2135 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 2136 </g> 2137 </svg></a></div> 2138 </div></div></li><li 2139 class="x-menu--level-1--link" 2140 data-depth="3" 2141 data-megamenu="true" 2142 2143 ><a 2144 href="#" 2145 data-item="nav-text" 2146 class="x-menu--level-1--link-anchor" 2147 2148 aria-haspopup="true" 2149 aria-expanded="false" 2150 aria-controls="x-menu_anti-aging" 2151 2152 ><span class="x-menu--level-1--text">Anti-aging</span></a><div 2153 class="x-menu--level-2--container" 2154 id="x-menu_anti-aging" 2155 aria-hidden="true" 2156 data-background-color="none" 2157 data-megamenu="true" 2158 data-text-color="body" 2159 2160 ><div class="x-menu--level-2--wrapper"><ul 2161 class="x-menu--level-2--list" 2162 2163 ><li class="x-menu--level-2--link"> 2164 <a href="#" data-item="nav-text">Solutions</a><ul class="x-menu--level-3--container"><li class="x-menu--level-3--link"> 2165 <a href="/collections/anti-aging" data-item="sub-nav-text">All Anti-Aging</a> 2166 </li><li class="x-menu--level-3--link"> 2167 <a href="/collections/fine-lines-wrinkles" data-item="sub-nav-text">Wrinkles & Fine Lines</a> 2168 </li><li class="x-menu--level-3--link"> 2169 <a href="/collections/sagging-skin" data-item="sub-nav-text">Firmness & Elasticity</a> 2170 </li><li class="x-menu--level-3--link"> 2171 <a href="/collections/uneven-skin-tone" data-item="sub-nav-text"> Dark Spots & Uneven Tone</a> 2172 </li><li class="x-menu--level-3--link"> 2173 <a href="/collections/hydration" data-item="sub-nav-text"> Dry & Dehydrated Skin</a> 2174 </li></ul></li></ul></div><div 2175 class="menu-block--grid-with-slider" 2176 2177 2178 > 2179 <div 2180 id="grid-slider-grid_with_slider_Demo" 2181 class="grid-slider--slick" 2182 data-slides-to-show="3" 2183 data-slides-to-scroll="1" 2184 data-autoplay="false" 2185 data-autoplay-speed="3000" 2186 data-show-arrows="true" 2187 data-show-dots="true" 2188 data-infinite="false" 2189 ><div class="slider-card"><a href="/pages/cleansing-melts" class="slider-card--link"><div class="slider-card--image-wrapper"> 2190 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2191 class="image--root" 2192 data-background="false" 2193 data-display-type="aspect-ratio" 2194 data-full-width="" 2195 data-mobile-display-type="aspect-ratio" 2196 data-mobile-full-width="" 2197 data-mobile-overlay-style="" 2198 data-parallax="" 2199 data-overlay-style="" 2200 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2014;" 2201><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"> 2202</picture></div> 2203 </div> 2204 2205 <div class="slider-card--content"> 2206 <div class="slider-card--text"><div class="slider-card--title"> 2207 Achieve Better Skin with Superior Cleansing 2208 </div><div class="slider-card--description"> 2209 Maintain your skin with our cleansing routine that fits and supports your career. 2210 </div></div><span class="slider-card--cta">
2211 <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"> 2212 <title id="icon-arrow-right-title">Arrow Right</title> 2213 <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" /> 2214 </svg></span></div></a></div><div class="slider-card"><a href="/collections/serums-treatments" class="slider-card--link"><div class="slider-card--image-wrapper"> 2215 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2216 class="image--root" 2217 data-background="false" 2218 data-display-type="aspect-ratio" 2219 data-full-width="" 2220 data-mobile-display-type="aspect-ratio" 2221 data-mobile-full-width="" 2222 data-mobile-overlay-style="" 2223 data-parallax="" 2224 data-overlay-style="" 2225 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 2226><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"> 2227</picture></div> 2228 </div> 2229 2230 <div class="slider-card--content"> 2231 <div class="slider-card--text"><div class="slider-card--title"> 2232 Erase Aging - Professional Results at Home 2233 </div><div class="slider-card--description"> 2234 Discover how our cutting-edge serums deliver advanced anti-aging results for a youthful glow. 2235 </div></div><span class="slider-card--cta"> 2236 <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"> 2237 <title id="icon-arrow-right-title">Arrow Right</title> 2238 <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" /> 2239 </svg></span></div></a></div><div class="slider-card"><a href="/collections/hydration" class="slider-card--link"><div class="slider-card--image-wrapper"> 2240 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2241 class="image--root" 2242 data-background="false" 2243 data-display-type="aspect-ratio" 2244 data-full-width="" 2245 data-mobile-display-type="aspect-ratio" 2246 data-mobile-full-width="" 2247 data-mobile-overlay-style="" 2248 data-parallax="" 2249 data-overlay-style="" 2250 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 2251><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"> 2252</picture></div> 2253 </div> 2254 2255 <div class="slider-card--content"> 2256 <div class="slider-card--text"><div class="slider-card--title"> 2257 Hydration Heroes 2258 </div><div class="slider-card--description"> 2259 Lock in moisture with our intensive hydration formulas for plump, radiant skin. 2260 </div></div><span class="slider-card--cta">
2261 <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"> 2262 <title id="icon-arrow-right-title">Arrow Right</title> 2263 <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" /> 2264 </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"> 2265 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 2266 class="image--root" 2267 data-background="false" 2268 data-display-type="aspect-ratio" 2269 data-full-width="" 2270 data-mobile-display-type="aspect-ratio" 2271 data-mobile-full-width="" 2272 data-mobile-overlay-style="" 2273 data-parallax="" 2274 data-overlay-style="" 2275 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 2276><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"> 2277</picture></div> 2278 </div> 2279 2280 <div class="slider-card--content"> 2281 <div class="slider-card--text"><div class="slider-card--title"> 2282 Brighten & Glow 2283 </div><div class="slider-card--description"> 2284 Illuminate your complexion with targeted treatments for dark spots and uneven tone. 2285 </div></div><span class="slider-card--cta"> 2286 <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"> 2287 <title id="icon-arrow-right-title">Arrow Right</title> 2288 <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" /> 2289 </svg></span></div></a></div></div> 2290 </div></div></li><li 2291 class="x-menu--level-1--link" 2292 data-depth="1" 2293 data-megamenu="true" 2294 2295 ><a 2296 href="#" 2297 data-item="nav-text" 2298 class="x-menu--level-1--link-anchor" 2299 2300 aria-haspopup="true" 2301 aria-expanded="false" 2302 aria-controls="x-menu_find-my-routine" 2303 2304 ><span class="x-menu--level-1--text">Find My Routine</span></a><div 2305 class="x-menu--level-2--container" 2306 id="x-menu_find-my-routine" 2307 aria-hidden="true" 2308 data-background-color="none" 2309 data-megamenu="true" 2310 data-text-color="body" 2311 2312 ><div 2313 class="menu-block--osa-fifty" 2314 data-reverse-layout="true" 2315 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%);" 2316 2317 2318 > 2319 <div class="osa-fifty-content"> 2320 2321 <!-- Left Column - Text Content --> 2322 <div class="osa-fifty-text-column"> 2323 <div class="osa-fifty-superheading"> 2324 welcome to <span class="osa-fifty-powered">Powered by AI</span> 2325 </div> 2326 2327 <div class="osa-fifty-heading"> 2328 skin advisor 2329 </div><img 2330 src="//www.olay.com/cdn/shop/t/10/assets/Underline.png?v=15233172491784850011779203463" 2331 class="osa-fifty-underline" 2332 alt="underline decoration" 2333 loading="lazy" 2334 width="320" 2335 height="auto" 2336 ><div class="osa-fifty-text">
2337 <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"> 2338 <a 2339 href="/pages/skin-advisor?autostart=true" 2340 class="osa-fifty-cta" 2341 title="Get Started Now" 2342 aria-label="Get Started Now" 2343 > 2344 <span class="osa-fifty-cta-text">Get Started Now</span> 2345 </a> 2346 </div></div> 2347 2348 <!-- Right Column - Image --> 2349 <div class="osa-fifty-image-column"> 2350 <picture><source 2351 media="(min-width: 1200px)" 2352 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466" 2353 ><source 2354 media="(min-width: 768px)" 2355 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mobile.png?v=99265202458701537411779203462" 2356 ><source 2357 media="(min-width: 250px)" 2358 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mob.png?v=59333317371312214441779203466" 2359 ><img 2360 class="osa-fifty-image" 2361 height="100%" 2362 width="100%" 2363 loading="lazy" 2364 alt="Skin Advisor" 2365 title="Skin Advisor"src="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466"> 2366 </picture> 2367 </div> 2368 2369 </div> 2370 </div></div></li><li 2371 class="x-menu--level-1--link" 2372 data-depth="1" 2373 data-megamenu="true" 2374 2375 ><a 2376 href="#" 2377 data-item="nav-text" 2378 class="x-menu--level-1--link-anchor" 2379 2380 aria-haspopup="true" 2381 aria-expanded="false" 2382 aria-controls="x-menu_offers" 2383 2384 ><span class="x-menu--level-1--text">Offers</span></a><div 2385 class="x-menu--level-2--container" 2386 id="x-menu_offers" 2387 aria-hidden="true" 2388 data-background-color="none" 2389 data-megamenu="true" 2390 data-text-color="body" 2391 2392 ><div 2393 class="menu-block--grid-links" 2394 data-item-count="4" 2395 2396 2397 > 2398 <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> 2399 </div></div></li><li 2400 class="x-menu--level-1--link" 2401 data-depth="1" 2402 data-megamenu="true" 2403 2404 ><a 2405 href="#" 2406 data-item="nav-text" 2407 class="x-menu--level-1--link-anchor" 2408 2409 aria-haspopup="true" 2410 aria-expanded="false" 2411 aria-controls="x-menu_learn" 2412 2413 ><span class="x-menu--level-1--text">Learn</span></a><div 2414 class="x-menu--level-2--container" 2415 id="x-menu_learn" 2416 aria-hidden="true" 2417 data-background-color="none" 2418 data-megamenu="true" 2419 data-text-color="body" 2420 2421 ><div 2422 class="menu-block--grid-links" 2423 data-item-count="5" 2424 2425 2426 > 2427 <div class="grid-link-item"><a href="/pages/proven-science" class="grid-link-wrapper"><h3 class="grid-link-title">
2427Proven Science</h3><p class="grid-link-desc">Backed by decades of skin<br> 2428research 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> 2429a 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> 2430skincare 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> 2431 </div></div></li></ul> 2432</x-menu-element> 2433 2434 2435<!-- 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'"> 2436<noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick.min.css?v=103443148378814735961779203468"></noscript> 2437<link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick-theme.min.css?v=132284215187113083101779203467" media="print" onload="this.media='all'"> 2438<noscript><link rel="stylesheet" href="//www.olay.com/cdn/shop/t/10/assets/slick-theme.min.css?v=132284215187113083101779203467"></noscript> 2439
2440<script> 2441 (function() { 2442 // Load jQuery if not already loaded 2443 function loadJQuery(callback) { 2444 if (typeof jQuery !== 'undefined') { 2445 callback(); 2446 } else { 2447 const jQueryScript = document.createElement('script'); 2448 jQueryScript.src = '//www.olay.com/cdn/shop/t/10/assets/jquery.min.js?v=147293088974801289311779203466'; 2449 jQueryScript.onload = callback; 2450 document.head.appendChild(jQueryScript); 2451 } 2452 } 2453 2454 // Load Slick Slider 2455 function loadSlick(callback) { 2456 if (typeof jQuery.fn.slick !== 'undefined') { 2457 callback(); 2458 } else { 2459 const slickScript = document.createElement('script'); 2460 slickScript.src = '//www.olay.com/cdn/shop/t/10/assets/slick.min.js?v=71779134894361685811779203468'; 2461 slickScript.onload = callback; 2462 document.head.appendChild(slickScript); 2463 } 2464 } 2465 2466 function initOrRefreshSliders() { 2467 if (typeof jQuery === 'undefined' || typeof jQuery.fn.slick === 'undefined') return; 2468 2469 jQuery('.grid-slider--slick').each(function() { 2470 const $slider = jQuery(this); 2471 2472 // Get configuration from data attributes 2473 const slidesToShow = parseInt($slider.data('slides-to-show')) || 2; 2474 const slidesToScroll = parseInt($slider.data('slides-to-scroll')) || 1; 2475 const autoplay = $slider.data('autoplay') === 'true' || $slider.data('autoplay') === true; 2476 const autoplaySpeed = parseInt($slider.data('autoplay-speed')) || 3000; 2477 const showArrows = $slider.data('show-arrows') !== 'false' && $slider.data('show-arrows') !== false; 2478 const showDots = $slider.data('show-dots') !== 'false' && $slider.data('show-dots') !== false; 2479 const infinite = $slider.data('infinite') === 'true' || $slider.data('infinite') === true; 2480 2481 // Check if already initialized 2482 if (!$slider.hasClass('slick-initialized')) { 2483 // Initialize Slick Slider 2484 $slider.slick({ 2485 slidesToShow: slidesToShow, 2486 slidesToScroll: slidesToScroll, 2487 autoplay: autoplay, 2488 autoplaySpeed: autoplaySpeed, 2489 arrows: showArrows, 2490 dots: showDots, 2491 infinite: infinite, 2492 speed: 300, 2493 cssEase: 'ease-in-out', 2494 adaptiveHeight: false, 2495 variableWidth: false, 2496 responsive: [ 2497 { 2498 breakpoint: 1440, 2499 settings: { 2500 slidesToShow: Math.min(slidesToShow, 2), 2501 slidesToScroll: 1 2502 } 2503 }, 2504 { 2505 breakpoint: 1100, 2506 settings: { 2507 slidesToShow: Math.min(slidesToShow, 2), 2508 slidesToScroll: 1 2509 } 2510 }, 2511 { 2512 breakpoint: 768, 2513 settings: { 2514 slidesToShow: 1, 2515 slidesToScroll: 1, 2516 arrows: true, 2517 dots: true, 2518 centerMode: false, 2519 variableWidth: true, 2520 adaptiveHeight: false 2521 } 2522 } 2523 ] 2524 }); 2525 2526 // Prevent swipe/touch events from closing the menu 2527 $slider.on('touchstart touchmove touchend', function(e) { 2528 e.stopPropagation(); 2529 }); 2530 2531 // Prevent mouse drag events from closing the menu 2532 $slider.on('mousedown mousemove mouseup', function(e) { 2533 e.stopPropagation(); 2534 }); 2535 } 2536 2537 // Always refresh position 2538 setTimeout(function () { 2539 if ($slider.hasClass('slick-initialized')) { 2540 $slider.slick('setPosition'); 2541 } 2542 }, 50); 2543 }); 2544 } 2545 2546 function setupSliders() { 2547 if (window.__olayXMenuSlidersInitialized) return; 2548 window.__olayXMenuSlidersInitialized = true; 2549 2550 jQuery(function($) { 2551 initOrRefreshSliders(); 2552 2553 if (window.__olayXMenuSliderObserver) { 2554 window.__olayXMenuSliderObserver.disconnect(); 2555 } 2556 2557 // Watch for mega menu visibility changes 2558 const observer = new MutationObserver(function(mutations) { 2559 mutations.forEach(function(mutation) { 2560 if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') { 2561 const target = mutation.target; 2562 const ariaHiddenValue = target.getAttribute('aria-hidden'); 2563 2564 // Check if aria-hidden is false (as string) or falsy value 2565 if (target.classList.contains('x-menu--level-2--container') && 2566 (ariaHiddenValue === 'false' || ariaHiddenValue === false)) { 2567 // Mega menu just became visible - refresh sliders inside 2568 setTimeout(function() { 2569 const $slidersInMenu = $(target).find('.grid-slider--slick.slick-initialized'); 2570 if ($slidersInMenu.length) { 2571 $slidersInMenu.each(function() { 2572 $(this).slick('setPosition'); 2573 }); 2574 } 2575 }, 150); 2576 } 2577 } 2578 }); 2579 }); 2580 2581 window.__olayXMenuSliderObserver = observer; 2582 2583 // Observe all level-2 containers (mega menus) 2584 $('.x-menu--level-2--container').each(function() { 2585 observer.observe(this, { 2586 attributes: true, 2587 attributeFilter: ['aria-hidden'] 2588 }); 2589 }); 2590 // Also refresh sliders on initial menu open for safety 2591 $(document).on('click.xMenuSliders', '.x-menu--level-1--link > a', function() { 2592 setTimeout(function() { 2593 const $allSliders = $('.grid-slider--slick.slick-initialized'); 2594 if ($allSliders.length) { 2595 $allSliders.each(function() { 2596 if (!$(this).closest('.x-menu--level-2--container').attr('aria-hidden') || 2597 $(this).closest('.x-menu--level-2--container').attr('aria-hidden') === 'false') { 2598 $(this).slick('setPosition'); 2599 } 2600 }); 2601 } 2602 }, 200); 2603 }); 2604 2605 2606 // Global resize handler 2607 $(window).off('resize.xMenuSliders orientationchange.xMenuSliders'); 2608 $(window).on('resize.xMenuSliders orientationchange.xMenuSliders', function () { 2609 $('.grid-slider--slick.slick-initialized').each(function() { 2610 $(this).slick('setPosition'); 2611 }); 2612 }); 2613 2614 // Fallback: Refresh on menu item hover 2615 $('.x-menu--level-1--link').off('mouseenter.xMenuSliders'); 2616 $('.x-menu--level-1--link').on('mouseenter.xMenuSliders', function() { 2617 const $menuItem = $(this); 2618 setTimeout(function() { 2619 const $sliders = $menuItem.find('.grid-slider--slick.slick-initialized'); 2620 if ($sliders.length) { 2621 $sliders.each(function() { 2622 $(this).slick('setPosition'); 2623 }); 2624 } 2625 }, 150); 2626 }); 2627 }); 2628 } 2629 2630 function bootstrap() { 2631 loadJQuery(function() { 2632 loadSlick(function() { 2633 setupSliders(); 2634 }); 2635 }); 2636 } 2637 2638 if (document.readyState === 'loading') { 2639 document.addEventListener('DOMContentLoaded', bootstrap); 2640 } else { 2641 bootstrap(); 2642 } 2643 })(); 2644</script>
2644</nav> 2645 2646 <nav class="header--secondary-nav" aria-label="Secondary navigation" data-item="nav-text"><a 2647 class="olay-club-rewards-btn desktop-only" 2648 href="https://club.olay.com?locale=en®ion_country=US&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkxNTE5NTE1LCJuYmYiOjE3OTA5MTQ3MTV9.QYr7KKP3LArcNTw7g_W-onL_3FUOjTTlJ5le3D270bU" 2649 aria-label="Club Olay Rewards" 2650 title="Club Olay Rewards" 2651 > 2652 Club Olay Rewards 2653 </a><button 2654 class="header--search" 2655 data-drawer-open="top" 2656 data-drawer-view="search" 2657 data-item="nav-text" 2658 aria-label="search on olay.com" 2659 title="search on olay.com" 2660 tabindex="0" 2661 ><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"> 2662 <title id="icon-search-title">Search</title> 2663 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 2664 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 2665 </mask> 2666 <g mask="url(#mask0_7204_6974)"> 2667 <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"/> 2668 </g> 2669 </svg></button><a 2670 class="header--account" 2671 href="javascript:void(0);" 2672 aria-label="login to your ClubOlay account" 2673 title="login to your ClubOlay account" 2674 data-login-modal-open 2675 > 2676 2677<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"> 2678 <title id="icon-account-title">login to your ClubOlay account</title> 2679 <mask id="mask0_7204_6977" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-3" y="-3" width="26" height="26"> 2680 <rect x="-3" y="-3" width="26" height="26" fill="#D9D9D9"/> 2681 </mask> 2682 <g mask="url(#mask0_7204_6977)"> 2683 <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"/> 2684 <circle cx="18" cy="18" r="5" fill="#C11E33"/> 2685 </g> 2686 </svg> 2687 </a><a 2688 class="header--cart" 2689 aria-label="items in your cart" 2690 title="items in your cart" 2691 2692 data-drawer-open="right" 2693 data-drawer-view="cart-drawer" 2694 aria-haspopup="menu" 2695 href="#" 2696 2697 data-cart-count="0" 2698 > 2699 <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"> 2700 <title id="icon-bag-title">Shopping Bag</title> 2701 <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
2701195 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"/> 2702 </svg></span> 2703 </a></nav> 2704 </div> 2705</header-element> 2706 2707<style> 2708 :root { 2709 --header--logo-height: 28px; 2710 --header--sticky: 1; 2711 --header--sidebar-height: calc( 2712 var(--spacing--block) + var(--spacing--section--y) + var(--header--logo-height) 2713 );--header--sidebar-width: 0px;} 2714 2715 .section--announcement ~ #shopify-section-sections--25816846729259__header { 2716 2717 top: calc((var(--announcement--sticky, 0) * var(--announcement--height, 0px)) + 4px); 2718 2719 z-index: 9; 2720 } 2721 2722 2723 #shopify-section-sections--25816846729259__header .header--root { 2724 position: relative; 2725 top: 4px; 2726 } 2727 2728 .section--announcement ~ #shopify-section-sections--25816846729259__header .header--root { 2729 top: 0; 2730 } 2731 2732 2733 /* Header border at bottom */ 2734 /* .header--root { 2735 border-bottom: 1px solid var(--border--color-light, #E5E5E5); 2736 } */ 2737 2738 /* Club Olay Rewards pill */ 2739 .olay-club-rewards-btn { 2740 display: inline-flex; 2741 align-items: center; 2742 justify-content: center; 2743 color: #161716; 2744 font-size: 14px; 2745 font-weight: 400; 2746 line-height: 1.21; 2747 padding: 6px 12px; 2748 border-radius: 4px; 2749 text-decoration: none; 2750 white-space: nowrap; 2751 transition: opacity 0.2s; 2752 } 2753 2754 .olay-club-rewards-btn:hover { 2755 opacity: 0.85; 2756 text-decoration: none; 2757 } 2758 2759 /* Header content sizing to fit within constrained height */ 2760 .header--logo, 2761 .header--primary-logo, 2762 .header--desktop-logo, 2763 .header--mobile-logo { 2764 display: flex; 2765 align-items: center; 2766 height: 100%; 2767 } 2768 2769 .header--logo img { 2770 max-height: 28px; 2771 width: auto; 2772 } 2773 2774 @media only screen and (max-width: 639px) { 2775 .header--logo img { 2776 max-height: 38px; 2777 } 2778 } 2779 2780 /* Ensure nav items and icons fit properly */ 2781 .header--primary-nav, 2782 .header--secondary-nav { 2783 height: 100%; 2784 display: flex; 2785 align-items: center; 2786 } 2787 2788 .header--search, 2789 .header--account, 2790 .header--cart { 2791 display: flex; 2792 align-items: center; 2793 justify-content: center; 2794 } 2795 2796 /* Mobile drawer toggle visibility and sizing */ 2797 @media only screen and (max-width: 639px) { 2798 .header--primary-nav { 2799 display: flex !important; 2800 visibility: visible !important; 2801 opacity: 1 !important; 2802 } 2803 2804 .header--drawer-toggle { 2805 display: flex !important; 2806 flex-direction: column; 2807 gap: 5px; 2808 padding: 8px; 2809 width: auto; 2810 height: auto; 2811 align-items: center; 2812 justify-content: center; 2813 position: relative; 2814 z-index: 10; 2815 } 2816 2817 .header--drawer-toggle span { 2818 display: block !important; 2819 width: 22px; 2820 height: 2px; 2821 background-color: var(--header--color, #161716); 2822 border-radius: 2px; 2823 } 2824 } 2825 2826 /* Figma-accurate header spacing */ 2827 /* @media only screen and (min-width: 640px) { 2828 .header--wrapper { 2829 column-gap: var(--spacing--6); 2830 } 2831 2832 .header--secondary-nav { 2833 gap: 24px; 2834 } 2835 } */ 2836 2837 /* Mobile & tablet logo swap */ 2838 .header--mobile-logo { 2839 display: none; 2840 } 2841 @media only screen and (max-width: 1023px) { 2842 [data-has-mobile-logo="true"] .header--desktop-logo { 2843 display: none; 2844 } 2845 [data-has-mobile-logo="true"] .header--mobile-logo { 2846 display: block; 2847 } 2848 } 2849 2850 @media only screen and (max-width: 639px) { 2851 .header--root[data-icons="true"] .header--primary-nav .header--search { 2852 display: none; 2853 } 2854 .header--root[data-icons="true"] .header--secondary-nav .header--search { 2855 display: flex; 2856 } 2857 } 2858 2859 @media only screen and (min-width: 640px) and (max-width: 1023px) { 2860 .header--root[data-layout="drawer"][data-icons="true"] .header--primary-nav .header--search { 2861 display: none; 2862 } 2863 .header--root[data-layout="drawer"][data-icons="true"] .header--secondary-nav .header--search { 2864 display: flex !important; 2865 } 2866 } 2867 2868 /* Keep drawer toggle visible on small tablet widths where drawer nav is used */ 2869 @media only screen and (min-width: 640px) and (max-width: 963px) { 2870 .header--root[data-layout="drawer"] .header--drawer-toggle { 2871 display: flex !important; 2872 align-items: center; 2873 justify-content: center; 2874 } 2875 } 2876 2877 /* ============================================ 2878 HEADER HEIGHT CONSTRAINTS & SPACING 2879 ============================================ 2880 Mobile (<640px): 68px max height, 24px top/bottom, 20px left/right 2881 Tablet (640-1023px): 76px max height, 24px top/bottom, 80px left/right 2882 Desktop (â¥1024px): 76px max height, 24px top/bottom, 80px left/right 2883 ============================================ */ 2884 2885 /* Mobile: 68px max height, 24px vertical, 20px horizontal */ 2886 @media only screen and (max-width: 639px) { 2887 .header--root { 2888 max-height: 68px; 2889 box-sizing: border-box; 2890 } 2891 2892 .header--root .header--wrapper { 2893 max-height: 68px; 2894 overflow: visible; 2895 box-sizing: border-box; 2896 align-items: center; 2897 padding: 20px !important; 2898 gap: 12px !important; 2899 } 2900 2901 .header--primary-nav { 2902 overflow: visible; 2903 } 2904 } 2905 2906 /* Tablet & Desktop: 76px max height, 24px vertical, 80px horizontal */ 2907 @media only screen and (min-width: 640px) { 2908 .header--root, 2909 .header--root .header--wrapper { 2910 max-height: 76px; 2911 box-sizing: border-box; 2912 } 2913 2914 .header--wrapper { 2915 align-items: center; 2916 padding: 24px 80px !important; 2917 } 2918 } 2919</style> 2920 2921
2922<script> 2923 const header_root = document.querySelector('.header--root'); 2924 header_root && document.documentElement.style.setProperty( 2925 '--header--height', `${header_root.offsetHeight.toFixed(2)}px` 2926 ); 2927 2928 const viewport = document.querySelector('.layout--viewport'); 2929 viewport?.setAttribute('data-header-layout', 'left-left'); 2930</script>
2930<element-relocator data-move-into=".mobile-nav--menu" data-mq="none"><!-- snippets/y-menu.liquid --><y-menu-element 2931 class="y-menu" 2932 data-id="y-menu_mobile-nav" 2933 data-hover-disabled="false" 2934 data-inside-drawer="" 2935 style="--highlight-color:#ffe379;" 2936> 2937 <ul 2938 class="y-menu--level-1--container" 2939 id="y-menu_mobile-nav" 2940 aria-current="true" 2941 2942 > 2943 2944<li 2945 class="y-menu--level-1--link" 2946 data-depth="3" 2947 2948 ><button 2949 data-item="nav-text" 2950 aria-haspopup="true" 2951 aria-expanded="false" 2952 aria-controls="y-menu_mobile-nav_face" 2953 2954 > 2955 <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"> 2956 <title id="icon-chevron-right-small-title">Chevron Right</title> 2957 <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" /> 2958 </svg></button><ul 2959 class="y-menu--level-2--container" 2960 2961 id="y-menu_mobile-nav_face" 2962 aria-current="false" 2963 2964 > 2965 <li class="y-menu--back-link"> 2966 <button 2967 data-item="nav-text" 2968 aria-controls="y-menu_mobile-nav" 2969 2970 ><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"> 2971 <title id="icon-chevron-right-small-title">Chevron Right</title> 2972 <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" /> 2973 </svg><span>Face</span> 2974 </button> 2975 </li><li class="y-menu--level-2--link" data-item="nav-text"><button 2976 class="y-menu--accordion-toggle" 2977 data-item="nav-text" 2978 aria-expanded="false" 2979 aria-controls="y-menu_mobile-nav_face_featured" 2980 2981 > 2982 <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"> 2983 <title id="icon-chevron-down-title">Chevron Down</title> 2984 <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" /> 2985 </svg></button> 2986<ul 2987 class="y-menu--level-3--container" 2988 id="y-menu_mobile-nav_face_featured" 2989 aria-hidden="true" 2990 2991 ><li class="y-menu--level-3--link"> 2992 <a 2993 href="/collections/all-face-skincare" 2994 2995 > 2996 <span>All Face Skincare</span> 2997 </a> 2998 </li><li class="y-menu--level-3--link"> 2999 <a 3000 href="/collections/just-arrived" 3001 3002 > 3003 <span>New to Face</span> 3004 </a> 3005 </li><li class="y-menu--level-3--link"> 3006 <a 3007 href="/collections/best-sellers" 3008 3009 > 3010 <span>Face Best Sellers</span> 3011 </a> 3012 </li><li class="y-menu--level-3--link"> 3013 <a 3014 href="/collections/gift-sets-kits" 3015 3016 > 3017 <span>Face Gift Sets & Bundles</span> 3018 </a> 3019 </li><li class="y-menu--level-3--link"> 3020 <a 3021 href="/collections/trial-size" 3022 3023 >
3024 <span>Face Travel Size & Minis</span> 3025 </a> 3026 </li><li class="y-menu--level-3--link"> 3027 <a 3028 href="/collections/clearance" 3029 3030 > 3031 <span>Face Clearance</span> 3032 </a> 3033 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3034 class="y-menu--accordion-toggle" 3035 data-item="nav-text" 3036 aria-expanded="false" 3037 aria-controls="y-menu_mobile-nav_face_skin-goals" 3038 3039 > 3040 <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"> 3041 <title id="icon-chevron-down-title">Chevron Down</title> 3042 <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" /> 3043 </svg></button> 3044<ul 3045 class="y-menu--level-3--container" 3046 id="y-menu_mobile-nav_face_skin-goals" 3047 aria-hidden="true" 3048 3049 ><li class="y-menu--level-3--link"> 3050 <a 3051 href="/collections/fine-lines-wrinkles" 3052 3053 > 3054 <span>Wrinkles & Fine Lines</span> 3055 </a> 3056 </li><li class="y-menu--level-3--link"> 3057 <a 3058 href="/collections/sagging-skin" 3059 3060 > 3061 <span>Firmness & Elasticity</span> 3062 </a> 3063 </li><li class="y-menu--level-3--link"> 3064 <a 3065 href="/collections/uneven-skin-tone" 3066 3067 > 3068 <span>Dark Spots & Uneven Tone</span> 3069 </a> 3070 </li><li class="y-menu--level-3--link"> 3071 <a 3072 href="/collections/hydration" 3073 3074 > 3075 <span>Dry & Dehydrated Skin</span> 3076 </a> 3077 </li><li class="y-menu--level-3--link"> 3078 <a 3079 href="/collections/sensitive-fragrance-free" 3080 3081 > 3082 <span>Sensitive Skin</span> 3083 </a> 3084 </li><li class="y-menu--level-3--link"> 3085 <a 3086 href="/collections/spf" 3087 3088 > 3089 <span>SPF & Protection</span> 3090 </a> 3091 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3092 class="y-menu--accordion-toggle" 3093 data-item="nav-text" 3094 aria-expanded="false" 3095 aria-controls="y-menu_mobile-nav_face_product-type" 3096 3097 > 3098 <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"> 3099 <title id="icon-chevron-down-title">Chevron Down</title> 3100 <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" /> 3101 </svg></button> 3102<ul 3103 class="y-menu--level-3--container" 3104 id="y-menu_mobile-nav_face_product-type" 3105 aria-hidden="true" 3106 3107 ><li class="y-menu--level-3--link"> 3108 <a 3109 href="/collections/cleansers-toners-wipes" 3110 3111 >
3112 <span>Facial Cleansers, Wipes & Toners</span> 3113 </a> 3114 </li><li class="y-menu--level-3--link"> 3115 <a 3116 href="/collections/serums-treatments" 3117 3118 > 3119 <span>Facial Serums & Treatments</span> 3120 </a> 3121 </li><li class="y-menu--level-3--link"> 3122 <a 3123 href="/collections/eyes" 3124 3125 > 3126 <span>Eye Care</span> 3127 </a> 3128 </li><li class="y-menu--level-3--link"> 3129 <a 3130 href="/collections/moisturizers" 3131 3132 > 3133 <span>Facial Moisturizers</span> 3134 </a> 3135 </li><li class="y-menu--level-3--link"> 3136 <a 3137 href="/collections/spf" 3138 3139 > 3140 <span>Sunscreen</span> 3141 </a> 3142 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3143 class="y-menu--accordion-toggle" 3144 data-item="nav-text" 3145 aria-expanded="false" 3146 aria-controls="y-menu_mobile-nav_face_ingredient" 3147 3148 > 3149 <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"> 3150 <title id="icon-chevron-down-title">Chevron Down</title> 3151 <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" /> 3152 </svg></button> 3153<ul 3154 class="y-menu--level-3--container" 3155 id="y-menu_mobile-nav_face_ingredient" 3156 aria-hidden="true" 3157 3158 ><li class="y-menu--level-3--link"> 3159 <a 3160 href="/collections/retinoid-complex" 3161 3162 > 3163 <span>Retinol</span> 3164 </a> 3165 </li><li class="y-menu--level-3--link"> 3166 <a 3167 href="/collections/vitamin-c" 3168 3169 > 3170 <span>Vitamin C</span> 3171 </a> 3172 </li><li class="y-menu--level-3--link"> 3173 <a 3174 href="/collections/hyaluronic-acid" 3175 3176 > 3177 <span>Hyaluronic Acid</span> 3178 </a> 3179 </li><li class="y-menu--level-3--link"> 3180 <a 3181 href="/collections/niacinamide" 3182 3183 > 3184 <span>Niacinamide</span> 3185 </a> 3186 </li><li class="y-menu--level-3--link"> 3187 <a 3188 href="/collections/peptides" 3189 3190 > 3191 <span>Collagen Peptide</span> 3192 </a> 3193 </li><li class="y-menu--level-3--link"> 3194 <a 3195 href="/collections/spf" 3196 3197 > 3198 <span>SPF</span> 3199 </a> 3200 </li></ul></li><li class="y-menu--blocks"><div 3201 class="menu-block--subnav-card" 3202 3203 3204 > 3205 <div class="subnav-card--image-wrapper"><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--image-link"><div 3206 class="subnav-card--image" 3207 3208 ><img 3209 src="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454" 3210 srcset="//www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=227 227w, 3211 //www.olay.com/cdn/shop/files/skin_subnav_img.png?v=1779268516&width=454 454w" 3212 sizes="227px" 3213 alt="" 3214 title="" 3215 width="227" 3216 height="184" 3217 loading="eager" 3218 ></div></a></div> 3219 3220 <div class="subnav-card--content"> 3221 <div class="subnav-card--text"><div class="subnav-card--title"> 3222 Regenerist 3223 </div><div class="subnav-card--description"> 3224 Visibly firmer, younger-looking skin 3225 </div></div><a href="/products/regenerist-micro-sculpting-cream-moisturizer" class="subnav-card--cta">
3226 <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"> 3227 <title id="icon-cta-arrow-title">CTA Arrow</title> 3228 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 3229 <rect width="22" height="22" fill="#D9D9D9"/> 3230 </mask> 3231 <g mask="url(#mask0_7232_266)"> 3232 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 3233 </g> 3234 </svg></a></div> 3235 </div></li></ul></li><li 3236 class="y-menu--level-1--link" 3237 data-depth="3" 3238 3239 ><button 3240 data-item="nav-text" 3241 aria-haspopup="true" 3242 aria-expanded="false" 3243 aria-controls="y-menu_mobile-nav_body" 3244 3245 > 3246 <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"> 3247 <title id="icon-chevron-right-small-title">Chevron Right</title> 3248 <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" /> 3249 </svg></button><ul 3250 class="y-menu--level-2--container" 3251 3252 id="y-menu_mobile-nav_body" 3253 aria-current="false" 3254 3255 > 3256 <li class="y-menu--back-link"> 3257 <button 3258 data-item="nav-text" 3259 aria-controls="y-menu_mobile-nav" 3260 3261 ><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"> 3262 <title id="icon-chevron-right-small-title">Chevron Right</title> 3263 <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" /> 3264 </svg><span>Body</span> 3265 </button> 3266 </li><li class="y-menu--level-2--link" data-item="nav-text"><button 3267 class="y-menu--accordion-toggle" 3268 data-item="nav-text" 3269 aria-expanded="false" 3270 aria-controls="y-menu_mobile-nav_body_featured" 3271 3272 > 3273 <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"> 3274 <title id="icon-chevron-down-title">Chevron Down</title> 3275 <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" /> 3276 </svg></button> 3277<ul 3278 class="y-menu--level-3--container" 3279 id="y-menu_mobile-nav_body_featured" 3280 aria-hidden="true" 3281 3282 ><li class="y-menu--level-3--link"> 3283 <a 3284 href="/collections/body-care" 3285 3286 > 3287 <span>All Body Care</span> 3288 </a> 3289 </li><li class="y-menu--level-3--link"> 3290 <a 3291 href="/collections/new-body-care" 3292 3293 > 3294 <span>New to Body</span> 3295 </a> 3296 </li><li class="y-menu--level-3--link"> 3297 <a 3298 href="/collections/body-care-best-sellers" 3299 3300 > 3301 <span>Body Best Sellers</span> 3302 </a> 3303 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3304 class="y-menu--accordion-toggle" 3305 data-item="nav-text" 3306 aria-expanded="false" 3307 aria-controls="y-menu_mobile-nav_body_body-wash-bars" 3308 3309 >
3310 <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"> 3311 <title id="icon-chevron-down-title">Chevron Down</title> 3312 <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" /> 3313 </svg></button> 3314<ul 3315 class="y-menu--level-3--container" 3316 id="y-menu_mobile-nav_body_body-wash-bars" 3317 aria-hidden="true" 3318 3319 ><li class="y-menu--level-3--link"> 3320 <a 3321 href="/collections/body-wash" 3322 3323 > 3324 <span>All Body Wash & Bars</span> 3325 </a> 3326 </li><li class="y-menu--level-3--link"> 3327 <a 3328 href="/collections/premium-body-wash-bars" 3329 3330 > 3331 <span>Premium Body Wash</span> 3332 </a> 3333 </li><li class="y-menu--level-3--link"> 3334 <a 3335 href="/collections/fresh-scent" 3336 3337 > 3338 <span>Fresh Radiance</span> 3339 </a> 3340 </li><li class="y-menu--level-3--link"> 3341 <a 3342 href="/collections/super-serum-body-wash" 3343 3344 > 3345 <span>Super Serum Body Wash</span> 3346 </a> 3347 </li><li class="y-menu--level-3--link"> 3348 <a 3349 href="/collections/seasonal-body-wash" 3350 3351 > 3352 <span>Seasonal Body Wash</span> 3353 </a> 3354 </li><li class="y-menu--level-3--link"> 3355 <a 3356 href="/collections/bar-soap" 3357 3358 > 3359 <span>Bar Soap</span> 3360 </a> 3361 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3362 class="y-menu--accordion-toggle" 3363 data-item="nav-text" 3364 aria-expanded="false" 3365 aria-controls="y-menu_mobile-nav_body_hand-body-moisturizers" 3366 3367 > 3368 <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"> 3369 <title id="icon-chevron-down-title">Chevron Down</title> 3370 <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" /> 3371 </svg></button> 3372<ul 3373 class="y-menu--level-3--container" 3374 id="y-menu_mobile-nav_body_hand-body-moisturizers" 3375 aria-hidden="true" 3376 3377 ><li class="y-menu--level-3--link"> 3378 <a 3379 href="/collections/hand-body-lotion" 3380 3381 > 3382 <span>All Hand & Body Moisturizers</span> 3383 </a> 3384 </li><li class="y-menu--level-3--link"> 3385 <a 3386 href="/collections/super-serum-hand-body-lotion" 3387 3388 > 3389 <span>Super Serum Lotions & Creams</span> 3390 </a> 3391 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3392 class="y-menu--accordion-toggle" 3393 data-item="nav-text" 3394 aria-expanded="false" 3395 aria-controls="y-menu_mobile-nav_body_skin-type" 3396 3397 >
3398 <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"> 3399 <title id="icon-chevron-down-title">Chevron Down</title> 3400 <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" /> 3401 </svg></button> 3402<ul 3403 class="y-menu--level-3--container" 3404 id="y-menu_mobile-nav_body_skin-type" 3405 aria-hidden="true" 3406 3407 ><li class="y-menu--level-3--link"> 3408 <a 3409 href="/collections/body-care-for-sensitive-skin" 3410 3411 > 3412 <span>Sensitive</span> 3413 </a> 3414 </li><li class="y-menu--level-3--link"> 3415 <a 3416 href="/collections/body-care-for-normal-skin" 3417 3418 > 3419 <span>Normal</span> 3420 </a> 3421 </li><li class="y-menu--level-3--link"> 3422 <a 3423 href="/collections/body-care-for-rough-bumpy-skin" 3424 3425 > 3426 <span>Rough & Bumpy</span> 3427 </a> 3428 </li><li class="y-menu--level-3--link"> 3429 <a 3430 href="/collections/body-care-for-dry-skin" 3431 3432 > 3433 <span>Dry</span> 3434 </a> 3435 </li></ul></li><li class="y-menu--level-2--link" data-item="nav-text"><button 3436 class="y-menu--accordion-toggle" 3437 data-item="nav-text" 3438 aria-expanded="false" 3439 aria-controls="y-menu_mobile-nav_body_ingredient" 3440 3441 > 3442 <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"> 3443 <title id="icon-chevron-down-title">Chevron Down</title> 3444 <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" /> 3445 </svg></button> 3446<ul 3447 class="y-menu--level-3--container" 3448 id="y-menu_mobile-nav_body_ingredient" 3449 aria-hidden="true" 3450 3451 ><li class="y-menu--level-3--link"> 3452 <a 3453 href="/collections/body-care-with-vitamin-b3" 3454 3455 > 3456 <span>Vitamin B3</span> 3457 </a> 3458 </li><li class="y-menu--level-3--link"> 3459 <a 3460 href="/collections/body-care-with-glycerin" 3461 3462 > 3463 <span>Glycerin</span> 3464 </a> 3465 </li><li class="y-menu--level-3--link"> 3466 <a 3467 href="/collections/body-care-with-shea-butter" 3468 3469 > 3470 <span>Shea Butter</span> 3471 </a> 3472 </li><li class="y-menu--level-3--link"> 3473 <a 3474 href="/collections/body-care-with-vitamin-e" 3475 3476 > 3477 <span>Vitamin E</span> 3478 </a> 3479 </li><li class="y-menu--level-3--link"> 3480 <a 3481 href="/collections/body-care-with-vitamin-c" 3482 3483 >
3484 <span>Vitamin C</span> 3485 </a> 3486 </li><li class="y-menu--level-3--link"> 3487 <a 3488 href="/collections/body-care-with-retinol" 3489 3490 > 3491 <span>Retinol</span> 3492 </a> 3493 </li><li class="y-menu--level-3--link"> 3494 <a 3495 href="/collections/body-care-with-collagen" 3496 3497 > 3498 <span>Collagen</span> 3499 </a> 3500 </li></ul></li><li class="y-menu--blocks"><div 3501 class="menu-block--subnav-card" 3502 3503 3504 > 3505 <div class="subnav-card--image-wrapper"><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--image-link"><div 3506 class="subnav-card--image" 3507 3508 ><img 3509 src="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454" 3510 srcset="//www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=227 227w, 3511 //www.olay.com/cdn/shop/files/body_subnav_img.png?v=1779268521&width=454 454w" 3512 sizes="227px" 3513 alt="" 3514 title="" 3515 width="227" 3516 height="184" 3517 loading="eager" 3518 ></div></a></div> 3519 3520 <div class="subnav-card--content"> 3521 <div class="subnav-card--text"><div class="subnav-card--title"> 3522 Limited Edition Body Wash 3523 </div><div class="subnav-card--description"> 3524 Strawberry Fizz Scent 3525 </div></div><a href="/products/olay-intensely-hydrating-body-wash-strawberry" class="subnav-card--cta"> 3526 <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"> 3527 <title id="icon-cta-arrow-title">CTA Arrow</title> 3528 <mask id="mask0_7232_266" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22"> 3529 <rect width="22" height="22" fill="#D9D9D9"/> 3530 </mask> 3531 <g mask="url(#mask0_7232_266)"> 3532 <path d="M9.16699 15.5832V6.4165L13.7503 10.9998L9.16699 15.5832Z" fill="currentColor"/> 3533 </g> 3534 </svg></a></div> 3535 </div></li></ul></li><li 3536 class="y-menu--level-1--link" 3537 data-depth="3" 3538 3539 ><button 3540 data-item="nav-text" 3541 aria-haspopup="true" 3542 aria-expanded="false" 3543 aria-controls="y-menu_mobile-nav_anti-aging" 3544 3545 > 3546 <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"> 3547 <title id="icon-chevron-right-small-title">Chevron Right</title> 3548 <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" /> 3549 </svg></button><ul 3550 class="y-menu--level-2--container" 3551 3552 id="y-menu_mobile-nav_anti-aging" 3553 aria-current="false" 3554 3555 > 3556 <li class="y-menu--back-link"> 3557 <button 3558 data-item="nav-text" 3559 aria-controls="y-menu_mobile-nav" 3560 3561 ><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"> 3562 <title id="icon-chevron-right-small-title">Chevron Right</title> 3563 <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" /> 3564 </svg><span>Anti-aging</span> 3565 </button> 3566 </li><li class="y-menu--level-2--link" data-item="nav-text"><button 3567 class="y-menu--accordion-toggle" 3568 data-item="nav-text" 3569 aria-expanded="false" 3570 aria-controls="y-menu_mobile-nav_anti-aging_solutions" 3571 3572 >
3573 <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"> 3574 <title id="icon-chevron-down-title">Chevron Down</title> 3575 <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" /> 3576 </svg></button> 3577<ul 3578 class="y-menu--level-3--container" 3579 id="y-menu_mobile-nav_anti-aging_solutions" 3580 aria-hidden="true" 3581 3582 ><li class="y-menu--level-3--link"> 3583 <a 3584 href="/collections/anti-aging" 3585 3586 > 3587 <span>All Anti-Aging</span> 3588 </a> 3589 </li><li class="y-menu--level-3--link"> 3590 <a 3591 href="/collections/fine-lines-wrinkles" 3592 3593 > 3594 <span>Wrinkles & Fine Lines</span> 3595 </a> 3596 </li><li class="y-menu--level-3--link"> 3597 <a 3598 href="/collections/sagging-skin" 3599 3600 > 3601 <span>Firmness & Elasticity</span> 3602 </a> 3603 </li><li class="y-menu--level-3--link"> 3604 <a 3605 href="/collections/uneven-skin-tone" 3606 3607 > 3608 <span> Dark Spots & Uneven Tone</span> 3609 </a> 3610 </li><li class="y-menu--level-3--link"> 3611 <a 3612 href="/collections/hydration" 3613 3614 > 3615 <span> Dry & Dehydrated Skin</span> 3616 </a> 3617 </li></ul></li><li class="y-menu--blocks"><div 3618 class="menu-block--grid-with-slider" 3619 3620 3621 > 3622 <div 3623 id="grid-slider-grid_with_slider_Demo" 3624 class="grid-slider--slick" 3625 data-slides-to-show="3" 3626 data-slides-to-scroll="1" 3627 data-autoplay="false" 3628 data-autoplay-speed="3000" 3629 data-show-arrows="true" 3630 data-show-dots="true" 3631 data-infinite="false" 3632 ><div class="slider-card"><a href="/pages/cleansing-melts" class="slider-card--link"><div class="slider-card--image-wrapper"> 3633 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3634 class="image--root" 3635 data-background="false" 3636 data-display-type="aspect-ratio" 3637 data-full-width="" 3638 data-mobile-display-type="aspect-ratio" 3639 data-mobile-full-width="" 3640 data-mobile-overlay-style="" 3641 data-parallax="" 3642 data-overlay-style="" 3643 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2014;" 3644><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"> 3645</picture></div> 3646 </div> 3647 3648 <div class="slider-card--content"> 3649 <div class="slider-card--text"><div class="slider-card--title"> 3650 Achieve Better Skin with Superior Cleansing 3651 </div><div class="slider-card--description"> 3652 Maintain your skin with our cleansing routine that fits and supports your career. 3653 </div></div><span class="slider-card--cta">
3654 <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"> 3655 <title id="icon-arrow-right-title">Arrow Right</title> 3656 <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" /> 3657 </svg></span></div></a></div><div class="slider-card"><a href="/collections/serums-treatments" class="slider-card--link"><div class="slider-card--image-wrapper"> 3658 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3659 class="image--root" 3660 data-background="false" 3661 data-display-type="aspect-ratio" 3662 data-full-width="" 3663 data-mobile-display-type="aspect-ratio" 3664 data-mobile-full-width="" 3665 data-mobile-overlay-style="" 3666 data-parallax="" 3667 data-overlay-style="" 3668 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 3669><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"> 3670</picture></div> 3671 </div> 3672 3673 <div class="slider-card--content"> 3674 <div class="slider-card--text"><div class="slider-card--title"> 3675 Erase Aging - Professional Results at Home 3676 </div><div class="slider-card--description"> 3677 Discover how our cutting-edge serums deliver advanced anti-aging results for a youthful glow. 3678 </div></div><span class="slider-card--cta"> 3679 <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"> 3680 <title id="icon-arrow-right-title">Arrow Right</title> 3681 <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" /> 3682 </svg></span></div></a></div><div class="slider-card"><a href="/collections/hydration" class="slider-card--link"><div class="slider-card--image-wrapper"> 3683 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3684 class="image--root" 3685 data-background="false" 3686 data-display-type="aspect-ratio" 3687 data-full-width="" 3688 data-mobile-display-type="aspect-ratio" 3689 data-mobile-full-width="" 3690 data-mobile-overlay-style="" 3691 data-parallax="" 3692 data-overlay-style="" 3693 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 3694><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"> 3695</picture></div> 3696 </div> 3697 3698 <div class="slider-card--content"> 3699 <div class="slider-card--text"><div class="slider-card--title"> 3700 Hydration Heroes 3701 </div><div class="slider-card--description"> 3702 Lock in moisture with our intensive hydration formulas for plump, radiant skin. 3703 </div></div><span class="slider-card--cta">
3704 <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"> 3705 <title id="icon-arrow-right-title">Arrow Right</title> 3706 <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" /> 3707 </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"> 3708 <div class="slider-card--image"><!-- snippets/image.liquid --><picture 3709 class="image--root" 3710 data-background="false" 3711 data-display-type="aspect-ratio" 3712 data-full-width="" 3713 data-mobile-display-type="aspect-ratio" 3714 data-mobile-full-width="" 3715 data-mobile-overlay-style="" 3716 data-parallax="" 3717 data-overlay-style="" 3718 style="--aspect-ratio:100.0;--mobile-aspect-ratio:1.2062;" 3719><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"> 3720</picture></div> 3721 </div> 3722 3723 <div class="slider-card--content"> 3724 <div class="slider-card--text"><div class="slider-card--title"> 3725 Brighten & Glow 3726 </div><div class="slider-card--description"> 3727 Illuminate your complexion with targeted treatments for dark spots and uneven tone. 3728 </div></div><span class="slider-card--cta"> 3729 <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"> 3730 <title id="icon-arrow-right-title">Arrow Right</title> 3731 <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" /> 3732 </svg></span></div></a></div></div> 3733 </div></li></ul></li><li 3734 class="y-menu--level-1--link" 3735 data-depth="1" 3736 3737 ><button 3738 data-item="nav-text" 3739 aria-haspopup="true" 3740 aria-expanded="false" 3741 aria-controls="y-menu_mobile-nav_find-my-routine" 3742 3743 > 3744 <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"> 3745 <title id="icon-chevron-right-small-title">Chevron Right</title> 3746 <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" /> 3747 </svg></button><ul 3748 class="y-menu--level-2--container" 3749 3750 id="y-menu_mobile-nav_find-my-routine" 3751 aria-current="false" 3752 3753 > 3754 <li class="y-menu--back-link"> 3755 <button 3756 data-item="nav-text" 3757 aria-controls="y-menu_mobile-nav" 3758 3759 ><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"> 3760 <title id="icon-chevron-right-small-title">Chevron Right</title> 3761 <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" /> 3762 </svg><span>Find My Routine</span> 3763 </button> 3764 </li><li class="y-menu--blocks"><div
3765 class="menu-block--osa-fifty" 3766 data-reverse-layout="true" 3767 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%);" 3768 3769 3770 > 3771 <div class="osa-fifty-content"> 3772 3773 <!-- Left Column - Text Content --> 3774 <div class="osa-fifty-text-column"> 3775 <div class="osa-fifty-superheading"> 3776 welcome to <span class="osa-fifty-powered">Powered by AI</span> 3777 </div> 3778 3779 <div class="osa-fifty-heading"> 3780 skin advisor 3781 </div><img 3782 src="//www.olay.com/cdn/shop/t/10/assets/Underline.png?v=15233172491784850011779203463" 3783 class="osa-fifty-underline" 3784 alt="underline decoration" 3785 loading="lazy" 3786 width="320" 3787 height="auto" 3788 ><div class="osa-fifty-text"> 3789 <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"> 3790 <a 3791 href="/pages/skin-advisor?autostart=true" 3792 class="osa-fifty-cta" 3793 title="Get Started Now" 3794 aria-label="Get Started Now" 3795 > 3796 <span class="osa-fifty-cta-text">Get Started Now</span> 3797 </a> 3798 </div></div> 3799 3800 <!-- Right Column - Image --> 3801 <div class="osa-fifty-image-column"> 3802 <picture><source 3803 media="(min-width: 1200px)" 3804 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466" 3805 ><source 3806 media="(min-width: 768px)" 3807 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mobile.png?v=99265202458701537411779203462" 3808 ><source 3809 media="(min-width: 250px)" 3810 srcset="//www.olay.com/cdn/shop/t/10/assets/overview-mob.png?v=59333317371312214441779203466" 3811 ><img 3812 class="osa-fifty-image" 3813 height="100%" 3814 width="100%" 3815 loading="lazy" 3816 alt="Skin Advisor" 3817 title="Skin Advisor"src="//www.olay.com/cdn/shop/t/10/assets/overview-desk.png?v=35814825275317815801779203466"> 3818 </picture> 3819 </div> 3820 3821 </div> 3822 </div></li></ul></li><li 3823 class="y-menu--level-1--link" 3824 data-depth="1" 3825 3826 ><button 3827 data-item="nav-text" 3828 aria-haspopup="true" 3829 aria-expanded="false" 3830 aria-controls="y-menu_mobile-nav_offers" 3831 3832 > 3833 <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"> 3834 <title id="icon-chevron-right-small-title">Chevron Right</title> 3835 <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" /> 3836 </svg></button><ul 3837 class="y-menu--level-2--container" 3838 3839 id="y-menu_mobile-nav_offers" 3840 aria-current="false" 3841 3842 > 3843 <li class="y-menu--back-link"> 3844 <button 3845 data-item="nav-text" 3846 aria-controls="y-menu_mobile-nav" 3847 3848 ><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"> 3849 <title id="icon-chevron-right-small-title">Chevron Right</title> 3850 <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" /> 3851 </svg><span>Offers</span> 3852 </button> 3853 </li><li class="y-menu--blocks"><div 3854 class="menu-block--grid-links" 3855 data-item-count="4" 3856 3857 3858 > 3859 <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> 3860 </div></li></ul></li><li 3861 class="y-menu--level-1--link" 3862 data-depth="1" 3863 3864 ><button 3865 data-item="nav-text" 3866 aria-haspopup="true" 3867 aria-expanded="false" 3868 aria-controls="y-menu_mobile-nav_learn" 3869 3870 >
3871 <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"> 3872 <title id="icon-chevron-right-small-title">Chevron Right</title> 3873 <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" /> 3874 </svg></button><ul 3875 class="y-menu--level-2--container" 3876 3877 id="y-menu_mobile-nav_learn" 3878 aria-current="false" 3879 3880 > 3881 <li class="y-menu--back-link"> 3882 <button 3883 data-item="nav-text" 3884 aria-controls="y-menu_mobile-nav" 3885 3886 ><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"> 3887 <title id="icon-chevron-right-small-title">Chevron Right</title> 3888 <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" /> 3889 </svg><span>Learn</span> 3890 </button> 3891 </li><li class="y-menu--blocks"><div 3892 class="menu-block--grid-links" 3893 data-item-count="5" 3894 3895 3896 > 3897 <div class="grid-link-item"><a href="/pages/proven-science" class="grid-link-wrapper"><h3 class="grid-link-title">
3897Proven Science</h3><p class="grid-link-desc">Backed by decades of skin<br> 3898research 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> 3899a 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> 3900skincare 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> 3901 </div></li></ul></li></ul></y-menu-element> 3902 3903 3904
3905<script> 3906 // Y-Menu Accordion Toggle for Level-3 Items 3907 document.addEventListener('DOMContentLoaded', function() { 3908 const accordionToggles = document.querySelectorAll('.y-menu--accordion-toggle'); 3909 3910 accordionToggles.forEach(toggle => { 3911 toggle.addEventListener('click', function(e) { 3912 e.preventDefault(); 3913 3914 const targetId = this.getAttribute('aria-controls'); 3915 const targetContainer = document.getElementById(targetId); 3916 3917 if (targetContainer) { 3918 const isExpanded = this.getAttribute('aria-expanded') === 'true'; 3919 3920 // Toggle aria-expanded on button 3921 this.setAttribute('aria-expanded', !isExpanded); 3922 3923 // Toggle aria-hidden on container 3924 targetContainer.setAttribute('aria-hidden', isExpanded); 3925 3926 // Optional: Close other accordions in the same level 3927 const parentList = this.closest('.y-menu--level-2--container'); 3928 if (parentList) { 3929 const otherToggles = parentList.querySelectorAll('.y-menu--accordion-toggle'); 3930 otherToggles.forEach(otherToggle => { 3931 if (otherToggle !== this && otherToggle.getAttribute('aria-expanded') === 'true') { 3932 const otherId = otherToggle.getAttribute('aria-controls'); 3933 const otherContainer = document.getElementById(otherId); 3934 otherToggle.setAttribute('aria-expanded', 'false'); 3935 if (otherContainer) { 3936 otherContainer.setAttribute('aria-hidden', 'true'); 3937 } 3938 } 3939 }); 3940 } 3941 } 3942 }); 3943 }); 3944 }); 3945</script>
3945 3946
3947<script> 3948 (function () { 3949 // ---------- Load jQuery (only if needed) ---------- 3950 function loadJQuery(cb) { 3951 if (window.jQuery) return cb(); 3952 var s = document.createElement('script'); 3953 s.src = '//www.olay.com/cdn/shop/t/10/assets/jquery.min.js?v=147293088974801289311779203466'; 3954 s.onload = cb; 3955 document.head.appendChild(s); 3956 } 3957 3958 // ---------- Load Slick (only if needed) ---------- 3959 function loadSlick(cb) { 3960 if (window.jQuery && window.jQuery.fn && window.jQuery.fn.slick) return cb(); 3961 3962 var s = document.createElement('script'); 3963 s.src = '//www.olay.com/cdn/shop/t/10/assets/slick.min.js?v=71779134894361685811779203468'; 3964 s.onload = cb; 3965 document.head.appendChild(s); 3966 } 3967 3968 // ---------- Helper: wait until element is measurable (not display:none / 0 width) ---------- 3969 function whenMeasurable(el, cb) { 3970 var tries = 0; 3971 (function loop() { 3972 var r = el && el.getBoundingClientRect ? el.getBoundingClientRect() : { width: 0, height: 0 }; 3973 if (r.width > 0 && r.height > 0) return cb(); 3974 if (++tries > 600) return; // safety stop 3975 requestAnimationFrame(loop); 3976 })(); 3977 } 3978 3979 function buildOptions($slider) { 3980 var slidesToShow = parseInt($slider.data('slides-to-show'), 10) || 2; 3981 3982 return { 3983 slidesToShow: slidesToShow, 3984 slidesToScroll: parseInt($slider.data('slides-to-scroll'), 10) || 1, 3985 autoplay: ($slider.data('autoplay') === true || $slider.data('autoplay') === 'true'), 3986 autoplaySpeed: parseInt($slider.data('autoplay-speed'), 10) || 3000, 3987 arrows: ($slider.data('show-arrows') !== false && $slider.data('show-arrows') !== 'false'), 3988 dots: ($slider.data('show-dots') !== false && $slider.data('show-dots') !== 'false'), 3989 infinite: ($slider.data('infinite') === true || $slider.data('infinite') === 'true'), 3990 speed: 300, 3991 cssEase: 'ease-in-out', 3992 adaptiveHeight: false, 3993 variableWidth: false, 3994 responsive: [ 3995 { breakpoint: 1440, settings: { slidesToShow: Math.min(slidesToShow, 2), slidesToScroll: 1 } }, 3996 { breakpoint: 1100, settings: { slidesToShow: Math.min(slidesToShow, 2), slidesToScroll: 1 } }, 3997 { breakpoint: 768, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: true, dots: true } } 3998 ] 3999 }; 4000 } 4001 4002 function initOrRefreshAll() { 4003 var $ = window.jQuery; 4004 if (!$ || !$.fn || !$.fn.slick) return; 4005 4006 $('.grid-slider--slick').each(function () { 4007 var $slider = $(this); 4008 var el = this; 4009 4010 whenMeasurable(el, function () { 4011 var opts = buildOptions($slider); 4012 4013 if (!$slider.hasClass('slick-initialized')) { 4014 $slider.slick(opts); 4015 } else { 4016 $slider.slick('refresh'); 4017 } 4018 4019 // replicate the "first next click fixes it" recalculation 4020 requestAnimationFrame(function () { $slider.slick('setPosition'); }); 4021 setTimeout(function () { $slider.slick('setPosition'); }, 120); 4022 }); 4023 }); 4024 } 4025 4026 function bootstrap() { 4027 loadJQuery(function () { 4028 loadSlick(function () { 4029 var $ = window.jQuery; 4030 4031 // 1) Initial run (in case menu already open) 4032 initOrRefreshAll(); 4033 4034 // 2) Watch for submenu visibility changes 4035 setTimeout(function() { 4036 try { 4037 var observer = new MutationObserver(function(mutations) { 4038 mutations.forEach(function(mutation) { 4039 if (mutation.type === 'attributes' && mutation.attributeName === 'aria-current') { 4040 var target = mutation.target; 4041 if (target.classList.contains('y-menu--level-2--container') && 4042 target.getAttribute('aria-current') === 'true') { 4043 // Submenu just became visible - refresh sliders inside it 4044 setTimeout(function() { 4045 initOrRefreshAll(); 4046 }, 50); 4047 } 4048 } 4049 }); 4050 }); 4051 4052 // Observe all level-2 containers 4053 var containers = document.querySelectorAll('.y-menu--level-2--container'); 4054 if (containers && containers.length > 0) {
4055 containers.forEach(function(container) { 4056 observer.observe(container, { attributes: true, attributeFilter: ['aria-current'] }); 4057 }); 4058 } 4059 } catch (e) { 4060 // Silent error 4061 } 4062 }, 150); 4063 4064 // 3) Global safety net 4065 $(window).on('resize orientationchange load', function () { 4066 if ($('.grid-slider--slick.slick-initialized').length) { 4067 $('.grid-slider--slick.slick-initialized').slick('setPosition'); 4068 } 4069 }); 4070 }); 4071 }); 4072 } 4073 4074 if (document.readyState === 'loading') { 4075 document.addEventListener('DOMContentLoaded', bootstrap); 4076 } else { 4077 bootstrap(); 4078 } 4079 })(); 4080</script>
4080</element-relocator></header> 4081<!-- END sections: header-group --><!-- BEGIN sections: overlay-group --> 4082<div id="shopify-section-sections--25816846762027__popup" class="shopify-section shopify-section-group-overlay-group section--popup"><!-- sections/popup.liquid --><div 4083 class="popup--root" 4084 data-consent-tracking="true" 4085 data-limit="false" 4086 data-size="1" 4087> 4088 <!-- snippets/consent-tracking.liquid --><consent-tracking 4089 class="popup--block--root" 4090 data-block-id="ConsentTracking" 4091 data-background-color="dark" 4092 data-translucent="true" 4093 data-text-color="white" 4094 data-position="left" 4095 data-transition-item="viewport" 4096 data-transition-type="scale-in" 4097 data-transition-trigger="custom" 4098 data-x-alignment="center" 4099 aria-hidden="true" 4100 4101> 4102 <div class="popup--block--container"><div class="popup--block--heading" data-item="block-heading"> 4103 Cookie consent 4104 </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"> 4105 <button 4106 class="popup--block--accept" 4107 data-item="button-2" 4108 data-text="accept" 4109 > 4110 <span>accept</span> 4111 </button> 4112 4113 <button 4114 class="popup--block--decline" 4115 data-item="button-4" 4116 data-text="decline" 4117 > 4118 <span>decline</span> 4119 </button> 4120 </div> 4121 </div> 4122</consent-tracking> 4123</div> 4124 4125 4126 4127 4128</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 4129 class="announcement-popup--root" 4130 id="announcement-popup-sections--25816846762027__announcement_popup_3bB7cX" 4131 data-section-id="sections--25816846762027__announcement_popup_3bB7cX" 4132 data-section-type="announcement-popup" 4133 style="display: none;" 4134> 4135 <div class="announcement-popup--wrapper"> 4136 <div class="announcement-popup--content"><div class="announcement-popup--promos"><div class="announcement-popup--promo" > 4137 <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 4138 href="/pages/subscription" 4139 class="announcement-popup--promo-cta" 4140 style="color: #161716;" 4141 > 4142 <span class="announcement-popup--promo-cta-text">SHOP NOW</span> 4143 <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"> 4144 <polygon points="6,4 18,12 6,20" fill="black"></polygon> 4145 </svg> 4146 </a></div><div class="announcement-popup--promo" > 4147 <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 4148 href="https://shopify.com/66143911979/account" 4149 class="announcement-popup--promo-cta" 4150 style="color: #161716;" 4151 > 4152 <span class="announcement-popup--promo-cta-text">JOIN CLUB OLAY TODAY</span> 4153 <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"> 4154 <polygon points="6,4 18,12 6,20" fill="black"></polygon> 4155 </svg> 4156 </a></div><div class="announcement-popup--promo" > 4157 <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 4158 href="/collections/anti-aging" 4159 class="announcement-popup--promo-cta" 4160 style="color: #161716;" 4161 >
4162 <span class="announcement-popup--promo-cta-text">SHOP ANTI-AGING</span> 4163 <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"> 4164 <polygon points="6,4 18,12 6,20" fill="black"></polygon> 4165 </svg> 4166 </a></div></div></div> 4167 </div><div class="announcement-popup--footer"> 4168 <div class="announcement-popup--footer-logo"> 4169 <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"> 4170 </div> 4171 </div></div> 4172 4173<div 4174 class="announcement-popup--overlay" 4175 id="announcement-popup-overlay-sections--25816846762027__announcement_popup_3bB7cX" 4176 aria-hidden="true" 4177></div> 4178 4179<style> 4180 /* Position popup below announcement bar */ 4181 #shopify-section-sections--25816846762027__announcement_popup_3bB7cX { 4182 position: relative; 4183 z-index: 90; 4184 } 4185 4186 .announcement-popup--root { 4187 position: fixed; 4188 top: 0; 4189 left: 0; 4190 right: 0; 4191 width: 100%; 4192 background: #fdfdfd; 4193 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 4194 opacity: 0; 4195 transform: translateY(-10px); 4196 transition: opacity 0.3s ease, transform 0.3s ease; 4197 pointer-events: none; 4198 z-index: 95; 4199 overflow: visible; 4200 } 4201 4202 .announcement-popup--overlay { 4203 position: fixed; 4204 inset: 0; 4205 background: rgba(0, 0, 0, 0.8); 4206 opacity: 0; 4207 visibility: hidden; 4208 pointer-events: none; 4209 transition: opacity ease, visibility ease; 4210 z-index: 94; 4211 } 4212 4213 .announcement-popup--overlay[data-visible="true"] { 4214 opacity: 1; 4215 visibility: visible; 4216 pointer-events: auto; 4217 } 4218 4219 .announcement-popup--root[data-visible="true"] { 4220 display: block !important; 4221 opacity: 1; 4222 transform: translateY(0); 4223 pointer-events: auto; 4224 } 4225 4226 .announcement-popup--wrapper { 4227 display: flex; 4228 flex-direction: column; 4229 align-items: center; 4230 padding: 32px 0; 4231 position: relative; 4232 overflow: visible; 4233 } 4234 4235 .announcement-popup--content { 4236 width: 100%; 4237 max-width: 1440px; 4238 padding: 0 16px; 4239 } 4240 4241 .announcement-popup--promos { 4242 display: flex; 4243 flex-direction: column; 4244 gap: 32px; 4245 } 4246 4247 .announcement-popup--promo { 4248 display: flex; 4249 flex-direction: column; 4250 gap: 19px; 4251 } 4252 4253 .announcement-popup--promo-content { 4254 display: flex; 4255 flex-direction: column; 4256 gap: 12px; 4257 } 4258 4259 .announcement-popup--promo-header { 4260 display: flex; 4261 flex-direction: column; 4262 gap: 8px; 4263 } 4264 4265 .announcement-popup--promo-heading { 4266 font-family: 'Juana', serif; 4267 font-weight: 300; 4268 font-size: 14px; 4269 line-height: 1em; 4270 } 4271 4272 .announcement-popup--promo-title { 4273 font-family: 'Boston', sans-serif; 4274 font-weight: 700; 4275 font-size: 18.408px; 4276 line-height: 1em; 4277 letter-spacing: -0.02em; 4278 } 4279 4280 .announcement-popup--promo-description { 4281 font-family: 'Boston', sans-serif; 4282 font-weight: 400; 4283 font-size: 12px; 4284 line-height: 1.5em; 4285 } 4286 4287 .announcement-popup--promo-cta { 4288 display: flex; 4289 align-items: center; 4290 gap: 4px; 4291 height: 11px; 4292 width: fit-content; 4293 text-decoration: none; 4294 transition: color 0.2s ease; 4295 } 4296 4297 .announcement-popup--promo-cta:hover { 4298 color: #C11E33 !important; 4299 } 4300 4301 .announcement-popup--promo-cta:hover .announcement-popup--promo-cta-icon polygon { 4302 fill: #C11E33; 4303 } 4304 4305 .announcement-popup--promo-cta-text { 4306 font-family: 'Boston', sans-serif; 4307 font-weight: 700; 4308 font-size: 12px; 4309 line-height: 1em; 4310 letter-spacing: -0.02em; 4311 transition: color 0.2s ease; 4312 } 4313 4314 .announcement-popup--promo-cta-icon { 4315 width: 13px; 4316 height: 20px; 4317 } 4318 4319 .announcement-popup--promo-cta-icon polygon { 4320 transition: fill 0.2s ease; 4321 } 4322 4323 /* Footer styles */ 4324 .announcement-popup--footer { 4325 position: absolute; 4326 left: 0; 4327 right: 0; 4328 width: 100vw; 4329 height: 44px; 4330 margin-left: calc(-50vw + 50%); 4331 background: linear-gradient(62deg, 4332 rgba(219, 219, 219, 1) 0%, 4333 rgba(244, 244, 244, 1) 35%, 4334 rgba(244, 244, 244, 1) 62%, 4335 rgba(219, 219, 219, 1) 100%); 4336 display: flex; 4337 align-items: center; 4338 justify-content: center; 4339 } 4340 4341 .announcement-popup--footer-logo { 4342 display: flex; 4343 align-items: center; 4344 justify-content: center; 4345 } 4346 4347 .announcement-popup--footer-image { 4348 max-height: 28px; 4349 width: auto; 4350 } 4351 4352 /* Tablet (⥠768px) */ 4353 @media only screen and (min-width: 768px) { 4354 .announcement-popup--wrapper { 4355 padding: 56px 64px; 4356 } 4357 4358 .announcement-popup--content { 4359 padding: 0; 4360 max-width: none; 4361 width: 100%; 4362 } 4363 4364 .announcement-popup--promos { 4365 flex-direction: row; 4366 flex-wrap: wrap; 4367 justify-content: flex-start; 4368 gap: 36px; 4369 row-gap: 36px; 4370 } 4371 4372 .announcement-popup--promo { 4373 flex: 0 0 auto; 4374 width: 300px; 4375 min-height: 121px; 4376 } 4377 4378 .announcement-popup--promo-title { 4379 max-width: 300px; 4380 } 4381 } 4382 4383 /* Desktop (⥠1100px) */ 4384 @media only screen and (min-width: 1100px) { 4385 .announcement-popup--wrapper { 4386 padding: 56px 0; 4387 } 4388 4389 .announcement-popup--content { 4390 padding: 0 32px; 4391 max-width: 1440px; 4392 } 4393 4394 .announcement-popup--promos { 4395 flex-wrap: nowrap; 4396 justify-content: space-between; 4397 gap: 84px; 4398 } 4399 4400 .announcement-popup--promo { 4401 flex: 1; 4402 width: auto; 4403 height: auto; 4404 max-width: 350px; 4405 } 4406 } 4407</style> 4408 4409 4410
4411<script> 4412 (function() { 4413 // Announcement popup toggle functionality 4414 const initPopup = function() { 4415 const popup = document.querySelector('#announcement-popup-sections--25816846762027__announcement_popup_3bB7cX'); 4416 const overlay = document.querySelector('#announcement-popup-overlay-sections--25816846762027__announcement_popup_3bB7cX'); 4417 const toggleButton = document.querySelector('[data-announcement-toggle]'); 4418 const iconPlus = toggleButton?.querySelector('.announcement--toggle-icon-plus'); 4419 const iconMinus = toggleButton?.querySelector('.announcement--toggle-icon-minus'); 4420 const announcementBar = document.querySelector('.announcement--center'); 4421 4422 if (!popup) { 4423 return; 4424 } 4425 4426 if (!toggleButton || !iconPlus || !iconMinus) { 4427 return; 4428 } 4429 4430 let isOpen = false; 4431 4432 // Function to update popup position 4433 const updatePopupPosition = function() { 4434 if (!isOpen) return; 4435 const announcementSection = document.querySelector('.announcement--root'); 4436 if (announcementSection) { 4437 const rect = announcementSection.getBoundingClientRect(); 4438 popup.style.top = (rect.bottom + 3) + 'px'; 4439 } 4440 }; 4441 4442 const togglePopup = function(event) { 4443 event.preventDefault(); 4444 event.stopPropagation(); 4445 4446 isOpen = !isOpen; 4447 4448 // Get announcement bar position 4449 const announcementSection = document.querySelector('.announcement--root'); 4450 if (announcementSection && isOpen) { 4451 const rect = announcementSection.getBoundingClientRect(); 4452 popup.style.top = (rect.bottom + 3) + 'px'; 4453 } 4454 4455 // Toggle popup visibility 4456 popup.setAttribute('data-visible', isOpen.toString()); 4457 if (overlay) { 4458 overlay.setAttribute('data-visible', isOpen.toString()); 4459 overlay.setAttribute('aria-hidden', (!isOpen).toString()); 4460 } 4461 4462 if (isOpen) { 4463 window.dispatchEvent(new CustomEvent('theme:announcement-popup:opened')); 4464 } 4465 4466 toggleButton.setAttribute('aria-expanded', isOpen.toString()); 4467 4468 // Toggle body scroll 4469 if (isOpen) { 4470 document.body.style.overflow = 'hidden'; 4471 } else { 4472 document.body.style.overflow = ''; 4473 } 4474 4475 // Toggle icons 4476 if (isOpen) { 4477 iconPlus.style.display = 'none'; 4478 iconMinus.style.display = 'block'; 4479 } else { 4480 iconPlus.style.display = 'block'; 4481 iconMinus.style.display = 'none'; 4482 } 4483 }; 4484 4485 const closePopup = function() { 4486 if (isOpen) { 4487 isOpen = false; 4488 popup.setAttribute('data-visible', 'false'); 4489 if (overlay) { 4490 overlay.setAttribute('data-visible', 'false'); 4491 overlay.setAttribute('aria-hidden', 'true'); 4492 } 4493 toggleButton.setAttribute('aria-expanded', 'false'); 4494 document.body.style.overflow = ''; 4495 iconPlus.style.display = 'block'; 4496 iconMinus.style.display = 'none'; 4497 } 4498 }; 4499 4500 // Add click event to toggle button 4501 toggleButton.addEventListener('click', togglePopup); 4502 4503 if (overlay) { 4504 overlay.addEventListener('click', closePopup); 4505 } 4506 4507 // Make announcement bar clickable as well 4508 if (announcementBar) { 4509 announcementBar.addEventListener('click', function(event) { 4510 // Only toggle if clicking on the bar itself or the blocks, not navigation arrows 4511 if (!event.target.closest('.announcement--previous') && 4512 !event.target.closest('.announcement--next') && 4513 !event.target.closest('[data-announcement-toggle]') && 4514 !event.target.closest('a')) { 4515 togglePopup(event); 4516 } 4517 }); 4518 // Add cursor pointer to indicate clickability 4519 announcementBar.style.cursor = 'pointer'; 4520 } 4521 4522 // Close popup when clicking outside 4523 document.addEventListener('click', function(event) { 4524 const isClickInside = toggleButton.contains(event.target) || 4525 popup.contains(event.target) || 4526 announcementBar?.contains(event.target); 4527 4528 if (!isClickInside) { 4529 closePopup(); 4530 } 4531 }); 4532 4533 // Close on Escape key 4534 document.addEventListener('keydown', function(event) { 4535 if (event.key === 'Escape' && isOpen) { 4536 closePopup(); 4537 } 4538 }); 4539 4540 // Update popup position on scroll and resize 4541 window.addEventListener('scroll', updatePopupPosition); 4542 window.addEventListener('resize', updatePopupPosition); 4543 }; 4544 4545 // Initialize popup when DOM is ready 4546 if (document.readyState === 'loading') { 4547 document.addEventListener('DOMContentLoaded', initPopup); 4548 } else { 4549 // DOM already loaded, run immediately 4550 initPopup(); 4551 } 4552 })(); 4553</script>
4553 4554</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 --> 4555 4556<login-modal class="login-modal--root" data-login-modal> 4557 <!-- Signed Out Modal --> 4558 <div class="login-modal--tooltip" data-state="signed-out" aria-hidden="true"> 4559 4560 4561 <!-- Account Signed Out State --> 4562 <div class="login-modal--signed-out"> 4563 <div class="login-modal--header-section"> 4564 <div class="login-modal--header"> 4565 <div class="login-modal--header-content"> 4566 <div class="login-modal--icon-wrapper"> 4567 <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"> 4568 </div> 4569 <div class="login-modal--text-wrapper"> 4570 <h3 class="login-modal--heading">Hello, Beauty Icon!</h3> 4571 <p class="login-modal--subheading">Your skin care journey continues here.</p> 4572 </div> 4573 </div> 4574 <button class="login-modal--close" aria-label="Close" data-login-modal-close> 4575 <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"> 4576 </button> 4577 </div> 4578 4579 <p class="login-modal--description">Join Club Olay to unlock exclusive perks and enjoy FREE standard shipping on all orders.</p> 4580 </div> 4581 4582 <div class="login-modal--actions"><a href="https://club.olay.com?locale=en®ion_country=US&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkxNTE5NTE1LCJuYmYiOjE3OTA5MTQ3MTV9.QYr7KKP3LArcNTw7g_W-onL_3FUOjTTlJ5le3D270bU" class="login-modal--button login-modal--button-primary"> 4583 SIGN IN 4584 </a> 4585 <a href="https://shopify.com/66143911979/account" class="login-modal--button login-modal--button-secondary"> 4586 JOIN CLUB OLAY 4587 </a> 4588 4589 </div> 4590 </div> 4591 4592 </div> 4593</login-modal>
4594<script> 4595let hour = new Date().getHours(); 4596let greeting = hour < 12 ? 'Good morning' : hour < 16 ? 'Good afternoon' : 'Good evening'; 4597document.getElementById('greeting-text').textContent = greeting; 4598</script>
4598 4599 4600 4601 4602 4603 4604</section> 4605<!-- END sections: overlay-group --><div class="layout--main-content"> 4606 <aside class="layout--sidebar" aria-label="Sidebar" data-mq="medium-large"></aside> 4607 4608 <main class="layout--template" id="main_content"> 4609 <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 { 4610 background: #95113f; 4611 background: -webkit-linear-gradient(left, #95113f 0%, #6d0b98 50%, #7506e2 100%); 4612 background: linear-gradient(to right, #95113f 0%, #6d0b98 50%, #7506e2 100%); 4613 }</style><div class="club-olay-new" data-section-id="template--26540060639275__club_olay_banner"> 4614 <div id="club-olay-banner-template--26540060639275__club_olay_banner" class="club-olay-header-section"> 4615 4616 <div class="club-olay-banner"> 4617 <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"> 4618 </picture></div><div class="club-olay-text-content"><div class="text-content"> 4619 <p>Join the club today to collect rewards, get exclusive deals, and much more!</p> 4620 </div><div class="club-button"> 4621 <a 4622 class="club-olay-cta-button button-secondary" 4623 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4624 >JOIN THE CLUB</a> 4625 </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> 4626 </div><div class="olay-Hero-img"> 4627 <picture class="Main-img"> 4628 <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"> 4629 </picture> 4630 </div></div> 4631</div> 4632 4633 4634 4635 4636<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 { 4637 background-image: linear-gradient(to right, #95113f 0%, #6d0b98 27%, #7506e2 40%); 4638 -webkit-background-clip: text; 4639 background-clip: text; 4640 color: transparent; 4641 }</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"> 4642 4643 <div class="cop--slick"><div class="cop--slide" > 4644 <div class="cop--card"> 4645 4646 <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"> 4647</div> 4648 4649 <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"> 4650 <a 4651 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4652 class="cop--cta-btn" 4653 >JOIN THE CLUB</a> 4654 </div></div> 4655 </div><div class="cop--slide" > 4656 <div class="cop--card"> 4657 4658 <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"> 4659</div> 4660 4661 <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"> 4662 <a 4663 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4664 class="cop--cta-btn" 4665 >JOIN THE CLUB</a> 4666 </div></div> 4667 </div><div class="cop--slide" > 4668 <div class="cop--card"> 4669 4670 <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"> 4671</div> 4672 4673 <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"> 4674 <a 4675 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4676 class="cop--cta-btn" 4677 >JOIN THE CLUB</a> 4678 </div></div> 4679 </div><div class="cop--slide" > 4680 <div class="cop--card"> 4681 4682 <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"> 4683</div> 4684 4685 <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"> 4686 <a 4687 href="https://shopify.com/66143911979/account?locale=en%C2%AEion_country=US" 4688 class="cop--cta-btn" 4689 >JOIN THE CLUB</a> 4690 </div></div> 4691 </div></div> 4692 4693 </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> 4694
4695<script> 4696 (function () { 4697 var SECTION_ID = 'template--26540060639275__club_olay_perks'; 4698 var arrowPrevUrl = '//www.olay.com/cdn/shop/t/10/assets/left-arrow.svg?v=146974593307031605021779203465'; 4699 var arrowNextUrl = '//www.olay.com/cdn/shop/t/10/assets/right-arrow.svg?v=62160895858390047461779203466'; 4700 4701 function initPerksCarousel(root) { 4702 var $ = window.jQuery; 4703 var $root = $(root); 4704 var $track = $root.find('.cop--slick'); 4705 4706 if ($track.hasClass('slick-initialized')) { 4707 $track.slick('unslick'); 4708 } 4709 4710 $track.slick({ 4711 slidesToShow : 3, 4712 slidesToScroll: 1, 4713 infinite : false, 4714 arrows : true, 4715 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>', 4716 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>', 4717 draggable : true, 4718 swipe : true, 4719 touchThreshold: 10, 4720 responsive: [ 4721 { 4722 breakpoint: 1024, 4723 settings: { slidesToShow: 2, slidesToScroll: 1 } 4724 }, 4725 { 4726 breakpoint: 768, 4727 settings: { 4728 slidesToShow : 1, 4729 slidesToScroll: 1 4730 } 4731 } 4732 ] 4733 }); 4734 } 4735 4736 function tryInit() { 4737 if (typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.slick === 'undefined') { 4738 setTimeout(tryInit, 50); 4739 return; 4740 } 4741 var root = document.getElementById('club-olay-perks-' + SECTION_ID); 4742 if (root) initPerksCarousel(root); 4743 } 4744 4745 tryInit(); 4746 4747 document.addEventListener('shopify:section:load', function (e) { 4748 if (e.detail && e.detail.sectionId === SECTION_ID) tryInit(); 4749 }); 4750 })(); 4751</script>
4751 4752 4753 4754 4755 4756</section><div id="shopify-section-template--26540060639275__custom_liquid_4Ui8Ay" class="shopify-section section--custom-liquid"><!-- sections/custom-liquid.liquid --><div 4757 class="custom-liquid--root" 4758 data-section-id="template--26540060639275__custom_liquid_4Ui8Ay" 4759 data-background-color="none" 4760 data-border="none" 4761 data-container-width="4" 4762 data-mobile-full-width="false" 4763 data-mobile-spacing-above="none" 4764 data-mobile-spacing-below="none" 4765 data-mobile-x-alignment="center" 4766 data-text-color="body" 4767 data-spacing-above="none" 4768 data-spacing-below="none" 4769 data-x-alignment="center" 4770> 4771 <div class="custom-liquid--wrapper"> 4772 <style> 4773body { 4774background: #f2f2f2; 4775} 4776</style> 4777 </div> 4778</div> 4779 4780</div> 4781 </main> 4782 </div> 4783 4784 <div class="layout--footer-group"><!-- BEGIN sections: footer-group --> 4785<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> 4786 4787 <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><--> 4788 <div class="olay-footer__club"> 4789 <h3 class="olay-footer__club-title" tabindex="0">Join Club Olay</h3> 4790 <p class="olay-footer__club-text" tabindex="0"> 4791 Stay in-the-know about new launches, exclusive offers, and all things OLAY! 4792 </p> 4793 4794 <a 4795 class="olay-footer__btn" 4796 href="https://shopify.com/66143911979/account" 4797 role="button" 4798 tabindex="0" 4799 > 4800 REGISTER 4801 </a> 4802 </div> 4803 4804 </section><!-- Right: Link columns --> 4805 <nav class="olay-footer__nav" aria-label="Footer links" tabindex="0"> 4806 <div class="olay-footer__col"><h3 class="olay-footer__col-title" tabindex="0">About Olay</h3> 4807 <ul class="olay-footer__links"> 4808 4809 <li class="footer__menu-item"> 4810 <a 4811 href="/pages/why-olay" 4812 class="footer__menu-link event_internal_link" 4813 title="click here to About Olay" 4814 aria-label="click here to About Olay" 4815 data-action-detail="About Olay" 4816 tabindex="0" 4817 > 4818 About Olay 4819 </a> 4820 </li> 4821 4822 <li class="footer__menu-item"> 4823 <a 4824 href="/blogs/olay-today" 4825 class="footer__menu-link event_internal_link" 4826 title="click here to Blog" 4827 aria-label="click here to Blog" 4828 data-action-detail="Blog" 4829 tabindex="0" 4830 > 4831 Blog 4832 </a> 4833 </li> 4834 4835 <li class="footer__menu-item"> 4836 <a 4837 href="/pages/create-account" 4838 class="footer__menu-link event_internal_link" 4839 title="click here to Club Olay " 4840 aria-label="click here to Club Olay " 4841 data-action-detail="Club Olay " 4842 tabindex="0" 4843 > 4844 Club Olay 4845 </a> 4846 </li> 4847 4848 <li class="footer__menu-item"> 4849 <a 4850 href="/pages/referral" 4851 class="footer__menu-link event_internal_link" 4852 title="click here to Give $10, Get $10" 4853 aria-label="click here to Give $10, Get $10" 4854 data-action-detail="Give $10, Get $10" 4855 tabindex="0" 4856 > 4857 Give $10, Get $10 4858 </a> 4859 </li> 4860 4861 </ul> 4862 </div> 4863
4864 <div class="olay-footer__col"><h3 class="olay-footer__col-title" tabindex="0">Help</h3> 4865 <ul class="olay-footer__links"> 4866 4867 <li class="footer__menu-item"> 4868 <a 4869 href="/pages/contact-us#shopify-section-template--25816847319083__shopflex_nested_accordion_d3xDjA" 4870 class="footer__menu-link event_internal_link" 4871 title="click here to FAQ" 4872 aria-label="click here to FAQ" 4873 data-action-detail="FAQ" 4874 tabindex="0" 4875 > 4876 FAQ 4877 </a> 4878 </li> 4879 4880 <li class="footer__menu-item"> 4881 <a 4882 href="/pages/olay-policy" 4883 class="footer__menu-link event_internal_link" 4884 title="click here to Returns & Store Policy" 4885 aria-label="click here to Returns & Store Policy" 4886 data-action-detail="Returns & Store Policy" 4887 tabindex="0" 4888 > 4889 Returns & Store Policy 4890 </a> 4891 </li> 4892 4893 <li class="footer__menu-item"> 4894 <a 4895 href="https://club.olay.com/orders" 4896 class="footer__menu-link event_internal_link" 4897 title="click here to Order Status" 4898 aria-label="click here to Order Status" 4899 data-action-detail="Order Status" 4900 tabindex="0" 4901 > 4902 Order Status 4903 </a> 4904 </li> 4905 4906 <li class="footer__menu-item"> 4907 <a 4908 href="/account/orders" 4909 class="footer__menu-link event_internal_link" 4910 title="click here to Track Order" 4911 aria-label="click here to Track Order" 4912 data-action-detail="Track Order" 4913 tabindex="0" 4914 > 4915 Track Order 4916 </a> 4917 </li> 4918 4919 </ul> 4920 </div> 4921 4922 <div class="olay-footer__col"><h3 class="olay-footer__col-title" tabindex="0">Support</h3> 4923 <ul class="olay-footer__links"> 4924 4925 <li class="footer__menu-item"> 4926 <a 4927 href="/pages/contact-us" 4928 class="footer__menu-link event_internal_link" 4929 title="click here to Contact Us" 4930 aria-label="click here to Contact Us" 4931 data-action-detail="Contact Us" 4932 tabindex="0" 4933 > 4934 Contact Us 4935 </a> 4936 </li> 4937 4938 </ul> 4939 </div> 4940 </nav> 4941 </div><section class="footer-info social-links-ul"> 4942 <div class="footer-main tab-desktop-footer"> 4943 <div class="footer-main1"> 4944 <ul class="copyright-links"> 4945 4946 <li class="socialLinks-item"> 4947 <a 4948 class="icon1 icon--facebook event_socialmedia_exit" 4949 data-action-detail="facebook" 4950 href="https://www.facebook.com/OlayUS/" 4951 target="_blank" 4952 rel="noopener" 4953 alt="Link to Olay's facebook Account" 4954 aria-label="Click to go to Olay's facebook Account (opens in new window)" 4955 > 4956 <img 4957 class="lazyloaded ls-is-cached" 4958 loading="lazy" 4959 alt="facebook" 4960 width="24px" 4961 height="24px" 4962 src="//www.olay.com/cdn/shop/t/10/assets/FB.svg?v=176204749252861282551779203464" 4963 > 4964 </a> 4965 </li> 4966 4967 4968 <li class="socialLinks-item"> 4969 <a 4970 class="icon1 icon--instagram event_socialmedia_exit" 4971 data-action-detail="instagram" 4972 href="https://www.instagram.com/olay/?hl=en" 4973 target="_blank" 4974 rel="noopener" 4975 alt="Link to Olay's instagram Account" 4976 aria-label="Click to go to Olay's instagram Account (opens in new window)" 4977 > 4978 <img 4979 class="lazyloaded ls-is-cached" 4980 loading="lazy" 4981 alt="instagram" 4982 width="24px" 4983 height="24px" 4984 src="//www.olay.com/cdn/shop/t/10/assets/instagram.svg?v=38138225703551950561779203464" 4985 > 4986 </a> 4987 </li> 4988 4989 4990 <li class="socialLinks-item"> 4991 <a 4992 class="icon1 icon--pinterest event_socialmedia_exit" 4993 data-action-detail="pinterest" 4994 href="https://www.pinterest.com/OlayUS/" 4995 target="_blank" 4996 rel="noopener" 4997 alt="Link to Olay's pinterest Account" 4998 aria-label="Click to go to Olay's pinterest Account (opens in new window)" 4999 > 5000 <img 5001 class="lazyloaded ls-is-cached" 5002 loading="lazy" 5003 alt="pinterest" 5004 width="24px" 5005 height="24px" 5006 src="//www.olay.com/cdn/shop/t/10/assets/pinterest.svg?v=41553919368186424521779203463" 5007 > 5008 </a> 5009 </li> 5010 5011 5012 <li class="socialLinks-item"> 5013 <a 5014 class="icon1 icon--youtube event_socialmedia_exit" 5015 data-action-detail="youtube" 5016 href="https://www.youtube.com/channel/UCZ1CQE5_gNdcuvxwcZOahzA" 5017 target="_blank" 5018 rel="noopener" 5019 alt="Link to Olay's youtube Account" 5020 aria-label="Click to go to Olay's youtube Account (opens in new window)" 5021 > 5022 <img 5023 class="lazyloaded ls-is-cached" 5024 loading="lazy" 5025 alt="youtube" 5026 width="24px" 5027 height="24px" 5028 src="//www.olay.com/cdn/shop/t/10/assets/youtube.svg?v=24405244472099943571779203465" 5029 > 5030 </a> 5031 </li> 5032 5033<li class="mobile-break"></li> 5034 5035 5036 <li > 5037 <a 5038 5039 href="/pages/accessibility" 5040 5041 5042 class="event_internal_link" 5043 5044 5045 title="click here to Accessibility Statement" 5046 5047 5048 aria-label="click here to Accessibility Statement" 5049 5050
5051 alt="Olay Accessibility Statement" 5052 5053 5054 data-action-detail="Accessibility Statement" 5055 5056 5057 5058 5059 target="_blank" rel="noopener noreferrer" 5060 5061 >Accessibility Statement</a> 5062 </li> 5063 5064 5065 5066 5067 <li > 5068 <a 5069 5070 href="/pages/sitemap" 5071 5072 5073 class="event_internal_link" 5074 5075 5076 title="click here to Sitemap" 5077 5078 5079 aria-label="click here to Sitemap (opens in new window)" 5080 5081 5082 alt="Olay Site map" 5083 5084 5085 data-action-detail="Sitemap" 5086 5087 5088 5089 5090 target="_blank" rel="noopener noreferrer" 5091 5092 >Sitemap</a> 5093 </li> 5094 5095 5096 5097 5098 <li > 5099 <a 5100 5101 href="https://privacypolicy.pg.com/en/#statePrivacyNotice" 5102 5103 5104 class="event_external_link" 5105 5106 5107 title="click here to Privacy" 5108 5109 5110 aria-label="click here to Privacy (opens in new window)" 5111 5112 5113 alt="Privacy Policy" 5114 5115 5116 data-action-detail="Privacy" 5117 5118 5119 5120 5121 target="_blank" rel="noopener noreferrer" 5122 5123 >Privacy</a> 5124 </li> 5125 5126 5127 5128 5129 <li > 5130 <a 5131 5132 href="https://privacypolicy.pg.com/CHD-en" 5133 5134 5135 class="event_external_link" 5136 5137 5138 title="click here to Consumer Health Data Privacy Policy" 5139 5140 5141 aria-label="Consumer Health Data Privacy Policy (opens in new window)" 5142 5143 5144 5145 data-action-detail="Footer_Consumer Health Data Privacy Policy" 5146 5147 5148 5149 5150 target="_blank" rel="noopener noreferrer" 5151 5152 >Consumer Health Data Privacy Policy</a> 5153 </li> 5154 5155 5156 5157 5158 <li > 5159 <a 5160 5161 href="https://www.pg.com/en_US/terms_conditions/index.shtml" 5162 5163 5164 class="event_external_link" 5165 5166 5167 title="click here to Terms & Conditions" 5168 5169 5170 aria-label="click here to Terms & Conditions (opens in new window)" 5171 5172 5173 alt="terms and conditions" 5174 5175 5176 data-action-detail="Terms & Conditions" 5177 5178 5179 5180 5181 target="_blank" rel="noopener noreferrer" 5182 5183 >Terms & Conditions</a> 5184 </li> 5185 5186 5187 5188 5189 <li > 5190 <a 5191 5192 href="https://unsubscribe.pg.com/privacy/optsengine/en_US/cot_std_brandopts.do?brand=olay&sub=9999" 5193 5194 5195 class="event_internal_link" 5196 5197 5198 title="click here to Unsubscribe" 5199 5200 5201 aria-label="click here to Unsubscribe (opens in new window)" 5202 5203 5204 alt="unsubscribe" 5205 5206 5207 data-action-detail="Unsubscribe" 5208 5209 5210 5211 5212 target="_blank" rel="noopener noreferrer" 5213 5214 >Unsubscribe</a> 5215 </li> 5216 5217 5218 5219 5220<li > 5221 <a title="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advert
5221ising" 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> 5222 </li> 5223 5224 5225 5226 <li > 5227 <span 5228 5229 class="event_external_link" 5230 5231 >NOTICE: We May Sell Your Sensitive Personal Data</span> 5232 </li> 5233 5234 5235 5236 5237 <li > 5238 <a 5239 5240 href="https://preferencecenter.pg.com/" 5241 5242 5243 class="event_external_link yourPrivacyChoices-logo" 5244 5245 5246 title="click here to Your Privacy Choices" 5247 5248 5249 aria-label="click here to Your Privacy Choices (opens in new window)" 5250 5251 5252 alt="Your Privacy Choices" 5253 5254 5255 data-action-detail="Your Privacy Choices" 5256 5257 5258 target="_blank" rel="noopener noreferrer" 5259 5260 > 5261 5262 <span>Your Privacy Choices</span> 5263 5264 5265 <img 5266 class="lazyloaded ls-is-cached" 5267 loading="lazy" 5268 src="//www.olay.com/cdn/shop/files/privacyoptions.webp?v=1779268524&width=180" 5269 alt="Logo" 5270 5271 width="45" 5272 height="20" 5273 > 5274 5275 </a> 5276 </li> 5277 5278 5279 5280 </ul> 5281 </div> 5282 <div class="footer-main2"> 5283 <ul class="copyright-links"> 5284 5285 <li> 5286 <a 5287 class="event_external_link" 5288 data-action-detail="Better Business Bureau" 5289 target="_blank" 5290 aria-label="click here to Better Business Bureau (opens in new window)" 5291 title="click here to Better Business Bureau " 5292 href="https://www.bbb.org/us/oh/cincinnati/profile/detergent/the-procter-gamble-company-0292-3036#bbbonlineclick" 5293 rel="noopener noreferrer" 5294 ><img 5295 class="lazyloaded BB-logo ls-is-cached" 5296 loading="lazy" 5297 src="//www.olay.com/cdn/shop/t/10/assets/bbb.svg?v=32291926550178936731779203462" 5298 width="84" 5299 height="32" 5300 alt=" " 5301 aria-hidden="true" 5302 ></a> 5303 </li> 5304 5305 </ul> 5306 </div> 5307 </div> 5308 <div class="footer-main mobile-only-footer"> 5309 <div class="mobile-footer-social-box"> 5310 <ul class="copyright-links mobile-footer-social-box1"> 5311 5312 <li class="socialLinks-item"> 5313 <a 5314 class="icon1 icon--facebook event_socialmedia_exit" 5315 data-action-detail="facebook" 5316 href="https://www.facebook.com/OlayUS/" 5317 target="_blank" 5318 rel="noopener" 5319 alt="Link to Olay's facebook Account" 5320 aria-label="Click to go to Olay's facebook Account (opens in new window)" 5321 > 5322 <img 5323 class="lazyloaded ls-is-cached" 5324 loading="lazy" 5325 alt="facebook" 5326 width="24px" 5327 height="24px" 5328 src="//www.olay.com/cdn/shop/t/10/assets/FB.svg?v=176204749252861282551779203464" 5329 > 5330 </a> 5331 </li> 5332 5333 5334 <li class="socialLinks-item"> 5335 <a 5336 class="icon1 icon--instagram event_socialmedia_exit" 5337 data-action-detail="instagram" 5338 href="https://www.instagram.com/olay/?hl=en" 5339 target="_blank" 5340 rel="noopener" 5341 alt="Link to Olay's instagram Account" 5342 aria-label="Click to go to Olay's instagram Account (opens in new window)" 5343 > 5344 <img 5345 class="lazyloaded ls-is-cached" 5346 loading="lazy" 5347 alt="instagram" 5348 width="24px" 5349 height="24px" 5350 src="//www.olay.com/cdn/shop/t/10/assets/instagram.svg?v=38138225703551950561779203464" 5351 > 5352 </a> 5353 </li> 5354 5355 5356 <li class="socialLinks-item"> 5357 <a 5358 class="icon1 icon--pinterest event_socialmedia_exit" 5359 data-action-detail="pinterest" 5360 href="https://www.pinterest.com/OlayUS/" 5361 target="_blank" 5362 rel="noopener" 5363 alt="Link to Olay's pinterest Account" 5364 aria-label="Click to go to Olay's pinterest Account (opens in new window)" 5365 > 5366 <img 5367 class="lazyloaded ls-is-cached" 5368 loading="lazy" 5369 alt="pinterest" 5370 width="24px" 5371 height="24px" 5372 src="//www.olay.com/cdn/shop/t/10/assets/pinterest.svg?v=41553919368186424521779203463" 5373 > 5374 </a> 5375 </li> 5376 5377 5378 <li class="socialLinks-item"> 5379 <a 5380 class="icon1 icon--youtube event_socialmedia_exit" 5381 data-action-detail="youtube" 5382 href="https://www.youtube.com/channel/UCZ1CQE5_gNdcuvxwcZOahzA" 5383 target="_blank" 5384 rel="noopener" 5385 alt="Link to Olay's youtube Account" 5386 aria-label="Click to go to Olay's youtube Account (opens in new window)" 5387 > 5388 <img 5389 class="lazyloaded ls-is-cached" 5390 loading="lazy" 5391 alt="youtube" 5392 width="24px" 5393 height="24px" 5394 src="//www.olay.com/cdn/shop/t/10/assets/youtube.svg?v=24405244472099943571779203465" 5395 > 5396 </a> 5397 </li> 5398 5399 </ul> 5400 <ul class="copyright-links mobile-footer-social-box2"> 5401 5402 <li> 5403 <a 5404 class="event_external_link" 5405 data-action-detail="Better Business Bureau" 5406 target="_blank" 5407 title="click here to Better Business Bureau " 5408 href="https://www.bbb.org/us/oh/cincinnati/profile/detergent/the-procter-gamble-company-0292-3036#bbbonlineclick" 5409 rel="noopener" 5410 ><img 5411 class="lazyloaded ls-is-cached" 5412 loading="lazy" 5413 aria-label="click here to Better Business Bureau (opens in new window)" 5414 src="//www.olay.com/cdn/shop/t/10/assets/bbb.svg?v=32291926550178936731779203462" 5415 width="84" 5416 height="32" 5417 alt="BBB logo" 5418 ></a> 5419 </li> 5420 5421 </ul> 5422 </div> 5423 <div class="footer-main1"> 5424 <ul class="copyright-links"><li class="mobile-break"></li> 5425 5426 5427 <li > 5428 <a 5429 5430 href="/pages/accessibility" 5431 5432 5433 class="event_internal_link" 5434 5435 5436 title="click here to Accessibility Statement" 5437 5438 5439 aria-label="click here to Accessibility Statement" 5440 5441
5442 alt="Olay Accessibility Statement" 5443 5444 5445 data-action-detail="Accessibility Statement" 5446 5447 5448 5449 5450 target="_blank" rel="noopener noreferrer" 5451 5452 >Accessibility Statement</a> 5453 </li> 5454 5455 5456 5457 5458 <li > 5459 <a 5460 5461 href="/pages/sitemap" 5462 5463 5464 class="event_internal_link" 5465 5466 5467 title="click here to Sitemap" 5468 5469 5470 aria-label="click here to Sitemap (opens in new window)" 5471 5472 5473 alt="Olay Site map" 5474 5475 5476 data-action-detail="Sitemap" 5477 5478 5479 5480 5481 target="_blank" rel="noopener noreferrer" 5482 5483 >Sitemap</a> 5484 </li> 5485 5486 5487 5488 5489 <li > 5490 <a 5491 5492 href="https://privacypolicy.pg.com/en/#statePrivacyNotice" 5493 5494 5495 class="event_external_link" 5496 5497 5498 title="click here to Privacy" 5499 5500 5501 aria-label="click here to Privacy (opens in new window)" 5502 5503 5504 alt="Privacy Policy" 5505 5506 5507 data-action-detail="Privacy" 5508 5509 5510 5511 5512 target="_blank" rel="noopener noreferrer" 5513 5514 >Privacy</a> 5515 </li> 5516 5517 5518 5519 5520 <li > 5521 <a 5522 5523 href="https://privacypolicy.pg.com/CHD-en" 5524 5525 5526 class="event_external_link" 5527 5528 5529 title="click here to Consumer Health Data Privacy Policy" 5530 5531 5532 aria-label="Consumer Health Data Privacy Policy (opens in new window)" 5533 5534 5535 5536 data-action-detail="Footer_Consumer Health Data Privacy Policy" 5537 5538 5539 5540 5541 target="_blank" rel="noopener noreferrer" 5542 5543 >Consumer Health Data Privacy Policy</a> 5544 </li> 5545 5546 5547 5548 5549 <li > 5550 <a 5551 5552 href="https://www.pg.com/en_US/terms_conditions/index.shtml" 5553 5554 5555 class="event_external_link" 5556 5557 5558 title="click here to Terms & Conditions" 5559 5560 5561 aria-label="click here to Terms & Conditions (opens in new window)" 5562 5563 5564 alt="terms and conditions" 5565 5566 5567 data-action-detail="Terms & Conditions" 5568 5569 5570 5571 5572 target="_blank" rel="noopener noreferrer" 5573 5574 >Terms & Conditions</a> 5575 </li> 5576 5577 5578 5579 5580 <li > 5581 <a 5582 5583 href="https://unsubscribe.pg.com/privacy/optsengine/en_US/cot_std_brandopts.do?brand=olay&sub=9999" 5584 5585 5586 class="event_internal_link" 5587 5588 5589 title="click here to Unsubscribe" 5590 5591 5592 aria-label="click here to Unsubscribe (opens in new window)" 5593 5594 5595 alt="unsubscribe" 5596 5597 5598 data-action-detail="Unsubscribe" 5599 5600 5601 5602 5603 target="_blank" rel="noopener noreferrer" 5604 5605 >Unsubscribe</a> 5606 </li> 5607 5608 5609 5610 5611<li > 5612 <a title="click here to Do Not Sell or Share My Personal Information / Opt-Out of Targeted Advert
5612ising" 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> 5613 </li> 5614 5615 5616 5617 <li > 5618 <span 5619 5620 class="event_external_link" 5621 5622 >NOTICE: We May Sell Your Sensitive Personal Data</span> 5623 </li> 5624 5625 5626 5627 5628 <li > 5629 <a 5630 5631 href="https://preferencecenter.pg.com/" 5632 5633 5634 class="event_external_link yourPrivacyChoices-logo" 5635 5636 5637 title="click here to Your Privacy Choices" 5638 5639 5640 aria-label="click here to Your Privacy Choices (opens in new window)" 5641 5642 5643 alt="Your Privacy Choices" 5644 5645 5646 data-action-detail="Your Privacy Choices" 5647 5648 5649 target="_blank" rel="noopener noreferrer" 5650 5651 > 5652 5653 <span>Your Privacy Choices</span> 5654 5655 5656 <img 5657 class="lazyloaded ls-is-cached" 5658 loading="lazy" 5659 src="//www.olay.com/cdn/shop/files/privacyoptions.webp?v=1779268524&width=180" 5660 alt="Logo" 5661 5662 width="45" 5663 height="20" 5664 > 5665 5666 </a> 5667 </li> 5668 5669 5670 5671 </ul> 5672 </div> 5673 </div> 5674 <!-- Secondary legal fine print lines --> 5675 <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> 5676 5677 <div class="olay-footer__fineprint"> 5678 <p class="olay-footer__fine-line olay-footer__copyright">©2026 Procter & Gamble</p> 5679 </div> 5680 </section> 5681</div> 5682<style type="text/css">/* --- Footer base --- */ 5683 .olay-footer { 5684 background: #000000; 5685 color: #ffffff !important; 5686 position: relative; 5687 /* padding: 56px 24px 26px; */ 5688 padding: 2.5rem 6rem; 5689 } 5690 5691 .olay-footer h2, 5692 .olay-footer h4, 5693 .olay-footer a { 5694 color: #ffffff !important; 5695 } 5696 .olay-footer__col-title, h4.olay-footer__col-title, 5697 .olay-footer .copyright-links li { 5698 color: #c3c3c3 !important; 5699 } 5700 .olay-footer .footer-main, 5701 .olay-footer__col-title { 5702 border-color: #c3c3c3 !important; 5703 } 5704 .olay-footer__logo { 5705 display: inline-block; 5706 text-decoration: none; 5707 color: #ffffff; 5708 margin-bottom: 22px; 5709 } 5710 5711 .olay-footer__logo:focus-visible { 5712 outline: 2px solid #c3c3c3; 5713 outline-offset: 4px; 5714 } 5715 5716 .olay-footer__links a { 5717 color: #ffffff !important; 5718 text-decoration: none !important; 5719 font-size: 14px; 5720 font-weight: 700; 5721 opacity: 0.95; 5722 } 5723 5724 /* Hover: only underline, no outline */ 5725 .olay-footer__links a:hover { 5726 text-decoration: underline; 5727 color: #c3c3c3 !important; 5728 } 5729 5730 /* Keyboard focus: underline + outline for visibility */ 5731 .olay-footer__links a:focus-visible { 5732 text-decoration: underline; 5733 outline: 2px solid #c3c3c3; 5734 outline-offset: 2px; 5735 } 5736 5737 /* Enhanced keyboard navigation */ 5738 .olay-footer__nav:focus-visible { 5739 outline: 2px dashed #c3c3c3; 5740 outline-offset: 4px; 5741 } 5742 5743 .olay-footer__club-title:focus-visible { 5744 outline: 2px solid #c3c3c3; 5745 outline-offset: 4px; 5746 } 5747 5748 .olay-footer__club-text:focus-visible { 5749 outline: 2px solid #c3c3c3; 5750 outline-offset: 4px; 5751 } 5752 5753 .olay-footer__btn:focus-visible { 5754 outline: 3px solid #c3c3c3; 5755 outline-offset: 3px; 5756 box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3); 5757 } 5758 5759 .olay-footer__club-title { 5760 font-size: 42px; 5761 font-weight: 500; 5762 margin: 0 0 10px; 5763 cursor: default !important; 5764 color: #ffffff; 5765 }</style> 5766<style data-shopify> 5767 .olay-footer .footer-main { 5768 display: flex; 5769 border-top: 1px solid; 5770 padding-top: 1rem; 5771 margin-top: 28px; 5772 } 5773 .olay-footer .mobile-footer-social-box { 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 width: 100%; 5784 display: flex; 5785 flex-direction: column; 5786 } 5787 .olay-footer ul.copyright-links.mobile-footer-social-box1 { 5788 line-height: 1.5; 5789 color: #010101; 5790 font-weight: 700; 5791 font-style: normal; 5792 text-transform: none; 5793 box-sizing: border-box; 5794 padding: 0; 5795 list-style-position: outside; 5796 -webkit-box-pack: center; 5797 justify-content: center; 5798 -webkit-box-align: center;
5799 align-items: center; 5800 flex-wrap: wrap; 5801 margin: 0; 5802 display: block; 5803 font-size: 13px; 5804 -webkit-box-flex: 1; 5805 flex: 1; 5806 text-align: left; 5807 } 5808 .olay-footer .mobile-only-footer .footer-main1 { 5809 line-height: 1.5; 5810 color: #010101; 5811 font-weight: 700; 5812 font-style: normal; 5813 text-transform: none; 5814 font-size: 0; 5815 box-sizing: border-box; 5816 margin: 0; 5817 padding: 0; 5818 display: flex; 5819 -webkit-box-flex: 1; 5820 flex: 1; 5821 text-align: left; 5822 -webkit-box-pack: start; 5823 justify-content: flex-start; 5824 -webkit-box-align: start; 5825 align-items: flex-start; 5826 } 5827 .olay-footer ul.copyright-links.mobile-footer-social-box2 { 5828 line-height: 1.5; 5829 color: #010101; 5830 font-weight: 700; 5831 font-style: normal; 5832 text-transform: none; 5833 box-sizing: border-box; 5834 padding: 0; 5835 list-style-position: outside; 5836 text-align: center; 5837 -webkit-box-pack: center; 5838 justify-content: center; 5839 -webkit-box-align: center; 5840 align-items: center; 5841 flex-wrap: wrap; 5842 margin: 0; 5843 display: block; 5844 font-size: 13px; 5845 } 5846 .olay-footer .footer-main1 { 5847 line-height: 1.5; 5848 color: #010101; 5849 font-weight: 700; 5850 font-style: normal; 5851 text-transform: none; 5852 font-size: 0; 5853 box-sizing: border-box; 5854 margin: 0; 5855 padding: 0; 5856 display: flex; 5857 -webkit-box-flex: 1; 5858 flex: 1; 5859 text-align: left; 5860 -webkit-box-pack: start; 5861 justify-content: flex-start; 5862 -webkit-box-align: start; 5863 align-items: flex-start; 5864 } 5865 .olay-footer .footer-info { 5866 line-height: 1.5; 5867 color: #010101; 5868 font-weight: 700; 5869 font-style: normal; 5870 text-transform: none; 5871 box-sizing: border-box; 5872 display: block; 5873 max-width: none; 5874 width: auto; 5875 font-size: 0; 5876 margin: 0; 5877 margin-bottom: 80px; 5878 } 5879 .olay-footer .socialLinks-item img { 5880 width: 24px !important; 5881 } 5882 .olay-footer .yourPrivacyChoices-logo img { 5883 display: inline-block; 5884 width: 45px !important; 5885 height: 20px; 5886 margin-left: 5px; 5887 } 5888 .olay-footer .yourPrivacyChoices-logo { 5889 display: inline-flex; 5890 align-items: center; 5891 } 5892 .olay-footer .footer-main.mobile-only-footer { 5893 display: flex !important; 5894 flex-direction: column !important; 5895 } 5896 .olay-footer .footer-main.mobile-only-footer > div.mobile-footer-social-box > ul.copyright-links > li { 5897 display: inline-block !important; 5898 } 5899 .olay-footer 5900 .footer-main.mobile-only-footer 5901 > div.mobile-footer-social-box 5902 > ul.copyright-links.mobile-footer-social-box2 5903 > li 5904 img { 5905 max-width: 100%; 5906 width: 84px; 5907 } 5908 .olay-footer .footer-main.tab-desktop-footer { 5909 display: none !important; 5910 } 5911 5912 @media only screen and (max-width: 1000px) { 5913 .olay-footer .copyright-links .mobile-break { 5914 -ms-flex-preferred-size: 100%; 5915 flex-basis: 100%; 5916 } 5917 } 5918 @media (min-width: 551px) { 5919 .olay-footer .footer-main.mobile-only-footer { 5920 display: none !important; 5921 } 5922 .olay-footer .footer-main.tab-desktop-footer { 5923 display: flex !important; 5924 } 5925 } 5926 @media (max-width: 550px) { 5927 .olay-footer .footer-info { 5928 margin: 0px !important; 5929 } 5930 .olay-footer .mobile-footer-social-box { 5931 flex-direction: row !important; 5932 } 5933 .olay-footer { 5934 padding: 0 31px !important; 5935 } 5936 .olay-footer__brand .olay-footer__logo img { 5937 width: 220px; 5938 } 5939 .olay-footer .socialLinks-item { 5940 margin-right: 11px !important; 5941 } 5942 .olay-footer__brand { 5943 margin-top: 48px; 5944 } 5945 .olay-footer__inner { 5946 gap: 30px !important; 5947 } 5948 .olay-footer .footer-main ul li, 5949 .olay-footer .footer-main ul li a { 5950 font-size: 13px !important; 5951 } 5952 .olay-footer .copyright-links { 5953 gap: 8px !important; 5954 } 5955 .olay-footer__nav { 5956 margin-top: 0px !important; 5957 } 5958 .olay-footer .footer-info.social-links-ul { 5959 padding-bottom: 65px !important; 5960 } 5961 } 5962 @media (min-width: 913px) and (max-width: 1024px) { 5963 .olay-footer { 5964 padding: 30px 21px 60px 20px !important; 5965 } 5966 .olay-footer__inner { 5967 grid-template-columns: minmax(270px, 260px) 1fr !important; 5968 gap: 38px; 5969 } 5970 .olay-footer__brand { 5971 max-width: 270px; 5972 } 5973 .olay-footer__nav { 5974 grid-template-columns: repeat(3, 180px) !important; 5975 } 5976 .olay-footer .copyright-links { 5977 gap: 15px; 5978 } 5979 } 5980 .olay-footer .footer-main ul li, 5981 .olay-footer .footer-main ul li a { 5982 font-size: 14px; 5983 color: rgb(195, 195, 195) !important; 5984 } 5985 .olay-footer .copyright-links { 5986 gap: 20px; 5987 5988 line-height: 1.5; 5989 color: #010101; 5990 font-weight: 700; 5991 font-style: normal; 5992 text-transform: none; 5993 box-sizing: border-box; 5994 padding: 0; 5995 list-style-position: outside; 5996 flex-wrap: wrap; 5997 font-size: 1rem; 5998 display: flex; 5999 text-align: left; 6000 -webkit-box-pack: start; 6001 justify-content: flex-start; 6002 -webkit-box-align: start;
6003 align-items: flex-start; 6004 margin: 0; 6005 } 6006 .olay-footer .copyright-links li { 6007 line-height: 1.5; 6008 font-style: normal; 6009 text-transform: none; 6010 font-size: 1rem; 6011 text-align: left; 6012 box-sizing: border-box; 6013 margin: 0; 6014 padding: 0; 6015 font-weight: 400; 6016 list-style: none; 6017 } 6018 .olay-footer .copyright-links li a { 6019 color: white !important; 6020 text-decoration: underline !important; 6021 } 6022 /* --- Utility: screen-reader only --- */ 6023 .sr-only { 6024 position: absolute !important; 6025 width: 1px; 6026 height: 1px; 6027 padding: 0; 6028 margin: -1px; 6029 overflow: hidden; 6030 clip: rect(0, 0, 0, 0); 6031 white-space: nowrap; 6032 border: 0; 6033 } 6034 6035 .olay-footer__club a.olay-footer__btn { 6036 color: #000 !important; 6037 font-size: 14px !important; 6038 } 6039 6040 .olay-footer__inner { 6041 /* max-width: 1200px; */ 6042 margin: 0 auto; 6043 display: grid; 6044 grid-template-columns: minmax(320px, 400px) 1fr; 6045 gap: 48px; 6046 align-items: start; 6047 } 6048 6049 .olay-footer__inner--logged-in { 6050 display: block; 6051 } 6052 6053 .olay-footer__inner--logged-in .olay-footer__nav { 6054 margin-top: 15px; 6055 } 6056 6057 .olay-footer__club-text { 6058 margin: 0 0 22px; 6059 font-size: 23.8px; 6060 line-height: 1.35; 6061 opacity: 0.95; 6062 cursor: default !important; 6063 } 6064 6065 .olay-footer__btn { 6066 width: 100%; 6067 display: inline-flex; 6068 justify-content: center; 6069 align-items: center; 6070 height: 44px; 6071 min-width: 220px; 6072 padding: 0 18px; 6073 background: #fff; 6074 color: #000; 6075 text-decoration: none; 6076 font-weight: 700; 6077 letter-spacing: 0.5px; 6078 border: 2px solid #fff; 6079 transition: transform 160ms ease, background 160ms ease, color 160ms ease; 6080 } 6081 6082 /* --- Right side columns --- */ 6083 .olay-footer__nav { 6084 display: grid; 6085 grid-template-columns: repeat(3, minmax(180px, 1fr)); 6086 gap: 32px; 6087 margin-top: 80px; 6088 } 6089 .olay-footer__col-title { 6090 font-size: 14px; 6091 letter-spacing: 1.1px; 6092 font-weight: 800; 6093 margin: 6px 0 14px; 6094 padding-bottom: 10px; 6095 border-bottom: 1px solid; 6096 opacity: 0.95; 6097 text-transform: uppercase; 6098 cursor: default; 6099 color: #c3c3c3 !important; 6100 } 6101 .olay-footer__links { 6102 list-style: none; 6103 padding: 0; 6104 margin: 0; 6105 } 6106 .olay-footer__links li { 6107 margin: 10px 0; 6108 } 6109 6110 /* Fine print lines */ 6111 .olay-footer__fineprint { 6112 margin-top: 10px; 6113 } 6114 .olay-footer__fine-line { 6115 margin: 8px 0 0; 6116 font-size: 14px; 6117 line-height: 1.35; 6118 color: rgba(255, 255, 255, 0.85); 6119 font-weight: 400 !important; 6120 } 6121 .olay-footer__separator { 6122 margin: 0 10px; 6123 color: rgba(255, 255, 255, 0.55); 6124 } 6125 .olay-footer__copyright { 6126 color: rgba(255, 255, 255, 0.75); 6127 } 6128 6129 .footer__logo-image { 6130 max-width: 270px; 6131 } 6132 6133 @media (max-width: 900px) { 6134 .olay-footer__inner { 6135 grid-template-columns: 1fr; 6136 } 6137 .olay-footer__nav { 6138 grid-template-columns: 1fr; 6139 } 6140 .olay-footer__legal-links { 6141 justify-content: flex-start; 6142 } 6143 .olay-footer__help { 6144 position: fixed; 6145 right: 16px; 6146 bottom: 16px; 6147 top: auto; 6148 transform: none; 6149 z-index: 999; 6150 } 6151 } 6152 @media (min-width: 1200px) { 6153 .olay-footer__inner { 6154 /*padding: 0 8rem;*/ 6155 padding: 0; 6156 } 6157 } 6158 @media (min-width: 1025px) { 6159 .olay-footer__inner--logged-in .olay-footer__nav { 6160 grid-template-columns: repeat(3, 260px); 6161 } 6162 } 6163 @media (max-width: 912px) { 6164 /* ===== TOP FOOTER ===== */ 6165 6166 .olay-footer__inner { 6167 grid-template-columns: 1fr; 6168 } 6169 6170 /* â Two-column layout for About / Help */ 6171 .olay-footer__nav { 6172 grid-template-columns: 1fr 1fr; 6173 gap: 32px 24px; 6174 margin-top: 40px; 6175 } 6176 6177 /* â Support spans full width */ 6178 .olay-footer__nav .olay-footer__col:last-child { 6179 grid-column: 1 / -1; 6180 } 6181 6182 /* ===== COPYRIGHT ===== */ 6183 .olay-footer__fineprint { 6184 text-align: left; 6185 } 6186 6187 .olay-footer__copyright { 6188 margin-top: 16px; 6189 } 6190 } 6191 .olay-footer__bottom-inner { 6192 display: flex; 6193 flex-wrap: wrap; 6194 align-items: center; 6195 gap: 12px 16px; 6196 } 6197 6198 /* social + legal block takes full row */ 6199 .olay-footer__legal-links { 6200 display: flex; 6201 flex-wrap: wrap; 6202 align-items: center; 6203 gap: 12px; 6204 flex: 1 1 auto; 6205 } 6206 6207 /* Put social icon anchors first, then force legal anchors to next line */ 6208 .olay-footer__legal-links a:not(.icon1) { 6209 order: 2; 6210 } 6211 .ot-pc-footer-logo img { 6212 height: auto !important; 6213 } 6214</style> 6215 6216</footer> 6217<!-- END sections: footer-group --></div><!-- snippets/layout--navigation.liquid --><div class="layout--navigation"> 6218 <button 6219 class="layout--close" 6220 data-text-color="white" 6221 aria-label="close" 6222 aria-hidden="true" 6223 ></button> 6224 6225 <button 6226 class="layout--previous" 6227 aria-hidden="true" 6228 data-modal-button="previous" 6229 ><!-- snippets/nav-arrow.liquid --><div class="nav-arrow" data-direction="left"> 6230 <div></div> 6231 <div></div> 6232 <div></div> 6233</div> 6234</button> 6235 6236 <button 6237 class="layout--next" 6238 aria-hidden="true" 6239 data-modal-button="next" 6240 ><!-- snippets/nav-arrow.liquid --><div class="nav-arrow" data-direction="right"> 6241 <div></div> 6242 <div></div> 6243 <div></div> 6244</div> 6245</button> 6246 6247 <div class="layout--bottom"></div> 6248</div><!-- snippets/drawer.liquid -->
6248<drawer-element class="drawer--root"> 6249 <div class="drawer--overlay" aria-hidden="true"></div> 6250 6251 <div class="drawer--focus-trigger" tabindex="0"></div> 6252 <div class="drawer--focus-start" tabindex="0"></div> 6253 6254 <div 6255 class="drawer--side" 6256 data-side="top" 6257 data-focus-id="search_input" 6258 aria-expanded="false" 6259 > 6260 <div 6261 class="drawer--container" 6262 data-section-id="drawer-top-search" 6263 data-view="search" 6264 data-container-width="5" 6265 data-mobile-spacing-above="medium" 6266 data-mobile-spacing-below="medium" 6267 data-spacing-above="large" 6268 data-spacing-below="large" 6269 ><!-- snippets/main-search.liquid --><predictive-search-element 6270 class="search--root" 6271 data-background-color="none" 6272 aria-busy="false" 6273> 6274 <form action="/search" method="get" role="search"> 6275 <div class="search--bar-wrapper"> 6276 <div class="search--bar"> 6277 <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"> 6278 <title id="icon-search-title">Search</title> 6279 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 6280 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 6281 </mask> 6282 <g mask="url(#mask0_7204_6974)"> 6283 <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"/> 6284 </g> 6285 </svg><svg class="icon--root icon--spinner" data-invertible="false"> 6286 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 6287 </svg></div> 6288 6289 <label for="search_input" data-item="hidden-text">Search here...</label> 6290 <input 6291 id="search_input" 6292 class="search--textbox" 6293 type="search" 6294 name="q" 6295 value="" 6296 placeholder="Search here..." 6297 data-item="paragraph" 6298 role="combobox" 6299 aria-owns="predictive_search_results_list" 6300 aria-controls="predictive_search_results_list" 6301 aria-autocomplete="list" 6302 autocorrect="off" 6303 autocomplete="off" 6304 autocapitalize="off" 6305 spellcheck="false" 6306 ><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"> 6307 <title id="icon-x-mark-title">Close</title> 6308 <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" /> 6309 </svg></div> 6310 </div> 6311 6312 <div class="search--cancel" data-item="block-link" tabindex="0" data-drawer-close> 6313 <span>Cancel</span> 6314 </div> 6315 </div> 6316 6317 <div 6318 class="search--results" 6319 id="predictive_search_results_list" 6320 6321 data-transition-container="search" 6322 data-transition-type="fade-in" 6323 data-transition-cascade="horizontal" 6324 data-transition-cascade-interval="200" 6325 6326 ><!-- snippets/predictive-search.liquid --><div class="predictive-search--products"><div class="predictive-search--heading" data-item="block-heading">Popular products</div><div 6327 class="predictive-search--product-grid" 6328 data-container="panel" data-columns="4" 6329 data-mobile-columns="2" 6330 ><!-- snippets/product-card.liquid --><div 6331 class="product-card--root" 6332 data-handle="olay-complete-rich-moisturizing-cream-sensitive" 6333 data-text-layout="left" 6334 data-aspect-ratio="square" 6335 6336 6337> 6338 <a 6339 href="/products/olay-complete-rich-moisturizing-cream-sensitive" 6340 class="product-card--image-wrapper" 6341 tabindex="-1" 6342 ><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
6342ww.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 6343 type="button" 6344 class="slider-dot active" 6345 data-slide="0" 6346 aria-label="Go to slide 1" 6347 aria-current="true" 6348 ></button><button 6349 type="button" 6350 class="slider-dot" 6351 data-slide="1" 6352 aria-label="Go to slide 2" 6353 6354 ></button><button 6355 type="button" 6356 class="slider-dot" 6357 data-slide="2" 6358 aria-label="Go to slide 3" 6359 6360 ></button><button 6361 type="button" 6362 class="slider-dot" 6363 data-slide="3" 6364 aria-label="Go to slide 4" 6365 6366 ></button><button 6367 type="button" 6368 class="slider-dot" 6369 data-slide="4" 6370 aria-label="Go to slide 5" 6371 6372 ></button><button 6373 type="button" 6374 class="slider-dot" 6375 data-slide="5" 6376 aria-label="Go to slide 6" 6377 6378 ></button><button 6379 type="button" 6380 class="slider-dot" 6381 data-slide="6" 6382 aria-label="Go to slide 7" 6383 6384 ></button><button 6385 type="button" 6386 class="slider-dot" 6387 data-slide="7" 6388 aria-label="Go to slide 8" 6389 6390 ></button></div><!-- snippets/product-quick-add.liquid --></a> 6391 6392 <div class="product-card--details"> 6393 <div class="product-details--title-wrapper"> 6394 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 6395 Face Moisturizer - Sensitive Skin 6396 </div></div> 6397 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609210655"></div> 6398 <!-- snippets/product-rating.liquid --> 6399</div> 6400 6401 </div> 6402 <div class="product-card--details-wrapper"><a href="/products/olay-complete-rich-moisturizing-cream-sensitive" class="product-card--title-link"> 6403 <p class="product-card--title" data-item="heading">Olay Complete + Rich Moisturizing Cream Sensitive</p> 6404 </a><p class="product-card--weight"> 6405 6406 $3.14/ oz 6407 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="8.5"> 6408 6409 </p> 6410 </div> 6411 6412 6413<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 6414 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $26.65"> 6415 6416$26.65 6417</span></div></div> 6418 6419<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"> 6420 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 6421<product-buy-buttons-element 6422 class="product-buy-buttons--root" 6423 data-id="search" 6424 data-cart-type="drawer" 6425 data-translations="" 6426 data-container="block" 6427 ><button 6428 class="product-buy-buttons--primary" 6429 type="submit" 6430 aria-busy="false" 6431 data-text="Add to cart" 6432 availability_disabled="false" 6433 title="click here to add Olay Complete + Rich Moisturizing Cream Sensitive to bag" 6434 6435 data-item="button-1" 6436 6437> 6438
6439 <span class="product-buy-buttons--cta-text">Add to cart</span> 6440 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 6441 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 6442 </svg></span> 6443 </button> 6444<input 6445 type="hidden" 6446 class="product-buy-buttons--input" 6447 name="id" 6448 data-id="44071654981675" 6449 data-sku="00075609210655" 6450 data-management="shopify" 6451 data-policy="deny" 6452 data-quantity="593" 6453 value="44071654981675" 6454 > 6455 6456
6456<script type="application/json"> 6457 { 6458 "add_to_cart": "Add to cart", 6459 "out_of_stock": "Out of stock", 6460 "unavailable": "Unavailable" 6461 } 6462 </script>
6462 6463 </product-buy-buttons-element><style data-shopify> 6464.ps-widget[ps-sku]::before { 6465 content: ''; 6466 display: inline-block; 6467 width: 18px; 6468 height: 18px; 6469 margin-left: 8px; 6470 margin-right: 8px; 6471 background-color: currentColor; 6472 -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; 6473 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; 6474 mask-size: contain; 6475 -webkit-mask-size: contain; 6476 vertical-align: text-bottom; 6477 6478 @media only screen and (max-width: 767px) { 6479 width: 16px; 6480 height: 16px; 6481 margin-left: 0; 6482 } 6483 6484} 6485 6486.buy-now-wrap { 6487 flex-basis: 100%; 6488 width: 0; 6489 display: flex; 6490 gap: 16px; 6491} 6492button.product-buy-buttons--buy-now, 6493.ps-widget { 6494 background: white; 6495 color: black; 6496 font-family: var(--olay-font-inter); 6497 border: 1px solid var(--olay-neutral-30); 6498} 6499button.product-buy-buttons--buy-now:before { 6500 border: none; 6501} 6502button.product-buy-buttons--buy-now:focus-visible { 6503 outline: 2px solid var(--olay-color-primary); 6504 outline-offset: 2px; 6505 border-radius: var(--radius-sm); 6506} 6507button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 6508 outline: none; 6509} 6510 .product-buy-buttons--root { 6511 position: relative; 6512 gap: var(--spacing--3); 6513 6514 } 6515 product-buy-buttons-element.product-buy-buttons--root { 6516 display: flex; 6517 flex-direction: row; 6518 flex-wrap: wrap; 6519 align-items: center; 6520 margin-top: var(--spacing--4); 6521 } 6522 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 6523 flex-shrink: 0; 6524 } 6525 button.product-buy-buttons--primary { 6526 flex: 1; 6527 width: auto; 6528 display: flex; 6529 align-items: center; 6530 justify-content: center; 6531 gap: var(--spacing--2); 6532 } 6533 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 6534 width: 50%; 6535 flex-basis: 49%; 6536 } 6537 .product-buy-buttons--cart-icon { 6538 height: 12px; 6539 width: auto; 6540 flex-shrink: 0; 6541 filter: brightness(0) invert(1); 6542 @media screen and (min-width: 768px) { 6543 height: 15px; 6544 } 6545 } 6546 6547 .product-buy-buttons--buy-now, 6548 .product-buy-buttons--primary { 6549 width: 100%; 6550 6551 &[aria-busy='true'] { 6552 .product-buy-buttons--cta-text, 6553 .product-buy-buttons--buy-now-text { 6554 opacity: 0; 6555 } 6556 } 6557 6558 &[aria-busy='false'] { 6559 .product-buy-buttons--spinner { 6560 opacity: 0; 6561 } 6562 } 6563 } 6564 6565 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 6566 color: black !important; 6567 background-color: var(--button--bg-color-4) !important; 6568 border-color: var(--button--border-color-4) !important; 6569 font-family: var(--olay-font-inter) !important; 6570 border: 1px solid #D8D8D8 !important; 6571 font-size: 16px !important; 6572 border-width: 1px !important; 6573 padding: 12px 20px !important; 6574 background: white; 6575 border-radius: var(--button--radius) !important; 6576 display: inline-flex; 6577 align-items: normal; 6578 justify-content: space-between; 6579 } 6580 6581 6582 6583 @media only screen and (max-width: 767px) { 6584 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 6585 padding: 12px 0 !important; 6586 font-size: 12px !important; 6587 } 6588 .buy-now-wrap { 6589 flex-basis: 99%; 6590 gap: 10px; 6591 } 6592 } 6593 6594 .product-buy-buttons--smart { 6595 user-select: none; 6596 width: 100%; 6597 6598 &[data-style='button-1'] { 6599 --button--color: var(--button--color-1); 6600 --button--bg-color: var(--button--bg-color-1); 6601 --button--border-color: var(--button--border-color-1); 6602 } 6603 6604 &[data-style='button-2'] { 6605 --button--color: var(--button--color-2); 6606 --button--bg-color: var(--button--bg-color-2); 6607 --button--border-color: var(--button--border-color-2); 6608 } 6609 6610 &[data-style='button-3'] { 6611 --button--color: var(--button--color-3); 6612 --button--bg-color: var(--button--bg-color-3); 6613 --button--border-color: var(--button--border-color-3); 6614 } 6615 6616 &[data-style='button-4'] { 6617 --button--color: var(--button--color-4); 6618 --button--bg-color: var(--button--bg-color-4); 6619 --button--border-color: var(--button--border-color-4); 6620 } 6621 6622 .shopify-payment-button__button--unbranded { 6623 width: 100%; 6624 6625 &:hover:not([disabled]) { 6626 background-color: var(--button--bg-color); 6627 } 6628 } 6629 6630 .shopify-payment-button__more-options { 6631 margin: var(--spacing--item) 0 0 0; 6632 text-decoration: underline; 6633 color: var(--color--body); 6634 6635 &:is(:hover, :focus-visible) { 6636 background-color: unset; 6637 color: var(--color--body); 6638 } 6639 } 6640 6641 &[aria-hidden='true'] { 6642 pointer-events: none; 6643 opacity: 0.7; 6644 6645 .shopify-payment-button__button--unbranded { 6646 pointer-events: none; 6647 } 6648 } 6649 6650 &:empty { 6651 display: none; 6652 } 6653 } 6654 6655 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 6656 6657 /* Drawer info styles moved to assets/sticky-product-bar.css */ 6658 6659 .afterpay-section { 6660 width: 100%; 6661 margin-top: var(--spacing--2); 6662 } 6663 6664 @media screen and (max-width: 767px) { 6665 .afterpay-section { 6666 margin-top: var(--spacing--1); 6667 } 6668 } 6669 6670 .club-olay-badge-plp { 6671 display: flex; 6672 align-items: center; 6673 justify-content: center; 6674 padding: 8px 12px; 6675 background-color: #FFD700; 6676 border-radius: 4px; 6677 margin-bottom: 12px; 6678 width: 100%; 6679 6680 } 6681 6682 .club-olay-badge-plp--text { 6683 font-family: var(--olay-font-inter, Inter, sans-serif); 6684 font-size: 12px; 6685 font-weight: 600; 6686 color: #161716; 6687 text-align: center; 6688 } 6689 6690 @media (max-width: 767px) { 6691 .club-olay-badge-plp { 6692 padding: 6px 10px; 6693 } 6694 6695 .club-olay-badge-plp--text { 6696 font-size: 10px; 6697 } 6698 } 6699</style><input type="hidden" name="product-id" value="7918631125035" /></form></div> 6700</div> 6701 6702<style data-shopify> 6703.product_form_subtitle.plp-card { 6704 font-size: 10px; 6705} 6706 6707button.product-card--add-to-cart-button.empty { 6708 padding: 0 40px; 6709} 6710.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 6711 @media only screen and (min-width: 767px) { 6712 height: auto !important; 6713 } 6714} 6715.main-collection--grid span.product-buy-buttons--cta-text { 6716 @media only screen and (max-width: 767px) { 6717 padding: 0 40px; 6718 } 6719} 6720.product_form_subtitle { 6721 font-family: Inter; 6722 font-weight: 500; 6723 font-style: Medium; 6724 font-size: 16px; 6725 line-height: 100%; 6726 letter-spacing: 0%; 6727 color: #161716; 6728 text-transform: uppercase; 6729 margin-bottom: 8px; 6730 margin-top: 8px; 6731 6732 @media (max-width: 767px) { 6733 font-size: 10px; 6734 margin-top: 0; 6735 margin-bottom: 0; 6736 } 6737} 6738.product_subtitle{ 6739 font-family: var(--olay-font-inter); 6740 font-weight: 500; 6741 font-size: 10px; 6742 line-height: 1.2; 6743 letter-spacing: 0.01em; 6744 color: #161716; 6745 text-transform: uppercase; 6746 text-align: left; 6747 width: 100%; 6748 @media only screen and (max-width: 767px){ 6749 font-size: 8px; 6750 } 6751} 6752 .product-card--root { 6753 display: flex; 6754 flex-direction: column; 6755 gap: 20px; 6756 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 6757 width: 100%; 6758 text-align: var(--text-align, center); 6759 padding: 8px; 6760 background: #FFFFFF; 6761 border-radius: 8px; 6762 @media only screen and (max-width: 767px){ 6763 padding: 4px; 6764 gap: 8px; 6765 border-radius: 8px; 6766 } 6767 6768 @media (min-width: 768px) { 6769 border-radius: 12px; 6770 max-width: 348px; 6771 } 6772 &[data-text-layout='left'] { 6773 --text-align: left; 6774 } 6775 6776 &[data-text-layout='right'] { 6777 --text-align: right; 6778 6779 @media (min-width: 1024px) { 6780 --text-align: left; 6781 } 6782 } 6783 6784 > a { 6785 display: block; 6786 width: 100%; 6787 } 6788 6789 @media (max-width: 767px) { 6790 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 6791 --image--radius: 0; 6792 } 6793 } 6794 } 6795 6796 /* Labels & Badges */ 6797 6798 .product--labels { 6799 display: flex; 6800 flex-wrap: wrap; 6801 gap: 4px; 6802 position: absolute; 6803 top: 6px; 6804 left: 6px; 6805 right: 8px; 6806 z-index: 2; 6807 justify-content: flex-start;
6808 align-items: flex-start; 6809 6810 @media (max-width: 767px) { 6811 font-size: 9px; 6812 } 6813 } 6814 6815 .product--label { 6816 display: block; 6817 width: max-content; 6818 line-height: 1.21; 6819 font-family: var(--olay-font-inter); 6820 font-weight: 500; 6821 font-size: 10px; 6822 letter-spacing: 0.01em; 6823 text-transform: uppercase; 6824 padding: 4px 8px; 6825 border-radius: 0px; 6826 background-color: #161716; 6827 color: #F4F4F4; 6828 line-height: 1em; 6829 6830 @media (min-width: 768px) { 6831 font-size: 12px; 6832 } 6833 @media (max-width: 767px) { 6834 font-size: 8px; 6835 padding: 2px 4px !important; 6836 } 6837 6838 &:empty, 6839 &:has(span:empty) { 6840 display: none; 6841 } 6842 6843 &:last-child { 6844 height: fit-content; 6845 } 6846 6847 } 6848 6849 /* Image & Slider */ 6850 6851 .product-card--image-wrapper { 6852 width: 100%; 6853 max-width: 100%; 6854 display: flex; 6855 flex-direction: column; 6856 align-items: center; 6857 position: relative; 6858 border-radius: 8px; 6859 overflow: visible; 6860 6861 @media (min-width: 768px) { 6862 border-radius: 8px; 6863 } 6864 } 6865 6866 .product-card--image-slider { 6867 width: 100%; 6868 position: relative; 6869 overflow: hidden; 6870 border-radius: 8px; 6871 background: #F4F4F4; 6872 aspect-ratio: 1 / 1; 6873 @media only screen and (max-width: 767px){ 6874 border-radius: 4px; 6875 } 6876 } 6877 6878 .product-card--image, 6879 .product-card--slider-image { 6880 border-radius: 8px; 6881 opacity: 1; 6882 transition: opacity 0.5s; 6883 width: 100%; 6884 /* height: auto; */ 6885 object-fit: cover; 6886 6887 @media (min-width: 768px) { 6888 border-radius: 8px; 6889 } 6890 6891 @media only screen and (max-width: 767px){ 6892 border-radius: 4px; 6893 } 6894 6895 &[aria-hidden='true'] { 6896 opacity: 0; 6897 } 6898 } 6899 6900 .product-card--image { 6901 @media (hover: hover) { 6902 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 6903 opacity: 0; 6904 } 6905 } 6906 } 6907 6908 .product-card--hover-image { 6909 position: absolute; 6910 top: 0; 6911 left: 0; 6912 opacity: 0; 6913 height: 100%; 6914 width: 100%; 6915 transition: opacity 0.5s; 6916 overflow: hidden; 6917 border-radius: 8px; 6918 6919 @media (min-width: 768px) { 6920 border-radius: 8px; 6921 } 6922 6923 @media only screen and (max-width: 767px){ 6924 border-radius: 4px; 6925 } 6926 6927 @media (hover: hover) { 6928 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 6929 opacity: 1; 6930 } 6931 } 6932 } 6933 6934 .product-card--slider-image { 6935 position: absolute; 6936 top: 0; 6937 left: 0; 6938 width: 100%; 6939 height: 100%; 6940 object-fit: cover; 6941 opacity: 0; 6942 pointer-events: none; 6943 6944 &.active { 6945 opacity: 1; 6946 pointer-events: auto; 6947 } 6948 } 6949 6950 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 6951 6952 .slider-dot { 6953 width: 27px; 6954 height: 2px; 6955 border-radius: 1px; 6956 background-color: #D8D8D8; 6957 cursor: pointer; 6958 transition: background-color 0.3s ease; 6959 border: none; 6960 padding: 0; 6961 6962 &.active { 6963 background-color: #161716; 6964 } 6965 6966 &:hover { 6967 background-color: #707070; 6968 } 6969 } 6970 6971 /* Detail */ 6972 6973 .product-card--details-wrapper { 6974 display: flex; 6975 gap: 8px; 6976 flex-direction: column; 6977 width: 85%; 6978 @media only screen and (max-width: 767px){ 6979 width: 100%; 6980 gap: 4px; 6981 } 6982 } 6983 6984 .product-card--details { 6985 display: flex; 6986 flex-direction: column; 6987 gap: 8px; 6988 width: 100%; 6989 padding: 0 8px 12px; 6990 @media only screen and (max-width: 767px){ 6991 padding: 0 4px 4px; 6992 gap: 6px; 6993 } 6994 6995 .product-card--root[data-text-layout='left'] & { 6996 flex-direction: column; 6997 align-items: flex-start; 6998 } 6999 7000 .product-card--root[data-text-layout='right'] & { 7001 flex-direction: column; 7002 align-items: flex-end; 7003 } 7004 7005 @media (min-width: 768px) { 7006 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 7007 align-items: baseline; 7008 justify-content: space-between; 7009 } 7010 } 7011 7012 @media (max-width: 767px) { 7013 max-width: var(--max-width--x-small); 7014 margin: 0 auto; 7015 7016 [data-mobile-full-width='true'] & { 7017 padding-left: var(--spacing--item); 7018 } 7019 } 7020 } 7021 7022 /* Price */ 7023 7024 .product-card--price-wrapper { 7025 .product-card--root:not([data-text-layout='center']) & { 7026 align-items: center; 7027 } 7028 } 7029 7030 .product--price-container { 7031 display: flex; 7032 flex-direction: row; 7033 font-family: 'Boston', var(--olay-font-inter); 7034 font-weight: 600; 7035 font-size: 16px; 7036 line-height: 1; 7037 letter-spacing: 0.01em; 7038 color: #161716; 7039 cursor: default; 7040 @media only screen and (max-width: 767px){ 7041 font-family: var(--olay-font-inter); 7042 font-size: 16px; 7043 gap: 4px; 7044 } 7045 7046 @media (min-width: 768px) { 7047 font-size: 18px; 7048 } 7049 } 7050 7051 .product--price-wrapper { 7052 display: flex; 7053 gap: var(--spacing--0); 7054 7055 .product-card--root[data-text-layout='center'] & { 7056 justify-content: center; 7057 } 7058 7059 .product-card--root[data-text-layout='right'] & { 7060 text-align: right; 7061 justify-content: flex-end; 7062 flex-wrap: wrap; 7063 } 7064 7065 .product-card--root[data-text-layout='left'] & { 7066 flex-wrap: wrap; 7067 7068 @media (min-width: 1024px) { 7069 text-align: right; 7070 justify-content: flex-end; 7071 } 7072 } 7073 7074 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 7075 @media (min-width: 768px) { 7076 text-align: right; 7077 justify-content: end; 7078 } 7079 } 7080 7081 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 7082 &.club-olay-active { 7083 .product--price { 7084 order: 1; 7085 } 7086 7087 .product--compare-price { 7088 order: 2; 7089 } 7090 7091 .club-olay-savings { 7092 order: 3; 7093 width: 100%; 7094 } 7095 } 7096 } 7097 7098 .product--compare-price { 7099 text-decoration: line-through; 7100 font-family: var(--olay-font-inter); 7101 font-weight: 400; 7102 font-size: 16px; 7103 color: #6B6B6B; 7104 line-height: 1; 7105 } 7106 7107 .product--unit-price-container { 7108 padding: 0; 7109 font-family: var(--olay-font-inter); 7110 font-weight: 400; 7111 font-size: 10px; 7112 color: #6B6B6B; 7113 line-height: 1; 7114 align-self: center !important; 7115 margin-left: 8px; 7116 7117 .product-card--root:not([data-text-layout='center']) & { 7118 @media (min-width: 1024px) { 7119 align-self: flex-end; 7120 } 7121 } 7122 7123 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 7124 @media (min-width: 768px) { 7125 align-self: flex-end; 7126 } 7127 } 7128 } 7129 7130 .product--from[data-item] { 7131 text-transform: capitalize; 7132 padding: 0; 7133 flex-basis: initial; 7134 } 7135 7136 /* Info */ 7137 7138 .product-card--vendor { 7139 word-break: break-word; 7140 font-family: var(--olay-font-inter); 7141 font-weight: 500; 7142 font-size: 10px; 7143 line-height: 1; 7144 letter-spacing: 0.01em; 7145 color: #161716; 7146 text-transform: uppercase; 7147 7148 [data-text-color='white'] & { 7149 color: white; 7150 } 7151 7152 & a { 7153 color: var(--color--body--light); 7154 7155 @media (max-width: 767px) { 7156 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 7157 } 7158 } 7159 } 7160 7161 .product-card--title { 7162 .product-card--root & { 7163 word-break: break-word; 7164 font-family: 'Boston', var(--olay-font-inter); 7165 font-weight: 700; 7166 font-size: 14px; 7167 line-height: 1.2; 7168 color: #161716; 7169 @media only screen and (max-width: 767px){ 7170 font-size: 12px; 7171 } 7172 @media (min-width: 768px) { 7173 font-size: 16px; 7174 line-height: 1.2; 7175 } 7176 } 7177 7178 & a { 7179 @media (max-width: 767px) { 7180 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 7181 } 7182 } 7183 } 7184 7185 .product-card--weight { 7186 font-family: var(--olay-font-inter); 7187 font-weight: 500; 7188 font-size: 10px; 7189 line-height: 1.21; 7190 color: #707070; 7191 padding-block: 2%; 7192 7193 @media only screen and (max-width: 767px){ 7194 font-size: 8px; 7195 line-height: 1.21; 7196 } 7197 } 7198
7199 .product-card--details-wrapper .product-rating--root { 7200 &:empty { 7201 display: none; 7202 } 7203 7204 .product-card--root[data-text-layout='center'] & { 7205 justify-content: center; 7206 } 7207 7208 .product-card--root[data-text-layout='left'] & { 7209 justify-content: flex-start; 7210 } 7211 7212 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 7213 @media (min-width: 768px) { 7214 justify-content: flex-start; 7215 } 7216 } 7217 7218 .product-card--root[data-text-layout='right'] & { 7219 justify-content: flex-end; 7220 7221 @media (min-width: 1024px) { 7222 justify-content: flex-start; 7223 } 7224 } 7225 } 7226 7227 /* Swatches */ 7228 7229 .product-card--swatches--column-view { 7230 .product-card--root[data-text-layout='center'] & { 7231 width: fit-content; 7232 margin: 0 auto; 7233 } 7234 7235 .product-card--root:not([data-text-layout='center']) & { 7236 @media (min-width: 1024px) { 7237 display: none; 7238 } 7239 } 7240 7241 .product-card--root[data-text-layout='right'] & .swatches--container { 7242 justify-content: flex-end; 7243 } 7244 } 7245 7246 .product-card--swatches--horizontal-view { 7247 .product-card--root[data-text-layout='center'] & { 7248 display: none; 7249 } 7250 7251 .product-card--root:not([data-text-layout='center']) & { 7252 display: none; 7253 7254 @media (min-width: 1024px) { 7255 display: block; 7256 } 7257 } 7258 } 7259 7260 /* disables AR when products viewed from quick-add drawer */ 7261 .drawer--side[data-side='right'] .product-model--button[data-item] { 7262 display: none; 7263 } 7264 7265 /* Buy Buttons Section - Figma Specs */ 7266 .product-card--form { 7267 width: 100%; 7268 } 7269 7270 .product-card--add-to-cart-button, 7271 .product-card--root .product-buy-buttons--primary { 7272 width: 100%; 7273 box-sizing: border-box; 7274 height: auto; 7275 padding: 14px 16px; 7276 display: inline-flex; 7277 align-items: center; 7278 justify-content: center; 7279 background: #FFFFFF; 7280 border: 1px solid #D8D8D8; 7281 font-family: 'Boston', var(--olay-font-inter); 7282 font-weight: 500; 7283 font-size: 16px; 7284 line-height: 1; 7285 color: #161716; 7286 text-transform: uppercase; 7287 cursor: pointer; 7288 transition: all 0.3s ease; 7289 text-align: center; 7290 border-radius: 8px; 7291 @media (min-width: 1020px) and (max-width: 1080px) { 7292 font-size: 14px; 7293 } 7294 @media only screen and (max-width: 767px){ 7295 font-family: var(--olay-font-inter); 7296 font-size: 12px; 7297 border-radius: 4px; 7298 letter-spacing: 0.01em; 7299 padding: 12px 8px; 7300 } 7301 7302 &[disabled] { 7303 opacity: 0.5; 7304 cursor: not-allowed; 7305 background: #F4F4F4; 7306 @media only screen and (max-width: 767px){ 7307 font-size: 12px; 7308 width: 100%; 7309 } 7310 } 7311 7312 &[aria-busy='true'] { 7313 opacity: 0.7; 7314 7315 .product-buy-buttons--cta-text { 7316 opacity: 0; 7317 } 7318 7319 .product-buy-buttons--spinner { 7320 opacity: 1; 7321 } 7322 7323 .product-buy-buttons--spinner { 7324 opacity: 1; 7325 } 7326 7327 } 7328 7329 7330 &:before { 7331 border: none !important; 7332 } 7333 7334 .product-buy-buttons--spinner { 7335 opacity: 0; 7336 @media only screen and (max-width: 767px){ 7337 position: absolute; 7338 right: 65px; 7339 display: inline-block; 7340 top: -5px; 7341 } 7342 } 7343 } 7344 7345 @media only screen and (max-width: 767px){ 7346 .product-card--early-access-login { 7347 margin-top: 33% !important; 7348 } 7349 } 7350 7351 .product-card--root .product-buy-buttons--primary { 7352 @media only screen and (min-width: 768px){ 7353 padding: 2px 16px; 7354 } 7355 } 7356 7357 .product-card--root .product-buy-buttons--smart, 7358 .product-card--root .product-buy-buttons--buy-now, 7359 .product-card--root .product-buy-buttons--drawer { 7360 display: none; 7361 } 7362 7363 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 7364 .product-card--early-access-login { 7365 display: flex; 7366 flex-direction: row; 7367 align-items: center; 7368 margin-top: var(--spacing--4); 7369 width: 100%; 7370 } 7371 .product-card--early-access-login .product-card--add-to-cart-button { 7372 flex: 1; 7373 } 7374 7375 .club-olay-badge { 7376 display: flex; 7377 align-items: center; 7378 justify-content: center; 7379 padding: 8px 12px; 7380 background-color: #FFD700; 7381 border-radius: 4px; 7382 margin-bottom: 12px; 7383 } 7384 7385 .club-olay-badge--text { 7386 font-family: var(--olay-font-inter, Inter, sans-serif); 7387 font-size: 12px; 7388 font-weight: 600; 7389 color: #161716; 7390 text-align: center; 7391 } 7392 7393 @media (max-width: 767px) { 7394 .club-olay-badge { 7395 padding: 6px 10px; 7396 } 7397 7398 .club-olay-badge--text { 7399 font-size: 7px; 7400 letter-spacing: 0; 7401 } 7402 } 7403 7404@media only screen and (min-width:635px) and (max-width: 820px) { 7405 .product-buy-buttons--cta-text { 7406 font-size: 11px !important; 7407 } 7408} 7409</style><!-- snippets/product-card.liquid --><div 7410 class="product-card--root" 7411 data-handle="olay-complete-hydrating-lotion-sensitive" 7412 data-text-layout="left" 7413 data-aspect-ratio="square" 7414 7415 7416> 7417 <a 7418 href="/products/olay-complete-hydrating-lotion-sensitive" 7419 class="product-card--image-wrapper" 7420 tabindex="-1" 7421 ><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
7421les/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 7422 type="button" 7423 class="slider-dot active" 7424 data-slide="0" 7425 aria-label="Go to slide 1" 7426 aria-current="true" 7427 ></button><button 7428 type="button" 7429 class="slider-dot" 7430 data-slide="1" 7431 aria-label="Go to slide 2" 7432 7433 ></button><button 7434 type="button" 7435 class="slider-dot" 7436 data-slide="2" 7437 aria-label="Go to slide 3" 7438 7439 ></button><button 7440 type="button" 7441 class="slider-dot" 7442 data-slide="3" 7443 aria-label="Go to slide 4" 7444 7445 ></button><button 7446 type="button" 7447 class="slider-dot" 7448 data-slide="4" 7449 aria-label="Go to slide 5" 7450 7451 ></button><button 7452 type="button" 7453 class="slider-dot" 7454 data-slide="5" 7455 aria-label="Go to slide 6" 7456 7457 ></button><button 7458 type="button" 7459 class="slider-dot" 7460 data-slide="6" 7461 aria-label="Go to slide 7" 7462 7463 ></button><button 7464 type="button" 7465 class="slider-dot" 7466 data-slide="7" 7467 aria-label="Go to slide 8" 7468 7469 ></button></div><!-- snippets/product-quick-add.liquid --></a> 7470 7471 <div class="product-card--details"> 7472 <div class="product-details--title-wrapper"> 7473 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 7474 Face Moisturizer - Sensitive Skin 7475 </div></div> 7476 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609210662"></div> 7477 <!-- snippets/product-rating.liquid --> 7478</div> 7479 7480 </div> 7481 <div class="product-card--details-wrapper"><a href="/products/olay-complete-hydrating-lotion-sensitive" class="product-card--title-link"> 7482 <p class="product-card--title" data-item="heading">Olay Complete + Hydrating Lotion Sensitive</p> 7483 </a><p class="product-card--weight"> 7484 7485 $2.64/ oz 7486 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="10.1"> 7487 7488 </p> 7489 </div> 7490 7491 7492<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 7493 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $26.65"> 7494 7495$26.65 7496</span></div></div> 7497 7498<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"> 7499 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 7500<product-buy-buttons-element 7501 class="product-buy-buttons--root" 7502 data-id="search" 7503 data-cart-type="drawer" 7504 data-translations="" 7505 data-container="block" 7506 ><button 7507 class="product-buy-buttons--primary" 7508 type="submit" 7509 aria-busy="false" 7510 data-text="Add to cart" 7511 availability_disabled="false" 7512 title="click here to add Olay Complete + Hydrating Lotion Sensitive to bag" 7513 7514 data-item="button-1" 7515 7516> 7517
7518 <span class="product-buy-buttons--cta-text">Add to cart</span> 7519 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 7520 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 7521 </svg></span> 7522 </button> 7523<input 7524 type="hidden" 7525 class="product-buy-buttons--input" 7526 name="id" 7527 data-id="44071654785067" 7528 data-sku="00075609210662" 7529 data-management="shopify" 7530 data-policy="deny" 7531 data-quantity="10" 7532 value="44071654785067" 7533 > 7534 7535
7535<script type="application/json"> 7536 { 7537 "add_to_cart": "Add to cart", 7538 "out_of_stock": "Out of stock", 7539 "unavailable": "Unavailable" 7540 } 7541 </script>
7541 7542 </product-buy-buttons-element><style data-shopify> 7543.ps-widget[ps-sku]::before { 7544 content: ''; 7545 display: inline-block; 7546 width: 18px; 7547 height: 18px; 7548 margin-left: 8px; 7549 margin-right: 8px; 7550 background-color: currentColor; 7551 -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; 7552 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; 7553 mask-size: contain; 7554 -webkit-mask-size: contain; 7555 vertical-align: text-bottom; 7556 7557 @media only screen and (max-width: 767px) { 7558 width: 16px; 7559 height: 16px; 7560 margin-left: 0; 7561 } 7562 7563} 7564 7565.buy-now-wrap { 7566 flex-basis: 100%; 7567 width: 0; 7568 display: flex; 7569 gap: 16px; 7570} 7571button.product-buy-buttons--buy-now, 7572.ps-widget { 7573 background: white; 7574 color: black; 7575 font-family: var(--olay-font-inter); 7576 border: 1px solid var(--olay-neutral-30); 7577} 7578button.product-buy-buttons--buy-now:before { 7579 border: none; 7580} 7581button.product-buy-buttons--buy-now:focus-visible { 7582 outline: 2px solid var(--olay-color-primary); 7583 outline-offset: 2px; 7584 border-radius: var(--radius-sm); 7585} 7586button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 7587 outline: none; 7588} 7589 .product-buy-buttons--root { 7590 position: relative; 7591 gap: var(--spacing--3); 7592 7593 } 7594 product-buy-buttons-element.product-buy-buttons--root { 7595 display: flex; 7596 flex-direction: row; 7597 flex-wrap: wrap; 7598 align-items: center; 7599 margin-top: var(--spacing--4); 7600 } 7601 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 7602 flex-shrink: 0; 7603 } 7604 button.product-buy-buttons--primary { 7605 flex: 1; 7606 width: auto; 7607 display: flex; 7608 align-items: center; 7609 justify-content: center; 7610 gap: var(--spacing--2); 7611 } 7612 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 7613 width: 50%; 7614 flex-basis: 49%; 7615 } 7616 .product-buy-buttons--cart-icon { 7617 height: 12px; 7618 width: auto; 7619 flex-shrink: 0; 7620 filter: brightness(0) invert(1); 7621 @media screen and (min-width: 768px) { 7622 height: 15px; 7623 } 7624 } 7625 7626 .product-buy-buttons--buy-now, 7627 .product-buy-buttons--primary { 7628 width: 100%; 7629 7630 &[aria-busy='true'] { 7631 .product-buy-buttons--cta-text, 7632 .product-buy-buttons--buy-now-text { 7633 opacity: 0; 7634 } 7635 } 7636 7637 &[aria-busy='false'] { 7638 .product-buy-buttons--spinner { 7639 opacity: 0; 7640 } 7641 } 7642 } 7643 7644 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 7645 color: black !important; 7646 background-color: var(--button--bg-color-4) !important; 7647 border-color: var(--button--border-color-4) !important; 7648 font-family: var(--olay-font-inter) !important; 7649 border: 1px solid #D8D8D8 !important; 7650 font-size: 16px !important; 7651 border-width: 1px !important; 7652 padding: 12px 20px !important; 7653 background: white; 7654 border-radius: var(--button--radius) !important; 7655 display: inline-flex; 7656 align-items: normal; 7657 justify-content: space-between; 7658 } 7659 7660 7661 7662 @media only screen and (max-width: 767px) { 7663 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 7664 padding: 12px 0 !important; 7665 font-size: 12px !important; 7666 } 7667 .buy-now-wrap { 7668 flex-basis: 99%; 7669 gap: 10px; 7670 } 7671 } 7672 7673 .product-buy-buttons--smart { 7674 user-select: none; 7675 width: 100%; 7676 7677 &[data-style='button-1'] { 7678 --button--color: var(--button--color-1); 7679 --button--bg-color: var(--button--bg-color-1); 7680 --button--border-color: var(--button--border-color-1); 7681 } 7682 7683 &[data-style='button-2'] { 7684 --button--color: var(--button--color-2); 7685 --button--bg-color: var(--button--bg-color-2); 7686 --button--border-color: var(--button--border-color-2); 7687 } 7688 7689 &[data-style='button-3'] { 7690 --button--color: var(--button--color-3); 7691 --button--bg-color: var(--button--bg-color-3); 7692 --button--border-color: var(--button--border-color-3); 7693 } 7694 7695 &[data-style='button-4'] { 7696 --button--color: var(--button--color-4); 7697 --button--bg-color: var(--button--bg-color-4); 7698 --button--border-color: var(--button--border-color-4); 7699 } 7700 7701 .shopify-payment-button__button--unbranded { 7702 width: 100%; 7703 7704 &:hover:not([disabled]) { 7705 background-color: var(--button--bg-color); 7706 } 7707 } 7708 7709 .shopify-payment-button__more-options { 7710 margin: var(--spacing--item) 0 0 0; 7711 text-decoration: underline; 7712 color: var(--color--body); 7713 7714 &:is(:hover, :focus-visible) { 7715 background-color: unset; 7716 color: var(--color--body); 7717 } 7718 } 7719 7720 &[aria-hidden='true'] { 7721 pointer-events: none; 7722 opacity: 0.7; 7723 7724 .shopify-payment-button__button--unbranded { 7725 pointer-events: none; 7726 } 7727 } 7728 7729 &:empty { 7730 display: none; 7731 } 7732 } 7733 7734 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 7735 7736 /* Drawer info styles moved to assets/sticky-product-bar.css */ 7737 7738 .afterpay-section { 7739 width: 100%; 7740 margin-top: var(--spacing--2); 7741 } 7742 7743 @media screen and (max-width: 767px) { 7744 .afterpay-section { 7745 margin-top: var(--spacing--1); 7746 } 7747 } 7748 7749 .club-olay-badge-plp { 7750 display: flex; 7751 align-items: center; 7752 justify-content: center; 7753 padding: 8px 12px; 7754 background-color: #FFD700; 7755 border-radius: 4px; 7756 margin-bottom: 12px; 7757 width: 100%; 7758 7759 } 7760 7761 .club-olay-badge-plp--text { 7762 font-family: var(--olay-font-inter, Inter, sans-serif); 7763 font-size: 12px; 7764 font-weight: 600; 7765 color: #161716; 7766 text-align: center; 7767 } 7768 7769 @media (max-width: 767px) { 7770 .club-olay-badge-plp { 7771 padding: 6px 10px; 7772 } 7773 7774 .club-olay-badge-plp--text { 7775 font-size: 10px; 7776 } 7777 } 7778</style><input type="hidden" name="product-id" value="7918630862891" /></form></div> 7779</div> 7780 7781<style data-shopify> 7782.product_form_subtitle.plp-card { 7783 font-size: 10px; 7784} 7785 7786button.product-card--add-to-cart-button.empty { 7787 padding: 0 40px; 7788} 7789.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 7790 @media only screen and (min-width: 767px) { 7791 height: auto !important; 7792 } 7793} 7794.main-collection--grid span.product-buy-buttons--cta-text { 7795 @media only screen and (max-width: 767px) { 7796 padding: 0 40px; 7797 } 7798} 7799.product_form_subtitle { 7800 font-family: Inter; 7801 font-weight: 500; 7802 font-style: Medium; 7803 font-size: 16px; 7804 line-height: 100%; 7805 letter-spacing: 0%; 7806 color: #161716; 7807 text-transform: uppercase; 7808 margin-bottom: 8px; 7809 margin-top: 8px; 7810 7811 @media (max-width: 767px) { 7812 font-size: 10px; 7813 margin-top: 0; 7814 margin-bottom: 0; 7815 } 7816} 7817.product_subtitle{ 7818 font-family: var(--olay-font-inter); 7819 font-weight: 500; 7820 font-size: 10px; 7821 line-height: 1.2; 7822 letter-spacing: 0.01em; 7823 color: #161716; 7824 text-transform: uppercase; 7825 text-align: left; 7826 width: 100%; 7827 @media only screen and (max-width: 767px){ 7828 font-size: 8px; 7829 } 7830} 7831 .product-card--root { 7832 display: flex; 7833 flex-direction: column; 7834 gap: 20px; 7835 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 7836 width: 100%; 7837 text-align: var(--text-align, center); 7838 padding: 8px; 7839 background: #FFFFFF; 7840 border-radius: 8px; 7841 @media only screen and (max-width: 767px){ 7842 padding: 4px; 7843 gap: 8px; 7844 border-radius: 8px; 7845 } 7846 7847 @media (min-width: 768px) { 7848 border-radius: 12px; 7849 max-width: 348px; 7850 } 7851 &[data-text-layout='left'] { 7852 --text-align: left; 7853 } 7854 7855 &[data-text-layout='right'] { 7856 --text-align: right; 7857 7858 @media (min-width: 1024px) { 7859 --text-align: left; 7860 } 7861 } 7862 7863 > a { 7864 display: block; 7865 width: 100%; 7866 } 7867 7868 @media (max-width: 767px) { 7869 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 7870 --image--radius: 0; 7871 } 7872 } 7873 } 7874 7875 /* Labels & Badges */ 7876 7877 .product--labels { 7878 display: flex; 7879 flex-wrap: wrap; 7880 gap: 4px; 7881 position: absolute; 7882 top: 6px; 7883 left: 6px; 7884 right: 8px; 7885 z-index: 2; 7886 justify-content: flex-start;
7887 align-items: flex-start; 7888 7889 @media (max-width: 767px) { 7890 font-size: 9px; 7891 } 7892 } 7893 7894 .product--label { 7895 display: block; 7896 width: max-content; 7897 line-height: 1.21; 7898 font-family: var(--olay-font-inter); 7899 font-weight: 500; 7900 font-size: 10px; 7901 letter-spacing: 0.01em; 7902 text-transform: uppercase; 7903 padding: 4px 8px; 7904 border-radius: 0px; 7905 background-color: #161716; 7906 color: #F4F4F4; 7907 line-height: 1em; 7908 7909 @media (min-width: 768px) { 7910 font-size: 12px; 7911 } 7912 @media (max-width: 767px) { 7913 font-size: 8px; 7914 padding: 2px 4px !important; 7915 } 7916 7917 &:empty, 7918 &:has(span:empty) { 7919 display: none; 7920 } 7921 7922 &:last-child { 7923 height: fit-content; 7924 } 7925 7926 } 7927 7928 /* Image & Slider */ 7929 7930 .product-card--image-wrapper { 7931 width: 100%; 7932 max-width: 100%; 7933 display: flex; 7934 flex-direction: column; 7935 align-items: center; 7936 position: relative; 7937 border-radius: 8px; 7938 overflow: visible; 7939 7940 @media (min-width: 768px) { 7941 border-radius: 8px; 7942 } 7943 } 7944 7945 .product-card--image-slider { 7946 width: 100%; 7947 position: relative; 7948 overflow: hidden; 7949 border-radius: 8px; 7950 background: #F4F4F4; 7951 aspect-ratio: 1 / 1; 7952 @media only screen and (max-width: 767px){ 7953 border-radius: 4px; 7954 } 7955 } 7956 7957 .product-card--image, 7958 .product-card--slider-image { 7959 border-radius: 8px; 7960 opacity: 1; 7961 transition: opacity 0.5s; 7962 width: 100%; 7963 /* height: auto; */ 7964 object-fit: cover; 7965 7966 @media (min-width: 768px) { 7967 border-radius: 8px; 7968 } 7969 7970 @media only screen and (max-width: 767px){ 7971 border-radius: 4px; 7972 } 7973 7974 &[aria-hidden='true'] { 7975 opacity: 0; 7976 } 7977 } 7978 7979 .product-card--image { 7980 @media (hover: hover) { 7981 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 7982 opacity: 0; 7983 } 7984 } 7985 } 7986 7987 .product-card--hover-image { 7988 position: absolute; 7989 top: 0; 7990 left: 0; 7991 opacity: 0; 7992 height: 100%; 7993 width: 100%; 7994 transition: opacity 0.5s; 7995 overflow: hidden; 7996 border-radius: 8px; 7997 7998 @media (min-width: 768px) { 7999 border-radius: 8px; 8000 } 8001 8002 @media only screen and (max-width: 767px){ 8003 border-radius: 4px; 8004 } 8005 8006 @media (hover: hover) { 8007 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 8008 opacity: 1; 8009 } 8010 } 8011 } 8012 8013 .product-card--slider-image { 8014 position: absolute; 8015 top: 0; 8016 left: 0; 8017 width: 100%; 8018 height: 100%; 8019 object-fit: cover; 8020 opacity: 0; 8021 pointer-events: none; 8022 8023 &.active { 8024 opacity: 1; 8025 pointer-events: auto; 8026 } 8027 } 8028 8029 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 8030 8031 .slider-dot { 8032 width: 27px; 8033 height: 2px; 8034 border-radius: 1px; 8035 background-color: #D8D8D8; 8036 cursor: pointer; 8037 transition: background-color 0.3s ease; 8038 border: none; 8039 padding: 0; 8040 8041 &.active { 8042 background-color: #161716; 8043 } 8044 8045 &:hover { 8046 background-color: #707070; 8047 } 8048 } 8049 8050 /* Detail */ 8051 8052 .product-card--details-wrapper { 8053 display: flex; 8054 gap: 8px; 8055 flex-direction: column; 8056 width: 85%; 8057 @media only screen and (max-width: 767px){ 8058 width: 100%; 8059 gap: 4px; 8060 } 8061 } 8062 8063 .product-card--details { 8064 display: flex; 8065 flex-direction: column; 8066 gap: 8px; 8067 width: 100%; 8068 padding: 0 8px 12px; 8069 @media only screen and (max-width: 767px){ 8070 padding: 0 4px 4px; 8071 gap: 6px; 8072 } 8073 8074 .product-card--root[data-text-layout='left'] & { 8075 flex-direction: column; 8076 align-items: flex-start; 8077 } 8078 8079 .product-card--root[data-text-layout='right'] & { 8080 flex-direction: column; 8081 align-items: flex-end; 8082 } 8083 8084 @media (min-width: 768px) { 8085 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 8086 align-items: baseline; 8087 justify-content: space-between; 8088 } 8089 } 8090 8091 @media (max-width: 767px) { 8092 max-width: var(--max-width--x-small); 8093 margin: 0 auto; 8094 8095 [data-mobile-full-width='true'] & { 8096 padding-left: var(--spacing--item); 8097 } 8098 } 8099 } 8100 8101 /* Price */ 8102 8103 .product-card--price-wrapper { 8104 .product-card--root:not([data-text-layout='center']) & { 8105 align-items: center; 8106 } 8107 } 8108 8109 .product--price-container { 8110 display: flex; 8111 flex-direction: row; 8112 font-family: 'Boston', var(--olay-font-inter); 8113 font-weight: 600; 8114 font-size: 16px; 8115 line-height: 1; 8116 letter-spacing: 0.01em; 8117 color: #161716; 8118 cursor: default; 8119 @media only screen and (max-width: 767px){ 8120 font-family: var(--olay-font-inter); 8121 font-size: 16px; 8122 gap: 4px; 8123 } 8124 8125 @media (min-width: 768px) { 8126 font-size: 18px; 8127 } 8128 } 8129 8130 .product--price-wrapper { 8131 display: flex; 8132 gap: var(--spacing--0); 8133 8134 .product-card--root[data-text-layout='center'] & { 8135 justify-content: center; 8136 } 8137 8138 .product-card--root[data-text-layout='right'] & { 8139 text-align: right; 8140 justify-content: flex-end; 8141 flex-wrap: wrap; 8142 } 8143 8144 .product-card--root[data-text-layout='left'] & { 8145 flex-wrap: wrap; 8146 8147 @media (min-width: 1024px) { 8148 text-align: right; 8149 justify-content: flex-end; 8150 } 8151 } 8152 8153 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 8154 @media (min-width: 768px) { 8155 text-align: right; 8156 justify-content: end; 8157 } 8158 } 8159 8160 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 8161 &.club-olay-active { 8162 .product--price { 8163 order: 1; 8164 } 8165 8166 .product--compare-price { 8167 order: 2; 8168 } 8169 8170 .club-olay-savings { 8171 order: 3; 8172 width: 100%; 8173 } 8174 } 8175 } 8176 8177 .product--compare-price { 8178 text-decoration: line-through; 8179 font-family: var(--olay-font-inter); 8180 font-weight: 400; 8181 font-size: 16px; 8182 color: #6B6B6B; 8183 line-height: 1; 8184 } 8185 8186 .product--unit-price-container { 8187 padding: 0; 8188 font-family: var(--olay-font-inter); 8189 font-weight: 400; 8190 font-size: 10px; 8191 color: #6B6B6B; 8192 line-height: 1; 8193 align-self: center !important; 8194 margin-left: 8px; 8195 8196 .product-card--root:not([data-text-layout='center']) & { 8197 @media (min-width: 1024px) { 8198 align-self: flex-end; 8199 } 8200 } 8201 8202 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 8203 @media (min-width: 768px) { 8204 align-self: flex-end; 8205 } 8206 } 8207 } 8208 8209 .product--from[data-item] { 8210 text-transform: capitalize; 8211 padding: 0; 8212 flex-basis: initial; 8213 } 8214 8215 /* Info */ 8216 8217 .product-card--vendor { 8218 word-break: break-word; 8219 font-family: var(--olay-font-inter); 8220 font-weight: 500; 8221 font-size: 10px; 8222 line-height: 1; 8223 letter-spacing: 0.01em; 8224 color: #161716; 8225 text-transform: uppercase; 8226 8227 [data-text-color='white'] & { 8228 color: white; 8229 } 8230 8231 & a { 8232 color: var(--color--body--light); 8233 8234 @media (max-width: 767px) { 8235 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 8236 } 8237 } 8238 } 8239 8240 .product-card--title { 8241 .product-card--root & { 8242 word-break: break-word; 8243 font-family: 'Boston', var(--olay-font-inter); 8244 font-weight: 700; 8245 font-size: 14px; 8246 line-height: 1.2; 8247 color: #161716; 8248 @media only screen and (max-width: 767px){ 8249 font-size: 12px; 8250 } 8251 @media (min-width: 768px) { 8252 font-size: 16px; 8253 line-height: 1.2; 8254 } 8255 } 8256 8257 & a { 8258 @media (max-width: 767px) { 8259 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 8260 } 8261 } 8262 } 8263 8264 .product-card--weight { 8265 font-family: var(--olay-font-inter); 8266 font-weight: 500; 8267 font-size: 10px; 8268 line-height: 1.21; 8269 color: #707070; 8270 padding-block: 2%; 8271 8272 @media only screen and (max-width: 767px){ 8273 font-size: 8px; 8274 line-height: 1.21; 8275 } 8276 } 8277
8278 .product-card--details-wrapper .product-rating--root { 8279 &:empty { 8280 display: none; 8281 } 8282 8283 .product-card--root[data-text-layout='center'] & { 8284 justify-content: center; 8285 } 8286 8287 .product-card--root[data-text-layout='left'] & { 8288 justify-content: flex-start; 8289 } 8290 8291 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 8292 @media (min-width: 768px) { 8293 justify-content: flex-start; 8294 } 8295 } 8296 8297 .product-card--root[data-text-layout='right'] & { 8298 justify-content: flex-end; 8299 8300 @media (min-width: 1024px) { 8301 justify-content: flex-start; 8302 } 8303 } 8304 } 8305 8306 /* Swatches */ 8307 8308 .product-card--swatches--column-view { 8309 .product-card--root[data-text-layout='center'] & { 8310 width: fit-content; 8311 margin: 0 auto; 8312 } 8313 8314 .product-card--root:not([data-text-layout='center']) & { 8315 @media (min-width: 1024px) { 8316 display: none; 8317 } 8318 } 8319 8320 .product-card--root[data-text-layout='right'] & .swatches--container { 8321 justify-content: flex-end; 8322 } 8323 } 8324 8325 .product-card--swatches--horizontal-view { 8326 .product-card--root[data-text-layout='center'] & { 8327 display: none; 8328 } 8329 8330 .product-card--root:not([data-text-layout='center']) & { 8331 display: none; 8332 8333 @media (min-width: 1024px) { 8334 display: block; 8335 } 8336 } 8337 } 8338 8339 /* disables AR when products viewed from quick-add drawer */ 8340 .drawer--side[data-side='right'] .product-model--button[data-item] { 8341 display: none; 8342 } 8343 8344 /* Buy Buttons Section - Figma Specs */ 8345 .product-card--form { 8346 width: 100%; 8347 } 8348 8349 .product-card--add-to-cart-button, 8350 .product-card--root .product-buy-buttons--primary { 8351 width: 100%; 8352 box-sizing: border-box; 8353 height: auto; 8354 padding: 14px 16px; 8355 display: inline-flex; 8356 align-items: center; 8357 justify-content: center; 8358 background: #FFFFFF; 8359 border: 1px solid #D8D8D8; 8360 font-family: 'Boston', var(--olay-font-inter); 8361 font-weight: 500; 8362 font-size: 16px; 8363 line-height: 1; 8364 color: #161716; 8365 text-transform: uppercase; 8366 cursor: pointer; 8367 transition: all 0.3s ease; 8368 text-align: center; 8369 border-radius: 8px; 8370 @media (min-width: 1020px) and (max-width: 1080px) { 8371 font-size: 14px; 8372 } 8373 @media only screen and (max-width: 767px){ 8374 font-family: var(--olay-font-inter); 8375 font-size: 12px; 8376 border-radius: 4px; 8377 letter-spacing: 0.01em; 8378 padding: 12px 8px; 8379 } 8380 8381 &[disabled] { 8382 opacity: 0.5; 8383 cursor: not-allowed; 8384 background: #F4F4F4; 8385 @media only screen and (max-width: 767px){ 8386 font-size: 12px; 8387 width: 100%; 8388 } 8389 } 8390 8391 &[aria-busy='true'] { 8392 opacity: 0.7; 8393 8394 .product-buy-buttons--cta-text { 8395 opacity: 0; 8396 } 8397 8398 .product-buy-buttons--spinner { 8399 opacity: 1; 8400 } 8401 8402 .product-buy-buttons--spinner { 8403 opacity: 1; 8404 } 8405 8406 } 8407 8408 8409 &:before { 8410 border: none !important; 8411 } 8412 8413 .product-buy-buttons--spinner { 8414 opacity: 0; 8415 @media only screen and (max-width: 767px){ 8416 position: absolute; 8417 right: 65px; 8418 display: inline-block; 8419 top: -5px; 8420 } 8421 } 8422 } 8423 8424 @media only screen and (max-width: 767px){ 8425 .product-card--early-access-login { 8426 margin-top: 33% !important; 8427 } 8428 } 8429 8430 .product-card--root .product-buy-buttons--primary { 8431 @media only screen and (min-width: 768px){ 8432 padding: 2px 16px; 8433 } 8434 } 8435 8436 .product-card--root .product-buy-buttons--smart, 8437 .product-card--root .product-buy-buttons--buy-now, 8438 .product-card--root .product-buy-buttons--drawer { 8439 display: none; 8440 } 8441 8442 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 8443 .product-card--early-access-login { 8444 display: flex; 8445 flex-direction: row; 8446 align-items: center; 8447 margin-top: var(--spacing--4); 8448 width: 100%; 8449 } 8450 .product-card--early-access-login .product-card--add-to-cart-button { 8451 flex: 1; 8452 } 8453 8454 .club-olay-badge { 8455 display: flex; 8456 align-items: center; 8457 justify-content: center; 8458 padding: 8px 12px; 8459 background-color: #FFD700; 8460 border-radius: 4px; 8461 margin-bottom: 12px; 8462 } 8463 8464 .club-olay-badge--text { 8465 font-family: var(--olay-font-inter, Inter, sans-serif); 8466 font-size: 12px; 8467 font-weight: 600; 8468 color: #161716; 8469 text-align: center; 8470 } 8471 8472 @media (max-width: 767px) { 8473 .club-olay-badge { 8474 padding: 6px 10px; 8475 } 8476 8477 .club-olay-badge--text { 8478 font-size: 7px; 8479 letter-spacing: 0; 8480 } 8481 } 8482 8483@media only screen and (min-width:635px) and (max-width: 820px) { 8484 .product-buy-buttons--cta-text { 8485 font-size: 11px !important; 8486 } 8487} 8488</style><!-- snippets/product-card.liquid --><div 8489 class="product-card--root" 8490 data-handle="olay-complete-daily-facial-moisturizer-with-sunscreen-broad-spectrum-spf-40" 8491 data-text-layout="left" 8492 data-aspect-ratio="square" 8493 8494 8495> 8496 <a 8497 href="/products/olay-complete-daily-facial-moisturizer-with-sunscreen-broad-spectrum-spf-40" 8498 class="product-card--image-wrapper" 8499 tabindex="-1" 8500 ><div 8501 class="product--labels product-badges" 8502 data-item="overline" 8503 data-text-color="white" 8504 ><div 8505 class="product--label" 8506 data-background-color="dark" 8507 data-label-type="spf" 8508 >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
8508SPF 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
8508SPF 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
8508SPF 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&
8508width=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
8508SPF 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 8509 type="button" 8510 class="slider-dot active" 8511 data-slide="0" 8512 aria-label="Go to slide 1" 8513 aria-current="true" 8514 ></button><button 8515 type="button" 8516 class="slider-dot" 8517 data-slide="1" 8518 aria-label="Go to slide 2" 8519 8520 ></button><button 8521 type="button" 8522 class="slider-dot" 8523 data-slide="2" 8524 aria-label="Go to slide 3" 8525 8526 ></button><button 8527 type="button" 8528 class="slider-dot" 8529 data-slide="3" 8530 aria-label="Go to slide 4" 8531 8532 ></button><button 8533 type="button" 8534 class="slider-dot" 8535 data-slide="4" 8536 aria-label="Go to slide 5" 8537 8538 ></button><button 8539 type="button" 8540 class="slider-dot" 8541 data-slide="5" 8542 aria-label="Go to slide 6" 8543 8544 ></button><button 8545 type="button" 8546 class="slider-dot" 8547 data-slide="6" 8548 aria-label="Go to slide 7" 8549 8550 ></button><button 8551 type="button" 8552 class="slider-dot" 8553 data-slide="7" 8554 aria-label="Go to slide 8" 8555 8556 ></button><button 8557 type="button" 8558 class="slider-dot" 8559 data-slide="8" 8560 aria-label="Go to slide 9" 8561 8562 ></button><button 8563 type="button" 8564 class="slider-dot" 8565 data-slide="9" 8566 aria-label="Go to slide 10" 8567 8568 ></button><button 8569 type="button" 8570 class="slider-dot" 8571 data-slide="10" 8572 aria-label="Go to slide 11" 8573 8574 ></button><button 8575 type="button" 8576 class="slider-dot" 8577 data-slide="11" 8578 aria-label="Go to slide 12" 8579 8580 ></button></div><!-- snippets/product-quick-add.liquid --></a> 8581 8582 <div class="product-card--details"> 8583 <div class="product-details--title-wrapper"> 8584 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 8585 Face Moisturizer - Protection 8586 </div></div> 8587 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609210679"></div> 8588 <!-- snippets/product-rating.liquid --> 8589</div> 8590 8591 </div>
8592 <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"> 8593 <p class="product-card--title" data-item="heading">Olay Complete + Daily Facial Moisturizer with Sunscreen Broad Spectrum SPF 40</p> 8594 </a><p class="product-card--weight"> 8595 8596 $4.44/ oz 8597 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="6"> 8598 8599 </p> 8600 </div> 8601 8602 8603<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 8604 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $26.65"> 8605 8606$26.65 8607</span></div></div> 8608 8609<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"> 8610 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 8611<product-buy-buttons-element 8612 class="product-buy-buttons--root" 8613 data-id="search" 8614 data-cart-type="drawer" 8615 data-translations="" 8616 data-container="block" 8617 ><button 8618 class="product-buy-buttons--primary" 8619 type="submit" 8620 aria-busy="false" 8621 data-text="Add to cart" 8622 availability_disabled="false" 8623 title="click here to add Olay Complete + Daily Facial Moisturizer with Sunscreen Broad Spectrum SPF 40 to bag" 8624 8625 data-item="button-1" 8626 8627> 8628 8629 <span class="product-buy-buttons--cta-text">Add to cart</span> 8630 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 8631 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 8632 </svg></span> 8633 </button> 8634<input 8635 type="hidden" 8636 class="product-buy-buttons--input" 8637 name="id" 8638 data-id="44071654621227" 8639 data-sku="00075609210679" 8640 data-management="shopify" 8641 data-policy="deny" 8642 data-quantity="81" 8643 value="44071654621227" 8644 > 8645 8646
8646<script type="application/json"> 8647 { 8648 "add_to_cart": "Add to cart", 8649 "out_of_stock": "Out of stock", 8650 "unavailable": "Unavailable" 8651 } 8652 </script>
8652 8653 </product-buy-buttons-element><style data-shopify> 8654.ps-widget[ps-sku]::before { 8655 content: ''; 8656 display: inline-block; 8657 width: 18px; 8658 height: 18px; 8659 margin-left: 8px; 8660 margin-right: 8px; 8661 background-color: currentColor; 8662 -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; 8663 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; 8664 mask-size: contain; 8665 -webkit-mask-size: contain; 8666 vertical-align: text-bottom; 8667 8668 @media only screen and (max-width: 767px) { 8669 width: 16px; 8670 height: 16px; 8671 margin-left: 0; 8672 } 8673 8674} 8675 8676.buy-now-wrap { 8677 flex-basis: 100%; 8678 width: 0; 8679 display: flex; 8680 gap: 16px; 8681} 8682button.product-buy-buttons--buy-now, 8683.ps-widget { 8684 background: white; 8685 color: black; 8686 font-family: var(--olay-font-inter); 8687 border: 1px solid var(--olay-neutral-30); 8688} 8689button.product-buy-buttons--buy-now:before { 8690 border: none; 8691} 8692button.product-buy-buttons--buy-now:focus-visible { 8693 outline: 2px solid var(--olay-color-primary); 8694 outline-offset: 2px; 8695 border-radius: var(--radius-sm); 8696} 8697button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 8698 outline: none; 8699} 8700 .product-buy-buttons--root { 8701 position: relative; 8702 gap: var(--spacing--3); 8703 8704 } 8705 product-buy-buttons-element.product-buy-buttons--root { 8706 display: flex; 8707 flex-direction: row; 8708 flex-wrap: wrap; 8709 align-items: center; 8710 margin-top: var(--spacing--4); 8711 } 8712 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 8713 flex-shrink: 0; 8714 } 8715 button.product-buy-buttons--primary { 8716 flex: 1; 8717 width: auto; 8718 display: flex; 8719 align-items: center; 8720 justify-content: center; 8721 gap: var(--spacing--2); 8722 } 8723 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 8724 width: 50%; 8725 flex-basis: 49%; 8726 } 8727 .product-buy-buttons--cart-icon { 8728 height: 12px; 8729 width: auto; 8730 flex-shrink: 0; 8731 filter: brightness(0) invert(1); 8732 @media screen and (min-width: 768px) { 8733 height: 15px; 8734 } 8735 } 8736 8737 .product-buy-buttons--buy-now, 8738 .product-buy-buttons--primary { 8739 width: 100%; 8740 8741 &[aria-busy='true'] { 8742 .product-buy-buttons--cta-text, 8743 .product-buy-buttons--buy-now-text { 8744 opacity: 0; 8745 } 8746 } 8747 8748 &[aria-busy='false'] { 8749 .product-buy-buttons--spinner { 8750 opacity: 0; 8751 } 8752 } 8753 } 8754 8755 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 8756 color: black !important; 8757 background-color: var(--button--bg-color-4) !important; 8758 border-color: var(--button--border-color-4) !important; 8759 font-family: var(--olay-font-inter) !important; 8760 border: 1px solid #D8D8D8 !important; 8761 font-size: 16px !important; 8762 border-width: 1px !important; 8763 padding: 12px 20px !important; 8764 background: white; 8765 border-radius: var(--button--radius) !important; 8766 display: inline-flex; 8767 align-items: normal; 8768 justify-content: space-between; 8769 } 8770 8771 8772 8773 @media only screen and (max-width: 767px) { 8774 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 8775 padding: 12px 0 !important; 8776 font-size: 12px !important; 8777 } 8778 .buy-now-wrap { 8779 flex-basis: 99%; 8780 gap: 10px; 8781 } 8782 } 8783 8784 .product-buy-buttons--smart { 8785 user-select: none; 8786 width: 100%; 8787 8788 &[data-style='button-1'] { 8789 --button--color: var(--button--color-1); 8790 --button--bg-color: var(--button--bg-color-1); 8791 --button--border-color: var(--button--border-color-1); 8792 } 8793 8794 &[data-style='button-2'] { 8795 --button--color: var(--button--color-2); 8796 --button--bg-color: var(--button--bg-color-2); 8797 --button--border-color: var(--button--border-color-2); 8798 } 8799 8800 &[data-style='button-3'] { 8801 --button--color: var(--button--color-3); 8802 --button--bg-color: var(--button--bg-color-3); 8803 --button--border-color: var(--button--border-color-3); 8804 } 8805 8806 &[data-style='button-4'] { 8807 --button--color: var(--button--color-4); 8808 --button--bg-color: var(--button--bg-color-4); 8809 --button--border-color: var(--button--border-color-4); 8810 } 8811 8812 .shopify-payment-button__button--unbranded { 8813 width: 100%; 8814 8815 &:hover:not([disabled]) { 8816 background-color: var(--button--bg-color); 8817 } 8818 } 8819 8820 .shopify-payment-button__more-options { 8821 margin: var(--spacing--item) 0 0 0; 8822 text-decoration: underline; 8823 color: var(--color--body); 8824 8825 &:is(:hover, :focus-visible) { 8826 background-color: unset; 8827 color: var(--color--body); 8828 } 8829 } 8830 8831 &[aria-hidden='true'] { 8832 pointer-events: none; 8833 opacity: 0.7; 8834 8835 .shopify-payment-button__button--unbranded { 8836 pointer-events: none; 8837 } 8838 } 8839 8840 &:empty { 8841 display: none; 8842 } 8843 } 8844 8845 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 8846 8847 /* Drawer info styles moved to assets/sticky-product-bar.css */ 8848 8849 .afterpay-section { 8850 width: 100%; 8851 margin-top: var(--spacing--2); 8852 } 8853 8854 @media screen and (max-width: 767px) { 8855 .afterpay-section { 8856 margin-top: var(--spacing--1); 8857 } 8858 } 8859 8860 .club-olay-badge-plp { 8861 display: flex; 8862 align-items: center; 8863 justify-content: center; 8864 padding: 8px 12px; 8865 background-color: #FFD700; 8866 border-radius: 4px; 8867 margin-bottom: 12px; 8868 width: 100%; 8869 8870 } 8871 8872 .club-olay-badge-plp--text { 8873 font-family: var(--olay-font-inter, Inter, sans-serif); 8874 font-size: 12px; 8875 font-weight: 600; 8876 color: #161716; 8877 text-align: center; 8878 } 8879 8880 @media (max-width: 767px) { 8881 .club-olay-badge-plp { 8882 padding: 6px 10px; 8883 } 8884 8885 .club-olay-badge-plp--text { 8886 font-size: 10px; 8887 } 8888 } 8889</style><input type="hidden" name="product-id" value="7918630666283" /></form></div> 8890</div> 8891 8892<style data-shopify> 8893.product_form_subtitle.plp-card { 8894 font-size: 10px; 8895} 8896 8897button.product-card--add-to-cart-button.empty { 8898 padding: 0 40px; 8899} 8900.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 8901 @media only screen and (min-width: 767px) { 8902 height: auto !important; 8903 } 8904} 8905.main-collection--grid span.product-buy-buttons--cta-text { 8906 @media only screen and (max-width: 767px) { 8907 padding: 0 40px; 8908 } 8909} 8910.product_form_subtitle { 8911 font-family: Inter; 8912 font-weight: 500; 8913 font-style: Medium; 8914 font-size: 16px; 8915 line-height: 100%; 8916 letter-spacing: 0%; 8917 color: #161716; 8918 text-transform: uppercase; 8919 margin-bottom: 8px; 8920 margin-top: 8px; 8921 8922 @media (max-width: 767px) { 8923 font-size: 10px; 8924 margin-top: 0; 8925 margin-bottom: 0; 8926 } 8927} 8928.product_subtitle{ 8929 font-family: var(--olay-font-inter); 8930 font-weight: 500; 8931 font-size: 10px; 8932 line-height: 1.2; 8933 letter-spacing: 0.01em; 8934 color: #161716; 8935 text-transform: uppercase; 8936 text-align: left; 8937 width: 100%; 8938 @media only screen and (max-width: 767px){ 8939 font-size: 8px; 8940 } 8941} 8942 .product-card--root { 8943 display: flex; 8944 flex-direction: column; 8945 gap: 20px; 8946 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 8947 width: 100%; 8948 text-align: var(--text-align, center); 8949 padding: 8px; 8950 background: #FFFFFF; 8951 border-radius: 8px; 8952 @media only screen and (max-width: 767px){ 8953 padding: 4px; 8954 gap: 8px; 8955 border-radius: 8px; 8956 } 8957 8958 @media (min-width: 768px) { 8959 border-radius: 12px; 8960 max-width: 348px; 8961 } 8962 &[data-text-layout='left'] { 8963 --text-align: left; 8964 } 8965 8966 &[data-text-layout='right'] { 8967 --text-align: right; 8968 8969 @media (min-width: 1024px) { 8970 --text-align: left; 8971 } 8972 } 8973 8974 > a { 8975 display: block; 8976 width: 100%; 8977 } 8978 8979 @media (max-width: 767px) { 8980 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 8981 --image--radius: 0; 8982 } 8983 } 8984 } 8985 8986 /* Labels & Badges */ 8987 8988 .product--labels { 8989 display: flex; 8990 flex-wrap: wrap; 8991 gap: 4px; 8992 position: absolute; 8993 top: 6px; 8994 left: 6px; 8995 right: 8px; 8996 z-index: 2; 8997 justify-content: flex-start;
8998 align-items: flex-start; 8999 9000 @media (max-width: 767px) { 9001 font-size: 9px; 9002 } 9003 } 9004 9005 .product--label { 9006 display: block; 9007 width: max-content; 9008 line-height: 1.21; 9009 font-family: var(--olay-font-inter); 9010 font-weight: 500; 9011 font-size: 10px; 9012 letter-spacing: 0.01em; 9013 text-transform: uppercase; 9014 padding: 4px 8px; 9015 border-radius: 0px; 9016 background-color: #161716; 9017 color: #F4F4F4; 9018 line-height: 1em; 9019 9020 @media (min-width: 768px) { 9021 font-size: 12px; 9022 } 9023 @media (max-width: 767px) { 9024 font-size: 8px; 9025 padding: 2px 4px !important; 9026 } 9027 9028 &:empty, 9029 &:has(span:empty) { 9030 display: none; 9031 } 9032 9033 &:last-child { 9034 height: fit-content; 9035 } 9036 9037 } 9038 9039 /* Image & Slider */ 9040 9041 .product-card--image-wrapper { 9042 width: 100%; 9043 max-width: 100%; 9044 display: flex; 9045 flex-direction: column; 9046 align-items: center; 9047 position: relative; 9048 border-radius: 8px; 9049 overflow: visible; 9050 9051 @media (min-width: 768px) { 9052 border-radius: 8px; 9053 } 9054 } 9055 9056 .product-card--image-slider { 9057 width: 100%; 9058 position: relative; 9059 overflow: hidden; 9060 border-radius: 8px; 9061 background: #F4F4F4; 9062 aspect-ratio: 1 / 1; 9063 @media only screen and (max-width: 767px){ 9064 border-radius: 4px; 9065 } 9066 } 9067 9068 .product-card--image, 9069 .product-card--slider-image { 9070 border-radius: 8px; 9071 opacity: 1; 9072 transition: opacity 0.5s; 9073 width: 100%; 9074 /* height: auto; */ 9075 object-fit: cover; 9076 9077 @media (min-width: 768px) { 9078 border-radius: 8px; 9079 } 9080 9081 @media only screen and (max-width: 767px){ 9082 border-radius: 4px; 9083 } 9084 9085 &[aria-hidden='true'] { 9086 opacity: 0; 9087 } 9088 } 9089 9090 .product-card--image { 9091 @media (hover: hover) { 9092 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 9093 opacity: 0; 9094 } 9095 } 9096 } 9097 9098 .product-card--hover-image { 9099 position: absolute; 9100 top: 0; 9101 left: 0; 9102 opacity: 0; 9103 height: 100%; 9104 width: 100%; 9105 transition: opacity 0.5s; 9106 overflow: hidden; 9107 border-radius: 8px; 9108 9109 @media (min-width: 768px) { 9110 border-radius: 8px; 9111 } 9112 9113 @media only screen and (max-width: 767px){ 9114 border-radius: 4px; 9115 } 9116 9117 @media (hover: hover) { 9118 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 9119 opacity: 1; 9120 } 9121 } 9122 } 9123 9124 .product-card--slider-image { 9125 position: absolute; 9126 top: 0; 9127 left: 0; 9128 width: 100%; 9129 height: 100%; 9130 object-fit: cover; 9131 opacity: 0; 9132 pointer-events: none; 9133 9134 &.active { 9135 opacity: 1; 9136 pointer-events: auto; 9137 } 9138 } 9139 9140 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 9141 9142 .slider-dot { 9143 width: 27px; 9144 height: 2px; 9145 border-radius: 1px; 9146 background-color: #D8D8D8; 9147 cursor: pointer; 9148 transition: background-color 0.3s ease; 9149 border: none; 9150 padding: 0; 9151 9152 &.active { 9153 background-color: #161716; 9154 } 9155 9156 &:hover { 9157 background-color: #707070; 9158 } 9159 } 9160 9161 /* Detail */ 9162 9163 .product-card--details-wrapper { 9164 display: flex; 9165 gap: 8px; 9166 flex-direction: column; 9167 width: 85%; 9168 @media only screen and (max-width: 767px){ 9169 width: 100%; 9170 gap: 4px; 9171 } 9172 } 9173 9174 .product-card--details { 9175 display: flex; 9176 flex-direction: column; 9177 gap: 8px; 9178 width: 100%; 9179 padding: 0 8px 12px; 9180 @media only screen and (max-width: 767px){ 9181 padding: 0 4px 4px; 9182 gap: 6px; 9183 } 9184 9185 .product-card--root[data-text-layout='left'] & { 9186 flex-direction: column; 9187 align-items: flex-start; 9188 } 9189 9190 .product-card--root[data-text-layout='right'] & { 9191 flex-direction: column; 9192 align-items: flex-end; 9193 } 9194 9195 @media (min-width: 768px) { 9196 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 9197 align-items: baseline; 9198 justify-content: space-between; 9199 } 9200 } 9201 9202 @media (max-width: 767px) { 9203 max-width: var(--max-width--x-small); 9204 margin: 0 auto; 9205 9206 [data-mobile-full-width='true'] & { 9207 padding-left: var(--spacing--item); 9208 } 9209 } 9210 } 9211 9212 /* Price */ 9213 9214 .product-card--price-wrapper { 9215 .product-card--root:not([data-text-layout='center']) & { 9216 align-items: center; 9217 } 9218 } 9219 9220 .product--price-container { 9221 display: flex; 9222 flex-direction: row; 9223 font-family: 'Boston', var(--olay-font-inter); 9224 font-weight: 600; 9225 font-size: 16px; 9226 line-height: 1; 9227 letter-spacing: 0.01em; 9228 color: #161716; 9229 cursor: default; 9230 @media only screen and (max-width: 767px){ 9231 font-family: var(--olay-font-inter); 9232 font-size: 16px; 9233 gap: 4px; 9234 } 9235 9236 @media (min-width: 768px) { 9237 font-size: 18px; 9238 } 9239 } 9240 9241 .product--price-wrapper { 9242 display: flex; 9243 gap: var(--spacing--0); 9244 9245 .product-card--root[data-text-layout='center'] & { 9246 justify-content: center; 9247 } 9248 9249 .product-card--root[data-text-layout='right'] & { 9250 text-align: right; 9251 justify-content: flex-end; 9252 flex-wrap: wrap; 9253 } 9254 9255 .product-card--root[data-text-layout='left'] & { 9256 flex-wrap: wrap; 9257 9258 @media (min-width: 1024px) { 9259 text-align: right; 9260 justify-content: flex-end; 9261 } 9262 } 9263 9264 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 9265 @media (min-width: 768px) { 9266 text-align: right; 9267 justify-content: end; 9268 } 9269 } 9270 9271 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 9272 &.club-olay-active { 9273 .product--price { 9274 order: 1; 9275 } 9276 9277 .product--compare-price { 9278 order: 2; 9279 } 9280 9281 .club-olay-savings { 9282 order: 3; 9283 width: 100%; 9284 } 9285 } 9286 } 9287 9288 .product--compare-price { 9289 text-decoration: line-through; 9290 font-family: var(--olay-font-inter); 9291 font-weight: 400; 9292 font-size: 16px; 9293 color: #6B6B6B; 9294 line-height: 1; 9295 } 9296 9297 .product--unit-price-container { 9298 padding: 0; 9299 font-family: var(--olay-font-inter); 9300 font-weight: 400; 9301 font-size: 10px; 9302 color: #6B6B6B; 9303 line-height: 1; 9304 align-self: center !important; 9305 margin-left: 8px; 9306 9307 .product-card--root:not([data-text-layout='center']) & { 9308 @media (min-width: 1024px) { 9309 align-self: flex-end; 9310 } 9311 } 9312 9313 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 9314 @media (min-width: 768px) { 9315 align-self: flex-end; 9316 } 9317 } 9318 } 9319 9320 .product--from[data-item] { 9321 text-transform: capitalize; 9322 padding: 0; 9323 flex-basis: initial; 9324 } 9325 9326 /* Info */ 9327 9328 .product-card--vendor { 9329 word-break: break-word; 9330 font-family: var(--olay-font-inter); 9331 font-weight: 500; 9332 font-size: 10px; 9333 line-height: 1; 9334 letter-spacing: 0.01em; 9335 color: #161716; 9336 text-transform: uppercase; 9337 9338 [data-text-color='white'] & { 9339 color: white; 9340 } 9341 9342 & a { 9343 color: var(--color--body--light); 9344 9345 @media (max-width: 767px) { 9346 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 9347 } 9348 } 9349 } 9350 9351 .product-card--title { 9352 .product-card--root & { 9353 word-break: break-word; 9354 font-family: 'Boston', var(--olay-font-inter); 9355 font-weight: 700; 9356 font-size: 14px; 9357 line-height: 1.2; 9358 color: #161716; 9359 @media only screen and (max-width: 767px){ 9360 font-size: 12px; 9361 } 9362 @media (min-width: 768px) { 9363 font-size: 16px; 9364 line-height: 1.2; 9365 } 9366 } 9367 9368 & a { 9369 @media (max-width: 767px) { 9370 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 9371 } 9372 } 9373 } 9374 9375 .product-card--weight { 9376 font-family: var(--olay-font-inter); 9377 font-weight: 500; 9378 font-size: 10px; 9379 line-height: 1.21; 9380 color: #707070; 9381 padding-block: 2%; 9382 9383 @media only screen and (max-width: 767px){ 9384 font-size: 8px; 9385 line-height: 1.21; 9386 } 9387 } 9388
9389 .product-card--details-wrapper .product-rating--root { 9390 &:empty { 9391 display: none; 9392 } 9393 9394 .product-card--root[data-text-layout='center'] & { 9395 justify-content: center; 9396 } 9397 9398 .product-card--root[data-text-layout='left'] & { 9399 justify-content: flex-start; 9400 } 9401 9402 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 9403 @media (min-width: 768px) { 9404 justify-content: flex-start; 9405 } 9406 } 9407 9408 .product-card--root[data-text-layout='right'] & { 9409 justify-content: flex-end; 9410 9411 @media (min-width: 1024px) { 9412 justify-content: flex-start; 9413 } 9414 } 9415 } 9416 9417 /* Swatches */ 9418 9419 .product-card--swatches--column-view { 9420 .product-card--root[data-text-layout='center'] & { 9421 width: fit-content; 9422 margin: 0 auto; 9423 } 9424 9425 .product-card--root:not([data-text-layout='center']) & { 9426 @media (min-width: 1024px) { 9427 display: none; 9428 } 9429 } 9430 9431 .product-card--root[data-text-layout='right'] & .swatches--container { 9432 justify-content: flex-end; 9433 } 9434 } 9435 9436 .product-card--swatches--horizontal-view { 9437 .product-card--root[data-text-layout='center'] & { 9438 display: none; 9439 } 9440 9441 .product-card--root:not([data-text-layout='center']) & { 9442 display: none; 9443 9444 @media (min-width: 1024px) { 9445 display: block; 9446 } 9447 } 9448 } 9449 9450 /* disables AR when products viewed from quick-add drawer */ 9451 .drawer--side[data-side='right'] .product-model--button[data-item] { 9452 display: none; 9453 } 9454 9455 /* Buy Buttons Section - Figma Specs */ 9456 .product-card--form { 9457 width: 100%; 9458 } 9459 9460 .product-card--add-to-cart-button, 9461 .product-card--root .product-buy-buttons--primary { 9462 width: 100%; 9463 box-sizing: border-box; 9464 height: auto; 9465 padding: 14px 16px; 9466 display: inline-flex; 9467 align-items: center; 9468 justify-content: center; 9469 background: #FFFFFF; 9470 border: 1px solid #D8D8D8; 9471 font-family: 'Boston', var(--olay-font-inter); 9472 font-weight: 500; 9473 font-size: 16px; 9474 line-height: 1; 9475 color: #161716; 9476 text-transform: uppercase; 9477 cursor: pointer; 9478 transition: all 0.3s ease; 9479 text-align: center; 9480 border-radius: 8px; 9481 @media (min-width: 1020px) and (max-width: 1080px) { 9482 font-size: 14px; 9483 } 9484 @media only screen and (max-width: 767px){ 9485 font-family: var(--olay-font-inter); 9486 font-size: 12px; 9487 border-radius: 4px; 9488 letter-spacing: 0.01em; 9489 padding: 12px 8px; 9490 } 9491 9492 &[disabled] { 9493 opacity: 0.5; 9494 cursor: not-allowed; 9495 background: #F4F4F4; 9496 @media only screen and (max-width: 767px){ 9497 font-size: 12px; 9498 width: 100%; 9499 } 9500 } 9501 9502 &[aria-busy='true'] { 9503 opacity: 0.7; 9504 9505 .product-buy-buttons--cta-text { 9506 opacity: 0; 9507 } 9508 9509 .product-buy-buttons--spinner { 9510 opacity: 1; 9511 } 9512 9513 .product-buy-buttons--spinner { 9514 opacity: 1; 9515 } 9516 9517 } 9518 9519 9520 &:before { 9521 border: none !important; 9522 } 9523 9524 .product-buy-buttons--spinner { 9525 opacity: 0; 9526 @media only screen and (max-width: 767px){ 9527 position: absolute; 9528 right: 65px; 9529 display: inline-block; 9530 top: -5px; 9531 } 9532 } 9533 } 9534 9535 @media only screen and (max-width: 767px){ 9536 .product-card--early-access-login { 9537 margin-top: 33% !important; 9538 } 9539 } 9540 9541 .product-card--root .product-buy-buttons--primary { 9542 @media only screen and (min-width: 768px){ 9543 padding: 2px 16px; 9544 } 9545 } 9546 9547 .product-card--root .product-buy-buttons--smart, 9548 .product-card--root .product-buy-buttons--buy-now, 9549 .product-card--root .product-buy-buttons--drawer { 9550 display: none; 9551 } 9552 9553 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 9554 .product-card--early-access-login { 9555 display: flex; 9556 flex-direction: row; 9557 align-items: center; 9558 margin-top: var(--spacing--4); 9559 width: 100%; 9560 } 9561 .product-card--early-access-login .product-card--add-to-cart-button { 9562 flex: 1; 9563 } 9564 9565 .club-olay-badge { 9566 display: flex; 9567 align-items: center; 9568 justify-content: center; 9569 padding: 8px 12px; 9570 background-color: #FFD700; 9571 border-radius: 4px; 9572 margin-bottom: 12px; 9573 } 9574 9575 .club-olay-badge--text { 9576 font-family: var(--olay-font-inter, Inter, sans-serif); 9577 font-size: 12px; 9578 font-weight: 600; 9579 color: #161716; 9580 text-align: center; 9581 } 9582 9583 @media (max-width: 767px) { 9584 .club-olay-badge { 9585 padding: 6px 10px; 9586 } 9587 9588 .club-olay-badge--text { 9589 font-size: 7px; 9590 letter-spacing: 0; 9591 } 9592 } 9593 9594@media only screen and (min-width:635px) and (max-width: 820px) { 9595 .product-buy-buttons--cta-text { 9596 font-size: 11px !important; 9597 } 9598} 9599</style><!-- snippets/product-card.liquid --><div 9600 class="product-card--root" 9601 data-handle="olay-collagen-peptide-visibly-firming-serum" 9602 data-text-layout="left" 9603 data-aspect-ratio="square" 9604 9605 9606> 9607 <a 9608 href="/products/olay-collagen-peptide-visibly-firming-serum" 9609 class="product-card--image-wrapper" 9610 tabindex="-1" 9611 ><div 9612 class="product--labels product-badges" 9613 data-item="overline" 9614 data-text-color="white" 9615 ><div 9616 class="product--label" 9617 data-background-color="dark" 9618 data-label-type="firming" 9619 >Firming</div><div 9620 class="product--label" 9621 data-background-color="dark" 9622 data-label-type="fragrance-free" 9623 >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> 9624
9625 <div class="product-card--details"> 9626 <div class="product-details--title-wrapper"> 9627 <div class="product-card-fold"><div class="product_form_subtitle plp-card"> 9628 Serum - Hydrating 9629 </div></div> 9630 <div class="product-review--data"><div data-bv-show="rating_summary" data-bv-product-id="00075609199950"></div> 9631 <!-- snippets/product-rating.liquid --> 9632</div> 9633 9634 </div> 9635 <div class="product-card--details-wrapper"><a href="/products/olay-collagen-peptide-visibly-firming-serum" class="product-card--title-link"> 9636 <p class="product-card--title" data-item="heading">Olay Collagen Peptide Visibly Firming Serum</p> 9637 </a><p class="product-card--weight"> 9638 9639 $30.76/ oz 9640 <input type="hidden" name="update_price_per_value" class="hdnVolume" value="1.3"> 9641 9642 </p> 9643 </div> 9644 9645 9646<!-- snippets/product-card--price.liquid --><div class="product--price-container"> 9647 <div class="product--price-wrapper "><span class="product--price" data-item="paragraph" tabindex="0" aria-label="Price: $39.99"> 9648 9649$39.99 9650</span></div></div> 9651 9652<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"> 9653 <input type="hidden" name="return_to" value="/pages/create-account"><!-- snippets/product-buy-buttons.liquid --> 9654<product-buy-buttons-element 9655 class="product-buy-buttons--root" 9656 data-id="search" 9657 data-cart-type="drawer" 9658 data-translations="" 9659 data-container="block" 9660 ><button 9661 class="product-buy-buttons--primary" 9662 type="submit" 9663 aria-busy="false" 9664 data-text="Add to cart" 9665 availability_disabled="false" 9666 title="click here to add Olay Collagen Peptide Visibly Firming Serum to bag" 9667 9668 data-item="button-1" 9669 9670> 9671 9672 <span class="product-buy-buttons--cta-text">Add to cart</span> 9673 <span class="product-buy-buttons--spinner"><svg class="icon--root icon--spinner" data-invertible="false"> 9674 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loading-spinner" /> 9675 </svg></span> 9676 </button> 9677<input 9678 type="hidden" 9679 class="product-buy-buttons--input" 9680 name="id" 9681 data-id="44071658094635" 9682 data-sku="00075609199950" 9683 data-management="shopify" 9684 data-policy="deny" 9685 data-quantity="437" 9686 value="44071658094635" 9687 > 9688 9689
9689<script type="application/json"> 9690 { 9691 "add_to_cart": "Add to cart", 9692 "out_of_stock": "Out of stock", 9693 "unavailable": "Unavailable" 9694 } 9695 </script>
9695 9696 </product-buy-buttons-element><style data-shopify> 9697.ps-widget[ps-sku]::before { 9698 content: ''; 9699 display: inline-block; 9700 width: 18px; 9701 height: 18px; 9702 margin-left: 8px; 9703 margin-right: 8px; 9704 background-color: currentColor; 9705 -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; 9706 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; 9707 mask-size: contain; 9708 -webkit-mask-size: contain; 9709 vertical-align: text-bottom; 9710 9711 @media only screen and (max-width: 767px) { 9712 width: 16px; 9713 height: 16px; 9714 margin-left: 0; 9715 } 9716 9717} 9718 9719.buy-now-wrap { 9720 flex-basis: 100%; 9721 width: 0; 9722 display: flex; 9723 gap: 16px; 9724} 9725button.product-buy-buttons--buy-now, 9726.ps-widget { 9727 background: white; 9728 color: black; 9729 font-family: var(--olay-font-inter); 9730 border: 1px solid var(--olay-neutral-30); 9731} 9732button.product-buy-buttons--buy-now:before { 9733 border: none; 9734} 9735button.product-buy-buttons--buy-now:focus-visible { 9736 outline: 2px solid var(--olay-color-primary); 9737 outline-offset: 2px; 9738 border-radius: var(--radius-sm); 9739} 9740button.product-buy-buttons--buy-now:focus:not(:focus-visible) { 9741 outline: none; 9742} 9743 .product-buy-buttons--root { 9744 position: relative; 9745 gap: var(--spacing--3); 9746 9747 } 9748 product-buy-buttons-element.product-buy-buttons--root { 9749 display: flex; 9750 flex-direction: row; 9751 flex-wrap: wrap; 9752 align-items: center; 9753 margin-top: var(--spacing--4); 9754 } 9755 product-buy-buttons-element.product-buy-buttons--root .quantity-selector--root { 9756 flex-shrink: 0; 9757 } 9758 button.product-buy-buttons--primary { 9759 flex: 1; 9760 width: auto; 9761 display: flex; 9762 align-items: center; 9763 justify-content: center; 9764 gap: var(--spacing--2); 9765 } 9766 product-buy-buttons-element.product-buy-buttons--root .product-buy-buttons--buy-now, .ps-widget { 9767 width: 50%; 9768 flex-basis: 49%; 9769 } 9770 .product-buy-buttons--cart-icon { 9771 height: 12px; 9772 width: auto; 9773 flex-shrink: 0; 9774 filter: brightness(0) invert(1); 9775 @media screen and (min-width: 768px) { 9776 height: 15px; 9777 } 9778 } 9779 9780 .product-buy-buttons--buy-now, 9781 .product-buy-buttons--primary { 9782 width: 100%; 9783 9784 &[aria-busy='true'] { 9785 .product-buy-buttons--cta-text, 9786 .product-buy-buttons--buy-now-text { 9787 opacity: 0; 9788 } 9789 } 9790 9791 &[aria-busy='false'] { 9792 .product-buy-buttons--spinner { 9793 opacity: 0; 9794 } 9795 } 9796 } 9797 9798 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 9799 color: black !important; 9800 background-color: var(--button--bg-color-4) !important; 9801 border-color: var(--button--border-color-4) !important; 9802 font-family: var(--olay-font-inter) !important; 9803 border: 1px solid #D8D8D8 !important; 9804 font-size: 16px !important; 9805 border-width: 1px !important; 9806 padding: 12px 20px !important; 9807 background: white; 9808 border-radius: var(--button--radius) !important; 9809 display: inline-flex; 9810 align-items: normal; 9811 justify-content: space-between; 9812 } 9813 9814 9815 9816 @media only screen and (max-width: 767px) { 9817 .ps-widget[ps-sku], .ps-widget[data-ps-sku] { 9818 padding: 12px 0 !important; 9819 font-size: 12px !important; 9820 } 9821 .buy-now-wrap { 9822 flex-basis: 99%; 9823 gap: 10px; 9824 } 9825 } 9826 9827 .product-buy-buttons--smart { 9828 user-select: none; 9829 width: 100%; 9830 9831 &[data-style='button-1'] { 9832 --button--color: var(--button--color-1); 9833 --button--bg-color: var(--button--bg-color-1); 9834 --button--border-color: var(--button--border-color-1); 9835 } 9836 9837 &[data-style='button-2'] { 9838 --button--color: var(--button--color-2); 9839 --button--bg-color: var(--button--bg-color-2); 9840 --button--border-color: var(--button--border-color-2); 9841 } 9842 9843 &[data-style='button-3'] { 9844 --button--color: var(--button--color-3); 9845 --button--bg-color: var(--button--bg-color-3); 9846 --button--border-color: var(--button--border-color-3); 9847 } 9848 9849 &[data-style='button-4'] { 9850 --button--color: var(--button--color-4); 9851 --button--bg-color: var(--button--bg-color-4); 9852 --button--border-color: var(--button--border-color-4); 9853 } 9854 9855 .shopify-payment-button__button--unbranded { 9856 width: 100%; 9857 9858 &:hover:not([disabled]) { 9859 background-color: var(--button--bg-color); 9860 } 9861 } 9862 9863 .shopify-payment-button__more-options { 9864 margin: var(--spacing--item) 0 0 0; 9865 text-decoration: underline; 9866 color: var(--color--body); 9867 9868 &:is(:hover, :focus-visible) { 9869 background-color: unset; 9870 color: var(--color--body); 9871 } 9872 } 9873 9874 &[aria-hidden='true'] { 9875 pointer-events: none; 9876 opacity: 0.7; 9877 9878 .shopify-payment-button__button--unbranded { 9879 pointer-events: none; 9880 } 9881 } 9882 9883 &:empty { 9884 display: none; 9885 } 9886 } 9887 9888 /* Sticky drawer styles moved to assets/sticky-product-bar.css */ 9889 9890 /* Drawer info styles moved to assets/sticky-product-bar.css */ 9891 9892 .afterpay-section { 9893 width: 100%; 9894 margin-top: var(--spacing--2); 9895 } 9896 9897 @media screen and (max-width: 767px) { 9898 .afterpay-section { 9899 margin-top: var(--spacing--1); 9900 } 9901 } 9902 9903 .club-olay-badge-plp { 9904 display: flex; 9905 align-items: center; 9906 justify-content: center; 9907 padding: 8px 12px; 9908 background-color: #FFD700; 9909 border-radius: 4px; 9910 margin-bottom: 12px; 9911 width: 100%; 9912 9913 } 9914 9915 .club-olay-badge-plp--text { 9916 font-family: var(--olay-font-inter, Inter, sans-serif); 9917 font-size: 12px; 9918 font-weight: 600; 9919 color: #161716; 9920 text-align: center; 9921 } 9922 9923 @media (max-width: 767px) { 9924 .club-olay-badge-plp { 9925 padding: 6px 10px; 9926 } 9927 9928 .club-olay-badge-plp--text { 9929 font-size: 10px; 9930 } 9931 } 9932</style><input type="hidden" name="product-id" value="7918632730667" /></form></div> 9933</div> 9934 9935<style data-shopify> 9936.product_form_subtitle.plp-card { 9937 font-size: 10px; 9938} 9939 9940button.product-card--add-to-cart-button.empty { 9941 padding: 0 40px; 9942} 9943.featured-collection--root .featured-collection--products .carousel--root:not([data-mobile-only="true"]) .carousel--container { 9944 @media only screen and (min-width: 767px) { 9945 height: auto !important; 9946 } 9947} 9948.main-collection--grid span.product-buy-buttons--cta-text { 9949 @media only screen and (max-width: 767px) { 9950 padding: 0 40px; 9951 } 9952} 9953.product_form_subtitle { 9954 font-family: Inter; 9955 font-weight: 500; 9956 font-style: Medium; 9957 font-size: 16px; 9958 line-height: 100%; 9959 letter-spacing: 0%; 9960 color: #161716; 9961 text-transform: uppercase; 9962 margin-bottom: 8px; 9963 margin-top: 8px; 9964 9965 @media (max-width: 767px) { 9966 font-size: 10px; 9967 margin-top: 0; 9968 margin-bottom: 0; 9969 } 9970} 9971.product_subtitle{ 9972 font-family: var(--olay-font-inter); 9973 font-weight: 500; 9974 font-size: 10px; 9975 line-height: 1.2; 9976 letter-spacing: 0.01em; 9977 color: #161716; 9978 text-transform: uppercase; 9979 text-align: left; 9980 width: 100%; 9981 @media only screen and (max-width: 767px){ 9982 font-size: 8px; 9983 } 9984} 9985 .product-card--root { 9986 display: flex; 9987 flex-direction: column; 9988 gap: 20px; 9989 /* align-self: stretch (from product-card-custom.css) fills grid row height */ 9990 width: 100%; 9991 text-align: var(--text-align, center); 9992 padding: 8px; 9993 background: #FFFFFF; 9994 border-radius: 8px; 9995 @media only screen and (max-width: 767px){ 9996 padding: 4px; 9997 gap: 8px; 9998 border-radius: 8px; 9999 } 10000 10001 @media (min-width: 768px) { 10002 border-radius: 12px; 10003 max-width: 348px; 10004 } 10005 &[data-text-layout='left'] { 10006 --text-align: left; 10007 } 10008 10009 &[data-text-layout='right'] { 10010 --text-align: right; 10011 10012 @media (min-width: 1024px) { 10013 --text-align: left; 10014 } 10015 } 10016 10017 > a { 10018 display: block; 10019 width: 100%; 10020 } 10021 10022 @media (max-width: 767px) { 10023 [data-mobile-full-width='true'] & :is(img, .placeholder--root) { 10024 --image--radius: 0; 10025 } 10026 } 10027 } 10028 10029 /* Labels & Badges */ 10030 10031 .product--labels { 10032 display: flex; 10033 flex-wrap: wrap; 10034 gap: 4px; 10035 position: absolute; 10036 top: 6px; 10037 left: 6px; 10038 right: 8px; 10039 z-index: 2; 10040 justify-content: flex-start;
10041 align-items: flex-start; 10042 10043 @media (max-width: 767px) { 10044 font-size: 9px; 10045 } 10046 } 10047 10048 .product--label { 10049 display: block; 10050 width: max-content; 10051 line-height: 1.21; 10052 font-family: var(--olay-font-inter); 10053 font-weight: 500; 10054 font-size: 10px; 10055 letter-spacing: 0.01em; 10056 text-transform: uppercase; 10057 padding: 4px 8px; 10058 border-radius: 0px; 10059 background-color: #161716; 10060 color: #F4F4F4; 10061 line-height: 1em; 10062 10063 @media (min-width: 768px) { 10064 font-size: 12px; 10065 } 10066 @media (max-width: 767px) { 10067 font-size: 8px; 10068 padding: 2px 4px !important; 10069 } 10070 10071 &:empty, 10072 &:has(span:empty) { 10073 display: none; 10074 } 10075 10076 &:last-child { 10077 height: fit-content; 10078 } 10079 10080 } 10081 10082 /* Image & Slider */ 10083 10084 .product-card--image-wrapper { 10085 width: 100%; 10086 max-width: 100%; 10087 display: flex; 10088 flex-direction: column; 10089 align-items: center; 10090 position: relative; 10091 border-radius: 8px; 10092 overflow: visible; 10093 10094 @media (min-width: 768px) { 10095 border-radius: 8px; 10096 } 10097 } 10098 10099 .product-card--image-slider { 10100 width: 100%; 10101 position: relative; 10102 overflow: hidden; 10103 border-radius: 8px; 10104 background: #F4F4F4; 10105 aspect-ratio: 1 / 1; 10106 @media only screen and (max-width: 767px){ 10107 border-radius: 4px; 10108 } 10109 } 10110 10111 .product-card--image, 10112 .product-card--slider-image { 10113 border-radius: 8px; 10114 opacity: 1; 10115 transition: opacity 0.5s; 10116 width: 100%; 10117 /* height: auto; */ 10118 object-fit: cover; 10119 10120 @media (min-width: 768px) { 10121 border-radius: 8px; 10122 } 10123 10124 @media only screen and (max-width: 767px){ 10125 border-radius: 4px; 10126 } 10127 10128 &[aria-hidden='true'] { 10129 opacity: 0; 10130 } 10131 } 10132 10133 .product-card--image { 10134 @media (hover: hover) { 10135 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 10136 opacity: 0; 10137 } 10138 } 10139 } 10140 10141 .product-card--hover-image { 10142 position: absolute; 10143 top: 0; 10144 left: 0; 10145 opacity: 0; 10146 height: 100%; 10147 width: 100%; 10148 transition: opacity 0.5s; 10149 overflow: hidden; 10150 border-radius: 8px; 10151 10152 @media (min-width: 768px) { 10153 border-radius: 8px; 10154 } 10155 10156 @media only screen and (max-width: 767px){ 10157 border-radius: 4px; 10158 } 10159 10160 @media (hover: hover) { 10161 .product-card--root:has(.product-card--hover-image) .product-card--image-wrapper:hover & { 10162 opacity: 1; 10163 } 10164 } 10165 } 10166 10167 .product-card--slider-image { 10168 position: absolute; 10169 top: 0; 10170 left: 0; 10171 width: 100%; 10172 height: 100%; 10173 object-fit: cover; 10174 opacity: 0; 10175 pointer-events: none; 10176 10177 &.active { 10178 opacity: 1; 10179 pointer-events: auto; 10180 } 10181 } 10182 10183 /* Slider Dots - Figma Spec: 27px x 2px rectangles */ 10184 10185 .slider-dot { 10186 width: 27px; 10187 height: 2px; 10188 border-radius: 1px; 10189 background-color: #D8D8D8; 10190 cursor: pointer; 10191 transition: background-color 0.3s ease; 10192 border: none; 10193 padding: 0; 10194 10195 &.active { 10196 background-color: #161716; 10197 } 10198 10199 &:hover { 10200 background-color: #707070; 10201 } 10202 } 10203 10204 /* Detail */ 10205 10206 .product-card--details-wrapper { 10207 display: flex; 10208 gap: 8px; 10209 flex-direction: column; 10210 width: 85%; 10211 @media only screen and (max-width: 767px){ 10212 width: 100%; 10213 gap: 4px; 10214 } 10215 } 10216 10217 .product-card--details { 10218 display: flex; 10219 flex-direction: column; 10220 gap: 8px; 10221 width: 100%; 10222 padding: 0 8px 12px; 10223 @media only screen and (max-width: 767px){ 10224 padding: 0 4px 4px; 10225 gap: 6px; 10226 } 10227 10228 .product-card--root[data-text-layout='left'] & { 10229 flex-direction: column; 10230 align-items: flex-start; 10231 } 10232 10233 .product-card--root[data-text-layout='right'] & { 10234 flex-direction: column; 10235 align-items: flex-end; 10236 } 10237 10238 @media (min-width: 768px) { 10239 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 10240 align-items: baseline; 10241 justify-content: space-between; 10242 } 10243 } 10244 10245 @media (max-width: 767px) { 10246 max-width: var(--max-width--x-small); 10247 margin: 0 auto; 10248 10249 [data-mobile-full-width='true'] & { 10250 padding-left: var(--spacing--item); 10251 } 10252 } 10253 } 10254 10255 /* Price */ 10256 10257 .product-card--price-wrapper { 10258 .product-card--root:not([data-text-layout='center']) & { 10259 align-items: center; 10260 } 10261 } 10262 10263 .product--price-container { 10264 display: flex; 10265 flex-direction: row; 10266 font-family: 'Boston', var(--olay-font-inter); 10267 font-weight: 600; 10268 font-size: 16px; 10269 line-height: 1; 10270 letter-spacing: 0.01em; 10271 color: #161716; 10272 cursor: default; 10273 @media only screen and (max-width: 767px){ 10274 font-family: var(--olay-font-inter); 10275 font-size: 16px; 10276 gap: 4px; 10277 } 10278 10279 @media (min-width: 768px) { 10280 font-size: 18px; 10281 } 10282 } 10283 10284 .product--price-wrapper { 10285 display: flex; 10286 gap: var(--spacing--0); 10287 10288 .product-card--root[data-text-layout='center'] & { 10289 justify-content: center; 10290 } 10291 10292 .product-card--root[data-text-layout='right'] & { 10293 text-align: right; 10294 justify-content: flex-end; 10295 flex-wrap: wrap; 10296 } 10297 10298 .product-card--root[data-text-layout='left'] & { 10299 flex-wrap: wrap; 10300 10301 @media (min-width: 1024px) { 10302 text-align: right; 10303 justify-content: flex-end; 10304 } 10305 } 10306 10307 [data-columns='2'] .product-card--root[data-text-layout='left'] & { 10308 @media (min-width: 768px) { 10309 text-align: right; 10310 justify-content: end; 10311 } 10312 } 10313 10314 /* Club Olay: Reorder to show discounted price first, then strikethrough */ 10315 &.club-olay-active { 10316 .product--price { 10317 order: 1; 10318 } 10319 10320 .product--compare-price { 10321 order: 2; 10322 } 10323 10324 .club-olay-savings { 10325 order: 3; 10326 width: 100%; 10327 } 10328 } 10329 } 10330 10331 .product--compare-price { 10332 text-decoration: line-through; 10333 font-family: var(--olay-font-inter); 10334 font-weight: 400; 10335 font-size: 16px; 10336 color: #6B6B6B; 10337 line-height: 1; 10338 } 10339 10340 .product--unit-price-container { 10341 padding: 0; 10342 font-family: var(--olay-font-inter); 10343 font-weight: 400; 10344 font-size: 10px; 10345 color: #6B6B6B; 10346 line-height: 1; 10347 align-self: center !important; 10348 margin-left: 8px; 10349 10350 .product-card--root:not([data-text-layout='center']) & { 10351 @media (min-width: 1024px) { 10352 align-self: flex-end; 10353 } 10354 } 10355 10356 [data-columns='2'] .product-card--root:not([data-text-layout='center']) & { 10357 @media (min-width: 768px) { 10358 align-self: flex-end; 10359 } 10360 } 10361 } 10362 10363 .product--from[data-item] { 10364 text-transform: capitalize; 10365 padding: 0; 10366 flex-basis: initial; 10367 } 10368 10369 /* Info */ 10370 10371 .product-card--vendor { 10372 word-break: break-word; 10373 font-family: var(--olay-font-inter); 10374 font-weight: 500; 10375 font-size: 10px; 10376 line-height: 1; 10377 letter-spacing: 0.01em; 10378 color: #161716; 10379 text-transform: uppercase; 10380 10381 [data-text-color='white'] & { 10382 color: white; 10383 } 10384 10385 & a { 10386 color: var(--color--body--light); 10387 10388 @media (max-width: 767px) { 10389 padding: var(--spacing--item) calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2); 10390 } 10391 } 10392 } 10393 10394 .product-card--title { 10395 .product-card--root & { 10396 word-break: break-word; 10397 font-family: 'Boston', var(--olay-font-inter); 10398 font-weight: 700; 10399 font-size: 14px; 10400 line-height: 1.2; 10401 color: #161716; 10402 @media only screen and (max-width: 767px){ 10403 font-size: 12px; 10404 } 10405 @media (min-width: 768px) { 10406 font-size: 16px; 10407 line-height: 1.2; 10408 } 10409 } 10410 10411 & a { 10412 @media (max-width: 767px) { 10413 padding: calc(var(--spacing--item) / 2) calc(var(--spacing--item) / 2) var(--spacing--item); 10414 } 10415 } 10416 } 10417 10418 .product-card--weight { 10419 font-family: var(--olay-font-inter); 10420 font-weight: 500; 10421 font-size: 10px; 10422 line-height: 1.21; 10423 color: #707070; 10424 padding-block: 2%; 10425 10426 @media only screen and (max-width: 767px){ 10427 font-size: 8px; 10428 line-height: 1.21; 10429 } 10430 } 10431
10432 .product-card--details-wrapper .product-rating--root { 10433 &:empty { 10434 display: none; 10435 } 10436 10437 .product-card--root[data-text-layout='center'] & { 10438 justify-content: center; 10439 } 10440 10441 .product-card--root[data-text-layout='left'] & { 10442 justify-content: flex-start; 10443 } 10444 10445 [data-columns='2'] .product-card--root[data-text-layout='right'] & { 10446 @media (min-width: 768px) { 10447 justify-content: flex-start; 10448 } 10449 } 10450 10451 .product-card--root[data-text-layout='right'] & { 10452 justify-content: flex-end; 10453 10454 @media (min-width: 1024px) { 10455 justify-content: flex-start; 10456 } 10457 } 10458 } 10459 10460 /* Swatches */ 10461 10462 .product-card--swatches--column-view { 10463 .product-card--root[data-text-layout='center'] & { 10464 width: fit-content; 10465 margin: 0 auto; 10466 } 10467 10468 .product-card--root:not([data-text-layout='center']) & { 10469 @media (min-width: 1024px) { 10470 display: none; 10471 } 10472 } 10473 10474 .product-card--root[data-text-layout='right'] & .swatches--container { 10475 justify-content: flex-end; 10476 } 10477 } 10478 10479 .product-card--swatches--horizontal-view { 10480 .product-card--root[data-text-layout='center'] & { 10481 display: none; 10482 } 10483 10484 .product-card--root:not([data-text-layout='center']) & { 10485 display: none; 10486 10487 @media (min-width: 1024px) { 10488 display: block; 10489 } 10490 } 10491 } 10492 10493 /* disables AR when products viewed from quick-add drawer */ 10494 .drawer--side[data-side='right'] .product-model--button[data-item] { 10495 display: none; 10496 } 10497 10498 /* Buy Buttons Section - Figma Specs */ 10499 .product-card--form { 10500 width: 100%; 10501 } 10502 10503 .product-card--add-to-cart-button, 10504 .product-card--root .product-buy-buttons--primary { 10505 width: 100%; 10506 box-sizing: border-box; 10507 height: auto; 10508 padding: 14px 16px; 10509 display: inline-flex; 10510 align-items: center; 10511 justify-content: center; 10512 background: #FFFFFF; 10513 border: 1px solid #D8D8D8; 10514 font-family: 'Boston', var(--olay-font-inter); 10515 font-weight: 500; 10516 font-size: 16px; 10517 line-height: 1; 10518 color: #161716; 10519 text-transform: uppercase; 10520 cursor: pointer; 10521 transition: all 0.3s ease; 10522 text-align: center; 10523 border-radius: 8px; 10524 @media (min-width: 1020px) and (max-width: 1080px) { 10525 font-size: 14px; 10526 } 10527 @media only screen and (max-width: 767px){ 10528 font-family: var(--olay-font-inter); 10529 font-size: 12px; 10530 border-radius: 4px; 10531 letter-spacing: 0.01em; 10532 padding: 12px 8px; 10533 } 10534 10535 &[disabled] { 10536 opacity: 0.5; 10537 cursor: not-allowed; 10538 background: #F4F4F4; 10539 @media only screen and (max-width: 767px){ 10540 font-size: 12px; 10541 width: 100%; 10542 } 10543 } 10544 10545 &[aria-busy='true'] { 10546 opacity: 0.7; 10547 10548 .product-buy-buttons--cta-text { 10549 opacity: 0; 10550 } 10551 10552 .product-buy-buttons--spinner { 10553 opacity: 1; 10554 } 10555 10556 .product-buy-buttons--spinner { 10557 opacity: 1; 10558 } 10559 10560 } 10561 10562 10563 &:before { 10564 border: none !important; 10565 } 10566 10567 .product-buy-buttons--spinner { 10568 opacity: 0; 10569 @media only screen and (max-width: 767px){ 10570 position: absolute; 10571 right: 65px; 10572 display: inline-block; 10573 top: -5px; 10574 } 10575 } 10576 } 10577 10578 @media only screen and (max-width: 767px){ 10579 .product-card--early-access-login { 10580 margin-top: 33% !important; 10581 } 10582 } 10583 10584 .product-card--root .product-buy-buttons--primary { 10585 @media only screen and (min-width: 768px){ 10586 padding: 2px 16px; 10587 } 10588 } 10589 10590 .product-card--root .product-buy-buttons--smart, 10591 .product-card--root .product-buy-buttons--buy-now, 10592 .product-card--root .product-buy-buttons--drawer { 10593 display: none; 10594 } 10595 10596 /* Matches product-buy-buttons-element's flex/margin so height is identical to the real add-to-cart button */ 10597 .product-card--early-access-login { 10598 display: flex; 10599 flex-direction: row; 10600 align-items: center; 10601 margin-top: var(--spacing--4); 10602 width: 100%; 10603 } 10604 .product-card--early-access-login .product-card--add-to-cart-button { 10605 flex: 1; 10606 } 10607 10608 .club-olay-badge { 10609 display: flex; 10610 align-items: center; 10611 justify-content: center; 10612 padding: 8px 12px; 10613 background-color: #FFD700; 10614 border-radius: 4px; 10615 margin-bottom: 12px; 10616 } 10617 10618 .club-olay-badge--text { 10619 font-family: var(--olay-font-inter, Inter, sans-serif); 10620 font-size: 12px; 10621 font-weight: 600; 10622 color: #161716; 10623 text-align: center; 10624 } 10625 10626 @media (max-width: 767px) { 10627 .club-olay-badge { 10628 padding: 6px 10px; 10629 } 10630 10631 .club-olay-badge--text { 10632 font-size: 7px; 10633 letter-spacing: 0; 10634 } 10635 } 10636 10637@media only screen and (min-width:635px) and (max-width: 820px) { 10638 .product-buy-buttons--cta-text { 10639 font-size: 11px !important; 10640 } 10641} 10642</style></div></div> 10643 10644</div> 10645 </form> 10646</predictive-search-element></div> 10647 </div> 10648 10649 <div
10650 class="drawer--side" 10651 data-side="right" 10652 aria-expanded="false" 10653 ><div class="drawer--container" data-view="cart-drawer"><!-- snippets/cart.liquid --><!-- Widget : Labor Day 2026 GWP $15 - Invisible Sunscreen --> 10654<div data-rebuy-id="309317" style="display:none;"></div> 10655<!-- End Widget : Labor Day 2026 GWP $15 - Invisible Sunscreen --><cart-element 10656 class="cart--root" 10657 10658 data-background-color="none" 10659 data-view="drawer" 10660 data-container-width="3" 10661 data-customer-logged-in="false" 10662 data-block-guest-subscription="true" 10663 10664 10665 10666 role="dialog" 10667 aria-modal="true" 10668 aria-labelledby="cart-drawer-title" 10669 10670> 10671 <form 10672 class="cart--form" 10673 action="/cart" 10674 method="post" 10675 novalidate="" 10676 10677 data-drawer-scroll-container 10678 10679 > 10680 <div class="cart--wrapper"><div 10681 class="visually-hidden" 10682 role="status" 10683 aria-live="polite" 10684 aria-atomic="true" 10685 data-cart-status 10686 ></div><div class="cart--header cart-header-new"> 10687 <div class="cart-header-row"><h2 10688 class="cart-title" 10689 10690 id="cart-drawer-title" 10691 10692 > 10693 Your Cart 10694<span class="pill" data-cart-count style="display: none;">0</span></h2> 10695 10696 10697 <button type="button" class="cart-close" data-drawer-close aria-label="Close cart">â</button> 10698 10699 </div> 10700 </div><div class="cart-shipping"> 10701 <div 10702 class="cart-shipping-bar " 10703 10704 style="--progress: 0.0%;" 10705 data-shipping-bar 10706 data-free-shipping-limit="1500.0" 10707 data-shipping-message-before="You are [$] from free shipping." 10708 data-shipping-message-after="Congratulations! You qualify for free shipping." 10709 ></div> 10710 10711 <div class="cart-shipping-message" data-item="paragraph" data-shipping-message>You are $15.00 from free shipping.</div> 10712 </div><div 10713 class="cart--body" 10714 10715 style="display: none;" 10716 10717 ><style> 10718 .cart--item--gift .quantity-selector--container, 10719 .cart--item--gift .quantity-selector--label { display: none !important; } 10720 .cart-line-item--gift .cart-line-item__qty > quantity-selector .quantity-selector--container { display: none !important; } 10721 </style></div><div 10722 10723 style="display: none;" 10724 10725 ></div><div class="cart-empty-state" style="display: flex;"> 10726 <div class="cart-empty-icon"> 10727 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> 10728 <mask id="mask0_7325_5158" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48"> 10729 <rect x="0.5" y="0.5" width="47" height="47" fill="#D9D9D9" stroke="#707070"/> 10730 </mask> 10731 <g mask="url(#mask0_7325_5158)"> 10732 <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
10732M18.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"/> 10733 </g> 10734 </svg> 10735 </div> 10736 <p class="cart-empty-message">Your cart is empty</p> 10737 <div class="cart-empty-actions"> 10738 <a href="/collections/best-sellers" class="cart-empty-button"> 10739 Shop Skincare Bestsellers 10740 </a> 10741 <a href="/collections/body-care" class="cart-empty-button"> 10742 Shop Body Care Sets 10743 </a> 10744 </div> 10745 </div> 10746 </div><div class="cart--totals"> 10747 <div class="cart--summary cart-footer-new"> 10748 10749 <!-- Recommended Products Section --><!-- Promo/Discount Section --> 10750 <cart-discount class="cart-promo-section"> 10751 <!-- State 1: Default Button / State 2: Input Form / State 3: Applied (managed by JS) --> 10752 <div class="cart-promo-wrapper" data-promo-wrapper> 10753 10754 <!-- Default: Add Promo Button --> 10755 <button type="button" class="cart-promo-button" data-promo-toggle> 10756 <span>Add Promo or Discount</span> 10757 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10758 <path d="M3 8H13M8 3V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 10759 </svg> 10760 </button> 10761 10762 <!-- State 2: Input Form (hidden by default) --> 10763 <div class="cart-promo-form-container" data-promo-form style="display: none;"> 10764 <!-- Header with title and close button --> 10765 <div class="cart-promo-header"> 10766 <span class="cart-promo-title">Add Promo or Discount</span> 10767 <button type="button" class="cart-promo-close" data-promo-close aria-label="Close promo form"> 10768 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10769 <path d="M3 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 10770 </svg> 10771 </button> 10772 </div> 10773 10774 <!-- Input and Apply button in same row --> 10775 <div class="cart-promo-form" data-discount-form> 10776 <div class="cart-promo-row"> 10777 <input 10778 type="text" 10779 class="cart-promo-input" 10780 data-promo-input 10781 name="discount_code" 10782 placeholder="Enter promo code" 10783 aria-label="Discount code" 10784 /> 10785 <button type="button" class="cart-promo-apply" data-promo-apply>apply</button> 10786 </div> 10787 <!-- Error Message (hidden by default) --> 10788 <div class="cart-promo-error" data-promo-error style="display: none;"> 10789 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10790 <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1"/> 10791 <path d="M8 4V8.5M8 11.5V11.51" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 10792 </svg> 10793 <span data-error-message>Sorry, that is not a valid code</span> 10794 </div> 10795 </div> 10796 </div> 10797 </div> 10798 </cart-discount> 10799 <div class="cart-quantity-error" data-qty-error-block style="display: none;"> 10800 <div class="cart-qty-error-icon"> 10801 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 10802 <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"/> 10803 <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> 10804 </svg> 10805 </div> 10806 <div class="cart-qty-error-message" data-item="paragraph" data-qty-error-text> 10807 Total quantity cannot exceed 5 10808 </div> 10809 </div> 10810 <!-- Total Section --> 10811 <div class="cart-total-section"> 10812 <div class="cart-total-row">
10813 <span class="cart-total-label">Total</span> 10814 <div class="cart-total-price-group"><span class="cart-total-price money">$0.00</span></div> 10815 </div> 10816 <p class="cart-total-helper">Taxes and shipping calculated at checkout</p> 10817 </div><!-- Secure Checkout Button --> 10818 <button 10819 type="submit" 10820 name="checkout" 10821 class="cart--button cart-checkout-button" 10822 > 10823 <span>Secure checkout</span> 10824 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 10825 <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"/> 10826 </svg> 10827 10828 </button> 10829 10830 <!-- Or Separator --> 10831 <span class="cart-separator">or</span> 10832 10833 <!-- Payment Buttons --> 10834 <div class="cart-drawer__accelerated-checkout cart-payment-buttons"> 10835 <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="1cb7ffa93ceffe9ae835d4b8bb6f1cbb" 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> 10836 </div> 10837 10838</div> 10839 </div></form> 10840</cart-element>
10840<script src="//www.olay.com/cdn/shop/t/10/assets/cart-discount.js?v=131307065866294037091790077657" defer></script>
10840 10841
10842<script> 10843(function() { 10844 const drawer = document.querySelector('.drawer--side[data-side="right"]'); 10845 if (!drawer) return; 10846 10847 let loaded = false; 10848 const load = () => { 10849 if (loaded) return; 10850 10851 loaded = true; 10852 // Load CSS 10853 const css = document.createElement('link'); 10854 css.rel = 'stylesheet'; 10855 css.href = '//www.olay.com/cdn/shop/t/10/assets/cart-overlay.css?v=88798406061663488631789024915'; 10856 document.head.appendChild(css); 10857 10858 const rebuyCss = document.createElement('link'); 10859 rebuyCss.rel = 'stylesheet'; 10860 rebuyCss.href = '//www.olay.com/cdn/shop/t/10/assets/rebuy-cart-fix.css?v=155418972504299389161779203464'; 10861 document.head.appendChild(rebuyCss); 10862 10863 [ "//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 => { 10864 const s = document.createElement('script'); 10865 s.src = f; 10866 s.defer = true; 10867 document.head.appendChild(s); 10868 }); 10869 }; 10870 10871 if (drawer.getAttribute('aria-expanded') === 'true') load(); 10872 else new MutationObserver(() => drawer.getAttribute('aria-expanded') === 'true' && load()) 10873 .observe(drawer, { attributes: true, attributeFilter: ['aria-expanded'] }); 10874})(); 10875</script>
10875<script> 10876 //redirect from cart to homepage if user tries to access cart page directly 10877 (function () { 10878 if (window.location.pathname !== '/cart') return; 10879 10880 var params = new URLSearchParams(window.location.search); 10881 var alreadyRedirected = params.get('from_cart') === '1'; 10882 10883 if (alreadyRedirected) return; 10884 document.body.style.visibility = 'hidden'; 10885 10886 var destUrl = new URL('/', window.location.origin); 10887 destUrl.searchParams.set('open_cart', '1'); 10888 destUrl.searchParams.set('from_cart', '1'); 10889 10890 window.location.replace(destUrl.toString()); 10891 })(); 10892 document.addEventListener('DOMContentLoaded', function () { 10893 const urlParams = new URLSearchParams(window.location.search); 10894 if (urlParams.get('open_cart') === '1') { 10895 const cartButton = document.querySelector('.header--cart'); 10896 if (cartButton) { 10897 cartButton.click(); 10898 } 10899 } 10900 }); 10901 // Fix checkout button reference and update cart counter after cart updates 10902 document.addEventListener('DOMContentLoaded', function () { 10903 function updateCheckoutButtonReference() { 10904 const cartElements = document.querySelectorAll('.cart--root'); 10905 cartElements.forEach(function (cartEl) { 10906 if (cartEl.checkout_button) { 10907 const newButton = cartEl.querySelector('.cart--button'); 10908 if (newButton && newButton !== cartEl.checkout_button) { 10909 cartEl.checkout_button = newButton; 10910 } 10911 } 10912 }); 10913 } 10914 10915 // Fetch cart data from Shopify Cart API 10916 async function fetchCartData() { 10917 try { 10918 const response = await fetch('/cart.js', { 10919 method: 'GET', 10920 headers: { 10921 'Content-Type': 'application/json', 10922 Accept: 'application/json', 10923 }, 10924 }); 10925 10926 if (!response.ok) { 10927 return null; 10928 } 10929 10930 return await response.json(); 10931 } catch (error) { 10932 return null; 10933 } 10934 } 10935 10936 // Deduped fetch wrapper: reuse in-flight request and short cache 10937 (function () { 10938 let inFlight = null; 10939 let lastResult = null; 10940 let lastAt = 0; 10941 const CACHE_TTL = 400; // ms 10942 10943 window.fetchCartDataOnce = function (fetchForce) { 10944 if (!fetchForce && lastResult && Date.now() - lastAt < CACHE_TTL) { 10945 return Promise.resolve(lastResult); 10946 } 10947 10948 if (inFlight) return inFlight; 10949 10950 inFlight = fetchCartData() 10951 .then((res) => { 10952 lastResult = res; 10953 lastAt = Date.now(); 10954 inFlight = null; 10955 return res; 10956 }) 10957 .catch((err) => { 10958 inFlight = null; 10959 throw err; 10960 }); 10961 10962 return inFlight; 10963 }; 10964 })(); 10965 10966 // Update cart counter pill with cart data 10967 function updateCartCountBadge(cart) { 10968 if (!cart) return; 10969 10970 const counterPills = document.querySelectorAll('.cart-title .pill'); 10971 counterPills.forEach((pill) => { 10972 pill.textContent = cart.item_count; 10973 // Hide pill when cart is empty 10974 pill.style.display = cart.item_count === 0 ? 'none' : 'inline-flex'; 10975 }); 10976 } 10977 10978 // Update shipping progress bar with cart data 10979 function updateShippingProgressBar(cart) { 10980 if (!cart) return; 10981 10982 const shippingBars = document.querySelectorAll('[data-shipping-bar]'); 10983 if (shippingBars.length === 0) return; 10984 10985 shippingBars.forEach((bar) => { 10986 const freeShippingLimit = parseFloat(bar.getAttribute('data-free-shipping-limit')); 10987 const messageBefore = bar.getAttribute('data-shipping-message-before'); 10988 const messageAfter = bar.getAttribute('data-shipping-message-after'); 10989 const messageElement = bar.parentElement.querySelector('[data-shipping-message]'); 10990 10991 if (!freeShippingLimit) return; 10992 10993 const cartTotal = cart.total_price; 10994 let progress = 0; 10995 let message = messageAfter; 10996 10997 if (cartTotal >= freeShippingLimit) { 10998 progress = 100; 10999 bar.classList.add('is-complete'); 11000 message = messageAfter; 11001 } else { 11002 progress = (cartTotal / freeShippingLimit) * 100; 11003 bar.classList.remove('is-complete'); 11004 11005 // Calculate remaining amount and format message 11006 const remaining = freeShippingLimit - cartTotal; 11007 const formattedRemaining = new Intl.NumberFormat('en-US', { 11008 style: 'currency', 11009 currency: cart.currency || 'USD', 11010 }).format(remaining / 100); 11011 11012 message = messageBefore.replace('[$]', formattedRemaining); 11013 } 11014 11015 // Update progress bar 11016 bar.style.setProperty('--progress', progress + '%'); 11017 11018 // Update message 11019 if (messageElement) { 11020 messageElement.textContent = message; 11021 } 11022 }); 11023 } 11024 11025 // Update all cart-related UI elements 11026 // Fast-path: if called with an event that includes a detail (cart-element 11027 // DOM or cart JSON) we use that to immediately update count + empty-state 11028 // to avoid flicker. We always start fetching /cart.js in parallel and use 11029 // that result for shipping progress and final summary height. 11030 async function updateCartUI(evt) { 11031 // Start authoritative fetch immediately so network call is in-flight 11032 const fetchPromise = window.fetchCartDataOnce(); 11033
11034 try { 11035 if (evt && evt.detail) { 11036 // Use event.detail only to decide empty-state immediately 11037 let derivedCount = null; 11038 11039 if (evt.detail instanceof HTMLElement) { 11040 const pill = evt.detail.querySelector('[data-cart-count]'); 11041 if (pill) { 11042 derivedCount = parseInt(pill.getAttribute('data-cart-count') || pill.textContent) || 0; 11043 } else { 11044 derivedCount = evt.detail.querySelectorAll('.cart--item').length; 11045 } 11046 } else if (typeof evt.detail === 'object' && evt.detail !== null && 'item_count' in evt.detail) { 11047 derivedCount = parseInt(evt.detail.item_count) || 0; 11048 } 11049 11050 if (derivedCount !== null) { 11051 // Immediate empty-state update from event payload to avoid flicker 11052 updateEmptyCartState({ item_count: derivedCount }); 11053 } 11054 11055 // When fetch completes, update count, shipping, and summary height 11056 try { 11057 const fetched = await fetchPromise; 11058 if (fetched) { 11059 updateCartCountBadge(fetched); 11060 updateShippingProgressBar(fetched); 11061 updateCartSummaryHeight(); 11062 } 11063 } catch (err) { 11064 // Silent error 11065 } 11066 11067 return; 11068 } 11069 } catch (e) { 11070 // fallthrough to fallback below 11071 } 11072 11073 // No event.detail: await fetch and update authoritative UI 11074 const cart = await fetchPromise; 11075 if (cart) { 11076 updateCartCountBadge(cart); 11077 updateShippingProgressBar(cart); 11078 updateEmptyCartState(cart); 11079 updateCartSummaryHeight(); 11080 } 11081 } 11082 11083 // Update cart summary height for drawer view 11084 function updateCartSummaryHeight() { 11085 const drawerCarts = document.querySelectorAll('.cart--root[data-view="drawer"]'); 11086 drawerCarts.forEach((cartRoot) => { 11087 const summary = cartRoot.querySelector('.cart--summary'); 11088 if (summary) { 11089 const height = summary.offsetHeight; 11090 cartRoot.style.setProperty('--summary-height', `${height}px`); 11091 } 11092 }); 11093 } 11094 11095 // Show/hide empty cart state based on cart items 11096 function updateEmptyCartState(cart) { 11097 const emptyStates = document.querySelectorAll('.cart-empty-state'); 11098 const cartBodies = document.querySelectorAll('.cart--body'); 11099 const cartFooters = document.querySelectorAll('.cart--footer'); 11100 11101 const isEmpty = !cart || cart.item_count === 0; 11102 11103 cartBodies.forEach((body) => { 11104 body.style.display = isEmpty ? 'none' : 'block'; 11105 }); 11106 11107 cartFooters.forEach((footer) => { 11108 footer.style.display = isEmpty ? 'none' : 'block'; 11109 }); 11110 11111 emptyStates.forEach((state) => { 11112 state.style.display = isEmpty ? 'flex' : 'none'; 11113 }); 11114 11115 // Also hide any cart notes wrappers in drawer view 11116 document 11117 .querySelectorAll( 11118 '.cart--wrapper > div:not(.cart--header):not(.cart-shipping):not(.cart--body):not(.cart-empty-state)' 11119 ) 11120 .forEach((el) => { 11121 if (el.textContent.trim() && el !== emptyStates[0]) { 11122 el.style.display = isEmpty ? 'none' : 'block'; 11123 } 11124 }); 11125 } 11126 11127 // Re-enable function to clear disabled state when cart updates 11128 function enableDeleteButtons() { 11129 document.querySelectorAll('.cart-line-item__remove.is-disabled').forEach((btn) => { 11130 btn.classList.remove('is-disabled'); 11131 }); 11132 } 11133 11134 // Listen for theme update to re-enable deletes 11135 window.addEventListener('theme:cart:updated', enableDeleteButtons); 11136 // Delete button click handler function 11137 function attachDeleteButtonListeners() { 11138 // Use event delegation: attach a single click handler to container 11139 if (attachDeleteButtonListeners._attached) return; 11140 11141 const container = document; 11142 container.addEventListener('click', function (e) { 11143 const btn = e.target.closest && e.target.closest('.cart-line-item__remove'); 11144 if (!btn) return; 11145 11146 const lineItem = btn.closest('.cart-line-item'); 11147 if (!lineItem) return; 11148 11149 // Disable all other delete buttons immediately to prevent double actions 11150 document.querySelectorAll('.cart-line-item__remove').forEach((other) => { 11151 if (other !== btn) { 11152 other.classList.add('is-disabled'); 11153 } 11154 }); 11155 11156 const quantityRemoveBtn = lineItem.querySelector('.quantity-selector--remove'); 11157 if (quantityRemoveBtn) { 11158 quantityRemoveBtn.click(); 11159 } 11160 }); 11161 11162 attachDeleteButtonListeners._attached = true; 11163 } 11164 11165 // Update all cart UI after cart updates 11166 window.addEventListener('theme:cart:updated', updateCartUI); 11167 11168 // Update button reference after cart updates 11169 window.addEventListener('theme:cart:updated', updateCheckoutButtonReference); 11170 11171 // Update summary height after cart updates 11172 window.addEventListener('theme:cart:updated', updateCartSummaryHeight); 11173 11174 // Initial setup 11175 updateCheckoutButtonReference(); 11176 attachDeleteButtonListeners(); 11177 updateCartSummaryHeight(); 11178 11179 // Observe .cart--summary for size changes caused by async content (e.g. Rebuy widget). 11180 // The fixed footer grows when Rebuy renders its carousel, but ResizeObserver on the 11181 // cart-element root never fires for fixed-position children, so --summary-height stays 11182 // stale and hides items 3+ behind the footer. Watching the summary element directly fixes this. 11183 document.querySelectorAll('.cart--root[data-view="drawer"]').forEach((cartRoot) => { 11184 const summary = cartRoot.querySelector('.cart--summary'); 11185 if (summary) { 11186 new ResizeObserver(() => { 11187 requestAnimationFrame(updateCartSummaryHeight); 11188 }).observe(summary); 11189 } 11190 }); 11191 11192 // Also update on window resize 11193 window.addEventListener('resize', updateCartSummaryHeight); 11194 }); 11195 11196 /** 11197 * Helper function to open the offer container for a specific cart line item 11198 * This function is called when the "Change" button is clicked 11199 */ 11200 function openOfferContainer(event) { 11201 // Get the button that was clicked (event.target will be the button) 11202 const button = event ? event.target : event; 11203 11204 // Find the closest parent container that has both elements 11205 const purchaseContainer = button ? button.closest('.cart-line-item__purchase') : null; 11206 11207 if (!purchaseContainer) { 11208 // Fallback: if no event, find the first instance 11209 const firstPurchaseContainer = document.querySelector('.cart-line-item__purchase'); 11210 if (firstPurchaseContainer) {
11211 const selectedOffer = firstPurchaseContainer.querySelector('.og-selected-offer'); 11212 const offerContainer = firstPurchaseContainer.querySelector('.og-offer-container'); 11213 11214 if (selectedOffer) selectedOffer.style.display = 'none'; 11215 if (offerContainer) offerContainer.style.display = 'block'; 11216 } 11217 return; 11218 } 11219 11220 // Find the og-selected-offer and og-offer-container within this purchase container 11221 const selectedOffer = purchaseContainer.querySelector('.og-selected-offer'); 11222 const offerContainer = purchaseContainer.querySelector('.og-offer-container'); 11223 11224 // Hide the selected offer and show the offer container 11225 if (selectedOffer) { 11226 selectedOffer.style.display = 'none'; 11227 } 11228 11229 if (offerContainer) { 11230 offerContainer.style.display = 'block'; 11231 } 11232 11233 // Trigger payment button layout recalculation after offer container opens 11234 if (window.recalculatePaymentButtons) { 11235 window.recalculatePaymentButtons(); 11236 } 11237 } 11238 11239 /** 11240 * Global window function to handle when the offer save button is clicked 11241 * This hides all offer containers and shows the selected offer for the specific item 11242 */ 11243 window.offerSaveClicked = function (event) { 11244 // Get the button or element that triggered the save 11245 const target = event ? event.target : event; 11246 11247 // Find the closest cart line item purchase container 11248 const purchaseContainer = target ? target.closest('.cart-line-item__purchase') : null; 11249 11250 if (!purchaseContainer) { 11251 // Fallback: hide all offer containers and show all selected offers 11252 const allOfferContainers = document.querySelectorAll('.og-offer-container'); 11253 const allSelectedOffers = document.querySelectorAll('.og-selected-offer'); 11254 11255 allOfferContainers.forEach((container) => { 11256 container.style.display = 'none'; 11257 }); 11258 11259 allSelectedOffers.forEach((offer) => { 11260 offer.style.display = 'block'; 11261 }); 11262 return; 11263 } 11264 11265 // Hide the offer container and show the selected offer for this specific item 11266 const offerContainer = purchaseContainer.querySelector('.og-offer-container'); 11267 const selectedOffer = purchaseContainer.querySelector('.og-selected-offer'); 11268 11269 if (offerContainer) { 11270 offerContainer.style.display = 'none'; 11271 } 11272 11273 if (selectedOffer) { 11274 selectedOffer.style.display = 'block'; 11275 } 11276 }; 11277 11278 // Also make openOfferContainer available on window for inline onclick handlers 11279 window.openOfferContainer = openOfferContainer; 11280 11281 document.addEventListener('og-cart-updated', (ev) => { 11282 ev.preventDefault(); 11283 window.trigger('theme:cart:refresh'); 11284 }); 11285</script>
11285<script> 11286 (function() { 11287 'use strict'; 11288 11289 var LOGIN_URL = "https:\/\/club.olay.com?locale=en\u0026region_country=US\u0026buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkxNTE5NTE1LCJuYmYiOjE3OTA5MTQ3MTV9.QYr7KKP3LArcNTw7g_W-onL_3FUOjTTlJ5le3D270bU"; 11290 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"; 11291 11292 /** 11293 * Check if cart has subscription items via Cart API 11294 * Returns a Promise resolving to boolean 11295 */ 11296 function cartHasSubscription(cartData) { 11297 if (!cartData || !cartData.items) return false; 11298 return cartData.items.some(function(item) { 11299 return item.selling_plan_allocation != null; 11300 }); 11301 } 11302 11303 /** 11304 * Build the guest subscription block HTML 11305 */ 11306 function buildGuestBlockHTML() { 11307 return '<div class="cart-guest-subscription-block" data-guest-subscription-block>' + 11308 '<div class="cart-guest-subscription-icon">' + 11309 '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' + 11310 '<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"/>' + 11311 '<path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' + 11312 '</svg>' + 11313 '</div>' + 11314 '<div class="cart-guest-subscription-message" data-item="paragraph">' + 11315 GUEST_MESSAGE + 11316 '</div>' + 11317 '<a href="' + LOGIN_URL + '" class="cart-guest-subscription-login-btn">' + 11318 'Log in to continue' + 11319 '</a>' + 11320 '</div>'; 11321 } 11322 11323 /** 11324 * Build checkout button HTML (restored when subscription items are removed) 11325 */ 11326 function buildCheckoutHTML() { 11327 return '<button type="submit" name="checkout" class="cart--button cart-checkout-button">' + 11328 '<span>Secure checkout</span>' + 11329 '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' + 11330 '<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"/>' + 11331 '</svg>' + 11332 '</button>'; 11333 } 11334 11335 /** 11336 * Toggle cart footer between guest block and checkout button 11337 * Called on every cart update (add/remove/change subscription) 11338 */ 11339 function updateGuestSubscriptionBlock(hasSubscription) { 11340 var summaries = document.querySelectorAll('.cart--summary.cart-footer-new'); 11341 11342 summaries.forEach(function(summary) { 11343 var existingBlock = summary.querySelector('[data-guest-subscription-block]'); 11344 var checkoutBtn = summary.querySelector('.cart--button.cart-checkout-button'); 11345 var separator = summary.querySelector('.cart-separator'); 11346 var expressCheckout = summary.querySelector('.cart-payment-buttons'); 11347 11348 if (hasSubscription) { 11349 // Hide checkout button and express checkout 11350 if (checkoutBtn) checkoutBtn.style.display = 'none'; 11351 if (separator) separator.style.display = 'none'; 11352 if (expressCheckout) expressCheckout.style.display = 'none'; 11353 11354 // Show or insert guest block 11355 if (existingBlock) { 11356 existingBlock.style.display = ''; 11357 } else { 11358 // Insert guest block after total section 11359 var totalSection = summary.querySelector('.cart-total-section'); 11360 if (totalSection) { 11361 totalSection.insertAdjacentHTML('afterend', buildGuestBlockHTML()); 11362 } else { 11363 summary.insertAdjacentHTML('beforeend', buildGuestBlockHTML()); 11364 } 11365 } 11366 } else { 11367 // Remove guest block 11368 if (existingBlock) existingBlock.style.display = 'none'; 11369 11370 // Show checkout button (or re-create if it was server-rendered without it) 11371 if (checkoutBtn) { 11372 checkoutBtn.style.display = ''; 11373 } else if (!summary.querySelector('.cart--button.cart-checkout-button')) { 11374 var totalSection = summary.querySelector('.cart-total-section'); 11375 if (totalSection) { 11376 totalSection.insertAdjacentHTML('afterend', buildCheckoutHTML()); 11377 } 11378 } 11379 11380 if (separator) separator.style.display = ''; 11381 if (expressCheckout) expressCheckout.style.display = ''; 11382 } 11383 }); 11384 } 11385 11386 /** 11387 * Fetch cart and toggle UI accordingly 11388 */ 11389 async function checkAndToggle() {
11390 try { 11391 var cartData = window.fetchCartDataOnce 11392 ? await window.fetchCartDataOnce(true) 11393 : await fetch('/cart.js').then(function(r) { return r.json(); }); 11394 var hasSub = cartHasSubscription(cartData); 11395 updateGuestSubscriptionBlock(hasSub); 11396 window.__guestHasSubscription = hasSub; 11397 } catch (e) { 11398 // Silent error 11399 } 11400 } 11401 11402 // Listen for cart updates (theme fires this on any cart change) 11403 window.addEventListener('theme:cart:updated', function() { 11404 // Small delay to let /cart.js cache invalidate 11405 setTimeout(checkAndToggle, 300); 11406 }); 11407 11408 // Listen for OrderGroove-specific cart update events 11409 document.addEventListener('og-cart-updated', function() { 11410 setTimeout(checkAndToggle, 500); 11411 }); 11412 11413 // Initial check on DOM ready 11414 if (document.readyState === 'loading') { 11415 document.addEventListener('DOMContentLoaded', checkAndToggle); 11416 } else { 11417 checkAndToggle(); 11418 } 11419 11420 /** 11421 * Checkout URL protection: 11422 * Block direct navigation to /checkout for guest users with subscription items 11423 */ 11424 function blockCheckoutNavigation() { 11425 // Intercept form submissions to /checkout 11426 document.addEventListener('submit', function(e) { 11427 var form = e.target; 11428 if (!form || form.tagName !== 'FORM') return; 11429 11430 var action = form.getAttribute('action') || ''; 11431 var hasCheckoutBtn = form.querySelector('[name="checkout"]'); 11432 11433 if ((action.indexOf('/checkout') !== -1 || hasCheckoutBtn) && window.__guestHasSubscription) { 11434 e.preventDefault(); 11435 e.stopPropagation(); 11436 alert('Please log in to your account to purchase subscription products.'); 11437 window.location.href = LOGIN_URL; 11438 } 11439 }, true); 11440 11441 // Intercept direct /checkout URL navigation 11442 var origPushState = history.pushState; 11443 var origReplaceState = history.replaceState; 11444 11445 function checkUrlNavigation(url) { 11446 if (url && typeof url === 'string' && url.indexOf('/checkout') !== -1 && window.__guestHasSubscription) { 11447 window.location.href = LOGIN_URL; 11448 return true; 11449 } 11450 return false; 11451 } 11452 11453 history.pushState = function() { 11454 if (checkUrlNavigation(arguments[2])) return; 11455 return origPushState.apply(this, arguments); 11456 }; 11457 11458 history.replaceState = function() { 11459 if (checkUrlNavigation(arguments[2])) return; 11460 return origReplaceState.apply(this, arguments); 11461 }; 11462 11463 // Intercept link clicks to /checkout 11464 document.addEventListener('click', function(e) { 11465 var link = e.target.closest ? e.target.closest('a[href]') : null; 11466 if (!link) return; 11467 11468 var href = link.getAttribute('href') || ''; 11469 if (href.indexOf('/checkout') !== -1 && window.__guestHasSubscription) { 11470 e.preventDefault(); 11471 e.stopPropagation(); 11472 window.location.href = LOGIN_URL; 11473 } 11474 }, true); 11475 } 11476 11477 blockCheckoutNavigation(); 11478 })(); 11479</script>
vendor: 1 bytes, line 11479
11479
11480<script> 11481 (function() { 11482 var checkoutPath = '/checkout'; 11483 var loginUrl = 'https://club.olay.com?locale=en®ion_country=US&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkxNTE5NTE1LCJuYmYiOjE3OTA5MTQ3MTV9.QYr7KKP3LArcNTw7g_W-onL_3FUOjTTlJ5le3D270bU'; 11484 11485 // Only intercept /checkout paths 11486 if (window.location.pathname.indexOf(checkoutPath) !== 0) return; 11487 11488 // Hide page immediately to prevent flash 11489 document.documentElement.style.visibility = 'hidden'; 11490 11491 // Check cart for subscription items 11492 fetch('/cart.js', { 11493 method: 'GET', 11494 headers: { 'Content-Type': 'application/json' } 11495 }) 11496 .then(function(r) { return r.json(); }) 11497 .then(function(cart) { 11498 var hasSubscription = cart.items && cart.items.some(function(item) { 11499 return item.selling_plan_allocation != null; 11500 }); 11501 11502 if (hasSubscription) { 11503 // Redirect to homepage with cart drawer open 11504 var dest = new URL('/', window.location.origin); 11505 dest.searchParams.set('open_cart', '1'); 11506 dest.searchParams.set('guest_sub_block', '1'); 11507 window.location.replace(dest.toString()); 11508 } else { 11509 // No subscription items, allow checkout 11510 document.documentElement.style.visibility = ''; 11511 } 11512 }) 11513 .catch(function() { 11514 // On error, allow checkout to proceed 11515 document.documentElement.style.visibility = ''; 11516 }); 11517 })(); 11518 </script>
11518</div></div> 11519 11520 <div 11521 class="drawer--side" 11522 data-side="left" 11523 aria-expanded="false" 11524 > 11525 <div class="drawer--container" data-view="y-menu"><!-- snippets/mobile-nav.liquid --><div class="mobile-nav"> 11526 <ul class="mobile-nav--utilities" data-mq="small"> 11527 <li class="mobile-nav--search"></li> 11528 <li class="mobile-nav--account"></li> 11529 </ul> 11530 11531 <div class="mobile-nav--header"> 11532 <button 11533 class="mobile-nav--close" 11534 data-drawer-close 11535 aria-label="Toggle drawer" 11536 ><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"> 11537 <title id="icon-cross-title">Close</title> 11538 <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" /> 11539 </svg></button> 11540<a 11541 class="small-logo--root" 11542 href="/" 11543 title="OLAY" 11544 itemscope 11545 itemprop="url" 11546 itemtype="https://schema.org/Organization" 11547> 11548 <div class="mobile-nav--logo" data-mobile-nav-logo> 11549 <span class="mobile-nav--logo-text">OLAY</span> 11550 </div> 11551 </a> 11552 <div class="mobile-nav--actions"> 11553 <button 11554 class="mobile-nav--search" 11555 data-drawer-open="top" 11556 data-drawer-view="search" 11557 aria-label="search on olay.com" 11558 title="search on olay.com" 11559 ><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"> 11560 <title id="icon-search-title">Search</title> 11561 <mask id="mask0_7204_6974" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-5" y="-4" width="28" height="27"> 11562 <rect x="-4.01157" y="-3.96827" width="26.9158" height="26.9158" fill="#D9D9D9"/> 11563 </mask> 11564 <g mask="url(#mask0_7204_6974)"> 11565 <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"/> 11566 </g> 11567 </svg></button><a 11568 class="mobile-nav--account" 11569 href="https://club.olay.com?locale=en®ion_country=US&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkxNTE5NTE1LCJuYmYiOjE3OTA5MTQ3MTV9.QYr7KKP3LArcNTw7g_W-onL_3FUOjTTlJ5le3D270bU" 11570 aria-label="login to your ClubOlay account" 11571 title="login to your ClubOlay account" 11572 > 11573 11574<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"> 11575 <title id="icon-account-title">login to your ClubOlay account</title> 11576 <mask id="mask0_7204_6977" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-3" y="-3" width="26" height="26"> 11577 <rect x="-3" y="-3" width="26" height="26" fill="#D9D9D9"/> 11578 </mask> 11579 <g mask="url(#mask0_7204_6977)"> 11580 <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
1158013.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"/> 11581 <circle cx="18" cy="18" r="5" fill="#C11E33"/> 11582 </g> 11583 </svg> 11584 </a><a 11585 class="mobile-nav--cart" 11586 11587 data-drawer-open="right" 11588 data-drawer-view="cart-drawer" 11589 aria-haspopup="menu" 11590 href="#" 11591 11592 aria-label="items in your cart" 11593 title="items in your cart" 11594 data-cart-count="0" 11595 ><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"> 11596 <title id="icon-bag-title">Shopping Bag</title> 11597 <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"/> 11598 </svg></a> 11599 </div> 11600 </div> 11601 11602 <nav class="mobile-nav--menu" data-item="nav-text"></nav> 11603 11604 <div class="mobile-nav--footer" data-mq="small"> 11605 <div class="mobile-nav--social-icons"></div> 11606 11607 <div class="mobile-nav--localization"></div> 11608 </div> 11609</div> 11610 11611 11612
11613<script> 11614 // Copy logo from header to mobile nav drawer 11615 (function() { 11616 function initMobileNavLogo() { 11617 const mobileNavLogo = document.querySelector('[data-mobile-nav-logo]'); 11618 if (!mobileNavLogo) return; 11619 11620 // Check if logo already initialized 11621 if (mobileNavLogo.hasAttribute('data-logo-initialized')) return; 11622 11623 // Find the mobile logo from header (prioritize mobile-logo, fallback to desktop logo) 11624 const headerMobileLogo = document.querySelector('.header--mobile-logo img'); 11625 const headerDesktopLogo = document.querySelector('.header--desktop-logo img'); 11626 const logoToClone = headerMobileLogo || headerDesktopLogo; 11627 11628 if (logoToClone) { 11629 // Clone the logo 11630 const clonedLogo = logoToClone.cloneNode(true); 11631 clonedLogo.classList.add('mobile-nav--logo-image'); 11632 11633 // Clear existing content and append cloned logo 11634 mobileNavLogo.innerHTML = ''; 11635 mobileNavLogo.appendChild(clonedLogo); 11636 11637 // Mark as initialized 11638 mobileNavLogo.setAttribute('data-logo-initialized', 'true'); 11639 } 11640 } 11641 11642 // Initialize on page load 11643 if (document.readyState === 'loading') { 11644 document.addEventListener('DOMContentLoaded', initMobileNavLogo); 11645 } else { 11646 initMobileNavLogo(); 11647 } 11648 11649 // Re-initialize when drawer opens (in case header logo changes or loads late) 11650 document.addEventListener('click', function(e) { 11651 if (e.target.closest('[data-drawer-open="left"]')) { 11652 setTimeout(initMobileNavLogo, 50); 11653 } 11654 }); 11655 11656 })(); 11657 11658 // Handle mobile nav account click: trigger header account click and close mobile nav 11659 (function() { 11660 function handleMobileAccountClick() { 11661 // Target the account link in mobile-nav--actions, not the empty li in utilities 11662 const mobileNavAccount = document.querySelector('.mobile-nav--actions .mobile-nav--account'); 11663 const headerAccount = document.querySelector('.header--account'); 11664 11665 if (!mobileNavAccount || !headerAccount) return; 11666 11667 mobileNavAccount.addEventListener('click', function(e) { 11668 e.preventDefault(); 11669 e.stopPropagation(); 11670 11671 // Close the mobile nav drawer first 11672 const closeButton = document.querySelector('.mobile-nav--close[data-drawer-close]'); 11673 if (closeButton) { 11674 closeButton.click(); 11675 } else if (typeof Drawer !== 'undefined' && Drawer.close) { 11676 Drawer.close(); 11677 } 11678 11679 // Trigger header account click after drawer starts closing 11680 setTimeout(function() { 11681 headerAccount.click(); 11682 }, 100); 11683 }); 11684 } 11685 11686 // Initialize on page load 11687 if (document.readyState === 'loading') { 11688 document.addEventListener('DOMContentLoaded', handleMobileAccountClick); 11689 } else { 11690 handleMobileAccountClick(); 11691 } 11692 })(); 11693</script>
11693</div> 11694 </div> 11695 11696 11697 <div class="drawer--focus-trigger" tabindex="0"></div> 11698</drawer-element><!-- snippets/feedback-bar.liquid --><feedback-bar-element 11699 class="feedback-bar--root" 11700 data-transition-item="viewport" 11701 data-transition-type="slide-in" 11702 data-transition-trigger="custom" 11703 aria-hidden="true" 11704> 11705 <div 11706 id="feedback" 11707 class="feedback-bar--message" 11708 data-background-color="dark" 11709 data-translucent="true" 11710 data-text-color="white" 11711 data-item="nav-text" 11712 ></div> 11713
11713<script type="application/json"> 11714 { 11715 "copied": "Link copied to clipboard", 11716 "comment": "Thank you, your comment has been posted.", 11717 "comment--moderated": "Thanks for your comment. It will have to be approved by the blog owner first before showing up.", 11718 "contact-form": "Thanks for contacting us! We'll get back to you as soon as possible.", 11719 "email-invalid": "Please enter a valid email address", 11720 "newsletter": "Thanks for signing up!", 11721 "product-form": "We'll notify you when this becomes available", 11722 "product--no-items": "The max number of items have already been added", 11723 "product--one-item": "There is only one item left to add to the cart", 11724 "product--n-items": "There are only [num_items] items left to add to the cart" 11725 } 11726 </script>
11726 11727</feedback-bar-element> 11728 11729<svg class="icon--root icon--defs" data-invertible="true"> 11730 <defs> 11731 <radialGradient id="instagram-hover" r="150%" cx="30%" cy="107%"> 11732 <stop offset="0%" stop-color="#fdf497" /> 11733 <stop offset="5%" stop-color="#fdf497" /> 11734 <stop offset="45%" stop-color="#fd5949" /> 11735 <stop offset="60%" stop-color="#d6249f" /> 11736 <stop offset="90%" stop-color="#285aeb" /> 11737 </radialGradient> 11738 <symbol id="loading-spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 11739 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor"> 11740 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.8391608391608392s" repeatCount="indefinite" /> 11741 </rect> 11742 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(27.692 50 50)"> 11743 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.7692307692307692s" repeatCount="indefinite" /> 11744 </rect> 11745 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(55.385 50 50)"> 11746 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.6993006993006993s" repeatCount="indefinite" /> 11747 </rect> 11748 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(83.077 50 50)"> 11749 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.6293706293706294s" repeatCount="indefinite" /> 11750 </rect> 11751 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(110.77 50 50)"> 11752 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.5594405594405594s" repeatCount="indefinite" /> 11753 </rect> 11754 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(138.462 50 50)"> 11755 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.4895104895104895s" repeatCount="indefinite" /> 11756 </rect> 11757 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(166.154 50 50)"> 11758 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.4195804195804196s" repeatCount="indefinite" /> 11759 </rect> 11760 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(193.846 50 50)"> 11761 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.34965034965034963s" repeatCount="indefinite" /> 11762 </rect> 11763 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(221.538 50 50)"> 11764 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.2797202797202797s" repeatCount="indefinite" /> 11765 </rect> 11766 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(249.23 50 50)"> 11767 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.2097902097902098s" repeatCount="indefinite" /> 11768 </rect> 11769 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(276.923 50 50)"> 11770 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.13986013986013984s" repeatCount="indefinite" /> 11771 </rect> 11772 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(304.615 50 50)"> 11773 <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.9090909090909091s" begin="-0.06993006993006992s" repeatCount="indefinite" /> 11774 </rect> 11775 <rect x="48" y="24.5" rx="0" ry="0" width="4" height="13" fill="currentColor" transform="rotate(332.308 50 50)"> 11776 <animate attributeName="opacity" values="1;0" keyTimes="0;
117761" dur="0.9090909090909091s" begin="0s" repeatCount="indefinite" /> 11777 </rect> 11778 </symbol> 11779 <filter id="glow-text" color-interpolation-filters="sRGB" x="-50%" y="-200%" width="200%" height="500%"> 11780 <feGaussianBlur in="SourceGraphic" data-target-blur="4" stdDeviation="4" result="blur4" /> 11781 <feGaussianBlur in="SourceGraphic" data-target-blur="19" stdDeviation="19" result="blur19" /> 11782 <feGaussianBlur in="SourceGraphic" data-target-blur="9" stdDeviation="9" result="blur9" /> 11783 <feGaussianBlur in="SourceGraphic" data-target-blur="30" stdDeviation="30" result="blur30" /> 11784 <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" /> 11785 <feOffset in="color-0-blur" result="layer-0-offsetted" data-target-offset-y="0" /> 11786 <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" /> 11787 <feOffset in="color-1-blur" result="layer-1-offsetted" dy="2" data-target-offset-y="2" /> 11788 <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" /> 11789 <feOffset in="color-2-blur" result="layer-2-offsetted" dy="2" data-target-offset-y="2" /> 11790 <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" /> 11791 <feOffset in="color-3-blur" result="layer-3-offsetted" dy="2" data-target-offset-y="2" /> 11792 <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" /> 11793 <feOffset in="color-4-blur" result="layer-4-offsetted" dy="16" data-target-offset-y="16" /> 11794 <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" /> 11795 <feOffset in="color-5-blur" result="layer-5-offsetted" dy="64" data-target-offset-y="64" /> 11796 <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" /> 11797 <feOffset in="color-6-blur" result="layer-6-offsetted" dy="64" data-target-offset-y="64" /> 11798 <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" /> 11799 <feOffset in="color-7-blur" result="layer-7-offsetted" dy="64" data-target-offset-y="64" /> 11800 <feMerge> 11801 <feMergeNode in="layer-0-offsetted" /> 11802 <feMergeNode in="layer-1-offsetted" /> 11803 <feMergeNode in="layer-2-offsetted" /> 11804 <feMergeNode in="layer-3-offsetted" /> 11805 <feMergeNode in="layer-4-offsetted" /> 11806 <feMergeNode in="layer-5-offsetted" /> 11807 <feMergeNode in="layer-6-offsetted" /> 11808 <feMergeNode in="layer-7-offsetted" /> 11809 <feMergeNode in="layer-0-offsetted" /> 11810 <feMergeNode in="SourceGraphic" /> 11811 </feMerge> 11812 </filter> 11813 </defs> 11814 </svg></div> 11815 11816 11817 11818
11818<script> 11819 (function() { 11820 var subscriptionPath = '/apps/subscriptions/manage'; 11821 var loginUrl = 'https://club.olay.com?locale=en®ion_country=US&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ4MzZuZ24tbXMubXlzaG9waWZ5LmNvbSIsImZsYWdzIjpbXSwiZXhwIjoxNzkxNTE5NTE1LCJuYmYiOjE3OTA5MTQ3MTV9.QYr7KKP3LArcNTw7g_W-onL_3FUOjTTlJ5le3D270bU'; 11822 11823 // 1. Check if user landed directly on subscription page 11824 if (window.location.pathname === subscriptionPath) { 11825 // Hide content immediately to prevent error flash 11826 var mainContent = document.querySelector('.layout--main-content'); 11827 if (mainContent) { 11828 mainContent.style.display = 'none'; 11829 mainContent.style.visibility = 'hidden'; 11830 } 11831 // Use replace() to avoid adding to browser history - faster redirect 11832 window.location.replace(loginUrl + '?return_url=' + encodeURIComponent(subscriptionPath)); 11833 return; 11834 } 11835 11836 // 2. Handler for subscription link clicks 11837 function handleSubscriptionClick(e) { 11838 e.preventDefault(); 11839 window.location.href = loginUrl + '?return_url=' + encodeURIComponent(subscriptionPath); 11840 } 11841 11842 // 3. Attach listeners only to subscription links 11843 function attachSubscriptionListeners() { 11844 var links = document.querySelectorAll('a[href*="' + subscriptionPath + '"]'); 11845 links.forEach(function(link) { 11846 if (!link.dataset.subscriptionProtected) { 11847 link.addEventListener('click', handleSubscriptionClick); 11848 link.dataset.subscriptionProtected = 'true'; 11849 } 11850 }); 11851 } 11852 11853 // Attach listeners when DOM is ready 11854 if (document.readyState === 'loading') { 11855 document.addEventListener('DOMContentLoaded', attachSubscriptionListeners); 11856 } else { 11857 attachSubscriptionListeners(); 11858 } 11859 11860 // 4. Watch for dynamically added links (e.g., via AJAX, drawers) 11861 var observer = new MutationObserver(function(mutations) { 11862 var shouldAttach = false; 11863 mutations.forEach(function(mutation) { 11864 if (mutation.addedNodes.length) { 11865 shouldAttach = true; 11866 } 11867 }); 11868 if (shouldAttach) { 11869 attachSubscriptionListeners(); 11870 } 11871 }); 11872 11873 // Start observing after DOM is ready 11874 if (document.readyState === 'loading') { 11875 document.addEventListener('DOMContentLoaded', function() { 11876 observer.observe(document.body, { childList: true, subtree: true }); 11877 }); 11878 } else { 11879 observer.observe(document.body, { childList: true, subtree: true }); 11880 } 11881 })(); 11882 </script>
11882 11883 11884 <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> 11885<div id="shopify-block-AcnNqaVIzdnNGdEE3a__2640576625794464016" class="shopify-block shopify-app-block"> 11886 11887<!-- BEGIN app snippet: spotlight-drawer-app-embed-body --> 11888<style> 11889 .yotpo-widget-loyalty-spotlight { 11890 --loyalty-heading-font-fallback-families: sans-serif; 11891 --loyalty-body-font-fallback-families: sans-serif; 11892 } 11893</style> 11894
11895<script> 11896 (function(window) { 11897 window.yotpoWidgetsContainer = window.yotpoWidgetsContainer || {}; 11898 window.yotpoWidgetsContainer.shopifySpotlightDrawerCustomization = { 11899 loyaltyName: "My Loyalty Program", 11900 greetingText: "\u003cp\u003eHey ##name##,\u003cbr\u003eCheck out your perks\u003c\/p\u003e", 11901 pointsSectionLabel: "You Earned", 11902 rewardsSectionTitle: "Your Rewards", 11903 applyRewardButtonText: "Apply to cart", 11904 applyRewardSuccessMessage: "Reward applied. Refresh page to see it.", 11905 removeRewardButtonText: "Remove from cart", 11906 backgroundColor: "#ffffff", 11907 pointsBgColor: "#D6D6D6", 11908 buttonBgColor: "#262626", 11909 buttonTextColor: "#ffffff", 11910 headingFontNameAndUrl: "Inter@600|\/\/www.olay.com\/cdn\/fonts\/inter\/inter_n6.771af0474a71b3797eb38f3487d6fb79d43b6877.woff2", 11911 headingColor: "#262626", 11912 bodyFontNameAndUrl: "Inter@400|\/\/www.olay.com\/cdn\/fonts\/inter\/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2", 11913 bodyColor: "#4D4D4D", 11914 showPointsExpiry: true, 11915 expiryDateFormat: "long", 11916 expiryLabel: "exp.", 11917 pointsLabel: "points", 11918 showPointsWorth: true, 11919 pointsWorthLabel: "Worth", 11920 tierSuffix: "Member", 11921 directRewardsLabel: "Free", 11922 daysLeftText: "##days## day(s) left", 11923 rewardExpiryColor: "#C93400", 11924 cartEmptyMessage: "Add items to cart first", 11925 collectionRequirementText: "Collection items only", 11926 missingCollectionItemMessage: "No collection items in your cart.", 11927 cartRequirementText: "Requires ##value## in cart", 11928 itemRequirementText: "Requires item in cart", 11929 pointsRequirementText: "Requires ##points## more pts", 11930 rewardStackingText: "Can't combine with applied rewards", 11931 signupEnabled: true, 11932 nonMemberPreview: false, 11933 signupHeading: "Start earning rewards today.", 11934 signupConsentText: "\u003cp\u003eBy joining you agree to our Terms \u0026 Conditions.\u003c\/p\u003e", 11935 signupButtonText: "Join", 11936 signupSuccessMessage: "You're in! Start exploring your rewards." 11937}; 11938 })(window); 11939</script>
11939 11940 11941<!-- END app snippet --> 11942 11943 11944
11945<script> 11946 document.dispatchEvent(new CustomEvent('yotpo-loyalty-spotlight-customizations-loaded')); 11947</script>
11947</div><div id="shopify-block-AQVRUbEQvdXlid0dWQ__11735689235857492391" class="shopify-block shopify-app-block"> 11948 11949<style> 11950 :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);
11950display: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));
11950display: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}
11950.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)}}
11950.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}} 11951</style> 11952 11953 11954 11955<div class="algolia-config-money-format" style="display: none;">${{amount}}</div> 11956 11957<!-- BEGIN app snippet: algolia_config -->
11957<script> 11958 window.algoliaShopify = window.algoliaShopify || {}; 11959 11960 window.algoliaShopify.config = window.algoliaShopify.config || {}; 11961 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"}; 11962 11963 11964 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"}}]; 11965 11966 11967 11968 11969 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}
11969,{"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}]; 11970 11971 11972 11973 11974 11975 11976 window.algoliaShopify.config.collection_sort_orders = null 11977 11978 11979 11980 11981 window.algoliaShopify.config.collection_facets = null 11982 11983</script>
11983 11984<!-- END app snippet --> 11985<!-- BEGIN app snippet: algolia_config_markets --> 11986 11987
11988<script> 11989 window.algoliaShopify = window.algoliaShopify || {}; 11990 window.algoliaShopify.shopify = window.algoliaShopify.shopify || {} 11991 window.algoliaShopify.shopify.routes = window.algoliaShopify.shopify.routes || {}; 11992 11993 window.algoliaShopify.shopify.routes.search_url = window.algoliaShopify.shopify.routes.search_url || "/search"; 11994 window.algoliaShopify.shopify.market = window.algoliaShopify.shopify.market || { 11995 "id": 108953501739, 11996 "language": {"shop_locale":{"locale":"en","enabled":true,"primary":true,"published":true}}, 11997 "currency": null, 11998 "multicurrency_default_format": "USD:${{amount}}", 11999 } 12000 12001 window.algoliaShopify.shopify.market.translations = window.algoliaShopify.shopify.market.translations || { 12002 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}], 12003 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"}}], 12004 addToCart: "Add to cart", 12005 allProducts: "See all products ", 12006 articles: "Articles", 12007 by: "by", 12008 changeInput: "changing your input", 12009 clear: "Clear", 12010 clearAll: "Clear all", 12011 clearFilters: "clearing the filters", 12012 close: "Close search", 12013 collections: "Collections", 12014 in: "in", 12015 matching: "matching", 12016 noResultFor: "No results for ", 12017 noResultFound: "No result found", 12018 oneResultFound: "1 result found", 12019 or: "or", 12020 outOf: "out of", 12021 outOfStock: "Out of stock", 12022 pages: "Pages", 12023 products: "Products", 12024 relevance: "Relevance", 12025 resultsFound: "results found", 12026 search: "Current search", 12027 searchForProduct: "Search for products", 12028 searchTitle: "Search result", 12029 selectedFilter: "Selected filters", 12030 showLess: "Show less", 12031 showMore: "Show more", 12032 showFilters: "Show filters", 12033 sortBy: "Sorted by", 12034 suggestions: "Suggestions", 12035 taxFree: "Tax free", 12036 try: "Try", 12037 } 12038</script>
12038 12039<!-- END app snippet --> 12040<!-- BEGIN app snippet: algolia_config_b2b -->
12040<script> 12041 window.algoliaShopify = window.algoliaShopify || {}; 12042 window.algoliaShopify.b2b = window.algoliaShopify.b2b || {}; 12043 12044 12045 window.algoliaShopify.b2b.is_b2b_customer = false; 12046 12047</script>
12047 12048<!-- END app snippet --> 12049 12050 12051</div><div id="shopify-block-AeWtjZE1LT2Irb3pva__7079518687644006178" class="shopify-block shopify-app-block">
12051<script> 12052 (function () { 12053 const cartAttributes = {}; 12054 12055 // Helper function to retrieve the UTM from Url 12056 function getUTMFromUrl() { 12057 const url_string = window.location.href; 12058 const url = new URL(url_string); 12059 12060 const utm_id = url.searchParams.get("utm_id"); 12061 const utm_source = url.searchParams.get("utm_source"); 12062 const utm_medium = url.searchParams.get("utm_medium"); 12063 const utm_campaign = url.searchParams.get("utm_campaign"); 12064 const utm_term = url.searchParams.get("utm_term"); 12065 const ref = url.searchParams.get("ref"); 12066 12067 if (!utm_id && !utm_source && !utm_medium && !utm_campaign && !ref) { 12068 return null; 12069 } 12070 12071 let utmParameters = {}; 12072 12073 if (utm_id) { 12074 utmParameters.utm_id = utm_id; 12075 } 12076 if (utm_source) { 12077 utmParameters.utm_source = utm_source; 12078 } 12079 if (utm_medium) { 12080 utmParameters.utm_medium = utm_medium; 12081 } 12082 if (utm_campaign) { 12083 utmParameters.utm_campaign = utm_campaign; 12084 } 12085 if (utm_term) { 12086 utmParameters.utm_term = utm_term; 12087 } 12088 if (ref) { 12089 utmParameters.ref = ref; 12090 } 12091 12092 12093 return Object.keys(utmParameters).length === 0 12094 ? null 12095 : utmParameters; 12096 } 12097 12098 // Helper function to retrieve the UTM from Cookie 12099 function getUTMAttributes() { 12100 const urlUtmParams = getUTMFromUrl(); 12101 12102 if (urlUtmParams) { 12103 return urlUtmParams; 12104 } 12105 12106 // No longer reading from deprecated Shopify cookies 12107 return undefined; 12108 } 12109 12110 function saveUtmParameters() { 12111 const utmParams = getUTMAttributes(); 12112 if (utmParams) { 12113 const cartHasUtmAttributes = Object.keys(cartAttributes).find(attributeKey => attributeKey.startsWith("utm_") || attributeKey === "ref"); 12114 if (cartHasUtmAttributes) { 12115 // Don't call API if it already contains our UTM parameters 12116 return; 12117 } 12118 12119 // Handle both Shopify.routes.root and routes.root_url for better compatibility 12120 var rootUrl = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) 12121 || (window.routes && window.routes.root_url) 12122 || '/'; 12123 12124 var updateCart = fetch(rootUrl + 'cart/update.js', 12125 { 12126 headers: { 12127 'Content-Type': 'application/json', 12128 }, 12129 method: "POST", 12130 body: JSON.stringify({ 12131 attributes: { 12132 ...utmParams 12133 }, 12134 }) 12135 }) 12136 .then(response => response.json()) 12137 .then(data => { 12138 return data 12139 }); 12140 } 12141 } 12142 12143 saveUtmParameters(); 12144 })(); 12145</script>
12145 12146 12147 12148 12149 12150</div>
12150<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
12150 12151</body> 12152</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.