/*==================================================
VAPOR LUXURY
Premium CSS
==================================================*/

/*========== Google Font ==========*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/*========== Reset ==========*/

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html{

overflow-x:hidden;

}

body{

font-family:'Cairo',sans-serif;

background:#070707;

color:#fff;

overflow-x:hidden;

line-height:1.8;

}

/*========== Variables ==========*/

:root{

--gold:#D4AF37;

--gold-light:#f6d77d;

--dark:#070707;

--dark2:#111111;

--gray:#777;

--white:#fff;

--radius:20px;

--transition:.45s;

--shadow:

0 20px 45px rgba(0,0,0,.35);

}

/*========== Scrollbar ==========*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0b0b0b;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--gold),#b88b18);

border-radius:50px;

}

/*========== Container ==========*/

.container{

width:90%;

max-width:1300px;

margin:auto;

}

/*========== Images ==========*/

img{

display:block;

width:100%;

}

/*========== Links ==========*/

a{

text-decoration:none;

color:inherit;

}

/*========== Buttons ==========*/

.btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:15px 34px;

border-radius:50px;

font-size:15px;

font-weight:700;

transition:.4s;

cursor:pointer;

}

.btn-gold{

background:linear-gradient(135deg,#f7d56d,#c89d27);

color:#111;

box-shadow:

0 8px 25px rgba(212,175,55,.25);

}

.btn-gold:hover{

transform:translateY(-5px);

box-shadow:

0 0 20px rgba(212,175,55,.6);

}

.btn-outline{

border:2px solid rgba(255,255,255,.3);

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

backdrop-filter:blur(8px);

color:#fff;

}

.btn-outline:hover{

background:#fff;

color:#111;

}

/*========== Loader ==========*/

.loader{

position:fixed;

inset:0;

background:#070707;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:999999;

}

.loader img{

width:130px;

animation:logo 2s infinite;

}

@keyframes logo{

50%{

transform:scale(1.08);

}

}

/*========== Top Bar ==========*/

.top-bar{

background:#0f0f0f;

padding:10px 0;

font-size:14px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.top-bar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.top-right{

display:flex;

gap:15px;

}

.top-right a{

transition:.35s;

}

.top-right a:hover{

color:var(--gold);

}

/*========== Hero ==========*/

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

background:url(hero.jpeg) center/cover;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

90deg,

rgba(7,7,7,.85),

rgba(7,7,7,.35)

);

}

.hero .container{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.hero-content h1{

font-size:65px;

line-height:1.2;

margin:15px 0;

}

.hero-content p{

font-size:18px;

color:#ddd;

max-width:550px;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.hero-image img{

width:520px;

margin:auto;

animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

50%{

transform:translateY(-15px);

}

}
/*=========================================
MOBILE RESPONSIVE
=========================================*/

@media (max-width:991px){

.container{

width:94%;

}

/*=================
Top Bar
==================*/

.top-bar{

display:none;

}


/*=================
Hero
==================*/

.hero{

min-height:100vh;

padding:120px 0 60px;

background-position:center;

}

.hero .container{

grid-template-columns:1fr;

text-align:center;

gap:35px;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

}

.hero-image img{

width:85%;

max-width:320px;

margin:auto;

}

.hero-content h1{

font-size:34px;

line-height:1.4;

}

.hero-content p{

font-size:15px;

max-width:100%;

margin:15px auto 30px;

}

.hero-buttons{

justify-content:center;

gap:12px;

}

.hero-buttons .btn{

width:100%;

max-width:230px;

}

/*=================
Titles
==================*/

.section-title{

text-align:center;

margin-bottom:35px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:15px;

color:#bdbdbd;

}

/*=================
Categories
==================*/

.categories{

padding:70px 0;

}

.categories-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.category-card{

border-radius:18px;

overflow:hidden;

background:#141414;

}

.category-card img{

height:150px;

object-fit:cover;

}

.category-card h3{

font-size:15px;

padding:15px 12px 5px;

text-align:center;

}

.category-card a{

display:block;

text-align:center;

padding-bottom:15px;

color:#d4af37;

font-size:14px;

}

/*=================
Products
==================*/

.products{

padding:70px 0;

}

.products-grid{

display:grid;

grid-template-columns:1fr;

gap:22px;

}

.product-card{

border-radius:22px;

overflow:hidden;

background:#151515;

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

}

.product-image{

padding:18px;

}

.product-image img{

height:230px;

object-fit:contain;

}

.product-content{

padding:20px;

}

.product-content h3{

font-size:18px;

margin-bottom:10px;

}

.product-content p{

font-size:14px;

color:#bdbdbd;

}

.price{

margin:15px 0;

display:flex;

justify-content:center;

gap:10px;

font-size:18px;

font-weight:700;

}

.product-buttons{

display:flex;

gap:10px;

}

.product-buttons .btn{

flex:1;

}

.product-buttons button{

width:52px;

border:none;

background:#222;

color:#fff;

border-radius:14px;

cursor:pointer;

}

/*=================
About
==================*/

.about .container{

display:grid;

grid-template-columns:1fr;

gap:30px;

}

.about-image img{

border-radius:20px;

}

/*=================
Reviews
==================*/

.reviews-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

/*=================
Instagram
==================*/

.instagram-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:10px;

}

/*=================
Newsletter
==================*/

.newsletter form{

display:flex;

flex-direction:column;

gap:12px;

}

.newsletter input,

.newsletter button{

width:100%;

height:55px;

border-radius:14px;

}

/*=================
Footer
==================*/

.footer-grid{

display:grid;

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.footer-logo{

width:100px;

margin:auto;

}

}
/*=========================================
PREMIUM ANIMATIONS
=========================================*/

section{

position:relative;

padding:110px 0;

overflow:hidden;

}

section::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:radial-gradient(rgba(212,175,55,.12),transparent 70%);

top:-200px;

right:-180px;

filter:blur(80px);

pointer-events:none;

}

section::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:radial-gradient(rgba(255,255,255,.03),transparent 70%);

left:-150px;

bottom:-180px;

filter:blur(100px);

pointer-events:none;

}

/*==========================
Section Title
===========================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(212,175,55,.12);

color:var(--gold);

font-size:13px;

letter-spacing:2px;

margin-bottom:18px;

}

.section-title h2{

font-size:46px;

font-weight:800;

margin-bottom:18px;

}

.section-title p{

max-width:650px;

margin:auto;

color:#bbb;

}

/*==========================
Category Card
===========================*/

.category-card{

background:#111;

border-radius:24px;

overflow:hidden;

transition:.45s;

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

}

.category-card img{

height:270px;

object-fit:cover;

transition:.6s;

}

.category-card:hover{

transform:translateY(-12px);

box-shadow:

0 0 35px rgba(212,175,55,.25);

}

.category-card:hover img{

transform:scale(1.08);

}

.category-card h3{

font-size:22px;

padding:20px;

text-align:center;

}

.category-card a{

display:block;

padding-bottom:22px;

text-align:center;

color:var(--gold);

font-weight:700;

}

/*==========================
Product Card
===========================*/

.product-card{

background:#121212;

border-radius:28px;

overflow:hidden;

transition:.45s;

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

position:relative;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:

0 0 40px rgba(212,175,55,.30);

}

.product-badge{

position:absolute;

top:18px;

left:18px;

background:linear-gradient(135deg,#f7d56d,#b98d18);

padding:8px 15px;

border-radius:50px;

font-size:12px;

font-weight:700;

color:#111;

z-index:2;

}

.product-image{

padding:35px;

overflow:hidden;

}

.product-image img{

height:320px;

object-fit:contain;

transition:.5s;

}

.product-card:hover .product-image img{

transform:scale(1.08) rotate(-2deg);

}

.product-content{

padding:25px;

text-align:center;

}

.product-content h3{

font-size:24px;

margin-bottom:12px;

}

.product-content p{

color:#aaa;

margin-bottom:18px;

}

.stars{

color:#FFD54A;

font-size:18px;

margin-bottom:15px;

}

.price{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-bottom:25px;

}

.new-price{

font-size:24px;

font-weight:800;

color:var(--gold);

}

.old-price{

text-decoration:line-through;

color:#777;

}

/*==========================
Buttons
===========================*/

.product-buttons{

display:flex;

gap:12px;

}

.product-buttons button{

width:58px;

border:none;

background:#1d1d1d;

border-radius:16px;

cursor:pointer;

color:#fff;

transition:.35s;

}

.product-buttons button:hover{

background:var(--gold);

color:#111;

}

/*==========================
Floating Animation
===========================*/

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.hero-image img{

animation:floating 4s ease-in-out infinite;

}

/*==========================
Fade Animation
===========================*/

.fade-up{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/*==========================
Golden Glow
===========================*/

.gold-glow{

position:absolute;

width:450px;

height:450px;

background:radial-gradient(rgba(212,175,55,.18),transparent 70%);

filter:blur(90px);

pointer-events:none;

}

/*==========================
Luxury Divider
===========================*/

.divider{

width:120px;

height:4px;

margin:20px auto;

border-radius:50px;

background:linear-gradient(90deg,#b98d18,#f7d56d,#b98d18);

}
/*=========================================
NEWSLETTER
=========================================*/

.newsletter{

padding:100px 0;

background:linear-gradient(135deg,#111,#181818);

border-top:1px solid rgba(255,255,255,.05);

border-bottom:1px solid rgba(255,255,255,.05);

}

.newsletter .container{

max-width:850px;

text-align:center;

}

.newsletter h2{

font-size:42px;

margin-bottom:20px;

}

.newsletter p{

color:#bdbdbd;

margin-bottom:40px;

}

.newsletter form{

display:flex;

gap:15px;

justify-content:center;

}

.newsletter input{

flex:1;

height:60px;

padding:0 20px;

background:#151515;

border:none;

outline:none;

color:#fff;

border-radius:50px;

font-size:15px;

}

.newsletter button{

height:60px;

padding:0 40px;

border:none;

border-radius:50px;

background:linear-gradient(135deg,#f6d77d,#b98d18);

font-weight:700;

cursor:pointer;

transition:.4s;

}

.newsletter button:hover{

transform:translateY(-4px);

}

/*=========================================
FAQ
=========================================*/

.faq{

padding:120px 0;

}

.faq-item{

background:#141414;

border-radius:20px;

padding:22px;

margin-bottom:18px;

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

transition:.35s;

}

.faq-item:hover{

border-color:rgba(212,175,55,.4);

box-shadow:0 0 25px rgba(212,175,55,.18);

}

.faq-item h3{

font-size:22px;

margin-bottom:10px;

}

.faq-item p{

color:#bdbdbd;

}

/*=========================================
FOOTER
=========================================*/

footer{

background:#050505;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-logo{

width:130px;

margin-bottom:20px;

}

.footer-grid h3{

margin-bottom:18px;

font-size:22px;

}

.footer-grid ul{

list-style:none;

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid ul li a{

color:#bdbdbd;

transition:.3s;

}

.footer-grid ul li a:hover{

color:var(--gold);

padding-right:8px;

}

.social{

display:flex;

gap:12px;

margin-top:20px;

}

.social a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#151515;

transition:.35s;

}

.social a:hover{

background:var(--gold);

color:#111;

transform:translateY(-6px);

}

.copyright{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

color:#888;

}

/*=========================================
SMOKE EFFECT
=========================================*/

.hero::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:300px;

background:url(images/smoke.png);

background-size:cover;

opacity:.18;

animation:smokeMove 12s linear infinite;

pointer-events:none;

}

@keyframes smokeMove{

0%{

transform:translateX(-60px);

opacity:.08;

}

50%{

opacity:.22;

}

100%{

transform:translateX(60px);

opacity:.08;

}

}

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

@media(max-width:768px){

.newsletter{

padding:70px 18px;

}

.newsletter h2{

font-size:28px;

}

.newsletter form{

flex-direction:column;

}

.newsletter input,

.newsletter button{

width:100%;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.social{

justify-content:center;

}

.hero{

padding-top:90px;

}

.hero-content h1{

font-size:32px;

}

.hero-image img{

max-width:280px;

}

.product-image img{

height:210px;

}

.section-title h2{

font-size:28px;

}

}
header.sticky{

background:rgba(5,5,5,.92);

backdrop-filter:blur(18px);

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

top:0;

border-radius:0 0 18px 18px;

width:100%;

max-width:100%;

left:0;

transform:none;

border:none;

}
/*=========================
Back To Top
=========================*/

.back-top{

position:fixed;

bottom:25px;

left:25px;

width:55px;

height:55px;

border-radius:50%;

background:linear-gradient(135deg,#d4af37,#b98d18);

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:9999;

color:#111;

font-size:20px;

box-shadow:0 10px 25px rgba(0,0,0,.35);

}

.back-top.show{

opacity:1;

visibility:visible;

}

.back-top:hover{

transform:translateY(-6px);

}

/*=========================
Menu Active
=========================*/

nav a.active{

color:#d4af37;

}

/*=========================
Smoke
=========================*/

.smoke{

position:absolute;

bottom:-60px;

width:140px;

height:140px;

background:radial-gradient(rgba(255,255,255,.12),transparent);

border-radius:50%;

filter:blur(30px);

animation:smoke 12s linear infinite;

pointer-events:none;

}

@keyframes smoke{

0%{

transform:translateY(0) scale(.5);

opacity:0;

}

40%{

opacity:.25;

}

100%{

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

opacity:0;

}

}
/* ====== قسم الأقسام ====== */

.categories-grid,
.category-grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* الكارت */
.category-card {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(212,175,55,.25);
    transition: .4s ease;
}

.category-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(212,175,55,.18);
}

.category-content {
    padding: 25px;
    text-align: center;
}

/* الهاتف */
@media (max-width:768px) {

    .categories-grid,
    .category-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }

    .category-card img {
        height: 200px;
    }

}
/* ===========================
   HERO SECTION
=========================== */

.hero{
    min-height:90vh;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:70px;
    max-width:1400px;
    margin:auto;
    padding:80px 6%;
}

.hero-content{
    text-align:right;
}

.hero-content h1{
    font-size:58px;
    color:#fff;
    line-height:1.2;
    margin-bottom:20px;
}

.hero-content p{
    color:#bdbdbd;
    font-size:20px;
    line-height:1.9;
    margin-bottom:35px;
}

.hero-btn{
    display:inline-block;
    background:#d4af37;
    color:#111;
    padding:16px 40px;
    border-radius:50px;
    font-weight:bold;
    text-decoration:none;
    transition:.35s;
}

.hero-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(212,175,55,.35);
}

/* صورة المنتج */

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    width:100%;
    max-width:620px;
    filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));
    animation:float 5s ease-in-out infinite;
}

/* المميزات */

.hero-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:45px;
}

.feature{
    background:#111;
    border:1px solid rgba(212,175,55,.15);
    border-radius:18px;
    padding:22px;
    transition:.35s;
}

.feature:hover{
    transform:translateY(-8px);
    border-color:#d4af37;
}

.feature i{
    color:#d4af37;
    font-size:28px;
    margin-bottom:12px;
}

.feature h4{
    color:#fff;
    margin-bottom:10px;
}

.feature p{
    color:#aaa;
    font-size:15px;
    margin:0;
}

@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

}

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

@media(max-width:992px){

.hero{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
    min-height:auto;
}

.hero-content{
    order:2;
    text-align:center;
}

.hero-image{
    order:1;
}

.hero-content h1{
    font-size:38px;
}

.hero-content p{
    font-size:17px;
}

.hero-features{
    grid-template-columns:1fr;
}

.hero-image img{
    max-width:340px;
}

}
/* ==========================
   LUXURY BANNER FIX
========================== */

.luxury-banner{
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 70vh !important;
    padding: 100px 20px !important;
    overflow: hidden;
}

.luxury-banner .container{
    width: 100% !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative;
    z-index: 2;
}

.luxury-banner h2{
    font-size: 56px !important;
    color: #fff !important;
    font-weight: 800 !important;
    line-height: 1.3;
    margin-bottom: 20px;
}

.luxury-banner p{
    font-size: 22px !important;
    color: rgba(255,255,255,.82) !important;
    line-height: 2;
    max-width: 700px;
    margin: 0 auto 35px;
}

.luxury-banner .btn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 18px 48px;
    border-radius: 60px;
    background: linear-gradient(135deg,#d4af37,#f5d76e);
    color: #111;
    font-weight: 700;
    text-decoration: none;
    transition: .35s;
    box-shadow: 0 12px 35px rgba(212,175,55,.35);
}

.luxury-banner .btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(212,175,55,.45);
}

@media (max-width:768px){

.luxury-banner{
    min-height: 55vh !important;
    padding: 70px 20px !important;
}

.luxury-banner h2{
    font-size: 34px !important;
}

.luxury-banner p{
    font-size: 18px !important;
}

}
/*==============================
      REVIEWS SECTION
==============================*/

.reviews{
    padding:120px 20px;
    background:#050505;
}

.reviews .container{
    max-width:1400px;
    margin:auto;
}

.reviews-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:35px;
    margin-top:60px;
}

.review-card{
    background:linear-gradient(180deg,#181818,#101010);
    border:1px solid rgba(212,175,55,.18);
    border-radius:25px;
    padding:35px;
    text-align:center;
    transition:.45s;
    position:relative;
    overflow:hidden;
}

.review-card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-120%;
    width:250%;
    height:250%;
    background:radial-gradient(circle,
    rgba(212,175,55,.12),
    transparent 60%);
    transition:.6s;
}

.review-card:hover::before{
    top:-60%;
    left:-40%;
}

.review-card:hover{
    transform:translateY(-12px);
    border-color:#d4af37;
    box-shadow:0 20px 50px rgba(212,175,55,.15);
}

.review-avatar{
    width:85px;
    height:85px;
    border-radius:50%;
    background:#d4af37;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin:auto auto 20px;
    font-weight:bold;
}

.review-card h3{
    color:#fff;
    font-size:26px;
    margin-bottom:10px;
}

.review-stars{
    color:#d4af37;
    font-size:20px;
    margin-bottom:18px;
    letter-spacing:4px;
}

.review-card p{
    color:#cfcfcf;
    line-height:2;
    font-size:17px;
}

@media(max-width:992px){

.reviews-grid{
grid-template-columns:repeat(2,1fr)!important;
}

}

@media(max-width:768px){

.reviews-grid{
grid-template-columns:1fr!important;
}

.review-card{
padding:28px;
}

}
/* ==========================
   HERO FIX
========================== */

.hero{
    min-height:100vh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:120px 20px 80px !important;
    position:relative;
}

.hero .container{
    width:100% !important;
    max-width:1400px !important;
    margin:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:80px !important;
}

/* النص */

.hero-content{
    flex:1 !important;
    max-width:620px !important;
    text-align:right !important;
}

.hero-content span{
    display:block;
    color:#d4af37;
    margin-bottom:18px;
    letter-spacing:2px;
}

.hero-content h1{
    font-size:72px !important;
    line-height:1.15 !important;
    font-weight:800;
    color:#fff;
    margin-bottom:25px;

    /* يمنع الكلمة من النزول كل سطر */
    max-width:none !important;
    width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
}

