.elementor-44 .elementor-element.elementor-element-ff302b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:3%;--padding-bottom:3%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-7f1530e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:3%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-44 .elementor-element.elementor-element-252e1a1{text-align:center;}.elementor-44 .elementor-element.elementor-element-252e1a1 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:36px;font-weight:800;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-300f884{text-align:center;}.elementor-44 .elementor-element.elementor-element-300f884 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:15px;font-weight:400;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-90f2404{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-44 .elementor-element.elementor-element-24cea66{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:3%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-24cea66:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-24cea66 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCF7F8;}.elementor-44 .elementor-element.elementor-element-df54e98{text-align:center;}.elementor-44 .elementor-element.elementor-element-df54e98 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:36px;font-weight:800;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-6be7a41{text-align:center;}.elementor-44 .elementor-element.elementor-element-6be7a41 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:15px;font-weight:400;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-eba2a73{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-44 .elementor-element.elementor-element-d87b9fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:5%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-44 .elementor-element.elementor-element-bbb55cc .elementor-button{background-color:#FFF0E6;font-family:"Manrope", Sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;fill:#F07B31;color:#F07B31;border-radius:50px 50px 50px 50px;padding:5px 10px 5px 10px;}.elementor-44 .elementor-element.elementor-element-db13e44{text-align:center;}.elementor-44 .elementor-element.elementor-element-db13e44 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:36px;font-weight:800;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-9e12eaa{text-align:center;}.elementor-44 .elementor-element.elementor-element-9e12eaa .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:15px;font-weight:400;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-aad4e6f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-acb0274{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E7EB;--border-color:#E5E7EB;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-44 .elementor-element.elementor-element-b185922{text-align:center;}.elementor-44 .elementor-element.elementor-element-fe2ee29{text-align:center;}.elementor-44 .elementor-element.elementor-element-fe2ee29 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-ae2db25{text-align:center;}.elementor-44 .elementor-element.elementor-element-ae2db25 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-8f0b1e5{text-align:center;}.elementor-44 .elementor-element.elementor-element-8f0b1e5 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:600;line-height:18px;color:#F07B31;}.elementor-44 .elementor-element.elementor-element-1ae3909{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E7EB;--border-color:#E5E7EB;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-44 .elementor-element.elementor-element-fb9b267{text-align:center;}.elementor-44 .elementor-element.elementor-element-94e1628{text-align:center;}.elementor-44 .elementor-element.elementor-element-94e1628 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-975e5df{text-align:center;}.elementor-44 .elementor-element.elementor-element-975e5df .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-07a45e0{text-align:center;}.elementor-44 .elementor-element.elementor-element-07a45e0 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:600;line-height:18px;color:#F07B31;}.elementor-44 .elementor-element.elementor-element-7b626aa{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E7EB;--border-color:#E5E7EB;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-44 .elementor-element.elementor-element-e6213cf{text-align:center;}.elementor-44 .elementor-element.elementor-element-a4994d1{text-align:center;}.elementor-44 .elementor-element.elementor-element-a4994d1 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-29f4e09{text-align:center;}.elementor-44 .elementor-element.elementor-element-29f4e09 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-d974c4f{text-align:center;}.elementor-44 .elementor-element.elementor-element-d974c4f .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:600;line-height:18px;color:#F07B31;}.elementor-44 .elementor-element.elementor-element-f7c53a1{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E7EB;--border-color:#E5E7EB;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-44 .elementor-element.elementor-element-5be7739{text-align:center;}.elementor-44 .elementor-element.elementor-element-61d9521{text-align:center;}.elementor-44 .elementor-element.elementor-element-61d9521 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-b721cb9{text-align:center;}.elementor-44 .elementor-element.elementor-element-b721cb9 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-31211b4{text-align:center;}.elementor-44 .elementor-element.elementor-element-31211b4 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:600;line-height:18px;color:#F07B31;}.elementor-44 .elementor-element.elementor-element-ce9e992{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E5E7EB;--border-color:#E5E7EB;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-44 .elementor-element.elementor-element-a80e385{text-align:center;}.elementor-44 .elementor-element.elementor-element-f296b42{text-align:center;}.elementor-44 .elementor-element.elementor-element-f296b42 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-00bf2ac{text-align:center;}.elementor-44 .elementor-element.elementor-element-00bf2ac .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-966c0ef{text-align:center;}.elementor-44 .elementor-element.elementor-element-966c0ef .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:600;line-height:18px;color:#F07B31;}.elementor-44 .elementor-element.elementor-element-8b6d12d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-8b6d12d:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-8b6d12d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(120deg, #1E3A3A 0%, #2D5454 100%);}.elementor-44 .elementor-element.elementor-element-8f2bc5d .elementor-button{background-color:#FFFFFF26;font-family:"Manrope", Sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;fill:#FFFFFF;color:#FFFFFF;border-radius:50px 50px 50px 50px;padding:5px 10px 5px 10px;}.elementor-44 .elementor-element.elementor-element-776b656{text-align:center;}.elementor-44 .elementor-element.elementor-element-776b656 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:36px;font-weight:800;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-424286d{text-align:center;}.elementor-44 .elementor-element.elementor-element-424286d .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:15px;font-weight:400;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-80efcae{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-44 .elementor-element.elementor-element-80efcae.elementor-element{--align-self:center;}.elementor-44 .elementor-element.elementor-element-7416eac .elementor-button{background-color:#F07B31;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:800;letter-spacing:0.5px;border-radius:50px 50px 50px 50px;padding:15px 50px 15px 50px;}.elementor-44 .elementor-element.elementor-element-c85af77{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:3%;--padding-bottom:3%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-0a01e53{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:3%;--padding-bottom:3%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-0a01e53:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-0a01e53 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAEFF2;}.elementor-44 .elementor-element.elementor-element-ed4469a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:5%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-ed4469a:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-ed4469a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1E3A3A;}.elementor-44 .elementor-element.elementor-element-17eccba{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-d1eff2a{text-align:center;}.elementor-44 .elementor-element.elementor-element-d1eff2a .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-e564de9{text-align:center;}.elementor-44 .elementor-element.elementor-element-e564de9 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#FFFFFF99;}.elementor-44 .elementor-element.elementor-element-1ab0caa{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-45f1e6c{text-align:center;}.elementor-44 .elementor-element.elementor-element-45f1e6c .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-4eb3a75{text-align:center;}.elementor-44 .elementor-element.elementor-element-4eb3a75 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#FFFFFF99;}.elementor-44 .elementor-element.elementor-element-631fb4a{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-1507fb0{text-align:center;}.elementor-44 .elementor-element.elementor-element-1507fb0 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-1b08081{text-align:center;}.elementor-44 .elementor-element.elementor-element-1b08081 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#FFFFFF99;}.elementor-44 .elementor-element.elementor-element-e241572{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-2658c4b{text-align:center;}.elementor-44 .elementor-element.elementor-element-2658c4b .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-400fd64{text-align:center;}.elementor-44 .elementor-element.elementor-element-400fd64 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#FFFFFF99;}.elementor-44 .elementor-element.elementor-element-468e635{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-bcd9471{text-align:center;}.elementor-44 .elementor-element.elementor-element-bcd9471 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-e5d2b2d{text-align:center;}.elementor-44 .elementor-element.elementor-element-e5d2b2d .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:12px;font-weight:400;line-height:18px;color:#FFFFFF99;}.elementor-44 .elementor-element.elementor-element-a9a2e45{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:3%;--padding-bottom:3%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-bb15d91{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:5%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-bb15d91:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-bb15d91 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FBAA3314;}.elementor-44 .elementor-element.elementor-element-1b2266e{text-align:center;}.elementor-44 .elementor-element.elementor-element-1b2266e .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:36px;font-weight:800;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-4e2ca29{text-align:center;}.elementor-44 .elementor-element.elementor-element-4e2ca29 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:15px;font-weight:400;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-64cb000{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-44 .elementor-element.elementor-element-328aa43{--display:flex;--min-height:303px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-44 .elementor-element.elementor-element-328aa43:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-328aa43 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#583FA8;}.elementor-44 .elementor-element.elementor-element-6c063fc{text-align:center;}.elementor-44 .elementor-element.elementor-element-6c063fc .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:54px;font-weight:600;line-height:60px;color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-1b6a3a1 .elementor-button{background-color:#F07B31;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:800;letter-spacing:0.5px;border-radius:50px 50px 50px 50px;padding:15px 100px 15px 100px;}.elementor-44 .elementor-element.elementor-element-0862fd4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:5%;--padding-bottom:5%;--padding-left:8%;--padding-right:8%;}.elementor-44 .elementor-element.elementor-element-0862fd4:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-0862fd4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF7F2;}.elementor-44 .elementor-element.elementor-element-bed7912 .elementor-button{background-color:#FFF0E6;font-family:"Manrope", Sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;fill:#F07B31;color:#F07B31;border-radius:50px 50px 50px 50px;padding:5px 10px 5px 10px;}.elementor-44 .elementor-element.elementor-element-833c237{text-align:center;}.elementor-44 .elementor-element.elementor-element-833c237 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:36px;font-weight:800;color:#1A1A1A;}.elementor-44 .elementor-element.elementor-element-571eb0e{text-align:center;}.elementor-44 .elementor-element.elementor-element-571eb0e .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:15px;font-weight:400;color:#6B7280;}.elementor-44 .elementor-element.elementor-element-e05e806{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for html, class: .elementor-element-5d9b978 *//* ---------- Outer wrapper (radius + max-width) ---------- */
.sunscreen-hero-wrap {
  width: 100%;
  margin: 0 auto;
  border-radius: 27px;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
}

/* ---------- Section ---------- */
.sunscreen-hero-section {
  position: relative;
  width: 100%;
  min-height: 537px;
  background: linear-gradient(120deg, #F0975B 0%, #E8507A 52%, #E61F7F 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Warm radial highlight top-left */
.sunscreen-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 75% at 18% 38%, rgba(255,210,160,0.20) 0%, transparent 68%);
  animation: glowPulse 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes glowPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ---------- Inner layout ---------- */
.sunscreen-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 64px 80px 64px 60px;
  box-sizing: border-box;
}

/* ---------- LEFT: Text ---------- */
.sunscreen-hero-text {
  flex: 0 0 55%;
  max-width: 55%;
}

.sunscreen-hero-headline {
  font-family: 'Manrope', sans-serif;
  font-size: 48px;
  line-height: 1.11;
  margin: 0 0 18px 0;
  padding: 0;
  color: #ffffff;
}

.sunscreen-hero-headline .line-thin {
  display: block;
  font-weight: 300;
  opacity: 0;
  transform: translateY(26px);
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.25s forwards;
}

.sunscreen-hero-headline .line-bold-1 {
  display: block;
  font-weight: 800;
  opacity: 0;
  transform: translateY(26px);
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.42s forwards;
}

.sunscreen-hero-headline .line-bold-2 {
  display: block;
  font-weight: 800;
  opacity: 0;
  transform: translateY(26px);
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.58s forwards;
}

.sunscreen-hero-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.68;
  color: rgba(255,255,255,0.80);
  margin: 0 0 32px 0;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.73s forwards;
}

/* ---------- Buttons ---------- */
.sunscreen-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.88s forwards;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #ffffff;
  color: #ffffff;
  background: transparent;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  white-space: nowrap;
}

.hero-btn:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.hero-btn:active { transform: translateY(0); }

/* ---------- RIGHT: Product Cards ---------- */
.sunscreen-hero-products {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding-bottom: 0;
}

/* Base card styles */
.product-card {
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 12px 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
  transition: box-shadow 0.28s ease;
}

/* Gloss top shine */
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}

