/* =========================================================
PROFESSIONAL BLUE & WHITE STORE UPGRADE
Ultra Clean 2026 UI Improvements
========================================================= */

/* ===== ROOT IMPROVEMENTS ===== */

:root{
--blue:#2563EB;
--blue-dark:#1D4ED8;
--blue-soft:#EFF6FF;
--blue-border:#D6E6FF;

--white:#FFFFFF;
--bg:#F4F8FF;

--text:#0F172A;
--text-soft:#64748B;

--radius:18px;
--radius-lg:24px;

--shadow-sm:0 2px 10px rgba(37,99,235,.06);
--shadow-md:0 10px 30px rgba(37,99,235,.10);
--shadow-lg:0 18px 45px rgba(37,99,235,.16);

--transition:.22s cubic-bezier(.4,0,.2,1);
}

/* ===== BODY ===== */

body{
background:linear-gradient(to bottom,#F7FAFF,#EEF5FF);
color:var(--text);
overflow-x:hidden;
}

/* ===== NAVBAR ===== */

.main-nav-container{
background:rgba(255,255,255,.88);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(37,99,235,.08);

box-shadow:
0 4px 24px rgba(37,99,235,.05);

transition:var(--transition);
}

.s-nav-icon-btn{
background:#fff;
border:1.5px solid #E5EEFF;

transition:var(--transition);
}

.s-nav-icon-btn:hover{
background:var(--blue);
border-color:var(--blue);

transform:translateY(-2px) scale(1.03);

box-shadow:
0 10px 20px rgba(37,99,235,.18);
}

/* ===== SEARCH BAR ===== */

.s-search-wrap{
padding:14px 18px 2px;
}

.s-search-bar{
background:rgba(255,255,255,.88);

backdrop-filter:blur(14px);

border:1.5px solid #DCE9FF;

border-radius:22px;

min-height:56px;

box-shadow:
0 8px 24px rgba(37,99,235,.06);

transition:var(--transition);
}

.s-search-bar:hover

.s-search-bar:focus-within{
border-color:var(--blue);

box-shadow:
0 0 0 4px rgba(37,99,235,.08),
0 10px 30px rgba(37,99,235,.10);

background:#fff;
}

.s-search-input{
font-size:14px;
font-weight:600;
}

.s-search-submit{
height:46px;

border-radius:16px;

padding:0 22px;

background:var(--blue);

font-size:13px;
font-weight:800;

margin-right:6px;

transition:var(--transition);

box-shadow:
0 8px 18px rgba(37,99,235,.24);
}

.s-search-submit:hover{
background:var(--blue-dark);

transform:translateY(-1px);

box-shadow:
0 12px 24px rgba(37,99,235,.32);
}

/* ===== HERO SLIDER ===== */

.s-slider-wrapper{
border-radius:32px;

overflow:hidden;

box-shadow:
0 25px 60px rgba(37,99,235,.20);

position:relative;
}

.s-slider-slide{
min-height:520px;

overflow:hidden;

position:relative;
}

.s-slider-slide img{
width:100%;
height:100%;
object-fit:cover;

transition:
transform 7s ease;
}

.s-slider-slide.active img{
transform:scale(1.08);
}

/* overlay */

.s-slider-slide::after{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
120deg,
rgba(15,23,42,.62) 0%,
rgba(37,99,235,.18) 45%,
rgba(255,255,255,0) 100%
);
}

/* slider content */

.s-banner-content{
position:absolute;
z-index:2;

max-width:560px;

padding:70px;
}

.s-banner-title{
font-size:58px;
line-height:1.08;

font-weight:900;

margin-bottom:16px;

color:#fff;

text-shadow:
0 8px 30px rgba(0,0,0,.24);
}

.s-banner-label{
backdrop-filter:blur(12px);

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.18);

padding:7px 16px;

font-size:12px;

margin-bottom:18px;
}

.s-banner-cta{
height:54px;

padding:0 28px;

border-radius:999px;

font-size:14px;
font-weight:800;

box-shadow:
0 14px 35px rgba(0,0,0,.16);

transition:var(--transition);
}

.s-banner-cta:hover{
transform:translateY(-3px) scale(1.02);
}

/* ===== SLIDER DOTS ===== */

.s-slider-dot{
width:9px;
height:9px;

background:rgba(255,255,255,.40);

transition:var(--transition);
}

.s-slider-dot.active{
width:34px;

border-radius:999px;

background:#fff;
}

/* ===== SECTION TITLES ===== */

.s-section-header{
margin-bottom:18px;

padding-bottom:14px;
}

.s-section-title{
font-size:24px;
font-weight:900;

letter-spacing:-.4px;
}