.hero-content p{
    font-size:22px;
    color:#cfcfcf;
    line-height:2;
    margin-bottom:40px;
}

/* الصورة */

.hero-image{
    flex:1 !important;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    width:100%;
    max-width:650px;
    object-fit:contain;
    filter:drop-shadow(0 25px 60px rgba(212,175,55,.15));
}

/* الأزرار */

.hero-buttons{
    display:flex;
    gap:20px;
    justify-content:flex-start;
    flex-wrap:wrap;
}

/* الموبايل */

@media(max-width:992px){

.hero .container{
    flex-direction:column-reverse !important;
    text-align:center;
}

.hero-content{
    text-align:center !important;
    max-width:100% !important;
}

.hero-content h1{
    font-size:48px !important;
}

.hero-content p{
    font-size:18px;
}

.hero-buttons{
    justify-content:center;
}

}
/* =========================
   PREMIUM NAVBAR
========================= */

header{
    position:fixed;
    top:20px;
    left:0;
    width:100%;
    z-index:9999;
    background:none !important;
}

header .container,
.navbar{
    width:min(1400px,92%);
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(12,12,12,.92);
    backdrop-filter:blur(18px);

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

    padding:18px 35px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.45);
}

/* ---------- Logo ---------- */

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#fff;
}

.logo img{
    width:52px;
    height:52px;
    object-fit:contain;
    display:block;
}

.logo span{
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

/* ---------- Menu ---------- */

.nav-links{
    display:flex;
    align-items:center;
    gap:42px;

    list-style:none;
    margin:0;
    padding:0;
}

.nav-links a{
    color:#fff;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    transition:.35s;
    position:relative;
}

.nav-links a:hover{
    color:#d4af37;
}

.nav-links a::after{

content:"";

position:absolute;

left:50%;
bottom:-10px;

width:0;
height:2px;

background:#d4af37;

transition:.35s;

transform:translateX(-50%);

}

.nav-links a:hover::after{
width:100%;
}

/* ---------- Icons ---------- */

.nav-icons{
display:flex;
align-items:center;
gap:22px;
}

.nav-icons a{

color:#fff;
font-size:22px;

transition:.35s;

}

.nav-icons a:hover{

color:#d4af37;
transform:translateY(-3px);

}

/* Cart */

.cart-count{

position:absolute;

top:-8px;
right:-10px;

width:18px;
height:18px;

border-radius:50%;

background:#d4af37;
color:#000;

font-size:11px;

display:flex;
align-items:center;
justify-content:center;

font-weight:bold;

}

/* Mobile */

@media(max-width:992px){

.nav-links{

display:none;

}

.logo img{

width:42px;
height:42px;

}

.logo span{

font-size:18px;

}

header .container,
.navbar{

padding:15px 20px;

}

}
/* ===========================
   HEADER FIX
=========================== */

header{
    position:fixed !important;
    top:0;
    right:0;
    width:100%;
    z-index:9999;
    background:rgba(10,10,10,.95);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

header .container{

    max-width:1400px !important;
    width:92% !important;
    margin:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    height:90px !important;

    padding:0 !important;
}

/* اللوجو */

.logo{

display:flex !important;
align-items:center !important;
justify-content:flex-start !important;

flex:0 0 180px;

}

.logo img{

width:65px !important;
height:auto !important;
display:block !important;

}

/* القائمة */

nav{

flex:1;

display:flex !important;
justify-content:center !important;

}

nav ul{

display:flex !important;
align-items:center !important;
justify-content:center !important;

gap:45px !important;

margin:0 !important;
padding:0 !important;

list-style:none !important;

}

nav ul li{

margin:0 !important;

}

nav ul li a{

color:#fff !important;

font-size:18px !important;

font-weight:700 !important;

text-decoration:none !important;

transition:.3s;

}

nav ul li a:hover{

color:#d4af37 !important;

}

/* الأيقونات */

.header-icons{

display:flex !important;

align-items:center !important;

justify-content:flex-end !important;

gap:22px !important;

flex:0 0 180px;

}

.header-icons a{

color:#fff !important;

font-size:22px !important;

position:relative;

}

.header-icons a:hover{

color:#d4af37 !important;

}

.cart-count{

position:absolute;

top:-8px;
right:-8px;

width:18px;
height:18px;

border-radius:50%;

background:#d4af37;

color:#000;

font-size:11px;

display:flex;
align-items:center;
justify-content:center;

font-weight:bold;

}

/* زر الموبايل */

.menu-btn{

display:none;

background:none;

border:none;

color:#fff;

font-size:28px;

cursor:pointer;

}

/* موبايل */

@media(max-width:991px){

header .container{

height:75px !important;

}

nav{

display:none !important;

}

.menu-btn{

display:block !important;

}

.header-icons{

flex:none;

}

}
/* ==========================
FINAL HEADER FIX
========================== */

header{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;

    width:100% !important;
    max-width:100% !important;

    transform:none !important;

    background:rgba(8,8,8,.96) !important;
    backdrop-filter:blur(18px) !important;

    border:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;

    border-radius:0 !important;

    z-index:99999 !important;
}

header.sticky{
    top:0 !important;
    width:100% !important;
    max-width:100% !important;
    left:0 !important;
    transform:none !important;
    border-radius:0 !important;
}

header .container{
    width:92% !important;
    max-width:1400px !important;
    margin:auto !important;

    height:85px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}

.logo{
    flex:0 0 180px !important;
}

nav{
    flex:1 !important;
    display:flex !important;
    justify-content:center !important;
}

.header-icons{
    flex:0 0 180px !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:20px !important;
}
/* ===== FEATURES GRID ===== */

.features .container{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:25px !important;
}

.feature{
    display:flex !important;
    align-items:center !important;
    gap:20px !important;

    background:#111 !important;
    border:1px solid rgba(212,175,55,.2) !important;
    border-radius:22px !important;

    padding:30px !important;
    transition:.35s;
}

.feature:hover{
    transform:translateY(-8px);
    border-color:#d4af37;
    box-shadow:0 15px 35px rgba(212,175,55,.15);
}

.feature i{
    font-size:38px !important;
    color:#d4af37;
    min-width:60px;
}

.feature h3{
    margin-bottom:8px;
    font-size:24px;
}

.feature p{
    color:#bdbdbd;
    margin:0;
}

/* الهاتف */

@media(max-width:768px){

.features .container{
    grid-template-columns:1fr !important;
}

}
/* =====================================
FINAL MOBILE FIX
ضعه آخر سطر في ملف CSS
===================================== */

@media screen and (max-width:768px){

html,
body{
    overflow-x:hidden !important;
}

/* Header */

header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:75px !important;
    background:#090909 !important;
    border-radius:0 !important;
    padding:0 !important;
}

header .container{
    width:92% !important;
    height:75px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}

/* Logo */

.logo{
    flex:none !important;
}

.logo img{
    width:42px !important;
    height:auto !important;
}

/* Menu */

nav{
    display:none !important;
}

/* Hero */

.hero{
    min-height:auto !important;
    padding:110px 20px 50px !important;
    background-position:center !important;
}

.hero .container{
    display:flex !important;
    flex-direction:column-reverse !important;
    gap:35px !important;
    text-align:center !important;
}

.hero-content{
    width:100% !important;
    text-align:center !important;
}

.hero-content h1{
    font-size:42px !important;
    line-height:1.2 !important;
    margin-bottom:18px !important;
}

.hero-content p{
    width:100% !important;
    font-size:17px !important;
    line-height:1.8 !important;
}

/* Buttons */

.hero-buttons{
    display:flex !important;
    flex-direction:column !important;
    gap:15px !important;
}

.hero-buttons .btn{
    width:100% !important;
}

/* Image */

.hero-image{
    width:100% !important;
}

.hero-image img{
    max-width:260px !important;
    margin:auto !important;
}

/* Products */

.products-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:15px !important;
}

.product-card{
    border-radius:18px !important;
}

.product-image img{
    height:150px !important;
}

/* Features */

.features .container{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:15px !important;
}

.feature{
    padding:18px !important;
}

}
/* ===== Mobile Menu ===== */

@media(max-width:991px){

nav{

position:fixed;
top:75px;
right:-100%;

width:270px;
height:calc(100vh - 75px);

background:#111;

display:flex !important;
flex-direction:column;

padding:30px;

transition:.4s;

z-index:9999;

}

nav.active{

right:0;

}

nav ul{

display:flex !important;
flex-direction:column !important;
gap:25px !important;

width:100%;

}

nav ul li{

width:100%;

}

nav ul li a{

display:block;
width:100%;

}

}
/* ===========================
   HERO FINAL FIX
=========================== */

.hero-content{
    max-width: 520px !important;
    margin-right: auto !important;
    text-align: right !important;
    z-index: 5;
}

/* العنوان */
.hero-content h1{
    font-size: clamp(48px,5vw,72px) !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
    font-weight: 800 !important;
}

/* الوصف */
.hero-content p{
    font-size: 21px !important;
    line-height: 1.9 !important;
    color: rgba(255,255,255,.78) !important;
    max-width: 470px;
    margin: 0 auto 35px auto !important;
}

/* الزرارين */
.hero-buttons{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    margin-top: 35px !important;
    width: 100%;
}

.hero-buttons .btn{
    min-width: 190px;
    height: 58px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
}

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

@media(max-width:991px){

.hero-content{
    max-width:100% !important;
    text-align:center !important;
    margin:auto !important;
}

.hero-content h1{
    font-size:42px !important;
}

.hero-content p{
    font-size:17px !important;
    max-width:100%;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.hero-buttons .btn{
    width:100%;
    max-width:300px;
}

}
/* ==========================
   Hero Buttons Bottom Center
========================== */

.hero{
    position: relative;
}

.hero-buttons{
    position: absolute;
    left: 50%;
    bottom: -300px;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.hero-buttons .btn{
    min-width: 200px;
    height: 60px;
    font-size: 20px;
    border-radius: 50px;
}

/* الهاتف */
@media (max-width:768px){

.hero-buttons{
    width: 100%;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 15px;
}

.hero-buttons .btn{
    width: 85%;
    max-width: 320px;
    height: 55px;
    font-size: 18px;
}

}
.hero-buttons{
    position: absolute;
    left: 50%;
    bottom: -230px;
    transform: translateX(-45%);
}
/*=========================
SMALL PRODUCT CARD
=========================*/

.product-card{
    padding:15px !important;
    border-radius:18px;
    min-height:470px;
}

.product-image{
    height:140px !important;
    margin-bottom:10px;
}

.product-image img{
    max-width:95px !important;
    max-height:130px !important;
    object-fit:contain;
}

.stars{
    font-size:14px;
    margin-bottom:8px;
}

.product-content h3{
    font-size:22px !important;
    line-height:1.3;
    margin:8px 0;
    text-align:center;
}

.product-content p{
    font-size:15px;
    line-height:1.7;
    text-align:center;
    color:#bdbdbd;
    min-height:45px;
    margin-bottom:12px;
}

.price{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.new-price{
    font-size:26px !important;
    font-weight:700;
}

.old-price{
    font-size:15px;
}

.product-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:15px;
}

.product-buttons .btn{
    width:100%;
    height:46px;
    font-size:16px;
    border-radius:30px;
}

.product-buttons button{
    width:46px;
    height:46px;
    margin:auto;
    border-radius:50%;
}
/*=========================
ONE PRODUCT PER ROW - MOBILE
=========================*/

@media (max-width:768px){

.products-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px;
    padding:0 15px;
}

.product-card{
    width:100% !important;
    max-width:360px;
    margin:auto;
}

}
/* ===== Premium About ===== */

.about{
    padding:100px 20px;
    background:#080808;
}

.about .container{
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-content{
    width:100%;
    max-width:900px;
    background:#111;
    border:1px solid rgba(212,175,55,.18);
    border-radius:28px;
    padding:60px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.about-content span:first-child{
    color:#d4af37;
    letter-spacing:3px;
    font-size:14px;
    display:block;
    margin-bottom:15px;
}

.about-content h2{
    color:#fff;
    font-size:55px;
    margin-bottom:20px;
    line-height:1.2;
}

.about-content p{
    max-width:650px;
    margin:0 auto 40px;
    color:#bdbdbd;
    line-height:2;
    font-size:20px;
}

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:40px;
}

.about-features div{
    background:#1a1a1a;
    border-radius:18px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:.3s;
}

.about-features div:hover{
    transform:translateY(-6px);
    background:#232323;
}

.about-features i{
    color:#d4af37;
    font-size:20px;
}

.about-features span{
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.about .btn{
    width:240px;
    height:60px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50px;
}

/* Mobile */

@media(max-width:768px){

.about{
    padding:70px 15px;
}

.about-content{
    padding:30px 22px;
}

.about-content h2{
    font-size:34px;
}

.about-content p{
    font-size:16px;
}

.about-features{
    grid-template-columns:1fr;
}

.about .btn{
    width:100%;
}

}
/*==================================
WHY US
==================================*/

.why-us{
    padding:110px 0;
    background:#090909;
    position:relative;
    overflow:hidden;
}

.why-us .section-title{
    text-align:center;
    margin-bottom:60px;
}

.why-us .section-title span{
    color:#d4af37;
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;
    display:block;
    margin-bottom:12px;
}

.why-us .section-title h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.why-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,175,55,.15);
    border-radius:24px;
    padding:45px 30px;
    text-align:center;
    transition:.4s;
    backdrop-filter:blur(12px);
    position:relative;
    overflow:hidden;
}

.why-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    transition:.8s;
}

.why-card:hover::before{
    left:120%;
}

.why-card:hover{
    transform:translateY(-12px);
    border-color:#d4af37;
    box-shadow:0 20px 50px rgba(212,175,55,.15);
}

.why-card i{
    width:80px;
    height:80px;
    background:#d4af37;
    color:#000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
    font-size:34px;
}

.why-card h3{
    color:#fff;
    font-size:28px;
    margin-bottom:15px;
}

.why-card p{
    color:#bfbfbf;
    line-height:1.9;
    font-size:17px;
}

/*==========================
Tablet
==========================*/

@media(max-width:992px){

.why-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

}

/*==========================
Mobile
==========================*/

@media(max-width:768px){

.why-us{
padding:70px 15px;
}

.why-grid{
grid-template-columns:1fr;
gap:18px;
}

.why-us .section-title h2{
font-size:34px;
}

.why-card{
padding:30px 20px;
border-radius:20px;
}

.why-card i{
width:65px;
height:65px;
font-size:26px;
margin-bottom:18px;
}

.why-card h3{
font-size:22px;
}

.why-card p{
font-size:15px;
}

}
/*==================================
ESSENTIAL OILS
==================================*/

.oils{
    padding:110px 0;
    background:#050505;
    position:relative;
    overflow:hidden;
}

.oils .section-title{
    text-align:center;
    margin-bottom:60px;
}

.oils .section-title span{
    color:#d4af37;
    letter-spacing:3px;
    font-size:14px;
    text-transform:uppercase;
    display:block;
    margin-bottom:12px;
}

.oils .section-title h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
}

.oils-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.oil{
    background:#111;
    border:1px solid rgba(212,175,55,.15);
    border-radius:26px;
    padding:30px 20px;
    text-align:center;
    transition:.4s;
    overflow:hidden;
    position:relative;
}

.oil::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent,rgba(212,175,55,.05));
    opacity:0;
    transition:.4s;
}

.oil:hover{
    transform:translateY(-12px);
    border-color:#d4af37;
    box-shadow:0 20px 50px rgba(212,175,55,.15);
}

.oil:hover::before{
    opacity:1;
}

.oil img{
    width:170px;
    height:170px;
    object-fit:contain;
    display:block;
    margin:auto;
    transition:.5s;
}

.oil:hover img{
    transform:scale(1.08) rotate(-4deg);
}

.oil h3{
    margin-top:25px;
    color:#fff;
    font-size:24px;
    font-weight:700;
}

.oil p{
    color:#bdbdbd;
    font-size:15px;
    margin:12px 0 18px;
    line-height:1.8;
}

.oil .price{
    display:block;
    color:#d4af37;
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
}

.oil .btn{
    width:100%;
    border-radius:50px;
}

/* Tablet */

@media(max-width:992px){

.oils-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* Mobile */

@media(max-width:768px){

.oils{
padding:70px 15px;
}

.oils .section-title h2{
font-size:34px;
}

.oils-grid{
grid-template-columns:1fr;
gap:20px;
}

.oil{
padding:25px 15px;
}

.oil img{
width:140px;
height:140px;
}

.oil h3{
font-size:21px;
}

}
/*==================================
PREMIUM UI UPGRADE
==================================*/

/* خلفية */
body{
    background:#050505;
    color:#fff;
}

/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(#d4af37,#8f6a00);
    border-radius:30px;
}

/* أقسام */

section{
    padding:100px 0;
    position:relative;
}

/* عنوان */

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#d4af37;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:14px;
}

.section-title h2{
    color:#fff;
    font-size:48px;
    margin-top:12px;
    position:relative;
}

.section-title h2::after{

content:"";

position:absolute;

bottom:-18px;

left:50%;

transform:translateX(-50%);

width:80px;

height:3px;

background:#d4af37;

border-radius:20px;

}

/* الكروت */

.product-card,
.feature,
.why-card,
.oil,
.review-card{

background:rgba(20,20,20,.88);

backdrop-filter:blur(14px);

border:1px solid rgba(212,175,55,.12);

border-radius:24px;

transition:.45s;

overflow:hidden;

position:relative;

}

/* لمعة */

.product-card::before,
.feature::before,
.why-card::before,
.oil::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.18),
transparent);

transition:1s;

}

.product-card:hover::before,
.feature:hover::before,
.why-card:hover::before,
.oil:hover::before{

left:160%;

}

.product-card:hover,
.feature:hover,
.why-card:hover,
.oil:hover{

transform:translateY(-10px);

box-shadow:

0 0 35px rgba(212,175,55,.18),

0 20px 50px rgba(0,0,0,.5);

border-color:#d4af37;

}

/* الصور */

.product-card img,
.oil img{

transition:.6s;

}

.product-card:hover img,
.oil:hover img{

transform:scale(1.08);

}

/* الأزرار */

.btn{

border-radius:50px;

padding:15px 35px;

font-weight:700;

position:relative;

overflow:hidden;

transition:.35s;

}

.btn::after{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent);

transition:.6s;

}

.btn:hover::after{

left:120%;

}

.btn:hover{

transform:translateY(-5px);

}

/* أيقونات */

i{

transition:.4s;

}

.feature:hover i,
.why-card:hover i{

transform:scale(1.15);

color:#FFD54A;

}

/* الصور */

img{

max-width:100%;

display:block;

}

/* أنيميشن */

.fade-up{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:none;

}

/* موبايل */

@media(max-width:768px){

section{

padding:70px 15px;

}

.section-title h2{

font-size:34px;

}

.product-card,
.feature,
.why-card,
.oil{

border-radius:18px;

}

.btn{

width:100%;

}

}
/*==========================
HERO IMAGES
==========================*/

.hero{
    position:relative;
    overflow:hidden;
}

.hero-desktop,
.hero-mobile{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    z-index:1;
}