/* Dimensions */
.product-card.card-blue   { width: 95px;  height: 190px; }
.product-card.card-orange { width: 108px; height: 245px; }
.product-card.card-teal   { width: 95px;  height: 175px; }

/* Colors */
.product-card.card-blue   { background: #3B9CD9; }
.product-card.card-orange { background: #F48220; }
.product-card.card-teal   { background: #4E7C70; }

/* Initial tilt states (before animation completes) */
.product-card.card-blue   { transform: rotate(-5deg) translateY(50px); }
.product-card.card-orange { transform: rotate(0deg)  translateY(50px); }
.product-card.card-teal   { transform: rotate(5deg)  translateY(50px); }

/* Card entrance animations */
.product-card.card-blue {
  animation: cardEnterL 0.72s cubic-bezier(0.22,1,0.36,1) 0.80s forwards;
}
.product-card.card-orange {
  animation: cardEnterC 0.72s cubic-bezier(0.22,1,0.36,1) 1.00s forwards,
             floatBob 3.2s ease-in-out 2.2s infinite;
}
.product-card.card-teal {
  animation: cardEnterR 0.72s cubic-bezier(0.22,1,0.36,1) 1.20s forwards;
}

@keyframes cardEnterL {
  to { opacity: 1; transform: rotate(-5deg) translateY(0); }
}
@keyframes cardEnterC {
  to { opacity: 1; transform: rotate(0deg) translateY(0); }
}
@keyframes cardEnterR {
  to { opacity: 1; transform: rotate(5deg) translateY(0); }
}

/* Hover — lift while preserving tilt */
.product-card.card-blue:hover   { transform: rotate(-5deg) translateY(-9px) !important; box-shadow: 0 22px 40px rgba(0,0,0,0.28); }
.product-card.card-orange:hover { transform: rotate(0deg)  translateY(-9px) !important; box-shadow: 0 22px 40px rgba(0,0,0,0.28); }
.product-card.card-teal:hover   { transform: rotate(5deg)  translateY(-9px) !important; box-shadow: 0 22px 40px rgba(0,0,0,0.28); }

@keyframes floatBob {
  0%,100% { transform: rotate(0deg) translateY(0);   }
  50%      { transform: rotate(0deg) translateY(-8px); }
}

/* Card labels */
.product-card-name {
  font-family: 'Manrope', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  line-height: 1.5;
  margin-bottom: 4px;
}

.product-card-spf {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

/* ---------- Loading skeleton ---------- */
.sunscreen-hero-section.hero-loading .sunscreen-hero-text,
.sunscreen-hero-section.hero-loading .sunscreen-hero-products {
  visibility: hidden;
}

.sunscreen-hero-section.hero-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: skeletonSweep 1.3s linear infinite;
  z-index: 10;
}

@keyframes skeletonSweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ---------- Shared keyframe ---------- */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sunscreen-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 36px 44px;
    gap: 36px;
  }
  .sunscreen-hero-text,
  .sunscreen-hero-products {
    flex: unset;
    max-width: 100%;
    width: 100%;
  }
  .sunscreen-hero-headline { font-size: 34px; }
  .product-card.card-blue   { width: 80px; height: 155px; }
  .product-card.card-orange { width: 90px; height: 200px; }
  .product-card.card-teal   { width: 80px; height: 145px; }
}

@media (max-width: 560px) {
  .sunscreen-hero-headline { font-size: 26px; }
  .hero-btn { font-size: 10.5px; padding: 0 20px; height: 42px; }
  .sunscreen-hero-wrap { border-radius: 16px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-90f2404 *//* ---------- Grid wrapper ---------- */
.spf-grid-section {
  font-family: 'Manrope', sans-serif;
}

.spf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 auto;
}

/* ---------- Card ---------- */
.spf-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  background: #1a1a1a;

  /* Entrance — invisible, shifted down */
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: box-shadow 0.36s ease;
}

/* Staggered entrance via JS-added class .spf-visible */
.spf-card.spf-visible {
  animation: cardReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.spf-card:nth-child(1).spf-visible { animation-delay: 0.00s; }
.spf-card:nth-child(2).spf-visible { animation-delay: 0.10s; }
.spf-card:nth-child(3).spf-visible { animation-delay: 0.20s; }
.spf-card:nth-child(4).spf-visible { animation-delay: 0.30s; }
.spf-card:nth-child(5).spf-visible { animation-delay: 0.40s; }
.spf-card:nth-child(6).spf-visible { animation-delay: 0.50s; }

@keyframes cardReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Background image ---------- */
.spf-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.55s ease;
  filter: brightness(0.82);
  transform-origin: center center;
}

/* ---------- Gradient overlay ---------- */
.spf-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.00) 30%,
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.72) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
}

