.cosmetic-store-layout { color: var(--store-text); background: var(--store-background, #fff9fb) !important; font-family: "PT Sans", Arial, sans-serif; }
.cosmetic-store-layout main { min-height: 45vh; }
.cosmetic-store-layout .top-header2 { padding: 10px 0; background: var(--theme-deafult); }
.cosmetic-topbar, .cosmetic-topbar > div { display: flex; align-items: center; }
.cosmetic-topbar { justify-content: space-between; gap: 20px; }
.cosmetic-topbar > div { gap: 18px; }
.cosmetic-topbar, .cosmetic-topbar a { color: var(--theme-on-primary) !important; font-size: 13px; font-weight: 600; }
.cosmetic-topbar details { position: relative; }
.cosmetic-topbar summary { cursor: pointer; list-style: none; }
.cosmetic-topbar details > div { position: absolute; z-index: 80; top: calc(100% + 10px); inset-inline-end: 0; min-width: 130px; padding: 8px; background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.15); }
.cosmetic-topbar details > div a { display: block; padding: 7px 10px; color: #444 !important; }
.cosmetic-store-header .header7 { position: relative; padding: 18px 0; border-bottom: 1px solid #eee; background: #fff; }
.cosmetic-store-header .header-contain { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.cosmetic-store-header .brand-logo img, .cosmetic-store-footer .footer-logo img { display: block; width: auto; max-width: 185px; max-height: 58px; }
.cosmetic-menu-toggle { display: none; border: 0; background: transparent; color: var(--theme-deafult); font-size: 24px; }
.cosmetic-main-menu { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.cosmetic-main-menu > li { position: relative; }
.cosmetic-main-menu > li > a { display: block; padding: 20px 17px; color: #303030; font-size: 16px; font-weight: 700; text-transform: uppercase; }
.cosmetic-main-menu > li > a:hover { color: var(--theme-deafult); }
.cosmetic-category-dropdown { display: none; position: absolute; z-index: 90; top: 100%; inset-inline-start: 0; width: 280px; max-height: 430px; overflow-y: auto; padding: 14px; background: #fff; border-top: 3px solid var(--theme-deafult); box-shadow: 0 12px 35px rgba(0,0,0,.15); }
.cosmetic-category-item:hover .cosmetic-category-dropdown, .cosmetic-category-item:focus-within .cosmetic-category-dropdown { display: block; }
.cosmetic-category-dropdown a { display: flex; align-items: center; gap: 11px; padding: 8px; color: #444; }
.cosmetic-category-dropdown img, .cosmetic-category-dropdown > a > i { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.cosmetic-category-dropdown > a > i { display: grid; place-items: center; color: var(--theme-deafult); }
.cosmetic-store-header .theme-color { display: flex; gap: 12px; margin: 0; padding: 0; }
.cosmetic-store-header .theme-color li { position: relative; }
.cosmetic-store-header .theme-color a, .cosmetic-store-header .theme-color button { display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; color: var(--theme-on-primary) !important; background: var(--theme-deafult); font-size: 17px; }
.cosmetic-store-header .theme-color span { position: absolute; top: -7px; inset-inline-end: -4px; display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; color: #fff; background: #303030; font-size: 10px; }
.cosmetic-search { display: none; position: absolute; z-index: 75; right: 0; left: 0; top: 100%; padding: 16px max(20px, calc((100vw - 1400px)/2)); background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.cosmetic-search.is-open { display: block; }
.cosmetic-search form { display: flex; height: 52px; border: 1px solid #ddd; }
.cosmetic-search input { flex: 1; min-width: 0; padding: 0 18px; border: 0; outline: 0; }
.cosmetic-search select { width: 220px; padding: 0 14px; border: 0; border-inline-start: 1px solid #ddd; background: #fff; }
.cosmetic-search button { width: 55px; border: 0; color: #fff; background: var(--theme-deafult); }
.cosmetic-hero-slide { position: relative; height: min(725px, calc(100vh - 145px)); min-height: 470px; overflow: hidden; }
.cosmetic-hero-slide > img { width: 100%; height: 100%; object-fit: cover; }
.cosmetic-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.65) 42%, rgba(255,255,255,0) 70%); }
.cosmetic-hero-content { position: absolute; inset: 0; display: flex; align-items: center; direction: ltr; }
.cosmetic-hero-content > div { width: min(650px, 54%); text-align: center; }
[dir="rtl"] .cosmetic-hero-content > div { direction: rtl; }
.cosmetic-hero-content h3 { margin-bottom: 16px; color: #303030; font-size: clamp(22px, 2.7vw, 50px); font-weight: 400; }
.cosmetic-hero-content h2 { margin-bottom: 12px; color: var(--theme-deafult); font-size: clamp(38px, 5vw, 72px); font-weight: 800; line-height: 1; text-transform: uppercase; }
.cosmetic-hero-content h4 { margin: 0 auto 28px; color: #303030; font-size: clamp(17px, 1.8vw, 28px); font-weight: 400; line-height: 1.5; }
.cosmetic-store-layout .btn-solid { padding: 13px 28px; border: 1px solid var(--theme-deafult); color: var(--theme-on-primary) !important; background: var(--theme-deafult) !important; }
.cosmetic-hero-slider .slick-dots { bottom: 25px; }
.cosmetic-category-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
.cosmetic-category-grid .category-box { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 28px 14px; color: #444; background: #fff; border-radius: 5px; box-shadow: 0 4px 25px color-mix(in srgb, var(--theme-deafult) 9%, transparent); text-align: center; }
.cosmetic-category-grid .icon-wrapper { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 12px; border-radius: 50%; color: var(--theme-deafult); background: color-mix(in srgb, var(--theme-deafult) 8%, #fff); font-size: 30px; overflow: hidden; }
.cosmetic-category-grid .icon-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.cosmetic-category-grid h6 { overflow: hidden; margin: 0 0 4px; color: #444; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.cosmetic-category-grid small { color: #999; }
.cosmetic-store-layout .title8 { position: relative; width: max-content; max-width: 90%; margin: 70px auto 42px; padding-bottom: 11px; text-align: center; }
.cosmetic-store-layout .title8 h4 { margin: 0; color: #444; font-size: 30px; text-transform: uppercase; }
.cosmetic-store-layout .title8::before { content: ""; position: absolute; bottom: 0; left: 25%; width: 50%; height: 2px; background: var(--theme-deafult); transition: width .3s, left .3s; }
.cosmetic-store-layout .title8:hover::before { left: 0; width: 100%; }
.cosmetic-product-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
.cosmetic-products .product-box { min-width: 0; overflow: hidden; background: #fff; }
.cosmetic-products .product-imgbox { position: relative; overflow: hidden; aspect-ratio: 258/332; background: #f7f7f7; }
.cosmetic-products .product-front, .cosmetic-products .product-front img { display: block; width: 100%; height: 100%; }
.cosmetic-products .product-front img { object-fit: cover; transition: transform .45s; }
.cosmetic-products .product-box:hover .product-front img { transform: scale(1.05); }
.cosmetic-products .product-detail { position: relative; min-height: 120px; padding: 16px 10px 20px; text-align: center; }
.cosmetic-products .product-detail .detail-title { opacity: 1; transition: opacity .25s ease; }
.cosmetic-products .rating-star { min-height: 18px; color: var(--theme-deafult); }
.cosmetic-products .price-title { overflow: hidden; margin: 7px 0 10px; color: #444; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.cosmetic-price { display: flex; justify-content: center; align-items: center; gap: 8px; }
.cosmetic-price span { color: #aaa; text-decoration: line-through; }
.cosmetic-price strong { color: var(--theme-deafult); font-size: 18px; }
.cosmetic-products .product-detail .icon-detail { position: absolute; right: 0; bottom: 34px; left: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.cosmetic-products .product-detail .icon-detail button,
.cosmetic-products .product-detail .icon-detail a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; padding: 0; border: 1px solid #ddd; border-radius: 0; color: #777; background: #fff; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.cosmetic-products .product-detail .icon-detail svg { width: 18px; height: 18px; stroke: currentColor; }
.cosmetic-products .product-detail .icon-detail button:hover,
.cosmetic-products .product-detail .icon-detail a:hover { color: var(--theme-on-primary) !important; border-color: var(--theme-deafult); background: var(--theme-deafult); transform: translateY(-2px); }
.cosmetic-products .product-box:hover .product-detail .detail-title,
.cosmetic-products .product-box:focus-within .product-detail .detail-title { opacity: 0; }
.cosmetic-products .product-box:hover .product-detail .icon-detail,
.cosmetic-products .product-box:focus-within .product-detail .icon-detail { opacity: 1; }
.cosmetic-collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.cosmetic-collection { position: relative; height: 320px; overflow: hidden; background: #eee; }
.cosmetic-collection img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cosmetic-collection:hover img { transform: scale(1.04); }
.cosmetic-collection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.76),rgba(255,255,255,.08) 72%); }
.cosmetic-collection span { position: absolute; z-index: 2; top: 50%; left: 7%; display: flex; width: min(310px, 72%); flex-direction: column; padding: 20px 22px; border-inline-start: 4px solid var(--theme-deafult); background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(45,30,36,.18); backdrop-filter: blur(7px); transform: translateY(-50%); }
[dir="rtl"] .cosmetic-collection span { direction: rtl; }
.cosmetic-collection small { color: var(--theme-deafult); font-size: 14px; font-weight: 800; text-transform: uppercase; }
.cosmetic-collection strong { margin-top: 3px; color: #242124; font-size: 28px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 0 #fff; }
.cosmetic-collection em { margin-top: 11px; color: #3f393c; font-style: normal; font-weight: 700; text-decoration: underline; }
.cosmetic-empty { padding: 50px; background: #fff; text-align: center; }
.cosmetic-store-footer { margin-top: 65px; }
.cosmetic-footer-services { padding: 50px 0; background: color-mix(in srgb, var(--theme-deafult) 4%, #fff); }
.cosmetic-footer-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; text-align: center; }
.cosmetic-footer-service-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: var(--theme-deafult, #f78195); font-size: 19px; transition: transform .3s ease; }
.cosmetic-footer-service:hover .cosmetic-footer-service-icon { transform: scale(1.12); }
.cosmetic-footer-service h4 { margin-bottom: 6px; color: #444; font-size: 18px; font-weight: 700; text-transform: capitalize; }
.cosmetic-footer-service p { margin: 0; color: #777; font-size: 14px; letter-spacing: .03em; }
.cosmetic-footer-subscribe { position: relative; overflow: hidden; }
.cosmetic-footer-subscribe > .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; pointer-events: none; }
.cosmetic-footer-subscribe .container { position: relative; }
.cosmetic-footer-subscribe .subscribe-left .media { display: flex; gap: 15px; }
.cosmetic-footer-subscribe .subscribe-left .media .media-body { margin: 0 !important; }
.cosmetic-footer-subscribe .subscribe-left h6 { margin-bottom: 4px; }
.cosmetic-footer-subscribe .subscribe-left h3 { margin: 0; font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))); font-weight: 700; }
.cosmetic-footer-subscribe .subscribe-right .input-group { flex-wrap: nowrap; }
.cosmetic-footer-subscribe .subscribe-right .form-control { border-radius: 0; }
.cosmetic-footer-subscribe .subscribe-right .input-group-text { border-radius: 0; cursor: pointer; }
.cosmetic-store-footer .footer1 .cosmetic-footer-main { display: grid; grid-template-columns: 1.4fr .9fr 1.2fr 1.1fr; gap: 45px; }
.cosmetic-store-footer .footer1 .cosmetic-footer-main > div { max-width: none; }
.cosmetic-store-footer .footer-title { margin-bottom: 25px; cursor: default; }
.cosmetic-store-footer .footer-contant p { color: #777; line-height: 1.8; }
.cosmetic-store-footer .footer-contant ul li a:hover { color: var(--theme-deafult, #f78195); }
.cosmetic-store-footer .footer-contant .contact-list li { display: flex; gap: 10px; padding-left: 0; color: #8d8d8d; }
.cosmetic-store-footer .footer-contant .contact-list li a { display: flex; gap: 10px; }
.cosmetic-store-footer .footer-contant .contact-list li i { position: static; flex: 0 0 14px; margin-top: 2px; }
.cosmetic-store-footer .footer-contant .paymant { display: flex; flex-wrap: wrap; gap: 10px; }
.cosmetic-store-footer .footer-contant .paymant li { margin: 0 !important; }
.cosmetic-store-footer .footer-contant .paymant li img { width: 28px; }
.cosmetic-store-footer .newsletter-second .input-group { flex-wrap: nowrap; }
.cosmetic-store-footer .newsletter-second .btn { border-radius: 5px; }
.cosmetic-store-footer .subfooter { padding: 18px 0; }
.cosmetic-subfooter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; }
.cosmetic-subfooter p { margin: 0; }
.cosmetic-store-footer .subfooter ul.sosiyal { gap: 10px; }
.cosmetic-store-footer .subfooter ul.sosiyal li { width: 35px; height: 35px; margin: 0 !important; background: #fff; }
.cosmetic-store-footer .subfooter ul.sosiyal li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cosmetic-store-footer .subfooter ul.sosiyal li:hover { background: var(--theme-deafult, #f78195); }
.cosmetic-store-footer .subfooter ul.sosiyal li:hover i { color: #fff; }
[dir="rtl"] .cosmetic-store-footer .newsletter-second .form-control { border-radius: 0 5px 5px 0; }
[dir="rtl"] .cosmetic-store-footer .newsletter-second .input-group-text { border-radius: 5px 0 0 5px; }
@media (max-width: 1199px) { .cosmetic-store-footer .footer1 .cosmetic-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .cosmetic-footer-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cosmetic-footer-subscribe .subscribe-contain { flex-direction: column; gap: 20px; text-align: center; } .cosmetic-footer-subscribe .subscribe-right .form-control { width: min(400px, 60vw); } }
@media (max-width: 575px) { .cosmetic-footer-services-grid, .cosmetic-store-footer .footer1 .cosmetic-footer-main { grid-template-columns: 1fr; } .cosmetic-footer-subscribe .subscribe-left .media { flex-direction: column; align-items: center; } .cosmetic-footer-subscribe .subscribe-right, .cosmetic-footer-subscribe .subscribe-right .form-control { width: 100%; } .cosmetic-subfooter { justify-content: center; text-align: center; } }
@media (max-width: 1199px) { .cosmetic-product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .cosmetic-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .cosmetic-main-menu > li > a { padding-inline: 10px; } }
@media (max-width: 991px) { .cosmetic-topbar .top-header-left span { display: none; } .cosmetic-menu-toggle { display: block; } .cosmetic-store-header .logo-block { display: flex; align-items: center; gap: 12px; } .cosmetic-store-header .menu-block { display: none; position: absolute; z-index: 85; top: 100%; inset-inline: 0; padding: 15px 25px; background: #fff; box-shadow: 0 12px 25px rgba(0,0,0,.15); } .cosmetic-store-header .menu-block.is-open { display: block; } .cosmetic-main-menu { display: block; } .cosmetic-main-menu > li > a { padding: 12px; } .cosmetic-category-dropdown { position: static; width: 100%; } .cosmetic-hero-slide { height: 560px; } }
@media (max-width: 767px) { .cosmetic-topbar { justify-content: center; } .cosmetic-topbar .top-header-left { display: none; } .cosmetic-topbar .top-header-right { gap: 10px; } .cosmetic-topbar .top-header-right > a { font-size: 0; } .cosmetic-topbar .top-header-right > a i { font-size: 14px; } .cosmetic-store-header .brand-logo img { max-width: 125px; } .cosmetic-store-header .theme-color { gap: 6px; } .cosmetic-store-header .theme-color a, .cosmetic-store-header .theme-color button { width: 36px; height: 36px; } .cosmetic-search select { display: none; } .cosmetic-hero-slide { min-height: 390px; height: 390px; } .cosmetic-hero-content > div { width: 82%; } .cosmetic-hero-content h3 { font-size: 17px; } .cosmetic-hero-content h2 { font-size: 34px; } .cosmetic-hero-content h4 { font-size: 15px; } .cosmetic-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cosmetic-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .cosmetic-products .product-detail { min-height: 165px; } .cosmetic-products .product-detail .detail-title { opacity: 1 !important; } .cosmetic-products .product-detail .icon-detail { position: static; margin-top: 12px; opacity: 1; } .cosmetic-products .product-detail .icon-detail button, .cosmetic-products .product-detail .icon-detail a { width: 34px; height: 34px; } .cosmetic-products .product-detail .icon-detail svg { width: 15px; height: 15px; } .cosmetic-collection-grid { grid-template-columns: 1fr; } .cosmetic-collection { height: 260px; } .cosmetic-collection span { left: 5%; width: 78%; padding: 16px 18px; } }

/* Exact cosmetic.html home composition, connected to dynamic storefront data. */
.cosmetic-template-home{overflow:hidden;background:#fff}
.cosmetic-template-home .slide-main{position:relative;height:calc(100vh - 148px);min-height:560px;overflow:hidden;background:color-mix(in srgb, var(--theme-deafult) 12%, #fff)}
.cosmetic-template-home .slide-main>.cosmetic-slide-background{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cosmetic-template-home .slide-main .slide-contain{position:relative;z-index:2}
.cosmetic-template-home .slide-main .animat-block{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.cosmetic-template-home .slide-main .animat-block img{z-index:1!important}
.cosmetic-template-home .slick-slide{height:auto}
.cosmetic-category-carousel .slick-slide,.cosmetic-product-carousel .slick-slide,.cosmetic-services .slick-slide{padding-inline:8px}
.cosmetic-category-carousel .category-box{height:100%;margin:0!important}
.cosmetic-category-carousel .category-box>div{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}
.cosmetic-category-carousel .icon-wrapper{display:grid!important;width:74px!important;height:74px!important;place-items:center;margin:0 auto 12px!important;overflow:hidden;border-radius:50%}
.cosmetic-category-carousel .icon-wrapper img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cosmetic-category-carousel .icon-wrapper i{display:grid;width:100%;height:100%;place-items:center;color:var(--theme-deafult);font-size:32px}
.cosmetic-category-carousel .category-details{text-align:center}
.cosmetic-product-slide{height:100%;padding-bottom:5px}
.cosmetic-product-carousel .slick-track{display:flex}
.cosmetic-product-carousel .slick-slide{height:auto}
.cosmetic-product-carousel .slick-slide>div,.cosmetic-product-carousel .cosmetic-product-slide,.cosmetic-product-carousel .bigdeal-product-card{height:100%}
.bigdeal-product-card--cosmetic .bigdeal-card-image>a{position:relative}
.bigdeal-product-card--cosmetic .bigdeal-card-image__front,.bigdeal-product-card--cosmetic .bigdeal-card-image__back{position:absolute;inset:0;transition:opacity .45s ease,transform .55s ease}
.bigdeal-product-card--cosmetic .bigdeal-card-image__front{z-index:1;opacity:1}
.bigdeal-product-card--cosmetic .bigdeal-card-image__back{z-index:2;opacity:0}
.bigdeal-product-card--cosmetic.bigdeal-product-card--has-secondary:hover .bigdeal-card-image__front,.bigdeal-product-card--cosmetic.bigdeal-product-card--has-secondary:focus-within .bigdeal-card-image__front{opacity:0;transform:scale(1.04)}
.bigdeal-product-card--cosmetic.bigdeal-product-card--has-secondary:hover .bigdeal-card-image__back,.bigdeal-product-card--cosmetic.bigdeal-product-card--has-secondary:focus-within .bigdeal-card-image__back{opacity:1;transform:scale(1.04)}
.cosmetic-template-home .deal-banner{background:var(--theme-deafult)}
.cosmetic-template-home .deal-banner .btn-white{display:inline-block;padding:12px 29px;color:var(--theme-deafult)!important;background:var(--theme-on-primary);font-weight:800;text-transform:uppercase}
.cosmetic-template-home .collection-banner .collection-img{position:relative;overflow:hidden;background:#f5f5f5}
.cosmetic-template-home .collection-banner .collection-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.cosmetic-template-home .collection-banner-main:hover .collection-img img{transform:scale(1.04)}
.cosmetic-promo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-items:stretch}
.cosmetic-promo-main{display:grid;min-width:0;min-height:0;grid-column:span 2;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:15px}
.cosmetic-promo{position:relative;min-width:0;min-height:0;height:100%!important;overflow:hidden}
.cosmetic-promo--wide{grid-column:1/-1}
.cosmetic-promo--tall{grid-column:span 1;aspect-ratio:535/655}
.cosmetic-template-home .collection-banner .cosmetic-promo .collection-img{position:absolute!important;inset:0;width:100%;height:100%!important}
.cosmetic-template-home .collection-banner .cosmetic-promo .collection-banner-contain{z-index:2;max-width:52%;padding:24px!important}
.cosmetic-template-home .collection-banner .cosmetic-promo h3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}
.cosmetic-template-home .collection-banner .cosmetic-promo h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}
.cosmetic-template-home .tab-product-main .tab-prodcut-contain{padding-inline:clamp(18px,4vw,70px)}
.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(1380px,100%);align-items:stretch;justify-content:center;margin:0 auto;padding:0;list-style:none}
.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li,.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li:nth-child(n+2){position:relative;display:flex;align-items:center;justify-content:center;min-width:0;margin:0!important;padding:18px 10px!important}
.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li:before{right:18%;bottom:0!important;left:18%;width:auto!important;height:3px;opacity:0;background:var(--theme-deafult);transform:scaleX(.2);transition:opacity .25s ease,transform .35s ease}
.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li a{display:block;overflow:hidden;width:100%;color:#555;text-align:center;text-overflow:ellipsis;white-space:nowrap;transition:color .25s ease,transform .25s ease}
.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li.current a{color:var(--theme-deafult);transform:translateY(-2px)}
.cosmetic-template-home .tab-product-main.tab-third .tab-prodcut-contain ul li.current:before{opacity:1;background:var(--theme-deafult);transform:scaleX(1)}
.cosmetic-template-home .theme-tab .tab-content.active{display:block;animation:cosmeticTabReveal .38s ease both}
@keyframes cosmeticTabReveal{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.cosmetic-bottom-banners{padding-bottom:0}
.cosmetic-service-icon{display:block;margin:0 auto 15px;color:var(--theme-deafult);font-size:42px;transition:transform .3s ease}
.cosmetic-services .services-box:hover .cosmetic-service-icon{transform:scale(1.15)}
.cosmetic-services .services-box{height:100%;margin:0!important}
.cosmetic-services .media-body{margin:0!important;text-align:center}
@media(max-width:991.98px){
  /* Below desktop the slider keeps the banners' own wide ratio (8:3, the size the admin is asked for) instead of a fixed height that crops them. */
  .cosmetic-template-home .slide-main{height:auto;min-height:0;aspect-ratio:8/3}
  .cosmetic-template-home .collection-banner .collection-banner-main.banner-14 .collection-img{height:500px}
  .cosmetic-template-home .tab-product-main .tab-prodcut-contain ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767.98px){
  .cosmetic-template-home .slide-main .slide-contain{justify-content:center;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.24))}
  .cosmetic-template-home .slide-main .slide-contain>div{max-width:88%}
  .cosmetic-template-home .slide-main .animat-block{opacity:.48}
  .cosmetic-template-home .deal-banner{text-align:center}
  .cosmetic-template-home .deal-banner .deal-banner-containe .deal-btn{justify-content:center;margin-top:20px}
  .cosmetic-template-home .collection-banner .collection-banner-main.banner-14 .collection-img{height:420px}
  .cosmetic-promo-grid{display:flex;aspect-ratio:auto;flex-direction:column;gap:14px}
  .cosmetic-promo-main{display:flex;flex-direction:column;gap:14px}
  .cosmetic-promo--small,.cosmetic-promo--wide{aspect-ratio:535/320}
  .cosmetic-promo--tall{aspect-ratio:535/655}
  .cosmetic-template-home .collection-banner .cosmetic-promo .collection-img{height:100%!important}
  .cosmetic-template-home .collection-banner .cosmetic-promo .collection-banner-contain{max-width:70%;padding:18px!important}
  .cosmetic-template-home .tab-product-main .tab-prodcut-contain{overflow-x:auto;padding-inline:14px;scrollbar-width:thin}
  .cosmetic-template-home .tab-product-main .tab-prodcut-contain ul{display:flex;width:max-content;min-width:100%;justify-content:flex-start;padding-inline:6px}
  .cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li,.cosmetic-template-home .tab-product-main .tab-prodcut-contain ul li:nth-child(n+2){flex:0 0 auto;min-width:145px;margin:0!important;padding:16px 12px!important}
}

/* Before slick runs: each slider shows its first page in one row (as slick will lay it out) instead of stacking every slide. */
[data-cosmetic-main-slider]:not(.slick-initialized),
:is([data-cosmetic-category-slider], [data-cosmetic-product-slider], [data-cosmetic-tab-slider]):not(.slick-initialized) { display: flex; flex-wrap: nowrap; justify-content: flex-start; justify-content: safe center; overflow: hidden; }
[data-cosmetic-main-slider]:not(.slick-initialized) > * { flex: 0 0 100%; min-width: 0; }
:is([data-cosmetic-category-slider], [data-cosmetic-product-slider], [data-cosmetic-tab-slider]):not(.slick-initialized) > * { flex: 0 0 16.6667%; max-width: 16.6667%; min-width: 0; padding-inline: 8px; }
@media (max-width: 1199.98px) { :is([data-cosmetic-category-slider], [data-cosmetic-product-slider], [data-cosmetic-tab-slider]):not(.slick-initialized) > * { flex-basis: 25%; max-width: 25%; } }
@media (max-width: 767.98px) { :is([data-cosmetic-category-slider], [data-cosmetic-product-slider], [data-cosmetic-tab-slider]):not(.slick-initialized) > * { flex-basis: 50%; max-width: 50%; } }
/* Slick makes each slide "inline-block", which leaves a text-line gap under it. */
.cosmetic-template-home .slick-slide > div > * { vertical-align: top; }