/* افتراضياً */
.hero-desktop{
    display:block;
}

.hero-mobile{
    display:none;
}

/* المحتوى فوق الصور */

.hero-content{
    position:relative;
    z-index:2;
}

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

@media (max-width:768px){

.hero-desktop{
    display:none !important;
}

.hero-mobile{
    display:block !important;
}

}
@media (max-width:768px){

.hero{
    background: url("hero.png") center center no-repeat;
    background-size: contain;
    background-color:#000;
}

}

/* Mobile */
@media (max-width:768px){

.hero{
    background: url("hero2.png") center center/cover no-repeat !important;
    min-height: 100svh;
}

}
/*=========================
HERO BUTTONS
=========================*/

.hero-buttons{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    margin-top:40px !important;
}

.hero-buttons .btn{
    width:170px !important;
    height:52px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:0 !important;
    font-size:17px !important;
    font-weight:700 !important;
    border-radius:50px !important;
    transition:.3s;
}

.hero-buttons .btn:hover{
    transform:translateY(-4px);
}

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

@media (max-width:768px){

.hero-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:20px !important;
}

.hero-buttons .btn{
    width:135px !important;
    height:30px !important;
    font-size:15px !important;
    border-radius:40px !important;
}

}
/*=========================
PRODUCT IMAGE ANIMATION
=========================*/

.product-image{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image img{
    width: 100%;
    max-width: 280px;
    transition: transform .5s ease, filter .5s ease;
    animation: floatProduct 4s ease-in-out infinite;
    filter: drop-shadow(0 20px 35px rgba(212,175,55,.25));
}

/* عند مرور الماوس */
.product-card:hover .product-image img{
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 25px 45px rgba(212,175,55,.45));
}

/* حركة بسيطة */
@keyframes floatProduct{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10px);
    }
    100%{
        transform: translateY(0);
    }
}
/*==============================
PREMIUM PRODUCT CARD
==============================*/

.product-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
    transition:.35s;
    position:relative;
    max-width:340px;
    margin:auto;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

/* Image */

.product-image{
    background:#f8f8f8;
    padding:20px;
    height:330px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.4s;
}

.product-card:hover .product-image img{
    transform:scale(1.05);
}

/* Content */

.product-content{
    padding:22px;
    text-align:center;
}

.product-title{
    font-size:28px;
    font-weight:800;
    color:#111;
    margin-bottom:8px;
}

.product-desc{
    color:#666;
    font-size:16px;
    margin-bottom:18px;
}

/* Price */

.price-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.old-price{
    color:#999;
    text-decoration:line-through;
    font-size:18px;
}

.new-price{
    color:#111;
    font-size:34px;
    font-weight:800;
}

/* Discount */

.discount{
    position:absolute;
    top:18px;
    left:18px;
    background:#d91c2f;
    color:#fff;
    padding:8px 14px;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
}

/* Button */

.buy-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:50px;
    background:#0f2b5b;
    color:#fff;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.buy-btn:hover{
    background:#183d79;
}

/* Mobile */

@media(max-width:768px){

.product-card{
    max-width:280px;
}

.product-image{
    height:240px;
}

.product-title{
    font-size:22px;
}

.new-price{
    font-size:28px;
}

.buy-btn{
    height:50px;
    font-size:18px;
}

}
/* تكبير صورة المنتج */

.product-image{
    height: 380px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    overflow: hidden;
}

.product-image img{
    width: 90% !important;
    height: 90% !important;
    object-fit: contain;
    transition: .4s;
}

.product-card:hover .product-image img{
    transform: scale(1.08);
}
/* ===== تكبير صورة المنتج ===== */

.product-image{
    width:100%;
    height:320px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#fff;
    border-radius:20px 20px 0 0;
}

.product-image img{
    width:140% !important;
    height:140% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    transition:.4s;
}

.product-card:hover .product-image img{
    transform:scale(1.08);
}
/* ==========================
   Product Card Typography
========================== */

.product-content{
    padding:22px;
    text-align:center;
}

.product-content h3{
    font-size:32px;
    font-weight:800;
    color:#111;
    margin-bottom:12px;
    line-height:1.2;
    letter-spacing:-0.5px;
}

.product-content p{
    font-size:16px;
    line-height:1.9;
    color:#666;
    margin:0 auto 20px;
    max-width:90%;
    text-align:center;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-price{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:18px 0 22px;
}

.product-price .new-price{
    font-size:38px;
    font-weight:800;
    color:#111;
}

.product-price .old-price{
    font-size:22px;
    color:#999;
    text-decoration:line-through;
}

.product-content .btn{
    width:100%;
    height:58px;
    border-radius:40px;
    font-size:20px;
    font-weight:700;
}
/*=========================
Product Image Slider
=========================*/

.product-image{
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.product-image img{
    position: absolute;
    width: 85%;
    height: 85%;
    object-fit: contain;
    opacity: 0;
    animation: slider 9s infinite;
    transition: transform .5s;
}

.product-image img:nth-child(1){
    animation-delay:0s;
}

.product-image img:nth-child(2){
    animation-delay:3s;
}

.product-image img:nth-child(3){
    animation-delay:6s;
}

@keyframes slider{

0%,30%{
    opacity:1;
    transform:scale(1);
}

33%,100%{
    opacity:0;
    transform:scale(1.08);
}

}

/*=========================
Discount Badge
=========================*/

.discount{
    position:absolute;
    top:15px;
    left:15px;
    z-index:10;
    background:linear-gradient(135deg,#ff3b30,#ff6b00);
    color:#fff;
    font-size:15px;
    font-weight:700;
    padding:8px 14px;
    border-radius:30px;
    box-shadow:0 10px 25px rgba(255,70,0,.35);
    animation:pulse 2s infinite;
}

@keyframes pulse{

0%,100%{
    transform:scale(1);
}

50%{
    transform:scale(1.08);
}

}
/* تصغير ارتفاع الكارت */
.product-card{
    min-height: 620px !important; /* قلل أو زود الرقم حسب رغبتك */
    padding: 18px !important;
}

/* تصغير مساحة الصورة */
.product-image{
    height: 300px !important;
}

/* تقليل المسافات */
.product-content{
    padding: 16px 18px !important;
}

.product-content h3{
    margin: 10px 0 8px;
}

.product-content p{
    margin: 0 0 12px;
    line-height: 1.6;
}

/* تقليل مساحة الأسعار */
.product-price{
    margin: 12px 0;
}

/* تصغير الزر */
.product-card .btn{
    height: 50px;
    font-size: 18px;
    margin-top: 10px;
}
/* إظهار الصورة كاملة */

.product-image{
    width:100%;
    height:340px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#fff;
    padding:15px;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    object-position:center;
    display:block;
}
/*==========================
OIL CATEGORY
==========================*/

.oil-category{
    padding:70px 0 20px;
}

.category-title{
    font-size:38px;
    font-weight:800;
    color:#fff;
    margin-bottom:35px;
    padding:16px 25px;
    border-radius:14px;
    background:linear-gradient(90deg,#0d1b2a,#d4af37);
    position:relative;
    overflow:hidden;
    letter-spacing:1px;
}

.category-title::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:180px;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15));
}

.oils-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}
.oil img{
    width: 180px;
    height: 180px;
    object-fit: contain;
    display: block;
    margin: 20px auto;
    transition: .35s ease;
}

.oil:hover img{
    transform: scale(1.08);
}
/* ===== FIX OIL IMAGES ===== */

.oils .oil,
.oils-grid .oil{
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px !important;
}

.oils .oil img,
.oils-grid .oil img{
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    object-fit: contain !important;
    margin: 0 auto 18px !important;
    transform: scale(1.3) !important;
    transition: .35s ease;
}

.oils .oil:hover img,
.oils-grid .oil:hover img{
    transform: scale(1.4) !important;
}

.oils .oil h3,
.oils-grid .oil h3{
    margin-top: 15px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}
.buy-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:62px;
    background:linear-gradient(135deg,#FFD95A,#D4AF37);
    color:#111;
    font-size:20px;
    font-weight:700;
    border:none;
    border-radius:50px;
    cursor:pointer;
    text-decoration:none;
    transition:.35s ease;
    box-shadow:0 10px 30px rgba(212,175,55,.35);
    overflow:hidden;
    position:relative;
}

.buy-btn:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 18px 45px rgba(212,175,55,.55);
}

.buy-btn:active{
    transform:scale(.98);
}

.buy-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transition:.8s;
}

.buy-btn:hover::before{
    left:160%;
}
/*==============================
LUXURY LIGHT THEME
==============================*/

:root{
    --primary:#0F2742;
    --gold:#D4AF37;
    --gold-light:#F6E7A8;
    --bg:#FAFBFD;
    --white:#ffffff;
    --text:#1D1D1D;
    --gray:#666;
}