/* ---------- Text block ---------- */
.spf-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px 22px;
  z-index: 2;
}

.spf-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.2;
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
  text-align: center;
}

.spf-card-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: #FFFFFFD9;
  line-height: 1.55;
  margin: 0;
  /* Clamp to 1 line — matches reference (text gets cut off at right edge) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  transform: translateY(4px);
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1) 0.04s,
              opacity 0.38s ease 0.04s;
              text-align: center;
}

/* ---------- Hover effects ---------- */
.spf-card:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}

.spf-card:hover .spf-card-img {
  transform: scale(1.07);
  filter: brightness(0.72);
}

.spf-card:hover .spf-card-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.04) 20%,
    rgba(0,0,0,0.62) 65%,
    rgba(0,0,0,0.82) 100%
  );
}

.spf-card:hover .spf-card-title {
  transform: translateY(-3px);
}

.spf-card:hover .spf-card-desc {
  transform: translateY(-3px);
  opacity: 1;
}

/* Shimmer shine sweep on hover */
.spf-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0) 70%
  );
  background-size: 200% 100%;
  background-position: -200% 0;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.spf-card:hover::after {
  opacity: 1;
  animation: hoverShimmer 0.55s ease forwards;
}

@keyframes hoverShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ---------- Skeleton loading placeholders ---------- */
.spf-card.spf-skeleton {
  background: #e8e8e8;
}

.spf-card.spf-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: skelSweep 1.4s ease infinite;
  z-index: 4;
}

@keyframes skelSweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .spf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .spf-card-title { font-size: 17px; }
}