.s-section-title::before{
width:5px;
height:24px;

border-radius:999px;
}

/* ===== PRODUCT CARDS ===== */

.s-product-card-entry{
background:rgba(255,255,255,.90);

backdrop-filter:blur(12px);

border:1px solid rgba(37,99,235,.10);

border-radius:28px;

overflow:hidden;

box-shadow:
0 8px 30px rgba(37,99,235,.07);

transition:all .28s cubic-bezier(.4,0,.2,1);
}

.s-product-card-entry:hover{
transform:
translateY(-10px);

border-color:rgba(37,99,235,.20);

box-shadow:
0 20px 50px rgba(37,99,235,.16);
}

.s-product-card-image{
height:230px;

background:
linear-gradient(
to bottom,
#FFFFFF,
#EEF5FF
);
}

.s-product-card-image img{
transition:
transform .5s ease;
}

.s-product-card-entry:hover .s-product-card-image img{
transform:
scale(1.12)
rotate(-1deg);
}

/* ===== PRODUCT CONTENT ===== */

.s-product-card-content{
padding:18px;
}

.s-product-card-brand{
font-size:11px;
font-weight:800;

letter-spacing:.8px;
}

.s-product-card-title a{
font-size:15px;
line-height:1.6;

font-weight:800;
}

.s-product-card-price{
font-size:24px;
font-weight:900;
}

.s-product-card-add-btn{
width:42px;
height:42px;

border-radius:14px;

font-size:20px;

transition:var(--transition);

box-shadow:
0 8px 20px rgba(37,99,235,.20);
}

.s-product-card-add-btn:hover{
transform:
scale(1.08)
rotate(90deg);
}

/* ===== CATEGORY CARDS ===== */

.s-category-card{
background:rgba(255,255,255,.92);

border-radius:22px;

padding:16px 10px;

border:1px solid rgba(37,99,235,.10);

box-shadow:
0 6px 20px rgba(37,99,235,.05);

transition:var(--transition);
}

.s-category-card:hover{
transform:
translateY(-6px);

box-shadow:
0 16px 30px rgba(37,99,235,.12);
}

.s-category-card-icon{
width:58px;
height:58px;

border-radius:18px;

font-size:24px;
}

/* ===== TRUST CARDS ===== */

.s-trust-card{
background:rgba(255,255,255,.85);

backdrop-filter:blur(12px);

border-radius:22px;

padding:18px;

transition:var(--transition);
}

.s-trust-card:hover{
transform:translateY(-4px);

box-shadow:
0 16px 35px rgba(37,99,235,.10);
}

/* ===== PROMO STRIP ===== */

.s-promo-strip{
border-radius:34px;

padding:34px;

background:
linear-gradient(
135deg,
#2563EB,
#1D4ED8
);

box-shadow:
0 24px 55px rgba(37,99,235,.24);
}

/* ===== BUTTONS ===== */

.btn-primary,
.s-pharma-btn{
height:50px;

border-radius:16px;

font-weight:800;

transition:var(--transition);
}

.btn-primary:hover,
.s-pharma-btn:hover{
transform:
translateY(-2px);

box-shadow:
0 12px 28px rgba(37,99,235,.24);
}

/* ===== CUSTOM AUTO SLIDER ===== */

.s-slider-track{
scroll-behavior:smooth;

animation:
autoSlider 24s linear infinite;
}

.s-slider-track:hover{
animation-play-state:paused;
}

@keyframes autoSlider{
0%{
transform:translateX(0);
}

100%{
transform:translateX(-45%);
}
}

/* ===== SMOOTH SCROLLBAR ===== */

::-webkit-scrollbar{
width:6px;
height:6px;
}

::-webkit-scrollbar-thumb{
background:#BFD4FF;

border-radius:999px;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.s-banner-content{
padding:28px;
}

.s-banner-title{
font-size:34px;
}

.s-slider-slide{
min-height:300px;
}

.s-product-card-entry{
width:170px;
min-width:170px;
}

.s-product-card-image{
height:150px;
}

.s-section-title{
font-size:18px;
}

.s-search-bar{
min-height:50px;
}

.s-search-submit{
height:42px;
padding:0 16px;
}

.s-category-card{
min-width:92px;
}
}

/* ===== ULTRA PREMIUM EFFECT ===== */

.s-product-card-entry,
.s-category-card,
.s-trust-card,
.s-search-bar{
position:relative;
}

.s-product-card-entry::before,
.s-category-card::before{
content:'';

position:absolute;
inset:0;

border-radius:inherit;

padding:1px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.55),
rgba(255,255,255,0)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

pointer-events:none;
}