/* الخلفية */
body{
    background:linear-gradient(to bottom,#FAFBFD,#F4F7FB);
    color:var(--text);
}

/* جميع السيكشنات */
section{
    background:transparent;
}

/* الهيدر */
header,
.sticky{
    background:rgba(255,255,255,.95)!important;
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(15,39,66,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* اللينكات */
header a,
nav a{
    color:var(--primary)!important;
    font-weight:700;
}

header a:hover{
    color:var(--gold)!important;
}

/* الكروت */
.product-card,
.oil,
.why-card,
.about-content,
.feature-card{
    background:#fff!important;
    border:1px solid rgba(15,39,66,.08);
    border-radius:24px;
    box-shadow:0 15px 40px rgba(15,39,66,.08);
    transition:.35s;
}

.product-card:hover,
.oil:hover,
.why-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:0 20px 45px rgba(212,175,55,.18);
}

/* العناوين */
h1,h2,h3{
    color:var(--primary);
}

/* الفقرات */
p{
    color:#555;
}

/* الزرار الذهبي */
.btn-gold,
.buy-btn{
    background:linear-gradient(135deg,#FFE38A,#D4AF37);
    color:#0F2742;
    border:none;
    box-shadow:0 12px 30px rgba(212,175,55,.35);
}

.btn-gold:hover,
.buy-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(212,175,55,.45);
}

/* الزرار الشفاف */
.btn-outline{
    background:#fff;
    color:#0F2742;
    border:2px solid var(--gold);
}

.btn-outline:hover{
    background:var(--gold);
    color:#fff;
}

/* عناوين الأقسام */
.section-title span{
    color:var(--gold);
    letter-spacing:2px;
}

.section-title h2{
    color:var(--primary);
}

/* شريط التصنيفات */
.category-title,
.oil-category{
    background:linear-gradient(90deg,#0F2742,#D4AF37);
    color:#fff;
    padding:18px 35px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(15,39,66,.18);
}

/* الفوتر */
footer{
    background:#0F2742;
    color:#fff;
}

footer a{
    color:#F6E7A8;
}

footer a:hover{
    color:#fff;
}
/*==================================
PREMIUM TYPOGRAPHY
ضعه آخر ملف CSS
==================================*/

/* الخط الأساسي */
body{
    font-family:'Cairo',sans-serif;
    color:#10233E !important;
    font-weight:600;
}

/* جميع العناوين */
h1,h2,h3,h4,h5,h6{
    color:#10233E !important;
    font-weight:800 !important;
    letter-spacing:-0.3px;
}

/* الفقرات */
p{
    color:#2F3D4F !important;
    font-size:17px;
    font-weight:600 !important;
    line-height:2;
}

/* الروابط */
a{
    color:#10233E !important;
    font-weight:700 !important;
}

a:hover{
    color:#D4AF37 !important;
}

/* القوائم */
li,
span,
small,
label{
    color:#20334C !important;
    font-weight:600 !important;
}

/* أسماء المنتجات */
.product-title,
.product-content h3,
.oil h3,
.why-card h3{
    color:#10233E !important;
    font-weight:800 !important;
}

/* وصف المنتجات */
.product-content p,
.oil p,
.why-card p,
.about-content p{
    color:#4A5568 !important;
    font-weight:600 !important;
}

/* عناوين الأقسام */
.section-title h2{
    color:#10233E !important;
    font-weight:900 !important;
}

.section-title span{
    color:#D4AF37 !important;
    font-weight:800 !important;
}

/* الأسعار */
.new-price{
    color:#10233E !important;
    font-weight:900 !important;
}

.old-price{
    color:#8A8A8A !important;
}

/* أزرار */
.btn,
.buy-btn{
    font-weight:800 !important;
}
/*=========================
FAQ LIGHT THEME
=========================*/

.faq{
    background:#F8FAFC !important;
}

.faq-item{
    background:#ffffff !important;
    border:1px solid rgba(15,39,66,.08) !important;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(15,39,66,.08);
    transition:.35s;
}

.faq-item:hover{
    transform:translateY(-5px);
    border-color:#D4AF37 !important;
    box-shadow:0 18px 40px rgba(212,175,55,.18);
}

/* السؤال */
.faq-item h3{
    color:#10233E !important;
    font-size:24px;
    font-weight:800;
}

/* الإجابة */
.faq-item p{
    color:#4A5568 !important;
    font-size:17px;
    font-weight:600;
    line-height:1.9;
}

/* لو عندك أيقونة + */
.faq-item i{
    color:#D4AF37 !important;
    font-size:20px;
}

/* لو العنصر مفتوح */
.faq-item.active{
    border-color:#D4AF37 !important;
    background:#FFFDF7 !important;
}
/*=========================
REVIEWS LIGHT THEME
=========================*/

.reviews{
    background:#F8FAFC !important;
}

.review-card,
.testimonial-card,
.review-box{
    background:#ffffff !important;
    border:1px solid rgba(15,39,66,.08);
    border-radius:20px;
    box-shadow:0 15px 35px rgba(15,39,66,.08);
    transition:.35s;
}

.review-card:hover,
.testimonial-card:hover,
.review-box:hover{
    transform:translateY(-8px);
    border-color:#D4AF37;
    box-shadow:0 20px 45px rgba(212,175,55,.18);
}

/* اسم العميل */
.review-card h3,
.testimonial-card h3,
.review-box h3{
    color:#10233E !important;
    font-size:24px;
    font-weight:800;
}

/* التعليق */
.review-card p,
.testimonial-card p,
.review-box p{
    color:#444 !important;
    font-size:17px;
    font-weight:600;
    line-height:1.9;
}

/* النجوم */
.review-card i,
.review-card .stars,
.testimonial-card i,
.review-box i{
    color:#D4AF37 !important;
}

/* عنوان القسم */
.reviews h2{
    color:#10233E !important;
    font-size:52px;
    font-weight:900;
}

.reviews span{
    color:#D4AF37 !important;
    font-weight:800;
}
/*=========================
ABOUT VAPOR
=========================*/

.about{
    background:#fff;
    border-radius:30px;
    padding:70px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.about span{
    color:#D4AF37 !important;
    font-weight:800;
    letter-spacing:2px;
}

.about h2{
    color:#162B4D !important;
    font-size:60px;
    font-weight:900;
}

.about p{
    color:#555 !important;
    font-size:22px;
    font-weight:600;
    line-height:2;
}

/* البوكسات */

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:40px;
}

.about-features div{
    background:#ffffff !important;
    color:#162B4D !important;
    border:2px solid #D4AF37;
    border-radius:18px;
    padding:22px;
    font-size:19px;
    font-weight:800;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.about-features div i{
    color:#D4AF37;
    font-size:20px;
}

.about-features div:hover{
    background:linear-gradient(135deg,#D4AF37,#E8C96A);
    color:#111 !important;
    transform:translateY(-6px);
    box-shadow:0 20px 35px rgba(212,175,55,.25);
}

.about-features div:hover i{
    color:#111;
}
/* ===== WHY VAPOR ===== */

.why-vapor{
    background:#fff;
    padding:100px 0;
}

.why-vapor .section-title span{
    display:inline-block;
    padding:10px 30px;
    border-radius:50px;
    background:linear-gradient(90deg,#0F2742,#D4AF37);
    color:#fff !important;
    font-weight:800;
    letter-spacing:2px;
}

.why-vapor .section-title h2{
    color:#0F2742 !important;
    font-size:52px;
    font-weight:900;
}

.why-vapor .section-title p{
    color:#666 !important;
    font-size:18px;
    font-weight:600;
}

.why-vapor .section-title::after{
    background:#D4AF37;
}

/* الكروت */

.why-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    padding:35px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:#D4AF37;
    box-shadow:0 25px 45px rgba(212,175,55,.25);
}

.why-card i{
    width:75px;
    height:75px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,#FFD85A,#D4AF37);
    color:#111;
    font-size:28px;
}

.why-card h3{
    color:#162B4D !important;
    font-size:30px;
    font-weight:800;
}

.why-card p{
    color:#555 !important;
    font-size:17px;
    font-weight:600;
}
/* Hero Text Fix */

.hero h1,
.hero h2,
.hero h3{
    color:#142B4C !important;
    font-weight:900 !important;
    text-shadow:none !important;
}

.hero p{
    color:#555 !important;
    font-weight:600 !important;
}

.hero span{
    color:#D4AF37 !important;
}
/*==========================
LUXURY BANNER
==========================*/

.luxury-banner{
    background:linear-gradient(135deg,#ffffff,#f7f9fc,#eef4fb) !important;
    position:relative;
    padding:140px 0;
    text-align:center;
}

.luxury-banner .overlay{
    background:rgba(255,255,255,.15) !important;
}

.luxury-banner h2{
    color:#142B4C !important;
    font-size:64px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:20px;
    text-shadow:none !important;
}

.luxury-banner p{
    color:#555 !important;
    font-size:22px;
    font-weight:600;
    max-width:700px;
    margin:0 auto 40px;
    line-height:1.8;
}

.luxury-banner .btn-gold{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 45px;
    background:linear-gradient(135deg,#FFD95A,#D4AF37);
    color:#111 !important;
    font-weight:800;
    font-size:18px;
    border-radius:50px;
    text-decoration:none;
    box-shadow:0 15px 35px rgba(212,175,55,.35);
    transition:.35s;
}

.luxury-banner .btn-gold:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(212,175,55,.45);
}
/*==========================
FEATURES
==========================*/

.features{
    gap:25px;
}

.feature-card,
.feature,
.why-card,
.feature-box{

    background:#ffffff !important;
    border:2px solid #E5E7EB;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.feature-card:hover,
.feature:hover,
.why-card:hover,
.feature-box:hover{

    border-color:#D4AF37;
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(212,175,55,.20);
}

/* الأيقونات */

.feature-card i,
.feature i,
.why-card i,
.feature-box i{

    color:#D4AF37 !important;
    font-size:38px;
}

/* العنوان */

.feature-card h3,
.feature h3,
.why-card h3,
.feature-box h3{

    color:#142B4C !important;
    font-size:30px;
    font-weight:800;
}

/* الوصف */

.feature-card p,
.feature p,
.why-card p,
.feature-box p{

    color:#555 !important;
    font-size:17px;
    font-weight:600;
    line-height:1.8;
}
/*==========================
FOOTER
==========================*/

footer,
.footer{
    background:#ffffff !important;
    color:#1B2E4B !important;
    border-top:3px solid #D4AF37;
    box-shadow:0 -8px 25px rgba(0,0,0,.08);
}

/* العناوين */

.footer h3,
.footer h4,
.footer-title{
    color:#142B4C !important;
    font-weight:800;
}

/* النصوص */

.footer p,
.footer li,
.footer span,
.footer a,
.footer small{
    color:#555 !important;
    font-weight:600;
    transition:.3s;
}

/* الروابط */

.footer a:hover{
    color:#D4AF37 !important;
}

/* أيقونات السوشيال */

.footer-social a,
.social-icons a{
    width:48px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#142B4C;
    color:#fff !important;
    border-radius:50%;
    transition:.3s;
}

.footer-social a:hover,
.social-icons a:hover{
    background:#D4AF37;
    color:#142B4C !important;
    transform:translateY(-5px);
}

/* معلومات التواصل */

.footer-contact i{
    color:#D4AF37 !important;
    margin-left:8px;
}

/* الخط الفاصل */

.footer hr{
    border-color:#e5e5e5;
}

/* حقوق النشر */

.footer-bottom,
.copyright{
    color:#666 !important;
    border-top:1px solid #eee;
    padding-top:20px;
}
/* تصغير كروت المنتجات على اللاب */
@media (min-width: 992px) {

    .product-card {
        width: 280px !important;
        max-width: 280px !important;
        padding: 15px !important;
    }

    .product-card img {
        height: 300px !important;
        object-fit: contain;
    }

    .product-card h3 {
        font-size: 20px !important;
    }

    .product-card p {
        font-size: 15px !important;
    }

    .product-card .price {
        font-size: 24px !important;
    }

    .product-card .btn {
        padding: 12px 25px !important;
        font-size: 17px !important;
    }
}
/* =========================
   تصغير كارت المنتج للموبايل
========================= */
@media (max-width: 767px) {

    .product-card {
        width: 88% !important;
        max-width: 340px !important;
        margin: 15px auto !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .product-card img {
        width: 100% !important;
        height: 260px !important;
        object-fit: contain !important;
    }

    .product-card h3 {
        font-size: 19px !important;
        margin: 10px 0 6px !important;
    }

    .product-card p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        margin: 5px 0 !important;
    }

    .product-card .price {
        font-size: 22px !important;
        margin: 10px 0 !important;
    }

    .product-card .btn,
    .product-card button {
        font-size: 15px !important;
        padding: 10px 20px !important;
        border-radius: 25px !important;
    }
}   
/* ===== كروت المنتجات على الموبايل ===== */
@media (max-width: 600px) {

    .products {
        padding: 20px 8px !important;
    }

    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .product-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
        box-sizing: border-box;
    }

    .product-card img {
        width: 100% !important;
        height: 145px !important;
        object-fit: contain !important;
        border-radius: 12px !important;
    }

    .product-card h3 {
        font-size: 15px !important;
        margin: 10px 0 5px !important;
    }

    .product-card p {
        font-size: 11px !important;
        line-height: 1.6 !important;
        max-height: 55px;
        overflow: hidden;
    }

    .product-card .price {
        font-size: 16px !important;
        margin: 8px 0 !important;
    }

    .product-card .old-price {
        font-size: 11px !important;
    }

    .product-card button {
        width: 100% !important;
        padding: 10px 5px !important;
        font-size: 13px !important;
        border-radius: 25px !important;
    }
}
/* ===== PRICE FIX ===== */
@media (max-width: 600px) {

    .product-card .price {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        direction: ltr !important;
        white-space: nowrap !important;
        margin: 12px 0 !important;
    }

    /* السعر قبل */
    .product-card .old-price {
        order: 1 !important;
        font-size: 11px !important;
        color: #999 !important;
        text-decoration: line-through !important;
        white-space: nowrap !important;
    }

    /* السعر بعد */
    .product-card .current-price,
    .product-card .price strong {
        order: 2 !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #102A43 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    /* العملة في الآخر */
    .product-card .currency {
        order: 3 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #102A43 !important;
        white-space: nowrap !important;
    }
}
/* =========================
   MOBILE PRODUCT CARD
========================= */
@media (max-width: 600px) {

  .product-card {
    padding: 18px 12px 20px !important;
    border-radius: 22px !important;
    text-align: center !important;
  }

  /* اسم المنتج */
  .product-card h3,
  .product-card .product-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 10px 0 8px !important;
    font-weight: 800 !important;
  }

  /* وصف المنتج */
  .product-card p,
  .product-card .product-description {
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: #596579 !important;
    margin: 0 auto 14px !important;
    max-width: 95% !important;

    /* يمنع الوصف من أخذ مساحة ضخمة */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* منطقة الأسعار */
  .product-card .price,
  .product-card .product-price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    flex-wrap: nowrap !important;
    direction: ltr !important;
    margin: 10px 0 16px !important;
  }

  /* السعر الحالي */
  .product-card .price-current,
  .product-card .current-price {
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #142744 !important;
    white-space: nowrap !important;
  }

  /* السعر القديم */
  .product-card .price-old,
  .product-card .old-price {
    font-size: 14px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
  }

  /* رمز العملة في الآخر */
  .product-card .currency {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
  }

  /* زر اطلب الآن */
  .product-card button,
  .product-card .order-btn {
    width: 90% !important;
    min-height: 48px !important;
    padding: 10px 15px !important;
    border-radius: 30px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin: 0 auto !important;
  }
}
/* ===== MOBILE PRODUCT CARDS ===== */
@media (max-width: 600px) {

  .products {
    padding: 15px 8px !important;
  }

  .products-grid,
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .product-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 8px 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* صورة المنتج */
  .product-card img {
    width: 100% !important;
    height: 145px !important;
    object-fit: contain !important;
    margin: 0 auto 5px !important;
  }

  /* اسم المنتج */
  .product-card h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 7px 0 6px !important;
    text-align: center !important;
  }

  /* الوصف */
  .product-card p {
    font-size: 11px !important;
    line-height: 1.6 !important;
    margin: 0 auto 9px !important;
    text-align: center !important;
    min-height: 52px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* الأسعار */
  .product-card .price,
  .product-card .product-price {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 6px 0 10px !important;
  }

  /* السعر الحالي */
  .product-card .current-price,
  .product-card .price-current {
    font-size: 22px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    color: #142744 !important;
    direction: ltr !important;
  }

  /* العملة */
  .product-card .currency {
    font-size: 12px !important;
  }

  /* السعر القديم */
  .product-card .old-price,
  .product-card .price-old {
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    direction: ltr !important;
  }

  /* زر الطلب */
  .product-card button,
  .product-card .order-btn {
    width: 92% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 5px 8px !important;
    margin: 5px auto 0 !important;
    border-radius: 25px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
}
/* =========================================
   VAPOR - PRODUCT CARDS MOBILE FINAL
========================================= */

@media (max-width: 600px) {

    /* الحاوية */
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        width: 100% !important;
        padding: 0 8px !important;
        margin: 0 auto !important;

        box-sizing: border-box !important;
    }

    /* =====================================
       الكارت
    ===================================== */

    .products-grid .product-card {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 410px !important;
        min-height: 410px !important;
        max-height: 410px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 18px !important;

        overflow: hidden !important;

        display: flex !important;
        flex-direction: column !important;

        box-sizing: border-box !important;
    }


    /* =====================================
       الخصم
    ===================================== */

    .products-grid .discount {

        position: absolute !important;

        top: 9px !important;
        right: 9px !important;

        width: 36px !important;
        height: 36px !important;

        border-radius: 50% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        z-index: 20 !important;
    }


    /* =====================================
       الصور
    ===================================== */

    .products-grid .product-image {

        width: 100% !important;

        height: 145px !important;
        min-height: 145px !important;
        max-height: 145px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    .products-grid .product-image img {

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;

        padding: 10px !important;

        box-sizing: border-box !important;
    }


    /* =====================================
       محتوى الكارت
    ===================================== */

    .products-grid .product-content {

        width: 100% !important;

        flex: 1 !important;

        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        text-align: center !important;

        padding: 9px 8px 8px !important;

        box-sizing: border-box !important;
    }


    /* =====================================
       اسم المنتج
    ===================================== */

    .products-grid .product-title {

        width: 100% !important;

        margin: 0 0 5px !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* =====================================
       الوصف
    ===================================== */

    .products-grid .product-desc {

        width: 100% !important;

        margin: 0 !important;

        font-size: 10.5px !important;

        line-height: 1.55 !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        overflow: hidden !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;

        box-sizing: border-box !important;
    }


    /* =====================================
       الأسعار
    ===================================== */

    .products-grid .price-box {

        width: 100% !important;

        margin-top: auto !important;

        margin-bottom: 7px !important;

        min-height: 58px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 3px !important;
    }


    /* السعر القديم */

    .products-grid .old-price {

        order: 1 !important;

        font-size: 10px !important;

        line-height: 1 !important;

        color: #999 !important;

        text-decoration: line-through !important;

        white-space: nowrap !important;
    }


    /* السعر الجديد */

    .products-grid .new-price {

        order: 2 !important;

        font-size: 22px !important;

        line-height: 1 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;
    }


    /* =====================================
       زر اطلب الآن
    ===================================== */

    .products-grid .buy-btn {

        width: calc(100% - 12px) !important;

        height: 44px !important;

        min-height: 44px !important;

        margin: 0 6px 8px !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 24px !important;

        font-size: 15px !important;

        font-weight: 800 !important;

        flex-shrink: 0 !important;

        box-sizing: border-box !important;

        text-decoration: none !important;
    }

}


/* =========================================
   شاشات صغيرة جدًا
========================================= */

@media (max-width: 380px) {

    .products-grid {
        gap: 7px !important;
        padding: 0 5px !important;
    }

    .products-grid .product-card {

        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;

        border-radius: 15px !important;
    }

    .products-grid .product-image {

        height: 130px !important;
        min-height: 130px !important;
        max-height: 130px !important;
    }

    .products-grid .product-title {
        font-size: 14px !important;
    }

    .products-grid .product-desc {
        font-size: 9.5px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    .products-grid .new-price {
        font-size: 20px !important;
    }

    .products-grid .buy-btn {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }
}
/* =========================================================
   MOBILE RESPONSIVE - VAPOR LUXURY
   ضع الكود في آخر prostyle.css
========================================================= */

@media (max-width: 600px) {

    /* =========================
       GENERAL
    ========================= */

    * {
        box-sizing: border-box;
    }

    html {
        overflow-x: hidden;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin: 0 auto;
    }


    /* =========================
       SECTION TITLE
    ========================= */

    .section-title {
        text-align: center;
        margin-bottom: 25px;
    }

    .section-title span {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .section-title h2 {
        font-size: 24px !important;
        line-height: 1.35;
        margin: 6px 0;
    }

    .section-title p {
        font-size: 13px;
        line-height: 1.7;
        margin: 0 auto;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .features .container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .feature {
        min-width: 0;
        width: 100%;
        min-height: 135px;
        padding: 18px 10px !important;
        border-radius: 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .feature i {
        font-size: 24px !important;
        margin-bottom: 8px;
    }

    .feature h3 {
        font-size: 15px !important;
        line-height: 1.4;
        margin: 3px 0 5px;
    }

    .feature p {
        font-size: 11px !important;
        line-height: 1.6;
        margin: 0;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about {
        padding: 45px 0 !important;
    }

    .about .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px;
    }

    .about-image {
        width: 100%;
        order: 1;
    }

    .about-image img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 20px;
        display: block;
    }

    .about-content {
        width: 100%;
        order: 2;
        text-align: center;
    }

    .about-content > span {
        font-size: 11px;
    }

    .about-content h2 {
        font-size: 25px !important;
        line-height: 1.4;
        margin: 8px 0 12px;
    }

    .about-content p {
        font-size: 13px !important;
        line-height: 1.9;
        margin-bottom: 20px;
    }

    .about-features {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        text-align: right;
    }

    .about-features div {
        font-size: 11px !important;
        line-height: 1.5;
        padding: 10px;
    }

    .about-features i {
        font-size: 14px;
    }


    /* =====================================================
       WHY VAPOR
    ===================================================== */

    .why-us {
        padding: 45px 0 !important;
    }

    .why-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .why-card {
        width: 100%;
        min-width: 0;
        min-height: 135px;
        padding: 17px 10px !important;
        border-radius: 18px;
        text-align: center;
    }

    .why-card i {
        font-size: 23px !important;
        margin-bottom: 8px;
    }

    .why-card h3 {
        font-size: 15px !important;
        margin: 4px 0 5px;
        line-height: 1.4;
    }

    .why-card p {
        font-size: 11px !important;
        line-height: 1.6;
        margin: 0;
    }


    /* =====================================================
       OILS
       2 CARDS BESIDE EACH OTHER
    ===================================================== */

    .oil-category {
        padding: 30px 0 !important;
    }

    .category-title {
        font-size: 22px !important;
        text-align: center;
        margin-bottom: 18px;
    }

    .oils-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    .oil {
        width: 100%;
        min-width: 0;
        padding: 10px !important;
        border-radius: 16px;
        text-align: center;
        overflow: hidden;
    }

    .oil img {
        width: 100%;
        height: 150px !important;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    .oil h3 {
        font-size: 13px !important;
        line-height: 1.4;
        margin: 8px 2px 4px;
    }


    /* =====================================================
       REVIEWS
    ===================================================== */

    .reviews {
        padding: 45px 0 !important;
    }

    .reviews-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .review-card {
        width: 100%;
        padding: 18px !important;
        border-radius: 18px;
        text-align: center;
    }

    .review-card img {
        width: 55px !important;
        height: 55px !important;
        object-fit: cover;
        border-radius: 50%;
    }

    .review-card h3 {
        font-size: 15px !important;
        margin: 7px 0;
    }

    .review-card p {
        font-size: 12px !important;
        line-height: 1.7;
        margin: 5px 0 0;
    }

    .stars {
        font-size: 13px !important;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq {
        padding: 45px 0 !important;
    }

    .faq-item {
        width: 100%;
        padding: 15px !important;
        margin-bottom: 10px;
        border-radius: 15px;
    }

    .faq-item h3 {
        font-size: 14px !important;
        line-height: 1.5;
        margin: 0 0 7px;
    }

    .faq-item p {
        font-size: 12px !important;
        line-height: 1.8;
        margin: 0;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    footer {
        padding: 35px 0 15px !important;
    }

    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 25px 15px !important;
        text-align: right;
    }

    .footer-grid > div {
        min-width: 0;
    }

    .footer-logo {
        max-width: 100px !important;
        height: auto;
    }

    .footer-grid h3 {
        font-size: 15px !important;
        margin-bottom: 10px;
    }

    .footer-grid p,
    .footer-grid li,
    .footer-grid a {
        font-size: 11px !important;
        line-height: 1.8;
    }

    .footer-grid ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .social {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }

    .social a {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .copyright {
        font-size: 10px !important;
        text-align: center;
        margin-top: 25px;
        padding-top: 15px;
    }

}


/* =========================================================
   SMALL PHONES
   360px - 390px
========================================================= */

@media (max-width: 390px) {

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .features .container,
    .why-grid,
    .oils-grid {
        gap: 8px !important;
    }

    .feature,
    .why-card {
        min-height: 125px;
        padding: 14px 7px !important;
    }

    .feature h3,
    .why-card h3 {
        font-size: 14px !important;
    }

    .feature p,
    .why-card p {
        font-size: 10px !important;
    }

    .oil {
        padding: 7px !important;
    }

    .oil img {
        height: 130px !important;
    }

    .oil h3 {
        font-size: 12px !important;
    }

    .about-content h2 {
        font-size: 22px !important;
    }

    .section-title h2 {
        font-size: 22px !important;
    }
}
/* =========================================
   VAPOR OILS - FINAL MOBILE FIX
   يكسر أي تنسيق قديم للزيوت
========================================= */

@media (max-width: 600px) {

    /* القسم */
    .oil-category {
        width: 100% !important;
        padding: 15px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .oil-category .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* عنوان القسم */
    .oil-category .category-title {
        width: 100% !important;
        text-align: center !important;
        font-size: 21px !important;
        margin: 0 0 14px !important;
    }

    /* زيتين جنب بعض */
    .oil-category .oils-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* الكارت */
    .oil-category .oil {
        width: 100% !important;
        height: 270px !important;
        min-height: 270px !important;
        max-height: 270px !important;

        margin: 0 !important;
        padding: 10px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;

        text-align: center !important;
        box-sizing: border-box !important;

        overflow: hidden !important;

        background: #fff !important;
        border-radius: 16px !important;
    }

    /* الصورة */
    .oil-category .oil img {
        display: block !important;

        width: 100% !important;
        max-width: 125px !important;

        height: 185px !important;
        min-height: 185px !important;
        max-height: 185px !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center center !important;

        flex-shrink: 0 !important;
        align-self: center !important;
    }

    /* اسم الزيت */
    .oil-category .oil h3 {
        width: 100% !important;

        margin: 5px 0 0 !important;
        padding: 0 !important;

        text-align: center !important;

        font-size: 16px !important;
        line-height: 1.2 !important;

        min-height: 38px !important;
        max-height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }
}


/* =========================================
   موبايلات صغيرة جدًا
========================================= */

@media (max-width: 380px) {

    .oil-category .oil {
        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;
        padding: 8px !important;
    }

    .oil-category .oil img {
        max-width: 105px !important;
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
    }

    .oil-category .oil h3 {
        font-size: 14px !important;
        min-height: 35px !important;
        max-height: 38px !important;
    }
}
/* =========================================
   OIL CARD - IMAGE CENTER + NAME UNDER
========================================= */

.oil-category .oil {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* الصورة */
.oil-category .oil img {
    display: block !important;

    width: 100% !important;
    max-width: 150px !important;

    height: 210px !important;

    margin: 15px auto 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    flex-shrink: 0 !important;
}

/* اسم الزيت تحت الصورة */
.oil-category .oil h3 {
    display: block !important;

    width: 100% !important;

    margin: 10px 0 0 !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 20px !important;
    line-height: 1.3 !important;

    color: #142b4a !important;
}

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

@media (max-width: 600px) {

    .oil-category .oil {
        height: 285px !important;
        min-height: 285px !important;
        max-height: 285px !important;

        padding: 8px !important;
    }

    .oil-category .oil img {
        width: 100% !important;
        max-width: 115px !important;

        height: 185px !important;

        margin: 8px auto 0 !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

    .oil-category .oil h3 {
        margin: 8px 0 0 !important;

        font-size: 16px !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }
}
/* =========================
   CHANGE OIL CATEGORY TITLE
   ========================= */

.oil-category .category-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-align: center !important;
}
/* =========================================
   MOBILE - VAPOR OILS PREMIUM
   ========================================= */

@media (max-width: 600px) {

    /* القسم بالكامل */
    .oil-category {
        width: 100% !important;
        padding: 25px 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .oil-category .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* عنوان القسم */
    .oil-category .category-title {
        width: 94% !important;
        margin: 0 auto 18px !important;
        padding: 18px 8px !important;

        font-size: 22px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        color: #ffffff !important;
        font-weight: 800 !important;

        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    /* شبكة الزيوت */
    .oils-grid {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
        padding: 0 5px !important;
        margin: 0 auto !important;

        box-sizing: border-box !important;
    }

    /* كارت الزيت */
    .oil {
        width: 100% !important;
        min-width: 0 !important;

        background: #ffffff !important;
        border-radius: 20px !important;

        padding: 12px 7px 15px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;

        text-align: center !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border: 1px solid rgba(212,175,55,.35) !important;

        box-shadow:
            0 8px 20px rgba(0,0,0,.15),
            0 0 10px rgba(212,175,55,.12) !important;

        transition: .3s ease !important;
    }

    /* صورة الزيت */
    .oil img {
        display: block !important;

        width: 100% !important;
        max-width: 125px !important;

        height: 170px !important;

        object-fit: contain !important;
        object-position: center center !important;

        margin: 0 auto 8px !important;
        padding: 0 !important;

        transform: none !important;
    }

    /* اسم الزيت */
    .oil h3 {
        width: 100% !important;

        margin: 5px 0 0 !important;
        padding: 0 !important;

        text-align: center !important;

        font-size: 15px !important;
        line-height: 1.35 !important;

        color: #102f55 !important;
        font-weight: 800 !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* تأثير بسيط */
    .oil:active {
        transform: scale(.97) !important;
    }
}
/* =========================================
   VAPOR OILS - FINAL MOBILE FIX
   ========================================= */

@media (max-width: 600px) {

    /* القسم */
    .oil-category {
        width: 100% !important;
        padding: 18px 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .oil-category .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* عنوان القسم */
    .oil-category .category-title {
        position: relative !important;

        width: calc(100% - 20px) !important;
        margin: 0 auto 14px !important;

        padding: 14px 5px !important;

        min-height: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        font-size: 21px !important;
        line-height: 1.2 !important;

        color: #fff !important;
        font-weight: 800 !important;

        border-radius: 16px !important;

        box-sizing: border-box !important;
    }


    /* شبكة المنتجات */
    .oils-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 10px !important;

        padding: 0 4px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* الكارت */
    .oils-grid .oil {
        width: 100% !important;
        height: 300px !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 12px 5px 14px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        text-align: center !important;

        background: #fff !important;

        border-radius: 18px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border: 1px solid rgba(212,175,55,.25) !important;

        box-shadow: 0 5px 15px rgba(0,0,0,.12) !important;
    }


    /* منطقة الصورة */
    .oils-grid .oil img {
        display: block !important;

        width: 120px !important;
        height: 150px !important;

        max-width: 120px !important;
        max-height: 175px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        flex: 0 0 175px !important;

        transform: none !important;
    }


    /* اسم الزيت */
    .oils-grid .oil h3 {
        width: 100% !important;

        height: auto !important;
        min-height: 40px !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: center !important;

        text-align: center !important;

        color: #102f55 !important;

        font-size: 15px !important;
        line-height: 1.25 !important;

        font-weight: 800 !important;

        box-sizing: border-box !important;
    }
}
/* =========================================
   FIX PRODUCT CARDS - MOBILE + DESKTOP
========================================= */

.product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: hidden;
}

/* صورة المنتج */
.product-card img {
    display: block !important;
    width: auto !important;
    max-width: 85% !important;
    height: 220px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* اسم المنتج */
.product-card h3,
.product-card h2,
.product-card .product-name,
.product-card .name {
    width: 100% !important;
    text-align: center !important;
    margin: 15px 0 0 !important;
    padding: 0 5px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

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

@media (max-width: 600px) {

    .product-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 15px 8px 20px !important;
        border-radius: 20px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        text-align: center !important;
    }

    .product-card img {
        width: auto !important;
        max-width: 90% !important;
        height: 180px !important;

        object-fit: contain !important;

        display: block !important;
        margin: 0 auto !important;
    }

    .product-card h3,
    .product-card h2,
    .product-card .product-name,
    .product-card .name {
        width: 100% !important;

        display: block !important;

        text-align: center !important;

        margin: 12px auto 0 !important;
        padding: 0 3px !important;

        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* لو فيه وصف */
    .product-card p {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* السعر */
    .product-card .price {
        width: 100% !important;
        text-align: center !important;
        margin: 8px auto !important;
    }

    /* الزر */
    .product-card .buy-btn,
    .product-card button,
    .product-card a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* =========================================================
   VAPOR LUXURY - FINAL OILS MOBILE FIX
   يحل مشكلة توسيط المنتج واسم الزيت
========================================================= */

.oil-category .oils-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}

.oil-category .oil {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;

    padding: 15px 8px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;

    background: #ffffff !important;
    border-radius: 20px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border: 1px solid rgba(212,175,55,.25) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15),
        0 0 0 1px rgba(212,175,55,.08) !important;
}


/* =========================
   صورة الزيت
========================= */

.oil-category .oil img {
    width: 100% !important;
    height: 210px !important;

    max-width: 180px !important;
    max-height: 210px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;

    margin: 0 auto !important;

    padding: 0 !important;

    flex-shrink: 0 !important;

    transform: none !important;
}


/* =========================
   اسم الزيت
========================= */

.oil-category .oil h3 {
    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    font-weight: 800 !important;

    color: #0d2a4d !important;

    white-space: normal !important;

    display: block !important;
}


/* =========================
   منع أي Hover من تحريك المنتج
========================= */

.oil-category .oil:hover img {
    transform: scale(1.05) !important;
}


/* =========================
   عنوان Fresh / Citrus / Woody
========================= */

.oil-category .category-title {
    width: 100% !important;

    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


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

@media (max-width: 600px) {

    .oil-category {
        width: 100% !important;
        padding: 18px 0 !important;
        margin: 0 !important;
    }

    .oil-category .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .oil-category .category-title {
        width: 100% !important;

        font-size: 21px !important;
        line-height: 1.3 !important;

        padding: 14px 10px !important;

        margin: 0 0 14px !important;

        text-align: center !important;
    }

    .oil-category .oils-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        width: 100% !important;
    }

    .oil-category .oil {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;

        padding: 10px 5px !important;

        border-radius: 17px !important;
    }

    .oil-category .oil img {
        width: 100% !important;
        height: 195px !important;

        max-width: 155px !important;
        max-height: 195px !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

    .oil-category .oil h3 {
        width: 100% !important;

        margin-top: 7px !important;

        font-size: 14px !important;
        line-height: 1.35 !important;

        text-align: center !important;

        color: #0d2a4d !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .oil-category .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .oil-category .oils-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .oil-category .oil {
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;

        padding: 8px 4px !important;
    }

    .oil-category .oil img {
        height: 180px !important;
        max-width: 140px !important;
    }

    .oil-category .oil h3 {
        font-size: 12px !important;
        margin-top: 6px !important;
    }
}
/* =====================================================
   WHY VAPOR - FORCE LIGHT DESIGN
   Override ALL Previous CSS
===================================================== */

section.why-us {
    background: linear-gradient(
        135deg,
        #f8fbff 0%,
        #ffffff 45%,
        #f6efd2 100%
    ) !important;

    color: #173653 !important;
    padding: 80px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}


/* =========================
   SECTION TITLE
========================= */

section.why-us .section-title {
    text-align: center !important;
    margin-bottom: 45px !important;
}

section.why-us .section-title span {
    display: inline-block !important;

    background: linear-gradient(
        90deg,
        #173653,
        #d7ad27
    ) !important;

    color: #ffffff !important;

    padding: 12px 45px !important;
    border-radius: 50px !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;

    box-shadow:
        0 8px 25px rgba(23,54,83,.15) !important;
}

section.why-us .section-title h2 {
    color: #173653 !important;

    font-size: 32px !important;
    font-weight: 800 !important;

    margin-top: 20px !important;
    margin-bottom: 15px !important;

    text-shadow: none !important;
}


/* خط ذهبي تحت العنوان */

section.why-us .section-title h2::after {
    content: "" !important;

    display: block !important;

    width: 75px !important;
    height: 4px !important;

    background: linear-gradient(
        90deg,
        #d7ad27,
        #f4d45e
    ) !important;

    border-radius: 20px !important;

    margin: 15px auto 0 !important;

    box-shadow:
        0 3px 12px rgba(215,173,39,.35) !important;
}


/* =========================
   GRID
========================= */

section.why-us .why-grid {
    display: grid !important;

    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    ) !important;

    gap: 25px !important;

    width: 100% !important;
}


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

section.why-us .why-card {
    background: rgba(255,255,255,.96) !important;

    color: #173653 !important;

    border: 1px solid rgba(
        215,
        173,
        39,
        .25
    ) !important;

    border-radius: 24px !important;

    padding: 35px 25px !important;

    text-align: center !important;

    min-height: 220px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow:
        0 10px 35px rgba(
            23,
            54,
            83,
            .10
        ) !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease !important;
}


/* =========================
   CARD HOVER
========================= */

section.why-us .why-card:hover {
    transform: translateY(-8px) !important;

    box-shadow:
        0 18px 45px rgba(
            23,
            54,
            83,
            .16
        ),
        0 0 25px rgba(
            215,
            173,
            39,
            .15
        ) !important;

    border-color: rgba(
        215,
        173,
        39,
        .55
    ) !important;
}


/* =========================
   ICONS
========================= */

section.why-us .why-card i {
    width: 75px !important;
    height: 75px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: linear-gradient(
        135deg,
        #f8d65c,
        #d7ad27
    ) !important;

    color: #173653 !important;

    font-size: 28px !important;

    margin-bottom: 18px !important;

    box-shadow:
        0 8px 20px rgba(
            215,
            173,
            39,
            .25
        ) !important;
}


/* =========================
   CARD TITLE
========================= */

section.why-us .why-card h3 {
    color: #173653 !important;

    font-size: 20px !important;

    font-weight: 800 !important;

    margin: 0 0 10px !important;
}


/* =========================
   CARD DESCRIPTION
========================= */

section.why-us .why-card p {
    color: #626262 !important;

    font-size: 14px !important;

    line-height: 1.8 !important;

    margin: 0 !important;
}


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

@media (max-width: 768px) {

    section.why-us {
        padding: 55px 12px !important;

        background: linear-gradient(
            160deg,
            #f8fbff 0%,
            #ffffff 55%,
            #f5edce 100%
        ) !important;
    }


    section.why-us .section-title {
        margin-bottom: 30px !important;
    }


    section.why-us .section-title span {
        padding: 10px 28px !important;

        font-size: 12px !important;
    }


    section.why-us .section-title h2 {
        font-size: 23px !important;

        line-height: 1.6 !important;
    }


    /* كروت 2 جنب بعض على الموبايل */

    section.why-us .why-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    section.why-us .why-card {
        min-height: 180px !important;

        padding: 22px 10px !important;

        border-radius: 20px !important;
    }


    section.why-us .why-card i {
        width: 58px !important;
        height: 58px !important;

        font-size: 21px !important;

        margin-bottom: 12px !important;
    }


    section.why-us .why-card h3 {
        font-size: 16px !important;

        margin-bottom: 6px !important;
    }


    section.why-us .why-card p {
        font-size: 11px !important;

        line-height: 1.6 !important;
    }
}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    section.why-us {
        padding: 45px 10px !important;
    }

    section.why-us .why-grid {
        gap: 10px !important;
    }

    section.why-us .why-card {
        min-height: 170px !important;

        padding: 18px 8px !important;
    }

    section.why-us .why-card h3 {
        font-size: 15px !important;
    }

    section.why-us .why-card p {
        font-size: 10px !important;
    }
}
/* =========================
   WHATSAPP FLOATING BUTTON
========================= */

.whatsapp-float {
    position: fixed !important;
    bottom: 22px !important;
    right: 20px !important;

    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #25D366 !important;
    color: #fff !important;

    border-radius: 50% !important;

    text-decoration: none !important;

    font-size: 27px !important;

    z-index: 99999 !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.25),
        0 0 15px rgba(37, 211, 102, 0.35) !important;

    transition: all 0.3s ease !important;
}

/* Hover */
.whatsapp-float:hover {
    transform: scale(1.12) !important;
    color: #fff !important;

    box-shadow:
        0 7px 25px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(37, 211, 102, 0.65) !important;
}

/* حركة خفيفة */
.whatsapp-float i {
    animation: whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* Mobile */
@media (max-width: 600px) {

    .whatsapp-float {
        width: 46px !important;
        height: 46px !important;

        right: 14px !important;
        bottom: 16px !important;

        font-size: 24px !important;
    }

}
/* ==============================
   FLOATING CONTACT BUTTONS
================================ */

.contact-float {
    position: fixed;
    right: 18px;
    bottom: 90px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    z-index: 99999;
}

/* الأزرار */
.contact-btn,
.contact-close {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    border: none;

    font-size: 25px;

    cursor: pointer;

    box-shadow: 0 5px 18px rgba(0,0,0,.25);

    transition: .3s ease;
}

/* اتصال */
.call-btn {
    background: #18d66b;
    color: #fff;
}

/* واتساب */
.whatsapp-btn {
    background: #25D366;
    color: #fff;
}

/* إغلاق */
.contact-close {
    background: #9b78d4;
    color: white;
}

/* Hover */
.contact-btn:hover,
.contact-close:hover {
    transform: scale(1.1);
}

/* حركة بسيطة */
.call-btn {
    animation: contactPulse 2s infinite;
}

.whatsapp-btn {
    animation: contactPulse 2s infinite 0.5s;
}

@keyframes contactPulse {
    0%, 100% {
        box-shadow: 0 5px 18px rgba(0,0,0,.25);
    }

    50% {
        box-shadow:
            0 5px 25px rgba(37,211,102,.55);
    }
}

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

@media (max-width: 600px) {

    .contact-float {
        right: 12px;
        bottom: 75px;
        gap: 8px;
    }

    .contact-btn,
    .contact-close {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

}
/* ==============================
   FLOATING CONTACT BUTTONS
   ============================== */

.contact-float {
    position: fixed !important;
    right: 18px !important;
    bottom: 25px !important;
    z-index: 99999 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.contact-float .contact-btn,
.contact-float .contact-close {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    text-decoration: none !important;

    font-size: 22px !important;

    box-shadow: 0 5px 15px rgba(0,0,0,.20) !important;

    cursor: pointer !important;

    transition: .3s ease !important;
}

/* اتصال */
.contact-float .call-btn {
    background: #18d66b !important;
    color: #082d20 !important;
}

/* واتساب */
.contact-float .whatsapp-btn {
    background: #25D366 !important;
    color: white !important;
}

/* زر الإغلاق */
.contact-float .contact-close {
    background: #9b7bd4 !important;
    color: white !important;
}

/* Hover */
.contact-float .contact-btn:hover,
.contact-float .contact-close:hover {
    transform: scale(1.08) !important;
}

/* واتساب الزائد الموجود خارج المجموعة */
body > .whatsapp-float {
    display: none !important;
}


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

@media (max-width: 600px) {

    .contact-float {
        right: 10px !important;
        bottom: 15px !important;
        gap: 7px !important;
    }

    .contact-float .contact-btn,
    .contact-float .contact-close {
        width: 43px !important;
        height: 43px !important;
        min-width: 43px !important;
        min-height: 43px !important;

        font-size: 19px !important;
    }
}
.contact-float .contact-close,
.contact-float .fa-xmark {
    display: none !important;
}
/* ===== FORCE HERO FIX ===== */

html body .hero {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}

html body .hero img {
    display: block !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100vh !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
}

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

@media screen and (max-width: 768px) {

    html body .hero {
        width: 100vw !important;
        height: 100svh !important;
        min-height: 100svh !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    html body .hero img {
        width: 100vw !important;
        height: 100svh !important;
        min-height: 100svh !important;

object-fit: contain !important;
        object-position: center center !important;
    }
}

/* ===== REMOVE ANY LIMITS ===== */

html body .hero *,
html body .hero::before,
html body .hero::after {
    box-sizing: border-box !important;
}
/* ===== تكبير صور المنتجات ===== */
.product-card img,
.product-image img,
.product-card .product-img,
.products-grid .product-card img {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* مساحة الصورة داخل الكارت */
.product-card .image-box,
.product-card .product-image,
.product-card .img-container {
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== الموبايل ===== */
@media (max-width: 600px) {

    .product-card img,
    .product-image img,
    .product-card .product-img,
    .products-grid .product-card img {
       width: 235px !important;
height: 235px !important;
max-width: 235px !important;
    }

    .product-card .image-box,
    .product-card .product-image,
    .product-card .img-container {
        min-height: 185px !important;
    }
}
/* =========================================
   FORCE REMOVE HERO SMOKE
   ========================================= */

/* إزالة دخان الـ Hero */
.hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* إزالة أي عناصر دخان داخل الـ Hero */
.hero .smoke,
.hero .smoke-effect,
.smoke {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    background: none !important;
}

/* إيقاف أنيميشن الدخان نهائيًا */
@keyframes smokeMove {
    from, to {
        opacity: 0 !important;
        transform: none !important;
    }
}

@keyframes smoke {
    from, to {
        opacity: 0 !important;
        transform: none !important;
    }
}
/* إزالة الطبقة السوداء فوق صورة Hero */
.hero::before {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
/* =========================
   تصغير كروت الزيوت
   ========================= */

.fresh-scents .product-card,
.scents .product-card,
.scent-card {
    transform: scale(0.92) !important;
    transform-origin: center !important;
}

/* الموبايل */
@media (max-width: 768px) {
    .fresh-scents .product-card,
    .scents .product-card,
    .scent-card {
        transform: scale(0.92) !important;
    }
}
/* تكبير زجاجات الزيوت */
.fresh-scents .product-card img,
.scent-card img {
    width: 180px !important;
    height: 180px !important;
    object-fit: contain !important;
    transform: scale(1.15) !important;
}

/* موبايل */
@media (max-width: 768px) {
    .fresh-scents .product-card img,
    .scent-card img {
        width: 170px !important;
        height: 170px !important;
        transform: scale(1.15) !important;
    }
}
/* =========================================
   🔥 FINAL MOBILE OILS CARDS FIX
   ========================================= */

@media (max-width: 768px) {

    /* شبكة الزيوت */
    .oils-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 8px !important;
    }

    /* كارت الزيت */
    .oil {
        width: 100% !important;
        min-width: 0 !important;
        height: 280px !important;

        background: #fff !important;
        border-radius: 20px !important;

        padding: 12px 8px 15px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;

        overflow: hidden !important;

        border: 1px solid rgba(212,175,55,.20) !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,.12) !important;

        transition:
            transform .35s ease,
            box-shadow .35s ease !important;
    }

    /* صورة الزيت */
    .oil img {
        width: 100% !important;
        height: 195px !important;

        max-width: 195px !important;
        max-height: 195px !important;

        object-fit: contain !important;

        display: block !important;
        margin: auto !important;

        transition: transform .4s ease !important;
    }

    /* اسم الزيت */
    .oil h3 {
        width: 100% !important;

        margin: 5px 0 0 !important;

        text-align: center !important;

        font-size: 16px !important;
        font-weight: 800 !important;

        line-height: 1.4 !important;

        color: #142a4a !important;
    }

    /* حركة بسيطة */
    .oil:hover {
        transform: translateY(-5px) !important;

        box-shadow:
            0 15px 30px rgba(212,175,55,.20) !important;
    }

    .oil:hover img {
        transform: scale(1.08) translateY(-4px) !important;
    }
}


/* =========================================
   📱 موبايلات صغيرة جدًا
   ========================================= */

@media (max-width: 420px) {

    .oils-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 0 5px !important;
    }

    .oil {
        height: 255px !important;
        padding: 8px 5px 12px !important;
        border-radius: 17px !important;
    }

    .oil img {
        height: 175px !important;
        max-width: 175px !important;
        max-height: 175px !important;
    }

    .oil h3 {
        font-size: 14px !important;
    }
}
/* =========================================================
   ✨ VAPOR LUXURY - PREMIUM OILS CARDS
   FINAL OVERRIDE
   ضع الكود في آخر ملف CSS
   ========================================================= */

/* القسم */
.oil-category {
    position: relative !important;
    padding: 80px 0 !important;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fafafa 50%,
        #f5f5f5 100%
    ) !important;
}

/* عنوان القسم */
.oil-category .category-title {
    text-align: center !important;
    color: #142a4a !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    margin-bottom: 45px !important;
    position: relative !important;
}

.oil-category .category-title::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 20px;
    background: linear-gradient(
        90deg,
        #b88918,
        #f5d76e,
        #b88918
    );
}

/* =========================================================
   GRID
   ========================================================= */

.oils-grid {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 25px !important;

    align-items: stretch !important;
}


/* =========================================================
   CARD
   ========================================================= */

.oil {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 360px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: space-between !important;

    padding: 18px 15px 20px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f8f8
        ) !important;

    border-radius: 26px !important;

    border: 1px solid rgba(212,175,55,.28) !important;

    overflow: hidden !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.08),
        inset 0 0 0 1px rgba(255,255,255,.8) !important;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease !important;
}


/* Glow داخل الكارت */

.oil::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -90px;
    right: -70px;

    background: radial-gradient(
        circle,
        rgba(212,175,55,.22),
        transparent 70%
    );

    filter: blur(15px);

    pointer-events: none;

    transition: .5s ease;
}


/* دائرة خلف الزجاجة */

.oil::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    top: 25px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            rgba(212,175,55,.03) 55%,
            transparent 70%
        );

    pointer-events: none;

    transition: .5s ease;
}


/* =========================================================
   IMAGE
   ========================================================= */

.oil img {
    position: relative !important;
    z-index: 2 !important;

    width: 235px !important;
    height: 235px !important;

    max-width: 90% !important;
    max-height: 235px !important;

    object-fit: contain !important;

    display: block !important;

    margin: 0 auto !important;

    filter:
        drop-shadow(0 18px 15px rgba(0,0,0,.16)) !important;

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .55s ease !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.oil h3 {
    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;

    margin: 5px 0 0 !important;

    padding: 11px 8px !important;

    text-align: center !important;

    color: #142a4a !important;

    font-family: 'Cairo', sans-serif !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    line-height: 1.4 !important;

    background: rgba(255,255,255,.82) !important;

    border-radius: 14px !important;

    border: 1px solid rgba(212,175,55,.16) !important;

    backdrop-filter: blur(8px) !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.oil:hover {
    transform: translateY(-12px) !important;

    border-color: rgba(212,175,55,.75) !important;

    box-shadow:
        0 25px 55px rgba(0,0,0,.14),
        0 0 30px rgba(212,175,55,.16) !important;
}

.oil:hover::before {
    transform: scale(1.4);
    opacity: 1;
}

.oil:hover::after {
    transform: scale(1.12);
}

.oil:hover img {
    transform:
        translateY(-8px)
        scale(1.08)
        rotate(-2deg) !important;

    filter:
        drop-shadow(0 25px 20px rgba(0,0,0,.22)) !important;
}


/* =========================================================
   📱 TABLET
   ========================================================= */

@media (max-width: 900px) {

    .oils-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 18px !important;
    }

    .oil {
        height: 330px !important;
    }

    .oil img {
        width: 215px !important;
        height: 215px !important;
    }

}


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

@media (max-width: 600px) {

    .oil-category {
        padding: 55px 0 !important;
    }

    .oil-category .container {
        width: 94% !important;
    }

    .oil-category .category-title {
        font-size: 27px !important;
        margin-bottom: 30px !important;
    }

    .oils-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;

        gap: 13px !important;

        width: 100% !important;
    }

    .oil {
        height: 285px !important;

        padding: 10px 7px 12px !important;

        border-radius: 20px !important;
    }

    .oil::after {
        width: 165px;
        height: 165px;
        top: 18px;
    }

    .oil img {
        width: 175px !important;
        height: 195px !important;

        max-width: 100% !important;
        max-height: 195px !important;
    }

    .oil h3 {
        font-size: 13px !important;

        padding: 8px 4px !important;

        border-radius: 11px !important;

        line-height: 1.35 !important;
    }

    .oil:hover {
        transform: translateY(-6px) !important;
    }

}


/* =========================================================
   📱 SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .oils-grid {
        gap: 9px !important;
    }

    .oil {
        height: 260px !important;
        padding: 7px 5px 10px !important;
        border-radius: 17px !important;
    }

    .oil img {
        width: 155px !important;
        height: 175px !important;
    }

    .oil h3 {
        font-size: 12px !important;
        padding: 7px 3px !important;
    }

}
/* تثبيت اسم الزيت في منتصف المربع */
.oil h3 {
    width: 100% !important;
    height: 65px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    color: #142a4a !important;
    font-size: 18px !important;
    font-weight: 800 !important;

    background: #ffffff !important;

    border: 1px solid rgba(212,175,55,.35) !important;
    border-radius: 16px !important;

    box-sizing: border-box !important;
}
/* =========================================
   PREMIUM OIL CATEGORY TITLE
   ========================================= */

.oil-category .category-title {
    position: relative !important;

    width: 90% !important;
    max-width: 700px !important;

    margin: 0 auto 35px !important;

    padding: 18px 20px !important;

    text-align: center !important;

    color: #ffffff !important;

    font-family: 'Cairo', sans-serif !important;

    font-size: 28px !important;
    font-weight: 900 !important;

    letter-spacing: .5px !important;

    background:
        linear-gradient(
            110deg,
            #102b45 0%,
            #31453e 35%,
            #9b8127 70%,
            #d6ad2c 100%
        ) !important;

    border-radius: 18px !important;

    border: 1px solid rgba(212,175,55,.55) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12),
        0 0 20px rgba(212,175,55,.10) !important;

    overflow: hidden !important;
}


/* خط ذهبي صغير */
.oil-category .category-title::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin: 9px auto 0;

    border-radius: 20px;

    background: #f5d76e !important;

    box-shadow:
        0 0 10px rgba(245,215,110,.7) !important;
}


/* لمعة بسيطة */
.oil-category .category-title::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100px;

    width: 80px;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform: skewX(-20deg);

    animation: titleShine 4s infinite;
}


@keyframes titleShine {

    0% {
        left: -100px;
    }

    35% {
        left: 110%;
    }

    100% {
        left: 110%;
    }

}


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

@media (max-width: 600px) {

    .oil-category .category-title {

        width: 88% !important;

        padding: 14px 12px !important;

        margin-bottom: 25px !important;

        font-size: 22px !important;

        border-radius: 15px !important;

    }

    .oil-category .category-title::after {

        width: 45px;
        height: 3px;

        margin-top: 7px;

    }

}


/* 📱 شاشات صغيرة جدًا */

@media (max-width: 380px) {

    .oil-category .category-title {

        width: 90% !important;

        font-size: 20px !important;

        padding: 13px 10px !important;

    }

}
/* =====================================================
   ✨ VAPOR LUXURY - MOBILE PREMIUM OILS ANIMATION
   ضع الكود في آخر CSS
   ===================================================== */

/* القسم نفسه */
.oil-category {
    position: relative !important;
    overflow: hidden !important;
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

/* =====================================================
   عنوان القسم
   ===================================================== */

.oil-category .category-title {
    opacity: 0;
    transform: translateY(25px);
    animation: categoryTitleIn .8s ease forwards;

    text-align: center !important;
}

/* حركة العنوان */
@keyframes categoryTitleIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =====================================================
   كروت الزيوت
   ===================================================== */

.oils-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}


/* الكارت */
.oil {
    position: relative !important;

    opacity: 0;
    transform: translateY(45px) scale(.94);

    animation: oilCardIn .7s cubic-bezier(.2,.8,.2,1) forwards;

    overflow: hidden !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* ظهور الكروت بالتتابع */

.oil:nth-child(1) {
    animation-delay: .15s;
}

.oil:nth-child(2) {
    animation-delay: .3s;
}

.oil:nth-child(3) {
    animation-delay: .45s;
}

.oil:nth-child(4) {
    animation-delay: .6s;
}

.oil:nth-child(5) {
    animation-delay: .75s;
}

.oil:nth-child(6) {
    animation-delay: .9s;
}

.oil:nth-child(7) {
    animation-delay: 1.05s;
}

.oil:nth-child(8) {
    animation-delay: 1.2s;
}

.oil:nth-child(9) {
    animation-delay: 1.35s;
}


@keyframes oilCardIn {

    0% {
        opacity: 0;
        transform:
            translateY(45px)
            scale(.94);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* =====================================================
   🧴 حركة الزجاجة
   ===================================================== */

.oil img {
    position: relative !important;
    z-index: 2 !important;

    animation: bottleFloat 4s ease-in-out infinite;

    transform-origin: center bottom;

    transition:
        transform .45s ease,
        filter .45s ease !important;
}


/* حركة بسيطة جدًا */
@keyframes bottleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


/* =====================================================
   ✨ Glow خلف المنتج
   ===================================================== */

.oil::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: 50%;
    top: 65px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.22),
            transparent 70%
        );

    filter: blur(8px);

    opacity: .8;

    animation: productGlow 3s ease-in-out infinite;

    pointer-events: none;
}


@keyframes productGlow {

    0%,
    100% {
        opacity: .45;
        transform: translateX(-50%) scale(.9);
    }

    50% {
        opacity: .9;
        transform: translateX(-50%) scale(1.08);
    }

}


/* =====================================================
   🏷️ اسم الزيت
   ===================================================== */

.oil h3 {
    position: relative !important;
    z-index: 5 !important;

    transition:
        transform .3s ease,
        color .3s ease,
        box-shadow .3s ease !important;
}


/* =====================================================
   💎 تأثير عند لمس الكارت
   ===================================================== */

.oil:active {
    transform: scale(.97) !important;

    box-shadow:
        0 10px 30px rgba(212,175,55,.25) !important;
}

.oil:active img {
    transform:
        scale(1.08)
        translateY(-8px) !important;
}

.oil:active h3 {
    color: #b58a20 !important;

    transform: translateY(-2px);
}


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

@media (max-width: 600px) {

    .oil-category {
        padding: 45px 0 !important;
    }

    .oil-category .container {
        width: 94% !important;
        margin: auto !important;
    }

    .oils-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .oil {
        min-height: 270px !important;
        height: auto !important;

        padding: 10px 7px 12px !important;

        border-radius: 20px !important;
    }

    .oil img {
        width: 175px !important;
        height: 190px !important;

        object-fit: contain !important;
    }

    .oil h3 {
        width: 92% !important;
        min-height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 5px auto 0 !important;

        text-align: center !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
    }

}


/* =====================================================
   📱 موبايل صغير
   ===================================================== */

@media (max-width: 380px) {

    .oils-grid {
        gap: 9px !important;
    }

    .oil {
        min-height: 250px !important;
        padding: 8px 5px 10px !important;
    }

    .oil img {
        width: 155px !important;
        height: 170px !important;
    }

    .oil h3 {
        font-size: 12px !important;
        min-height: 45px !important;
    }

}
/* ===== FIX MOBILE MENU SPACE ===== */
@media (max-width: 768px) {

  /* القائمة نفسها */
  header .nav-menu,
  header .mobile-menu,
  header nav ul,
  header .nav-links,
  header .menu {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    padding-top: -100px !important;
    padding-bottom: 200px !important;
  }

  /* لو القائمة عبارة عن قائمة جانبية */
  header nav ul,
  header .nav-links,
  header .mobile-menu {
    display: flex !important;
    flex-direction: column !important;
  }

  /* الروابط */
  header nav ul li,
  header .nav-links li,
  header .mobile-menu li {
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* النص */
  header nav ul li a,
  header .nav-links li a,
  header .mobile-menu li a {
    display: block !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    line-height: 1.4 !important;
  }
}
/* ===== FIX MOBILE MENU HEIGHT ===== */
@media (max-width: 768px) {

  header nav,
  header .nav-menu,
  header .mobile-menu,
  header .menu,
  header .nav-links {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  header nav ul,
  header .nav-menu ul,
  header .mobile-menu ul,
  header .menu ul,
  header .nav-links {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 15px 25px 20px !important;
    gap: 0 !important;
  }

  header nav li,
  header .nav-menu li,
  header .mobile-menu li,
  header .menu li,
  header .nav-links li {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  header nav li:last-child,
  header .nav-menu li:last-child,
  header .mobile-menu li:last-child,
  header .menu li:last-child,
  header .nav-links li:last-child {
    margin-bottom: 0 !important;
  }

}
/* =====================================================
   VAPOR LUXURY - MOBILE MENU UPGRADE
   ===================================================== */

@media (max-width: 768px) {

  /* القائمة نفسها */
  header nav,
  header .nav-menu,
  header .mobile-menu,
  header .menu,
  header .nav-links {
    background: linear-gradient(
      145deg,
      #101010 0%,
      #171717 55%,
      #0b0b0b 100%
    ) !important;

    border: 1px solid rgba(212, 166, 44, 0.35) !important;

    border-radius: 0 0 0 28px !important;

    box-shadow:
      -15px 15px 40px rgba(0, 0, 0, 0.45),
      inset 1px 1px 0 rgba(255,255,255,0.05) !important;

    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;

    overflow: hidden !important;
  }


  /* ترتيب الروابط */
  header nav ul,
  header .nav-menu ul,
  header .mobile-menu ul,
  header .menu ul,
  header .nav-links {

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;

    align-items: stretch !important;

    gap: 5px !important;

    margin: 0 !important;

    padding: 22px 16px 20px !important;

    height: auto !important;

    min-height: 0 !important;
  }


  /* كل رابط */
  header nav li,
  header .nav-menu li,
  header .mobile-menu li,
  header .menu li,
  header .nav-links li {

    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;

    height: auto !important;
  }


  /* شكل الرابط */
  header nav a,
  header .nav-menu a,
  header .mobile-menu a,
  header .menu a,
  header .nav-links a {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: 100% !important;

    min-height: 52px !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 17px !important;

    font-weight: 700 !important;

    border-radius: 14px !important;

    transition:
      transform 0.3s ease,
      background 0.3s ease,
      color 0.3s ease,
      box-shadow 0.3s ease !important;
  }


  /* خط ذهبي صغير قبل الرابط */
  header nav a::before,
  header .nav-menu a::before,
  header .mobile-menu a::before,
  header .menu a::before,
  header .nav-links a::before {

    content: "" !important;

    width: 4px !important;

    height: 0 !important;

    background: #d6aa35 !important;

    border-radius: 10px !important;

    position: absolute !important;

    right: 8px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    transition: height 0.3s ease !important;
  }


  /* Hover / لمس */
  header nav a:hover,
  header .nav-menu a:hover,
  header .mobile-menu a:hover,
  header .menu a:hover,
  header .nav-links a:hover {

    background: linear-gradient(
      90deg,
      rgba(214,170,53,0.08),
      rgba(214,170,53,0.22)
    ) !important;

    color: #e2b93f !important;

    transform: translateX(-5px) !important;

    box-shadow:
      0 5px 20px rgba(0,0,0,0.25) !important;
  }


  header nav a:hover::before,
  header .nav-menu a:hover::before,
  header .mobile-menu a:hover::before,
  header .menu a:hover::before,
  header .nav-links a:hover::before {

    height: 28px !important;
  }


  /* آخر رابط */
  header nav li:last-child a,
  header .nav-menu li:last-child a,
  header .mobile-menu li:last-child a,
  header .menu li:last-child a,
  header .nav-links li:last-child a {

    margin-bottom: 0 !important;
  }


  /* حركة ظهور الروابط */
  header nav li,
  header .nav-menu li,
  header .mobile-menu li,
  header .menu li,
  header .nav-links li {

    animation: vaporMenuItem 0.45s ease both !important;
  }

  header nav li:nth-child(1),
  header .nav-menu li:nth-child(1),
  header .mobile-menu li:nth-child(1),
  header .menu li:nth-child(1),
  header .nav-links li:nth-child(1) {
    animation-delay: 0.05s !important;
  }

  header nav li:nth-child(2),
  header .nav-menu li:nth-child(2),
  header .mobile-menu li:nth-child(2),
  header .menu li:nth-child(2),
  header .nav-links li:nth-child(2) {
    animation-delay: 0.10s !important;
  }

  header nav li:nth-child(3),
  header .nav-menu li:nth-child(3),
  header .mobile-menu li:nth-child(3),
  header .menu li:nth-child(3),
  header .nav-links li:nth-child(3) {
    animation-delay: 0.15s !important;
  }

  header nav li:nth-child(4),
  header .nav-menu li:nth-child(4),
  header .mobile-menu li:nth-child(4),
  header .menu li:nth-child(4),
  header .nav-links li:nth-child(4) {
    animation-delay: 0.20s !important;
  }

  header nav li:nth-child(5),
  header .nav-menu li:nth-child(5),
  header .mobile-menu li:nth-child(5),
  header .menu li:nth-child(5),
  header .nav-links li:nth-child(5) {
    animation-delay: 0.25s !important;
  }

}


@keyframes vaporMenuItem {

  from {
    opacity: 0;
    transform: translateX(25px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}
/* =========================================
   OIL DESCRIPTION
========================================= */

.oil h3 {
    margin: 12px 0 6px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
}

.oil p {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;

    color: #777;

    white-space: normal;
    overflow: visible;
    text-overflow: unset;

    height: auto;
    max-height: none;

    text-align: center;
}


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

@media (max-width: 600px) {

    .oil {
        overflow: visible;
    }

    .oil h3 {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .oil p {
        width: 100%;
        max-width: 240px;

        font-size: 8px;
        line-height: 1.7;

        color: #777;

        display: block;
        height: auto;
        max-height: none;

        overflow: visible;
        white-space: normal;

        text-align: center;
    }

}
.oil-notes {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    direction: ltr;
}

.oil-notes span {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    padding: 5px 9px;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(201,162,39,0.25);
    border-radius: 20px;

    color: #777;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 600px) {

    .oil-notes {
        gap: 4px;
    }

    .oil-notes span {
        font-size: 9px;
        padding: 4px 7px;
    }

}
/* =========================================
   MOBILE OILS - FIX CARDS
========================================= */

@media (max-width: 600px) {

    .oils-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .oil {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 10px 7px 12px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    /* صورة الزيت */
    .oil img {
        width: 100% !important;
        height: 170px !important;

        object-fit: contain !important;

        display: block !important;
        margin: 0 auto 5px !important;
    }

    /* اسم الزيت */
    .oil h3 {
        width: 100% !important;

        margin: 4px 0 7px !important;

        font-size: 15px !important;
        line-height: 1.3 !important;

        text-align: center !important;
    }

    /* مكونات الزيت */
    .oil-notes {
        width: 100% !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        flex-wrap: wrap !important;

        gap: 4px !important;

        margin: 0 !important;

        direction: ltr !important;
    }

    .oil-notes span {
        font-size: 8px !important;
        line-height: 1.3 !important;

        padding: 4px 5px !important;

        white-space: nowrap !important;

        border-radius: 15px !important;

        box-sizing: border-box !important;
    }

}
/* =========================================
   🔥 FINAL OIL CARDS FIX
   BUTTON MUST BE VISIBLE
========================================= */

/* =========================
   DESKTOP / LAPTOP
========================= */

.oils-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}

.oil,
.oil-link {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 390px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding: 20px 12px 18px !important;

    overflow: visible !important;

    text-decoration: none !important;
}

/* الصورة */

.oil img,
.oil-link img {
    width: 180px !important;
    height: 190px !important;

    max-width: 100% !important;

    object-fit: contain !important;

    display: block !important;

    margin: 0 auto 8px !important;

    flex-shrink: 0 !important;
}

/* الاسم */

.oil h3,
.oil-link h3 {
    width: 100% !important;

    margin: 5px 0 8px !important;

    text-align: center !important;

    font-size: 18px !important;

    line-height: 1.3 !important;

    flex-shrink: 0 !important;
}

/* المكونات */

.oil-notes,
.oil-link .oil-notes {
    width: 100% !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 5px !important;

    margin: 0 0 14px !important;

    flex-shrink: 0 !important;
}

.oil-notes span,
.oil-link .oil-notes span {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;

    font-size: 10px !important;

    padding: 5px 8px !important;

    border-radius: 20px !important;
}

/* =========================
   زر عرض الزيت
========================= */

.oil-view {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 92% !important;

    min-height: 42px !important;

    margin-top: auto !important;

    padding: 9px 15px !important;

    box-sizing: border-box !important;

    border-radius: 13px !important;

    background: linear-gradient(
        135deg,
        #102a43,
        #1c425f
    ) !important;

    color: #fff !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    z-index: 20 !important;

    flex-shrink: 0 !important;
}

.oil-view span {
    display: inline-block !important;

    margin-left: 7px !important;

    color: #d4af37 !important;

    font-size: 18px !important;

    opacity: 1 !important;
    visibility: visible !important;
}

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

@media (max-width: 768px) {

    .oils-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        width: 100% !important;

        padding: 0 5px !important;

        box-sizing: border-box !important;
    }

    .oil,
    .oil-link {
        width: 100% !important;

        height: auto !important;

        min-height: 330px !important;

        padding: 10px 6px 12px !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        border-radius: 18px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
    }

    /* صورة أصغر شوية */

    .oil img,
    .oil-link img {
        width: 115px !important;

        height: 145px !important;

        object-fit: contain !important;

        margin: 0 auto 4px !important;
    }

    /* الاسم */

    .oil h3,
    .oil-link h3 {
        width: 100% !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        margin: 3px 0 6px !important;

        text-align: center !important;
    }

    /* المكونات */

    .oil-notes,
    .oil-link .oil-notes {
        width: 100% !important;

        gap: 3px !important;

        margin-bottom: 10px !important;
    }

    .oil-notes span,
    .oil-link .oil-notes span {
        font-size: 7px !important;

        padding: 3px 5px !important;

        border-radius: 12px !important;
    }

    /* الزر */

    .oil-view {
        display: flex !important;

        width: 94% !important;

        min-height: 36px !important;

        margin-top: auto !important;

        padding: 7px 5px !important;

        border-radius: 10px !important;

        font-size: 10px !important;

        opacity: 1 !important;

        visibility: visible !important;

        position: relative !important;

        z-index: 50 !important;
    }

    .oil-view span {
        font-size: 14px !important;

        margin-left: 4px !important;
    }
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 380px) {

    .oils-grid {
        gap: 7px !important;
    }

    .oil,
    .oil-link {
        min-height: 315px !important;

        padding: 8px 5px 10px !important;
    }

    .oil img,
    .oil-link img {
        width: 105px !important;

        height: 130px !important;
    }

    .oil h3,
    .oil-link h3 {
        font-size: 12px !important;
    }

    .oil-notes span,
    .oil-link .oil-notes span {
        font-size: 6.5px !important;

        padding: 3px 4px !important;
    }

    .oil-view {
        width: 95% !important;

        min-height: 34px !important;

        font-size: 9px !important;

        padding: 6px 4px !important;
    }
}
/* =========================================
   🔥 FINAL FIX - OIL CARD BUTTON
   FORCE BUTTON TO SHOW COMPLETELY
========================================= */

/* الكروت */
.oil,
.oil-link {
    height: auto !important;
    min-height: 0 !important;

    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding: 18px 12px 18px !important;

    position: relative !important;
}

/* الجريد */
.oils-grid {
    height: auto !important;
    min-height: 0 !important;

    align-items: stretch !important;

    overflow: visible !important;
}

/* الصورة */
.oil img,
.oil-link img {
    flex-shrink: 0 !important;

    width: 170px !important;
    height: 180px !important;

    object-fit: contain !important;

    margin: 0 auto 6px !important;
}

/* اسم الزيت */
.oil h3,
.oil-link h3 {
    flex-shrink: 0 !important;

    width: 100% !important;

    margin: 5px 0 7px !important;

    text-align: center !important;

    line-height: 1.3 !important;
}

/* المكونات */
.oil-notes,
.oil-link .oil-notes {
    flex-shrink: 0 !important;

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 5px !important;

    margin: 0 0 12px !important;

    overflow: visible !important;
}

/* =========================================
   زر عرض الزيت
========================================= */

.oil-view {
    display: flex !important;

    position: relative !important;

    flex-shrink: 0 !important;

    width: 92% !important;

    height: 42px !important;

    min-height: 42px !important;

    max-height: none !important;

    margin: 5px auto 0 !important;

    padding: 8px 12px !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 13px !important;

    background: linear-gradient(
        135deg,
        #102a43,
        #d4af37
    ) !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    z-index: 999 !important;
}

.oil-view span {
    display: inline-block !important;

    margin-left: 7px !important;

    color: #ffffff !important;

    font-size: 18px !important;

    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


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

@media (max-width: 768px) {

    .oils-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        align-items: stretch !important;

        height: auto !important;

        overflow: visible !important;
    }

    .oil,
    .oil-link {
        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;

        padding: 10px 6px 12px !important;

        border-radius: 18px !important;
    }

    .oil img,
    .oil-link img {
        width: 110px !important;

        height: 135px !important;

        margin: 0 auto 4px !important;
    }

    .oil h3,
    .oil-link h3 {
        font-size: 13px !important;

        margin: 3px 0 6px !important;
    }

    .oil-notes,
    .oil-link .oil-notes {
        gap: 3px !important;

        margin-bottom: 10px !important;
    }

    .oil-notes span,
    .oil-link .oil-notes span {
        font-size: 7px !important;

        padding: 3px 5px !important;

        border-radius: 12px !important;
    }

    /* الزر كامل */
    .oil-view {
        width: 94% !important;

        height: 36px !important;

        min-height: 36px !important;

        margin: 4px auto 0 !important;

        padding: 6px 5px !important;

        font-size: 10px !important;

        border-radius: 10px !important;

        overflow: visible !important;
    }

    .oil-view span {
        font-size: 14px !important;

        margin-left: 4px !important;
    }
}


/* =========================================
   📱 SMALL PHONE
========================================= */

@media (max-width: 380px) {

    .oil,
    .oil-link {
        padding: 8px 4px 10px !important;
    }

    .oil img,
    .oil-link img {
        width: 100px !important;

        height: 125px !important;
    }

    .oil h3,
    .oil-link h3 {
        font-size: 12px !important;
    }

    .oil-view {
        width: 95% !important;

        height: 34px !important;

        min-height: 34px !important;

        font-size: 9px !important;

        padding: 5px 4px !important;
    }
}
/* =========================================================
   VAPOR LUXURY
   FINAL OIL CARDS - FORCE FIX
========================================================= */

/* الجريد */
.oils-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 20px !important;

    align-items: stretch !important;

    overflow: visible !important;
}


/* =========================================================
   الكارت
========================================================= */

.oil {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

    padding: 20px 12px 16px !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    opacity: 1 !important;

    transform: none !important;

    animation: none !important;

    visibility: visible !important;

    border-radius: 22px !important;

    background: #fff !important;

    border: 1px solid rgba(212,175,55,.28) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10) !important;
}


/* =========================================================
   الصورة
========================================================= */

.oil img {
    position: relative !important;

    display: block !important;

    width: 180px !important;
    height: 190px !important;

    max-width: 100% !important;

    object-fit: contain !important;

    margin: 0 auto 8px !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    animation: none !important;

    flex-shrink: 0 !important;
}


/* =========================================================
   اسم الزيت
========================================================= */

.oil h3 {
    display: block !important;

    width: 100% !important;

    margin: 5px 0 8px !important;

    padding: 0 !important;

    text-align: center !important;

    color: #102a43 !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    line-height: 1.3 !important;

    visibility: visible !important;
}


/* =========================================================
   المكونات
========================================================= */

.oil-notes {
    display: flex !important;

    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 5px !important;

    margin: 0 0 15px !important;

    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;

    visibility: visible !important;
}

.oil-notes span {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 5px 9px !important;

    border-radius: 20px !important;

    background: #fff !important;

    border: 1px solid rgba(212,175,55,.30) !important;

    color: #555 !important;

    font-size: 10px !important;

    line-height: 1.3 !important;

    white-space: nowrap !important;
}


/* =========================================================
   🔥 زر عرض الزيت
========================================================= */

.oil-view {
    display: flex !important;

    position: relative !important;

    width: 92% !important;

    height: 44px !important;

    min-height: 44px !important;

    max-height: none !important;

    margin: auto auto 0 !important;

    padding: 0 15px !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #102a43 0%,
            #1b425d 50%,
            #c9a227 100%
        ) !important;

    color: #fff !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    animation: none !important;

    overflow: visible !important;

    z-index: 100 !important;

    flex-shrink: 0 !important;

    cursor: pointer !important;

    box-shadow:
        0 7px 18px rgba(16,42,67,.20) !important;
}

.oil-view span {
    display: inline-block !important;

    margin-left: 7px !important;

    color: #fff !important;

    font-size: 18px !important;

    line-height: 1 !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   HOVER
========================================================= */

.oil:hover {
    transform: translateY(-6px) !important;

    border-color: rgba(212,175,55,.65) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14),
        0 0 25px rgba(212,175,55,.10) !important;
}

.oil:hover img {
    transform: scale(1.04) !important;
}

.oil:hover .oil-view {
    box-shadow:
        0 10px 25px rgba(212,175,55,.25) !important;
}


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

@media (max-width: 768px) {

    .oils-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap: 10px !important;

        padding: 0 5px !important;

        box-sizing: border-box !important;
    }


    .oil {
        width: 100% !important;

        height: auto !important;

        min-height: 320px !important;

        max-height: none !important;

        padding: 10px 6px 12px !important;

        border-radius: 18px !important;

        overflow: visible !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;
    }


    .oil img {
        width: 105px !important;

        height: 135px !important;

        margin: 0 auto 5px !important;

        animation: none !important;

        transform: none !important;
    }


    .oil h3 {
        font-size: 13px !important;

        line-height: 1.3 !important;

        margin: 3px 0 7px !important;
    }


    .oil-notes {
        gap: 3px !important;

        margin-bottom: 10px !important;
    }


    .oil-notes span {
        font-size: 7px !important;

        padding: 3px 5px !important;

        border-radius: 12px !important;
    }


    .oil-view {
        width: 94% !important;

        height: 36px !important;

        min-height: 36px !important;

        margin: auto auto 0 !important;

        padding: 0 5px !important;

        border-radius: 10px !important;

        font-size: 10px !important;

        opacity: 1 !important;

        visibility: visible !important;

        animation: none !important;
    }


    .oil-view span {
        font-size: 14px !important;

        margin-left: 4px !important;
    }
}


/* =========================================================
   📱 SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .oils-grid {
        gap: 7px !important;
    }

    .oil {
        min-height: 305px !important;

        padding: 8px 4px 10px !important;
    }

    .oil img {
        width: 95px !important;

        height: 120px !important;
    }

    .oil h3 {
        font-size: 12px !important;
    }

    .oil-notes span {
        font-size: 6.5px !important;

        padding: 3px 4px !important;
    }

    .oil-view {
        width: 95% !important;

        height: 34px !important;

        min-height: 34px !important;

        font-size: 9px !important;
    }
}
/* =========================================================
   ☢️ VAPOR LUXURY — ABSOLUTE FINAL OVERRIDE
   THIS MUST BE THE LAST CSS IN THE FILE
========================================================= */

/* RESET OIL SECTION */
section.oil-category,
.oil-category,
.oil-category .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}


/* GRID */
.oils-grid,
.oil-category .oils-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 20px !important;

    overflow: visible !important;

    align-items: stretch !important;
}


/* =========================================================
   OIL CARD — DESTROY ALL OLD HEIGHT RULES
========================================================= */

.oil,
.oils-grid > .oil,
.oil-category .oil {
    /* SIZE */
    width: 100% !important;

    height: auto !important;
    min-height: 400px !important;
    max-height: none !important;

    /* DISPLAY */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* REMOVE OLD RESTRICTIONS */
    overflow: visible !important;

    /* REMOVE OLD ANIMATION STATES */
    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;

    /* BOX */
    box-sizing: border-box !important;

    padding: 20px 12px 18px !important;

    position: relative !important;

    z-index: 10 !important;
}


/* =========================================================
   IMAGE
========================================================= */

.oil img,
.oils-grid .oil img {
    display: block !important;

    width: 180px !important;
    height: 190px !important;

    max-width: 100% !important;
    max-height: none !important;

    object-fit: contain !important;

    margin: 0 auto 8px !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;

    flex: 0 0 auto !important;
}


/* =========================================================
   TITLE
========================================================= */

.oil h3,
.oils-grid .oil h3 {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 5px 0 8px !important;
    padding: 0 !important;

    text-align: center !important;

    overflow: visible !important;

    white-space: normal !important;
    text-overflow: clip !important;

    opacity: 1 !important;
    visibility: visible !important;

    flex: 0 0 auto !important;
}


/* =========================================================
   NOTES
========================================================= */

.oil-notes,
.oils-grid .oil .oil-notes {
    display: flex !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    justify-content: center !important;
    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 5px !important;

    margin: 0 0 15px !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    flex: 0 0 auto !important;
}

.oil-notes span,
.oils-grid .oil .oil-notes span {
    display: inline-flex !important;

    width: auto !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 5px 9px !important;

    overflow: visible !important;

    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   🔥 BUTTON — ABSOLUTE FORCE
========================================================= */

.oil-view,
.oils-grid .oil .oil-view {
    display: flex !important;

    position: relative !important;

    width: 92% !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;

    margin: auto auto 0 !important;

    padding: 0 15px !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;

    z-index: 999999 !important;

    flex: 0 0 44px !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #102a43 0%,
            #1b425d 50%,
            #d4af37 100%
        ) !important;

    color: #fff !important;

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

    line-height: 1 !important;

    text-align: center !important;

    text-decoration: none !important;

    cursor: pointer !important;
}

.oil-view *,
.oils-grid .oil .oil-view * {
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   📱 MOBILE — ALSO DESTROY EVERYTHING OLD
========================================================= */

@media screen and (max-width: 768px) {

    section.oil-category,
    .oil-category,
    .oil-category .container {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    .oils-grid,
    .oil-category .oils-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        gap: 10px !important;

        overflow: visible !important;
    }


    .oil,
    .oils-grid > .oil,
    .oil-category .oil {
        width: 100% !important;

        height: auto !important;

        min-height: 330px !important;

        max-height: none !important;

        padding: 10px 6px 12px !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        position: relative !important;

        z-index: 10 !important;
    }


    .oil img,
    .oils-grid .oil img {
        width: 105px !important;

        height: 135px !important;

        max-width: 100% !important;

        max-height: none !important;

        object-fit: contain !important;

        margin: 0 auto 5px !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;
    }


    .oil h3,
    .oils-grid .oil h3 {
        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin: 3px 0 7px !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        text-align: center !important;

        overflow: visible !important;

        white-space: normal !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    .oil-notes,
    .oils-grid .oil .oil-notes {
        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        gap: 3px !important;

        margin: 0 0 10px !important;

        overflow: visible !important;
    }


    .oil-notes span,
    .oils-grid .oil .oil-notes span {
        font-size: 7px !important;

        padding: 3px 5px !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;
    }


    /* BUTTON */
    .oil-view,
    .oils-grid .oil .oil-view {
        display: flex !important;

        width: 94% !important;

        height: 36px !important;

        min-height: 36px !important;

        max-height: none !important;

        flex: 0 0 36px !important;

        margin: auto auto 0 !important;

        padding: 0 5px !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        z-index: 999999 !important;

        font-size: 10px !important;

        border-radius: 10px !important;
    }


    .oil-view span,
    .oil-view i,
    .oil-view svg {
        opacity: 1 !important;

        visibility: visible !important;
    }
}


/* =========================================================
   📱 VERY SMALL PHONES
========================================================= */

@media screen and (max-width: 380px) {

    .oil,
    .oils-grid > .oil {
        min-height: 315px !important;

        padding: 8px 4px 10px !important;
    }


    .oil img,
    .oils-grid .oil img {
        width: 95px !important;

        height: 120px !important;
    }


    .oil-view,
    .oils-grid .oil .oil-view {
        width: 95% !important;

        height: 34px !important;

        min-height: 34px !important;

        flex-basis: 34px !important;

        font-size: 9px !important;
    }
}


/* =========================================================
   ☢️ KILL OLD ANIMATIONS / STATES
========================================================= */

.oil,
.oil img,
.oil h3,
.oil p,
.oil-notes,
.oil-view {
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   FINAL OVERRIDE OF COMMON OLD RULES
========================================================= */

.oil {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.oil-view {
    overflow: visible !important;
    height: 44px !important;
    max-height: none !important;
}
/* ================= OIL MODAL ================= */

.oil-modal {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(0, 0, 0, .72) !important;
    backdrop-filter: blur(8px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    z-index: 999999 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition: .3s ease !important;
}

.oil-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.oil-modal-box {
    position: relative !important;

    width: min(460px, 100%) !important;

    background: linear-gradient(
        145deg,
        #ffffff,
        #f7f5ed
    ) !important;

    border: 1px solid rgba(201, 164, 54, .65) !important;

    border-radius: 25px !important;

    padding: 28px !important;

    text-align: center !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        0 0 35px rgba(201,164,54,.15) !important;

    transform: translateY(25px) scale(.96) !important;

    transition: .35s ease !important;
}

.oil-modal.active .oil-modal-box {
    transform: translateY(0) scale(1) !important;
}


/* CLOSE */

.oil-modal-close {
    position: absolute !important;

    top: 12px !important;
    right: 15px !important;

    width: 38px !important;
    height: 38px !important;

    border: none !important;

    border-radius: 50% !important;

    background: #102f49 !important;
    color: white !important;

    font-size: 25px !important;

    cursor: pointer !important;

    z-index: 5 !important;

    transition: .25s !important;
}

.oil-modal-close:hover {
    background: #c9a436 !important;
    transform: rotate(90deg) !important;
}


/* IMAGE */

.oil-modal-image {
    height: 190px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-bottom: 5px !important;
}

.oil-modal-image img {
    max-width: 150px !important;
    max-height: 180px !important;

    object-fit: contain !important;

    filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)) !important;
}


/* NAME */

#modalOilName {
    margin: 5px 0 4px !important;

    color: #102f49 !important;

    font-size: 27px !important;

    font-weight: 800 !important;
}

.modal-subtitle {
    margin: 0 0 18px !important;

    color: #777 !important;

    font-size: 14px !important;
}


/* SIZES */

.oil-sizes {
    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 10px !important;

    margin-bottom: 18px !important;
}

.oil-sizes button {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    padding: 13px 8px !important;

    background: white !important;

    border: 1px solid #ddd !important;

    border-radius: 14px !important;

    cursor: pointer !important;

    transition: .25s ease !important;
}

.oil-sizes button strong {
    color: #102f49 !important;

    font-size: 16px !important;
}

.oil-sizes button span {
    color: #b08b18 !important;

    font-size: 13px !important;

    font-weight: 700 !important;
}

.oil-sizes button:hover,
.oil-sizes button.selected {
    background: linear-gradient(
        135deg,
        #102f49,
        #c9a436
    ) !important;

    border-color: #c9a436 !important;

    transform: translateY(-2px) !important;
}

.oil-sizes button:hover strong,
.oil-sizes button:hover span,
.oil-sizes button.selected strong,
.oil-sizes button.selected span {
    color: white !important;
}


/* PRICE */

.selected-oil-price {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    background: #f5f2e8 !important;

    border-radius: 14px !important;

    padding: 14px 18px !important;

    margin-bottom: 15px !important;
}

.selected-oil-price span {
    color: #555 !important;

    font-size: 14px !important;
}

.selected-oil-price strong {
    color: #102f49 !important;

    font-size: 20px !important;
}


/* ORDER */

.oil-order-btn {
    width: 100% !important;

    border: none !important;

    border-radius: 14px !important;

    padding: 15px !important;

    background: linear-gradient(
        100deg,
        #102f49,
        #c9a436
    ) !important;

    color: white !important;

    font-size: 17px !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    box-shadow: 0 8px 20px rgba(16,47,73,.2) !important;

    transition: .25s ease !important;
}

.oil-order-btn:hover {
    transform: translateY(-2px) !important;

    box-shadow: 0 12px 25px rgba(16,47,73,.3) !important;
}

.oil-order-btn span {
    margin-right: 6px !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .oil-modal {
        padding: 12px !important;
    }

    .oil-modal-box {
        padding: 22px 18px !important;

        border-radius: 22px !important;
    }

    .oil-modal-image {
        height: 150px !important;
    }

    .oil-modal-image img {
        max-width: 120px !important;
        max-height: 145px !important;
    }

    #modalOilName {
        font-size: 23px !important;
    }

    .oil-sizes button {
        padding: 11px 5px !important;
    }

}
/* =========================
   VAPOR CART
========================= */

#vaporCartButton {
    position: fixed !important;
    right: 25px !important;
    bottom: 25px !important;
    width: 62px !important;
    height: 62px !important;
    border: 1px solid #d4af37 !important;
    border-radius: 50% !important;
    background: #071426 !important;
    color: #d4af37 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    z-index: 99990 !important;
    box-shadow: 0 0 25px rgba(212,175,55,.35) !important;
    transition: .3s !important;
}

#vaporCartButton:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 35px rgba(212,175,55,.65) !important;
}

#vaporCartCount {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 23px !important;
    height: 23px !important;
    padding: 0 5px !important;
    border-radius: 20px !important;
    background: #d4af37 !important;
    color: #071426 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* OVERLAY */

#vaporCartOverlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.7) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: .35s !important;
    z-index: 99998 !important;
}

#vaporCartOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}


/* DRAWER */

#vaporCartDrawer {
    position: fixed !important;
    top: 0 !important;
    right: -460px !important;
    width: 440px !important;
    max-width: 94vw !important;
    height: 100vh !important;
    background: #071426 !important;
    border-left: 1px solid rgba(212,175,55,.35) !important;
    z-index: 99999 !important;
    transition: .4s cubic-bezier(.4,0,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -15px 0 50px rgba(0,0,0,.5) !important;
}

#vaporCartDrawer.active {
    right: 0 !important;
}


/* HEADER */

.vapor-cart-header {
    padding: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(212,175,55,.2) !important;
}

.vapor-cart-header h2 {
    margin: 0 !important;
    color: #d4af37 !important;
    font-size: 22px !important;
}

.vapor-cart-header span {
    color: #aaa !important;
    font-size: 13px !important;
}

.vapor-cart-close,
.vapor-checkout-close {
    border: 0 !important;
    background: transparent !important;
    color: #d4af37 !important;
    font-size: 32px !important;
    cursor: pointer !important;
}


/* ITEMS */

#vaporCartItems {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
}

.vapor-cart-item {
    position: relative !important;
    display: flex !important;
    gap: 13px !important;
    padding: 15px 5px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.vapor-cart-image {
    width: 78px !important;
    height: 78px !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(212,175,55,.3) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vapor-cart-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.vapor-cart-image i {
    color: #d4af37 !important;
    font-size: 25px !important;
}

.vapor-cart-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.vapor-cart-info h3 {
    margin: 0 0 5px !important;
    color: #fff !important;
    font-size: 15px !important;
}

.vapor-cart-info strong {
    display: block !important;
    margin-top: 5px !important;
    color: #d4af37 !important;
}

.vapor-cart-details {
    color: #aaa !important;
    font-size: 11px !important;
    line-height: 1.7 !important;
}


/* QTY */

.vapor-qty {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.vapor-qty button {
    width: 27px !important;
    height: 27px !important;
    border: 1px solid rgba(212,175,55,.5) !important;
    background: transparent !important;
    color: #d4af37 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.vapor-qty span {
    color: #fff !important;
    min-width: 20px !important;
    text-align: center !important;
}


/* REMOVE */

.vapor-remove {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #777 !important;
    cursor: pointer !important;
}

.vapor-remove:hover {
    color: #e74c3c !important;
}


/* FOOTER */

.vapor-cart-footer {
    padding: 20px !important;
    border-top: 1px solid rgba(212,175,55,.2) !important;
}

.vapor-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

.vapor-total strong {
    color: #d4af37 !important;
    font-size: 20px !important;
}

.vapor-checkout-btn {
    width: 100% !important;
    padding: 15px !important;
    border: 1px solid #d4af37 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#d4af37,#a98218) !important;
    color: #071426 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.vapor-clear-btn {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #999 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}


/* EMPTY */

.vapor-empty-cart {
    text-align: center !important;
    padding: 80px 20px !important;
    color: #777 !important;
}

.vapor-empty-cart i {
    font-size: 50px !important;
    color: #d4af37 !important;
    margin-bottom: 15px !important;
}

.vapor-empty-cart h3 {
    color: #fff !important;
}


/* CHECKOUT */

#vaporCheckout {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: rgba(0,0,0,.8) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: .3s !important;
    padding: 20px !important;
}

#vaporCheckout.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.vapor-checkout-box {
    position: relative !important;
    width: 500px !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 30px !important;
    background: #071426 !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.7) !important;
}

.vapor-checkout-box h2 {
    margin: 0 0 5px !important;
    color: #d4af37 !important;
}

.vapor-checkout-box p {
    color: #999 !important;
    margin-bottom: 20px !important;
}

.vapor-checkout-box input,
.vapor-checkout-box textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(212,175,55,.2) !important;
    border-radius: 9px !important;
    outline: none !important;
    background: #0c1d32 !important;
    color: #fff !important;
}

.vapor-checkout-box textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

.vapor-send-order {
    width: 100% !important;
    padding: 15px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #25D366 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}


/* TOAST */

#vaporCartToast {
    position: fixed !important;
    left: 50% !important;
    bottom: 30px !important;
    transform: translate(-50%,20px) !important;
    background: #071426 !important;
    border: 1px solid #d4af37 !important;
    color: #fff !important;
    padding: 13px 22px !important;
    border-radius: 30px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100001 !important;
    transition: .3s !important;
}

#vaporCartToast.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%,0) !important;
}


/* MOBILE */

@media (max-width: 600px) {

    #vaporCartButton {
        right: 15px !important;
        bottom: 15px !important;
        width: 56px !important;
        height: 56px !important;
    }

    #vaporCartDrawer {
        width: 100% !important;
        max-width: 100% !important;
        right: -100% !important;
    }

    .vapor-checkout-box {
        padding: 22px !important;
    }

}
/* =========================
   CART BUTTON - ABOVE PHONE
========================= */

#vaporCartButton {
    position: fixed !important;

    right: 25px !important;
    bottom: 155px !important;

    width: 62px !important;
    height: 62px !important;

    border-radius: 50% !important;

    background: #071426 !important;
    color: #d4af37 !important;

    border: 2px solid #d4af37 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 22px !important;

    z-index: 99990 !important;

    box-shadow:
        0 5px 20px rgba(0,0,0,.25),
        0 0 20px rgba(212,175,55,.25) !important;

    cursor: pointer !important;

    transition: all .3s ease !important;
}

#vaporCartButton:hover {
    transform: scale(1.08) !important;
}


/* رقم المنتجات */

#vaporCartCount {
    position: absolute !important;

    top: -5px !important;
    right: -5px !important;

    min-width: 23px !important;
    height: 23px !important;

    padding: 0 5px !important;

    border-radius: 50% !important;

    background: #d4af37 !important;
    color: #071426 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    border: 2px solid #071426 !important;
}


/* موبايل */

@media (max-width: 600px) {

    #vaporCartButton {
        right: 15px !important;
        bottom: 145px !important;

        width: 55px !important;
        height: 55px !important;

        font-size: 20px !important;
    }

}
/* =========================================
   FIXED BUTTONS - PERFECT ALIGNMENT
========================================= */

/* السلة */
#vaporCartButton {
    position: fixed !important;

    right: 20px !important;
    bottom: 155px !important;

    width: 58px !important;
    height: 58px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    z-index: 99990 !important;
}


/* الهاتف */
a[href^="tel:"],
.phone-float,
.call-float,
.phone-button {
    position: fixed !important;

    right: 20px !important;
    bottom: 87px !important;

    width: 58px !important;
    height: 58px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    z-index: 99989 !important;
}


/* واتساب */
a[href*="wa.me"],
.whatsapp-float,
.whatsapp-button,
.whatsapp {
    position: fixed !important;

    right: 20px !important;
    bottom: 19px !important;

    width: 58px !important;
    height: 58px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    z-index: 99988 !important;
}


/* =========================================
   CART NUMBER
========================================= */

#vaporCartCount {
    top: -4px !important;
    right: -4px !important;

    min-width: 22px !important;
    height: 22px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
}


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