@media (max-width: 560px) {
  .spf-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 14px;
  }
  .spf-card { aspect-ratio: 16 / 10; }
  .spf-card-title { font-size: 18px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-eba2a73 */.pc-wrap *, .pc-wrap *::before, .pc-wrap *::after { box-sizing: border-box; }
.pc-wrap {
    --pc-pink:      #E91E8C;
    --pc-pink-h:    #c4167a;
    --pc-purple:    #5B2D8E;
    --pc-star:      #f5a623;
    --pc-dark:      #1a1a1a;
    --pc-mid:       #555;
    --pc-light:     #999;
    --pc-radius:    14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
}

/* ── TABS ── */
.pc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    justify-content: center;
}
.pc-tab {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1.5px solid #ddd;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-dark);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    line-height: 1;
}
.pc-tab:hover  { border-color: var(--pc-pink); color: var(--pc-pink); }
.pc-tab.active { background: var(--pc-pink); border-color: var(--pc-pink); color: #fff; }

/* ── GRID ── */
.pc-grid {
    display: grid;
    grid-template-columns: repeat(var(--pc-cols, 4), 1fr);
    gap: 22px;
}
@media (max-width: 1100px) { .pc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .pc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pc-grid { grid-template-columns: 1fr; } }

/* ── CARD ── */
.pc-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
    position: relative;
    overflow: visible; /* allow badge to sit on corner */
}
.pc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
}
.pc-card.pc-hidden { display: none; }

/* ── IMAGE AREA — padded inset ── */
.pc-img-wrap {
    position: relative;
    margin: 10px 10px 0 10px;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    background: #e8e8e8;
    overflow: hidden;           /* clips the slide-up buttons + shimmer */
}
.pc-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .3s ease;
    opacity: 0;
    border-radius: 12px;
}
.pc-img.loaded { opacity: 1; }
.pc-card:hover .pc-img { transform: scale(1.04); }

/* Shimmer skeleton */
.pc-img-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: pc-shimmer 1.4s infinite;
    transition: opacity .3s;
    pointer-events: none;
    border-radius: 12px;
    z-index: 1;
}
.pc-img-wrap.img-ready::after { opacity: 0; }
@keyframes pc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── BADGE ── */
.pc-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--pc-purple);
    color: #fff; font-size: 11px; font-weight: 800;
    line-height: 1.25; padding: 5px 8px;
    border-radius: 8px;
    text-align: center; z-index: 4;
    text-transform: uppercase; letter-spacing: .3px;
    pointer-events: none;
}

/* ── HOVER ACTIONS — hidden by default, slide up on card hover ── */
.pc-hover-actions {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,.18) 0%, transparent 100%);
    transform: translateY(105%);
    transition: transform .26s cubic-bezier(.34,1.2,.64,1);
    z-index: 3;
}
.pc-card:hover .pc-hover-actions { transform: translateY(0); }

.pc-btn-add {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 7px; background: var(--pc-pink); color: #fff; border: none;
    border-radius: 9px; padding: 11px 12px; font-family: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .18s, transform .12s; white-space: nowrap;
    letter-spacing: .2px;
}
.pc-btn-add:hover  { background: var(--pc-pink-h); }
.pc-btn-add:active { transform: scale(.96); }
.pc-btn-add.pc-loading { opacity: .7; pointer-events: none; }
.pc-btn-add.pc-added {
    background: #1a1a1a;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    letter-spacing: .3px;
}

.pc-btn-wish {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f5f5f5; border: none; border-radius: 9px;
    cursor: pointer; color: #bbb;
    transition: color .18s, background .18s, transform .18s;
}
.pc-btn-wish:hover         { color: var(--pc-pink); background: #fce8f3; transform: scale(1.08); }
.pc-btn-wish.pc-wished     { color: var(--pc-pink); background: #fce8f3; }
.pc-btn-wish.pc-wished svg { fill: var(--pc-pink); }

/* ── CARD BODY ── */
.pc-body {
    padding: 10px 14px 16px;
}
.pc-cat {
    font-size: 12px;
    color: var(--pc-light);
    margin-bottom: 2px;
    letter-spacing: .1px;
}
.pc-name {
    font-size: 15px; font-weight: 700;
    margin-bottom: 0; line-height: 1.3;
}
.pc-name a { color: var(--pc-pink); text-decoration: none; }
.pc-name a:hover { text-decoration: underline; }

/* SPF — short description style */
.pc-spf {
    font-size: 13px;
    color: var(--pc-mid);
    margin: 6px 0 8px;
    line-height: 1.4;
}

.pc-pricing {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.pc-price-now {
    font-size: 22px; font-weight: 800; color: var(--pc-dark);
}
.pc-price-now .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.pc-price-was {
    font-size: 13px; color: var(--pc-light); text-decoration: line-through;
}

.pc-stars   { display: flex; align-items: center; gap: 2px; color: var(--pc-star); }
.pc-reviews { font-size: 12px; color: var(--pc-light); margin-left: 4px; }

/* ── EMPTY STATE ── */
.pc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--pc-light);
    animation: pc-fade-in .3s ease;
}
@keyframes pc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pc-empty-icon {
    width: 80px; height: 80px; margin: 0 auto 16px;
    border-radius: 50%; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    color: #ccc;
}
.pc-empty-title {
    font-size: 18px; font-weight: 700; color: var(--pc-dark);
    margin: 0 0 6px;
}
.pc-empty-sub {
    font-size: 14px; color: var(--pc-light); margin: 0;
}

/* ── TOAST ── */
.pc-toast {
    position: fixed; bottom: 28px; right: 28px;
    background: #1a1a1a; color: #fff; border-radius: 12px;
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 99999;
    min-width: 280px; max-width: 340px;
    transform: translateY(120%); opacity: 0;
    transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
    pointer-events: none;
}
.pc-toast.pc-show { transform: translateY(0); opacity: 1; pointer-events: all; }

.pc-toast-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: var(--pc-pink); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.pc-toast-msg  { flex: 1; min-width: 0; }
.pc-toast-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-toast-count { font-size: 12px; color: #aaa; }

.pc-toast-checkout {
    flex-shrink: 0; background: var(--pc-pink); color: #fff; border: none;
    border-radius: 7px; padding: 8px 12px; font-family: inherit;
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .18s;
}
.pc-toast-checkout:hover { background: var(--pc-pink-h); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-80efcae */.filter-pills {
  display: flex;
  gap: 15px;
}

/* PILL DESIGN */
.pill {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0;

  color: #FFFFFF;
  text-align: center;

  padding: 12px 22px;
  border-radius: 30px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  cursor: pointer;
  transition: all 0.3s ease;
}

/* HOVER (subtle like UI) */
.pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ACTIVE STATE (optional but useful) */
.pill.active {
  background: #ffffff;
  color: #1f3d3a;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cb5fd52 *//* ── Keyframes ── */
@keyframes ss-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ss-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ss-card-select {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes ss-radio-pop {
  0%   { transform: translate(-50%,-50%) scale(0); }
  60%  { transform: translate(-50%,-50%) scale(1.25); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
@keyframes ss-btn-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Wrapper ── */
.ss-wrap {
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 48px 52px;
  border-radius: 22px;
  background: linear-gradient(110deg, #F97B50 0%, #F45C82 50%, #E8307A 100%);
  overflow: hidden;
  position: relative;
  font-family: 'Manrope', sans-serif;
  animation: ss-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) both;
}
.ss-wrap::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}

/* ── Left ── */
.ss-left {
  flex: 1 1 0;
  min-width: 0;
  animation: ss-fade-up 0.7s 0.08s cubic-bezier(0.22,1,0.36,1) both;
}
.ss-eyebrow {
  display: inline-block;
  padding: 5px 16px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.ss-heading {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 14px;
}
.ss-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0 0 20px;

  font-weight: 400;
}
.ss-benefits {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ss-benefits li {
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  transition: color 0.18s;
}
.ss-benefits li:hover { color: #fff; }
/* plain white checkmark — no circle */
.ss-benefits li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5L6.5 12L13 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s;
}
.ss-benefits li:hover::before { transform: scale(1.2); }

/* ── Right ── */
.ss-right {
  flex: 0 0 500px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: ss-slide-in 0.72s 0.18s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Option card ── */
.ss-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, border-color 0.2s,
              transform 0.2s cubic-bezier(0.34,1.3,0.64,1),
              box-shadow 0.2s;
}
.ss-option input[type="radio"] {
  position: absolute;
  opacity: 0; width: 0; height: 0;
  pointer-events: none;
}
.ss-option:hover {
  background: rgba(255,255,255,0.96);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.ss-option:active { transform: scale(0.985); }

/* SELECTED — warm light salmon tint (matches Figma) */
.ss-option--selected {
  background: rgba(255,237,232,0.97);
  border-color: rgba(249,123,80,0.28);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  animation: ss-card-select 0.28s cubic-bezier(0.34,1.3,0.64,1) both;
}

/* ── Custom radio ── */
.ss-radio {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #d0d0d0;
  position: relative;
  background: #fff;
  transition: border-color 0.18s;
}
.ss-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #F97B50;   /* ORANGE — matches Figma */
  transform: translate(-50%,-50%) scale(0);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ss-option--selected .ss-radio {
  border-color: #F97B50;
}
.ss-option--selected .ss-radio::after {
  animation: ss-radio-pop 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
  transform: translate(-50%,-50%) scale(1);
}

/* ── Option text ── */
.ss-option-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ss-option-title {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px; font-weight: 700;
  color: #1a1a1a; line-height: 1.2;
}
.ss-option-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 12px; color: #888;
  line-height: 1.3; font-weight: 400;
}

/* ── Save badge — green pill ── */
.ss-save-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px; font-weight: 700;
  background: rgba(16,185,129,0.13);
  color: #059669;
  border: 1px solid rgba(16,185,129,0.22);
  white-space: nowrap;
  transition: transform 0.18s, background 0.18s;
}
.ss-option--selected .ss-save-badge,
.ss-option:hover .ss-save-badge {
  background: rgba(16,185,129,0.2);
  transform: scale(1.05);
}

/* ── CTA — white bg + ORANGE text (matches Figma) ── */
.ss-cta {
  margin-top: 6px;
  width: 100%;
  padding: 15px 24px;
  border-radius: 12px;
  border: none;
  background: #fff;
  color: #F97B50;
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.34,1.3,0.64,1),
              box-shadow 0.22s, color 0.18s;
}
.ss-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(249,123,80,0.1) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  pointer-events: none;
}
.ss-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  color: #e06030;
}
.ss-cta:hover::after {
  animation: ss-btn-shimmer 0.55s ease forwards;
}
.ss-cta:active { transform: scale(0.97); box-shadow: none; }

/* ── Responsive ── */
@media (max-width: 920px) {
  .ss-wrap { flex-direction: column; padding: 34px 26px; gap: 26px; }
  .ss-right { flex: 1 1 auto; width: 100%; }
  .ss-desc  { max-width: 100%; }
}
@media (max-width: 480px) {
  .ss-wrap { padding: 24px 16px; border-radius: 16px; }
  .ss-heading { font-size: 21px; }
  .ss-option { padding: 11px 12px; }
  .ss-option-title { font-size: 13px; }
  .ss-option-sub   { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-wrap, .ss-left, .ss-right, .ss-option--selected { animation: none; }
  .ss-cta, .ss-option { transition: none; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2ce5521 */.fsx-wrap*,.fsx-wrap*::before,.fsx-wrap*::after{box-sizing:border-box;}
.fsx-wrap{
    --fsx-pink:#E91E8C;
    --fsx-pink-h:#c4167a;
    --fsx-purple:#5B2D8E;
    --fsx-green:#2ecc71;
    --fsx-dark:#1a1a1a;
    --fsx-mid:#555;
    --fsx-light:#999;
    --fsx-star:#f5a623;
    --fsx-r:14px;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    border-radius:18px;
    position:relative;
}

/* HEADER */
.fsx-header{display:flex;align-items:center;gap:24px;margin-bottom:28px;flex-wrap:wrap;}
.fsx-title{font-size:30px;font-weight:900;letter-spacing:-1px;color:var(--fsx-dark);text-transform:uppercase;line-height:1;}
.fsx-bolt{color:#E61F7F;}
.fsx-timer-block{display:flex;align-items:center;gap:10px;}
.fsx-ends-label{font-size:14px;color:var(--fsx-mid);white-space:nowrap;}
.fsx-timer{display:flex;align-items:center;gap:4px;}
.fsx-tbox{
    background:var(--fsx-pink);color:#fff;
    font-size:18px;font-weight:700;
    width:46px;height:40px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-variant-numeric:tabular-nums;
}
.fsx-colon{font-size:22px;font-weight:800;color:var(--fsx-dark);}
.fsx-view-all{margin-left:auto;font-size:15px;font-weight:600;color:var(--fsx-pink);text-decoration:none;white-space:nowrap;}
.fsx-view-all:hover{text-decoration:underline;}

/* GRID — always 4 columns */
.fsx-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
@media(max-width:900px){.fsx-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.fsx-grid{grid-template-columns:1fr;}}

/* CARD */
.fsx-card{
    background:#fff;
    border-radius:var(--fsx-r);
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease,background .2s;
    position:relative;
}
.fsx-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 36px rgba(0,0,0,.12);
    background:#fff5fa;
}

/* IMAGE */
.fsx-img-wrap{position:relative;aspect-ratio:1/1;background:#e8e8e8;overflow:hidden;}
.fsx-img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:transform .35s ease,opacity .3s ease;}
.fsx-img.fsx-loaded{opacity:1;}
.fsx-card:hover .fsx-img{transform:scale(1.04);}

/* Shimmer */
.fsx-img-wrap::before{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,#e8e8e8 25%,#f4f4f4 50%,#e8e8e8 75%);
    background-size:200% 100%;
    animation:fsx-shim 1.4s infinite;
    transition:opacity .3s;pointer-events:none;
}
.fsx-img-wrap.fsx-ready::before{opacity:0;}
@keyframes fsx-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* BADGE */
.fsx-badge{
    position:absolute;top:10px;right:10px;
    background:var(--fsx-purple);color:#fff;
    font-size:11px;font-weight:700;line-height:1.3;
    padding:5px 8px;border-radius:7px;
    text-align:center;z-index:4;text-transform:uppercase;pointer-events:none;
}

/* ── HOVER ACTIONS — hidden by default, appear on card hover ── */
.fsx-actions{
    position:absolute;bottom:0;left:0;right:0;
    display:flex;gap:8px;padding:10px;
    background:linear-gradient(to top,rgba(0,0,0,.18) 0%,transparent 100%);
    /* HIDDEN */
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
    z-index:5;
}
/* Show on hover — but only when card is NOT in-bag state */
.fsx-card:hover:not(.fsx-added) .fsx-actions{
    opacity:1;
    transform:translateY(0);
    pointer-events:all;
}

/* ADD TO BAG button */
.fsx-btn-add{
    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    background:var(--fsx-pink);color:#fff;border:none;border-radius:8px;
    padding:10px 12px;font-family:inherit;font-size:13px;font-weight:600;
    cursor:pointer;transition:background .18s,transform .12s;white-space:nowrap;
}
.fsx-btn-add:hover{background:var(--fsx-pink-h);}
.fsx-btn-add:active{transform:scale(.95);}
.fsx-btn-add.fsx-loading{opacity:.7;pointer-events:none;}

/* WISHLIST button */
.fsx-btn-wish{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:none;border-radius:8px;cursor:pointer;
    color:#bbb;flex-shrink:0;transition:color .18s,transform .18s;
}
.fsx-btn-wish:hover{color:var(--fsx-pink);transform:scale(1.12);}
.fsx-btn-wish.fsx-wished{color:var(--fsx-pink);}
.fsx-btn-wish.fsx-wished svg{fill:var(--fsx-pink);}

/* ── IN YOUR BAG — hidden, appears after add (always visible, no hover needed) ── */
.fsx-in-bag{
    position:absolute;bottom:0;left:0;right:0;
    display:flex;gap:8px;padding:10px;
    /* HIDDEN until added */
    opacity:0;
    pointer-events:none;
    z-index:5;
    transition:opacity .25s ease;
}
/* Show permanently once added */
.fsx-card.fsx-added .fsx-in-bag{
    opacity:1;
    pointer-events:all;
}

.fsx-in-bag-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    background:var(--fsx-dark);color:#fff;border:none;border-radius:8px;
    padding:10px 12px;font-family:inherit;font-size:13px;font-weight:600;
    cursor:default;white-space:nowrap;
}
.fsx-wish-2{background:#fff;}

/* CARD BODY */
.fsx-body{padding:12px 14px 16px;}
.fsx-cat{font-size:12px;color:var(--fsx-light);margin-bottom:3px;}
.fsx-name{font-size:15px;font-weight:600;margin-bottom:4px;}
.fsx-name a{color:var(--fsx-pink);text-decoration:none;}
.fsx-name a:hover{text-decoration:underline;}
.fsx-pricing{display:flex;align-items:baseline;gap:7px;margin-bottom:5px;}
.fsx-price-now{font-size:20px;font-weight:700;color:var(--fsx-dark);}
.fsx-price-now .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;}
.fsx-price-was{font-size:13px;color:var(--fsx-light);text-decoration:line-through;}
.fsx-stars{display:flex;align-items:center;gap:2px;color:var(--fsx-star);margin-bottom:10px;}
.fsx-rev{font-size:12px;color:var(--fsx-light);margin-left:3px;}

/* STOCK BAR — dynamic width from PHP */
.fsx-stock-wrap{margin-top:2px;}
.fsx-stock-track{
    width:100%;height:5px;
    background:#e0e0e0;border-radius:99px;overflow:hidden;
    margin-bottom:5px;
}
.fsx-stock-fill{
    height:100%;
    background:var(--fsx-green);
    border-radius:99px;
    transition:width .6s ease;
    /* width set inline from PHP: style="width:XX%" */
}
.fsx-stock-label{font-size:12px;color:var(--fsx-mid);}

/* TOAST */
.fsx-toast{
    position:fixed;bottom:28px;right:28px;
    background:#1a1a1a;color:#fff;border-radius:12px;
    padding:14px 16px;display:flex;align-items:center;gap:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:99999;
    min-width:280px;max-width:340px;
    transform:translateY(120%);opacity:0;
    transition:transform .34s cubic-bezier(.34,1.56,.64,1),opacity .22s ease;
    pointer-events:none;
}
.fsx-toast.fsx-show{transform:translateY(0);opacity:1;pointer-events:all;}
.fsx-toast-icon{width:34px;height:34px;flex-shrink:0;background:var(--fsx-pink);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.fsx-toast-text{flex:1;min-width:0;}
.fsx-toast-name{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fsx-toast-count{font-size:12px;color:#aaa;}
.fsx-toast-cta{flex-shrink:0;background:var(--fsx-pink);color:#fff;border:none;border-radius:7px;padding:8px 12px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .18s;}
.fsx-toast-cta:hover{background:var(--fsx-pink-h);}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-694eb11 */@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');
/* ---------- Section ---------- */
.promo-grid-section {
  font-family: 'Manrope', sans-serif;
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;

  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared card base ---------- */
.promo-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: box-shadow 0.36s ease, transform 0.36s cubic-bezier(0.22,1,0.36,1);
}

.promo-card.promo-visible {
  animation: promoReveal 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
}

.promo-card:nth-child(1).promo-visible { animation-delay: 0.00s; }
.promo-card:nth-child(2).promo-visible { animation-delay: 0.15s; }
.promo-card:nth-child(3).promo-visible { animation-delay: 0.28s; }

@keyframes promoReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hover lift */
.promo-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
  transform: translateY(-4px) scale(1.005);
}

/* =============================================
   CARD 1 — Large left: "Save 20%" image card
   ============================================= */
.promo-card-main {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 480px;
  background: #1a1a1a;
}

/* Background image */
.promo-card-main .promo-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.80);
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
              filter 0.55s ease;
}

.promo-card-main:hover .promo-bg-img {
  transform: scale(1.06);
  filter: brightness(0.68);
}

/* Dark vignette */
.promo-card-main .promo-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.48) 0%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.30) 100%
  );
  z-index: 1;
  transition: background 0.4s ease;
}

.promo-card-main:hover .promo-vignette {
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.38) 100%
  );
}