@media (max-width: 600px) {

    #vaporCartButton {
        right: 15px !important;
        bottom: 145px !important;

        width: 56px !important;
        height: 56px !important;
    }

    a[href^="tel:"],
    .phone-float,
    .call-float,
    .phone-button {
        right: 15px !important;
        bottom: 80px !important;

        width: 56px !important;
        height: 56px !important;
    }

    a[href*="wa.me"],
    .whatsapp-float,
    .whatsapp-button,
    .whatsapp {
        right: 15px !important;
        bottom: 15px !important;

        width: 56px !important;
        height: 56px !important;
    }

}


/* =========================================
   ICON ALIGNMENT
========================================= */

#vaporCartButton i,
a[href^="tel:"] i,
a[href*="wa.me"] i {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
/* =========================================
   FIX OIL CARDS - SAME BUTTON POSITION
========================================= */

.oil {
    display: flex !important;
    flex-direction: column !important;
}

/* منطقة الملاحظات تاخد مساحة ثابتة */
.oil .oil-notes {
    min-height: 58px !important;

    display: flex !important;
    align-content: flex-start !important;
    justify-content: center !important;
    align-items: flex-start !important;

    flex-wrap: wrap !important;

    margin-bottom: 10px !important;
}

/* زر أضف للسلة */
.oil .oil-order-btn,
.oil > button,
.oil .oil-view {
    margin-top: auto !important;

    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
}


/* لو الكارت نفسه */
.oil {
    min-height: 350px !important;
}


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

@media (max-width: 600px) {

    .oil {
        min-height: 330px !important;
    }

    .oil .oil-notes {
        min-height: 58px !important;
    }

    .oil .oil-order-btn,
    .oil > button,
    .oil .oil-view {
        height: 58px !important;
        min-height: 58px !important;
    }

}
/* =========================
   OIL SELECT POPUP
========================= */

#vaporOilSelectModal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.75) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 100000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition: .3s ease !important;

    padding: 20px !important;
    box-sizing: border-box !important;
}