/* Text content */
.promo-card-main .promo-main-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 28px 28px 0;
  z-index: 2;
}

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Manrope', sans-serif;
  font-size:24px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}

.promo-badge-star {
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
}

/* 4-point star using CSS */
.promo-badge-star::before,
.promo-badge-star::after {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #b388f5;
  line-height: 1;
}

.promo-main-title {
  font-family: 'Manrope', sans-serif;
  font-size: 100px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s;
}

/* Stars decoration (purple sparkles bottom-left area) */
.promo-sparkle {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  bottom: 28%;
  left: 24px;
  font-size: 22px;
  color: #b388f5;
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
  animation: sparkleFloat 3s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes sparkleFloat {
  0%,100% { transform: translateY(0) rotate(0deg);   }
  50%      { transform: translateY(-6px) rotate(12deg); }
}

/* Revealed state (added by JS observer) */
.promo-card-main.promo-visible .promo-badge,
.promo-card-main.promo-visible .promo-main-title {
  opacity: 1;
  transform: translateY(0);
}

.promo-card-main.promo-visible .promo-sparkle {
  opacity: 1;
  animation-play-state: running;
}

/* Skeleton sweep on main card */
.promo-card-main.promo-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: skelSweep 1.4s ease infinite;
  z-index: 10;
}

/* =============================================
   CARDS 2 & 3 — Right column (split cards)
   ============================================= */
.promo-card-side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fdf0f5;
  border: 1.5px solid #f5d0e0;
  min-height: 321px;
}

/* Left text pane */
.promo-side-text {
  flex: 0 0 52%;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
     justify-content: flex-start;
}

/* Right image pane */
.promo-side-img-wrap {
  flex: 0 0 48%;
  position: relative;
  overflow: hidden;
  border-radius: 0 18px 18px 0;
}

.promo-side-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}

.promo-card-side:hover .promo-side-img-wrap img {
  transform: scale(1.08);
}

/* --- Card 2: Free Shipping --- */
.promo-card-shipping .promo-side-label {
  font-family: 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #303030;
  line-height: 40px;
  margin: 0 0 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.promo-card-shipping .promo-side-price {
  font-family: 'Manrope', sans-serif;
  font-size: 85px;
  font-weight: 400;
  color: #E61F7F;
  line-height: 1;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s;
}

/* --- Card 3: Exclusive Discounts --- */
.promo-card-discount .promo-side-headline {
    font-family: 'Barlow', sans-serif !important;
  font-size: 47px;
  font-weight: 800;
  color: #E61F7F;
  line-height: 48px;
  margin: 0 0 12px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.promo-card-discount .promo-side-sub {
  font-family: 'Manrope', sans-serif;
   font-size: 32px;
  font-weight: 400;
  color: #303030;
  line-height: 40px;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

/* Revealed state for side cards */
.promo-card-side.promo-visible .promo-side-label,
.promo-card-side.promo-visible .promo-side-price,
.promo-card-side.promo-visible .promo-side-headline,
.promo-card-side.promo-visible .promo-side-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Skeleton on side cards */
.promo-card-side.promo-skeleton {
  background: #f0f0f0;
  border-color: #e8e8e8;
}

.promo-card-side.promo-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.60) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: skelSweep 1.4s ease infinite;
  z-index: 10;
}

/* Hover shimmer on side cards */
.promo-card-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(230, 31, 127, 0) 30%,
    rgba(230, 31, 127, 0.05) 50%,
    rgba(230, 31, 127, 0) 70%
  );
  background-size: 200% 100%;
  background-position: -200% 0;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.promo-card-side:hover::before {
  opacity: 1;
  animation: hoverShimmer 0.55s ease forwards;
}

/* ---------- Shared keyframes ---------- */
@keyframes skelSweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes hoverShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .promo-grid {
    grid-template-columns: 1fr;
  }
  .promo-card-main {
    grid-column: 1;
    grid-row: auto;
    min-height: 320px;
  }
  .promo-main-title { font-size: 40px; }
}