#vaporOilSelectModal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.vapor-oil-box {
    width: 450px !important;
    max-width: 100% !important;

    background: #071426 !important;

    border: 1px solid #d4af37 !important;
    border-radius: 20px !important;

    padding: 25px !important;

    box-shadow: 0 20px 70px rgba(0,0,0,.7) !important;

    position: relative !important;
}

.vapor-oil-box h2 {
    color: #d4af37 !important;
    text-align: center !important;
    margin: 0 0 8px !important;
}

.vapor-oil-box p {
    color: #aaa !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

.vapor-oil-close {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;

    background: transparent !important;
    border: 0 !important;

    color: #d4af37 !important;
    font-size: 30px !important;

    cursor: pointer !important;
}

#vaporOilSelect {
    width: 100% !important;

    padding: 15px !important;

    border-radius: 10px !important;
    border: 1px solid rgba(212,175,55,.5) !important;

    background: #0c1d32 !important;
    color: #fff !important;

    font-size: 15px !important;

    outline: none !important;

    margin-bottom: 15px !important;
}

.vapor-oil-confirm {
    width: 100% !important;

    padding: 15px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: linear-gradient(
        135deg,
        #d4af37,
        #a98218
    ) !important;

    color: #071426 !important;

    font-size: 16px !important;
    font-weight: 800 !important;

    cursor: pointer !important;
}

.vapor-oil-confirm:hover {
    transform: translateY(-2px) !important;
}


/* MOBILE */

@media(max-width:600px) {

    .vapor-oil-box {
        width: 100% !important;
        padding: 22px !important;
    }

}
/* =========================
   OIL BANNER
========================= */

.oil-banner {
    width: 100%;
    margin: 25px 0 18px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background: #f8f8f8;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, .12),
        0 0 25px rgba(215, 173, 39, .12);
    border: 1px solid rgba(215, 173, 39, .35);
}

.oil-banner img {
    width: 100%;
    height: 180px;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.oil-banner:hover img {
    transform: scale(1.03);
}


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

@media (max-width: 768px) {

    .oil-banner {
        margin: 20px 0 15px;
        border-radius: 16px;
    }

    .oil-banner img {
        height: 120px;
        object-fit: cover;
    }

}
/* =========================================
   OIL BANNER - FULL IMAGE
========================================= */

.oil-banner {
    width: 100% !important;
    margin: 30px 0 !important;

    padding: 0 !important;

    border-radius: 22px !important;
    overflow: hidden !important;

    background: #071426 !important;

    border: 1px solid rgba(212,175,55,.45) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18),
        0 0 25px rgba(212,175,55,.12) !important;

    position: relative !important;
}