@media (max-width: 560px) {
  .promo-card-side { flex-direction: column; }
  .promo-side-img-wrap {
    height: 180px;
    flex: unset;
    border-radius: 0 0 18px 18px;
  }
  .promo-side-img-wrap img { position: absolute; }
  .promo-card-shipping .promo-side-price { font-size: 40px; }
  .promo-card-discount .promo-side-headline { font-size: 20px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-64cb000 *//* WRAPPER */
.testimonial-wrapper {
  display: flex;
  gap: 20px;

}

/* CARD */
.testimonial-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px;
  font-family: 'Manrope', sans-serif;
}

/* STARS */
.stars {
  color: #f5a623;
  font-size: 14px;
  margin-bottom: 10px;
}

/* REVIEW TEXT */
.review {
  font-size: 14px;
  color: #1A1A1A;
  line-height: 22px;
  margin-bottom: 18px;
}

/* USER SECTION */
.user {
  display: flex;
  align-items: center;
  justify-content: space-between;
    font-family: 'Manrope', sans-serif;
}

/* LEFT SIDE */
.user {
  gap: 12px;
}

/* AVATAR */
.avatar {
  width: 36px;
  height: 36px;
  background: #ffe4cc;
  color: #ff7a00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  
}

/* USER INFO */
.user-info {
  flex: 1;
}

.user-info h4 {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
  color: #222;
    font-family: 'Manrope', sans-serif;
}

.user-info span {
  font-size: 12px;
  color: #777;
    font-family: 'Manrope', sans-serif;
}

/* VERIFIED BADGE */
.verified {
  font-size: 12px;
  background: #d4f5df;
  color: #1a7f37;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
    font-family: 'Manrope', sans-serif;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e05e806 *//* ---------- Section ---------- */
.blog-grid-section {
  font-family: 'Manrope', sans-serif;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Card ---------- */
.blog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;

  /* Entrance state */
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition:
    box-shadow 0.34s ease,
    border-color 0.34s ease,
    transform 0.34s cubic-bezier(0.22,1,0.36,1);
}

/* Entrance animation (triggered by JS) */
.blog-card.blog-visible {
  animation: blogReveal 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
}

.blog-card:nth-child(1).blog-visible { animation-delay: 0.00s; }
.blog-card:nth-child(2).blog-visible { animation-delay: 0.12s; }
.blog-card:nth-child(3).blog-visible { animation-delay: 0.24s; }

@keyframes blogReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hover — lift + border highlight */
.blog-card:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow: 0 18px 48px rgba(0,0,0,0.11);
  border-color: #d0d0d0;
}

/* ---------- Image area ---------- */
.blog-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
}

.blog-card-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
              filter 0.55s ease;
  filter: brightness(1);
}

.blog-card:hover .blog-card-img-wrap img {
  transform: scale(1.07);
  filter: brightness(0.93);
}

/* Shimmer overlay on hover */
.blog-card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0) 75%
  );
  background-size: 200% 100%;
  background-position: -200% 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.blog-card:hover .blog-card-img-wrap::after {
  opacity: 1;
  animation: imgShimmer 0.6s ease forwards;
}

@keyframes imgShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ---------- Card body ---------- */
.blog-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title */
.blog-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.42;
  margin: 0 0 10px;
  transition: color 0.22s ease;

  /* Entrance */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s, color 0.22s ease;
}

.blog-card.blog-visible .blog-card-title {
  opacity: 1;
  transform: translateY(0);
}

.blog-card:hover .blog-card-title {
  color: #E61F7F;
}

/* Excerpt */
.blog-card-excerpt {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.65;
  margin: 0 0 auto;
  padding-bottom: 18px;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.22s, transform 0.4s ease 0.22s;
}

.blog-card.blog-visible .blog-card-excerpt {
  opacity: 1;
  transform: translateY(0);
}

/* Divider */
.blog-card-divider {
  height: 1px;
  background: #eeeeee;
  margin: 0 0 14px;
  transition: background 0.3s ease;
}

.blog-card:hover .blog-card-divider {
  background: #f0c0d8;
}

/* Meta: author + date */
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  flex-wrap: wrap;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.30s, transform 0.4s ease 0.30s;
}

.blog-card.blog-visible .blog-card-meta {
  opacity: 1;
  transform: translateY(0);
}

.blog-card-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cccccc;
  flex-shrink: 0;
}

.blog-card-author {
  font-weight: 600;
  color: #444444;
  transition: color 0.22s ease;
}

.blog-card:hover .blog-card-author {
  color: #E61F7F;
}

.blog-card-date {
  color: #999999;
}

/* ---------- Skeleton loading ---------- */
.blog-card.blog-skeleton .blog-card-img-wrap {
  background: #ebebeb;
}

.blog-card.blog-skeleton .blog-card-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: skelSweep 1.35s ease infinite;
  z-index: 3;
}

.blog-card.blog-skeleton .blog-skel-line {
  display: block;
  border-radius: 6px;
  background: #e8e8e8;
  position: relative;
  overflow: hidden;
}

.blog-card.blog-skeleton .blog-skel-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: skelSweep 1.35s ease infinite;
}

/* Stagger the skeletons slightly */
.blog-card:nth-child(2) .blog-skel-line::after,
.blog-card:nth-child(2) .blog-card-img-wrap::before { animation-delay: 0.18s; }

.blog-card:nth-child(3) .blog-skel-line::after,
.blog-card:nth-child(3) .blog-card-img-wrap::before { animation-delay: 0.36s; }

@keyframes skelSweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Skeleton line sizes */
.blog-skel-title-1 { height: 18px; width: 90%; margin-bottom: 8px; }
.blog-skel-title-2 { height: 18px; width: 65%; margin-bottom: 14px; }
.blog-skel-exc-1   { height: 13px; width: 100%; margin-bottom: 6px; }
.blog-skel-exc-2   { height: 13px; width: 100%; margin-bottom: 6px; }
.blog-skel-exc-3   { height: 13px; width: 72%; margin-bottom: 18px; }
.blog-skel-meta    { height: 12px; width: 55%; }

/* Hide real content while skeleton showing */
.blog-card.blog-skeleton .blog-card-title,
.blog-card.blog-skeleton .blog-card-excerpt,
.blog-card.blog-skeleton .blog-card-divider,
.blog-card.blog-skeleton .blog-card-meta {
  display: none;
}

/* Show skeletons only while loading */
.blog-card:not(.blog-skeleton) .blog-skel-line { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; gap: 14px; }
  .blog-card-title { font-size: 15px; }
}/* End custom CSS */