/* الصورة كاملة بدون قص */

.oil-banner img {
    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;

    transition: transform .5s ease !important;
}


/* حركة بسيطة */

.oil-banner:hover img {
    transform: scale(1.015) !important;
}


/* =========================================
   LAPTOP
========================================= */

@media (min-width: 769px) {

    .oil-banner {
        max-width: 1600px !important;
        margin: 35px auto !important;
    }

    .oil-banner img {
        width: 100% !important;
        height: auto !important;
    }

}


/* =========================================
   PHONE
========================================= */

@media (max-width: 768px) {

    .oil-banner {
        width: 100% !important;

        margin: 20px 0 !important;

        border-radius: 14px !important;
    }

    .oil-banner img {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }

}


/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 480px) {

    .oil-banner {
        margin: 15px 0 !important;
        border-radius: 12px !important;
    }

    .oil-banner img {
        width: 100% !important;
        height: auto !important;
    }

}
/* =========================
   OIL BANNER - SMALL LUXURY
========================= */

.oil-banner {
    width: 88% !important;
    max-width: 1250px !important;
    margin: 28px auto !important;

    border-radius: 20px !important;
    overflow: hidden !important;

    border: 1px solid rgba(212,175,55,.45) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15),
        0 0 20px rgba(212,175,55,.12) !important;

    background: #071426 !important;
}

.oil-banner img {
    width: 100% !important;
    height: auto !important;

    display: block !important;

    object-fit: contain !important;
}


/* 📱 موبايل */

@media (max-width: 768px) {

    .oil-banner {
        width: 92% !important;
        margin: 20px auto !important;
        border-radius: 15px !important;
    }

    .oil-banner img {
        width: 100% !important;
        height: auto !important;
    }

}


/* 📱 موبايل صغير */

@media (max-width: 480px) {

    .oil-banner {
        width: 94% !important;
        margin: 15px auto !important;
        border-radius: 12px !important;
    }

}
/* =========================================
   ✨ LUXURY GOLD GLOW
========================================= */

.oil-banner {
    position: relative !important;
    overflow: hidden !important;

    border: 1px solid rgba(212,175,55,.6) !important;

    box-shadow:
        0 0 15px rgba(212,175,55,.20),
        0 0 35px rgba(212,175,55,.15),
        0 15px 40px rgba(0,0,0,.18) !important;

    animation: luxuryGlow 3s ease-in-out infinite alternate !important;
}


/* خط إضاءة متحرك */

.oil-banner::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: -100% !important;

    width: 60% !important;
    height: 100% !important;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        rgba(212,175,55,.35),
        transparent
    ) !important;

    transform: skewX(-20deg) !important;

    animation: bannerLight 4s ease-in-out infinite !important;

    pointer-events: none !important;
}


/* الإضاءة الخارجية */

@keyframes luxuryGlow {

    0% {
        box-shadow:
            0 0 12px rgba(212,175,55,.15),
            0 0 25px rgba(212,175,55,.10),
            0 15px 40px rgba(0,0,0,.15);
    }

    100% {
        box-shadow:
            0 0 22px rgba(212,175,55,.40),
            0 0 55px rgba(212,175,55,.25),
            0 18px 45px rgba(0,0,0,.20);
    }

}


/* حركة اللمعة */

@keyframes bannerLight {

    0% {
        left: -100%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }

}


/* الصورة */

.oil-banner img {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    transition: transform .5s ease !important;
}


/* Hover */

.oil-banner:hover img {
    transform: scale(1.02) !important;
}