/* RESET */

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

html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

/* LINKS */

.logo-link{
text-decoration:none;
color:black;
}

/* BODY */

body{
background:#f3ede8;
font-family:Georgia, serif;
}

/* HEADER */

.fenty-header{
position:relative;
text-align:center;
padding:20px 0;
border-bottom:1px solid #d9d9d9;
background:white;
z-index:2000;
}

.fenty-header h1{
margin:0;
font-size:22px;
letter-spacing:6px;
font-weight:500;
font-family:Arial, sans-serif;
}

/* SECTION */

.categories-section{
width:100%;
padding:30px 4vw 50px;
}

.sub-title{
text-align:center;
font-family:Arial, sans-serif;
font-size:11px;
letter-spacing:4px;
color:#000;
margin-bottom:22px;
}

/* WRAPPER */

.categories-wrapper{
position:relative;
width:100%;
}

/* GRID */

.categories-slider{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
width:100%;
}

/* CARD */

.category-card{
width:100%;
text-align:center;
}

/* IMAGE BOX */

.category-image-box{
position:relative;
width:100%;
height:650px;
background:#ebe3dc;
overflow:hidden;
}

/* IMAGES */

.category-image-box img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.5s ease, opacity 0.4s ease;
}

/* SECOND IMAGE */

.img-hover{
opacity:0;
}

/* IMAGE SWITCH */

.category-image-box:hover .img-main{
opacity:0;
transform:scale(1.06);
}

.category-image-box:hover .img-hover{
opacity:1;
transform:scale(1.06);
}

/* LABEL */

.category-label{
display:block;
margin-top:20px;
text-align:center;
font-family:Arial, sans-serif;
font-size:12px;
letter-spacing:4px;
color:#000;
}

/* VIEW BUTTON */

.view-product-btn{
position:absolute;
left:50%;
bottom:22px;
transform:translateX(-50%);
width:80%;
padding:14px 18px;
border:1px solid #000;
background:rgba(255,255,255,0.95);
color:#000;
text-decoration:none;
text-align:center;
font-family:Arial, sans-serif;
font-size:11px;
letter-spacing:4px;
opacity:0;
transition:0.3s;
z-index:2;
}

.category-image-box:hover .view-product-btn{
opacity:1;
}

.view-product-btn:hover{
background:#000;
color:#fff;
}

/* SHADE SELECT */

.shade-select{
position:absolute;
left:50%;
bottom:70px;
transform:translateX(-50%);
width:80%;
padding:14px 18px;
border:1px solid #000;
background:rgba(255,255,255,0.95);
font-family:Arial, sans-serif;
font-size:11px;
letter-spacing:4px;
text-align:center;
opacity:0;
transition:opacity 0.3s ease;
z-index:2;

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

color:#000;
}

.shade-select option{
color:black;
}

.category-image-box:hover .shade-select{
opacity:1;
}

/* MOBILE TOUCH */

.category-image-box:active .shade-select{
opacity:1;
}

.category-image-box:active .view-product-btn{
opacity:1;
}

/* NAV BUTTONS HIDDEN */

.nav-btn{
display:none;
}

/* TABLET */

@media (max-width:900px){

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

.category-image-box{
height:480px;
}

.view-product-btn{
width:84%;
font-size:10px;
letter-spacing:3px;
padding:12px 14px;
}

}

/* MOBILE */

@media (max-width:600px){

.categories-section{
padding:20px 12px 40px;
}

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

.category-image-box{
height:420px;
}

.sub-title{
margin-bottom:16px;
font-size:10px;
letter-spacing:3px;
}

.view-product-btn{
width:88%;
font-size:10px;
letter-spacing:3px;
padding:12px 12px;
bottom:16px;
opacity:0;
}

.shade-select{
opacity:0;
bottom:70px;
}

}

/* FOOTER */

.footer-findus{
text-align:center;
padding:30px 0;
border-top:1px solid #d9d9d9;
background:white;
margin-top:60px;
}

.footer-findus h1{
margin:0;
font-size:22px;
letter-spacing:6px;
font-weight:500;
font-family:Arial, sans-serif;
color:black;
}

/* SOCIAL ICONS */

.social-icons{
margin-top:20px;
display:flex;
justify-content:center;
gap:25px;
}

.social-icons a{
font-size:22px;
color:black;
transition:0.3s;
}

.social-icons a:hover{
opacity:0.6;
}

/* ANNOUNCEMENT BAR */

.announcement-bar {
width: 100%;
height: 34px;
background: #f1f1f1;
border-bottom: 1px solid #e6e0db;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
font-family: Arial, sans-serif;
font-size: 11px;
letter-spacing: 2px;
color: #000;
overflow: hidden;
}

.announcement-container {
width: 420px;
overflow: hidden;
text-align: center;
}

.announcement-slider {
display: flex;
transition: transform 0.3s ease;
}

.announcement-item {
min-width: 100%;
}

.announce-btn {
border: none;
background: none;
font-size: 16px;
cursor: pointer;
color: #000000;
}

.announce-btn:hover {
color: black;
}

@media (max-width: 600px) {

.announcement-bar {
height: 32px;
gap: 8px;
font-size: 9px;
letter-spacing: 1.5px;
padding: 0 8px;
}

.announcement-container{
width:100%;
max-width:420px;
}

.announce-btn {
font-size: 14px;
}

.footer-findus h1 {
font-size: 18px;
letter-spacing: 4px;
}

.social-icons {
gap: 18px;
}

.social-icons a {
font-size: 20px;
}

}

/* ========================= */
/* HAMBURGER MENU ICON */
/* ========================= */

.menu-icon{
position:absolute;
left:8px;
top:50%;
transform:translateY(-50%);
width:14px;
height:9px;
display:flex;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
z-index:6000;
}

.menu-icon span{
display:block;
height:1px;
width:100%;
background:#000;
transition:0.3s;
}

.menu-icon.active span:nth-child(1){
transform:rotate(45deg) translate(3px,3px);
}

.menu-icon.active span:nth-child(2){
opacity:0;
}

.menu-icon.active span:nth-child(3){
transform:rotate(-45deg) translate(3px,-3px);
}

/* ========================= */
/* MEGA MENU */
/* ========================= */

.mega-menu{
position:fixed;
top:95px;
left:0;
width:100%;
height:50vh;
background:#f3ede8;
z-index:3000;
padding:40px 80px;
transform:translateY(-20px);
opacity:0;
pointer-events:none;
transition:transform 0.35s ease, opacity 0.35s ease;
}

.mega-menu.active{
transform:translateY(0);
opacity:1;
pointer-events:auto;
}

.mega-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.mega-item{
text-decoration:none;
color:black;
}

.mega-item img{
width:100%;
height:220px;
object-fit:cover;
transition:0.3s;
}

.mega-item:hover img{
transform:scale(1.05);
}

.mega-item p{
text-align:center;
font-size:11px;
letter-spacing:4px;
margin-top:14px;
font-family:Arial;
}

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

.mobile-menu{
position:fixed;
top:0;
left:-100%;
width:84%;
max-width:380px;
height:100dvh;
background:#f7f7f5;
z-index:5000;
transition:left 0.35s ease;
overflow-y:auto;
}

.mobile-menu.active{
left:0;
}

.mobile-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.15);
opacity:0;
pointer-events:none;
transition:0.3s;
z-index:4000;
}

.mobile-overlay.active{
opacity:1;
pointer-events:auto;
}

/* BODY LOCK */

body.menu-open{
position:fixed;
width:100%;
overflow:hidden;
}

/* MOBILE MENU CONTENT */

.mobile-menu-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px;
border-bottom:1px solid #dcdcdc;
font-family:Arial;
letter-spacing:5px;
}

.mobile-menu-content{
padding:0 24px 120px;
}

/* MOBILE MENU LINKS */

.mobile-menu-link{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
padding:26px 0;
border-bottom:1px solid #dcdcdc;
background:none;
border:none;
font-family:Arial;
font-size:14px;
letter-spacing:4px;
text-decoration:none;
color:black;
text-transform:uppercase;
cursor:pointer;
text-align:left;
}

/* BRANDS COMBO */

.combo-icon{
font-size:28px;
font-weight:300;
line-height:1;
transition:0.25s ease;
}

.mobile-menu-group.active .combo-icon{
transform:rotate(45deg);
}

.mobile-submenu{
display:none;
background:#ececea;
}

.mobile-menu-group.active .mobile-submenu{
display:block;
}

.mobile-submenu a{
display:block;
padding:18px;
border-top:1px solid #d6d6d6;
font-family:Arial;
font-size:13px;
letter-spacing:4px;
text-decoration:none;
text-transform:uppercase;
color:#3a3a3a;
}

/* GLOWERS WORLD */

.mobile-world-title{
padding:30px 0 35px;
font-family:Arial;
font-size:18px;
letter-spacing:6px;
}

.mobile-world-title strong{
font-weight:800;
margin-right:6px;
}

.mobile-world-links{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.mobile-world-links a{
text-align:center;
text-decoration:none;
color:#888;
font-family:Arial;
font-size:14px;
letter-spacing:4px;
text-transform:uppercase;
}

/* FIND US */

.findus-submenu{
display:none;
flex-direction:column;
align-items:center;
margin-top:8px;
}

.findus-submenu.active{
display:flex;
}

.findus-submenu a{
text-align:center;
padding:10px 0;
font-family:Arial;
font-size:13px;
letter-spacing:4px;
text-decoration:none;
color:#888;
}

/* RESPONSIVE */

@media (max-width:600px){

.mega-menu{
display:none !important;
}

}

@media (min-width:601px){

.mobile-menu,
.mobile-overlay{
display:none;
}

}
.findus-toggle{
border-bottom:none;
padding:0;
justify-content:center;
}

/* OUR STORY SECTION */

.our-story-section{
width:100%;
padding:80px 6vw;
background:#f3ede8;
}

.story-subtitle{
text-align:center;
font-family:Arial, sans-serif;
font-size:11px;
letter-spacing:4px;
margin-bottom:40px;
}

.our-story-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
max-width:1100px;
margin:auto;
}

.story-image img{
width:100%;
height:auto;
display:block;
}

.story-text h2{
font-family:Arial, sans-serif;
font-size:18px;
letter-spacing:3px;
margin-bottom:20px;
}

.story-text p{
font-family:Georgia, serif;
font-size:14px;
line-height:1.8;
color:#333;
margin-bottom:25px;
}

.story-btn{
display:inline-block;
text-decoration:none;
font-family:Arial, sans-serif;
font-size:11px;
letter-spacing:3px;
color:black;
border-bottom:1px solid black;
padding-bottom:3px;
}

/* MOBILE */

@media(max-width:768px){

.our-story-container{
grid-template-columns:1fr;
gap:30px;
text-align:center;
}

.story-text h2{
font-size:16px;
}

}
.about-header{
position:absolute;
right:35px;
top:50%;
transform:translateY(-50%);
font-family:Arial, sans-serif;
font-size:11px;
letter-spacing:4px;
text-decoration:none;
color:black;
padding-bottom:3px;
border-bottom:1px solid transparent;
transition:0.25s;
}

.about-header:hover{
border-bottom:1px solid black;
opacity:0.7;
}

/* اخفاءه في الجوال */

@media (max-width:768px){

.about-header{
display:none;
}

}
/* ============================ */
/* PRODUCT PAGE LAYOUT */
/* ============================ */

.product-page{
width:100%;
padding:60px 6vw;
background:#f3ede8;
}

.product-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:start;
}

/* PRODUCT IMAGE */

.product-main-image{
position:relative;
width:100%;
height:520px;
background:#ebe3dc;
overflow:hidden;
}

.product-main-image img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
transition:opacity .4s ease, transform .4s ease;
}

.product-img-hover{
opacity:0;
}

.product-main-image:hover .product-img-main{
opacity:0;
transform:scale(1.05);
}

.product-main-image:hover .product-img-hover{
opacity:1;
transform:scale(1.05);
}

/* PRODUCT INFO */

.product-info{
display:flex;
flex-direction:column;
gap:20px;
max-width:360px;
}

.product-name{
font-family:Arial;
font-size:18px;
letter-spacing:4px;
}

.product-price{
font-family:Arial;
font-size:13px;
letter-spacing:3px;
}

/* SHADE */

.shade-title{
font-family:Arial;
font-size:10px;
letter-spacing:4px;
margin-top:10px;
}

.product-shades{
width:240px;
padding:12px;
border:1px solid black;
background:white;
font-family:Arial;
font-size:11px;
letter-spacing:3px;
}

/* BUTTON */

.add-to-bag{
display:inline-block;
width:260px;
padding:14px 28px;
border:1px solid black;
background:white;

font-family:Arial;
font-size:11px;
letter-spacing:4px;

text-align:center;
text-decoration:none;
color:black;

cursor:pointer;
transition:.3s;
}

.add-to-bag:hover{
background:black;
color:white;
}

/* MOBILE */

@media(max-width:768px){

.product-container{
grid-template-columns:1fr;
gap:40px;
}

.product-info{
max-width:100%;
}

.product-shades{
width:100%;
}

.add-to-bag{
width:100%;
}

}
/* PRODUCT IMAGE FIX */

.product-images{
width:100%;
max-width:520px;
}

.product-main-image{
position:relative;
width:100%;
height:520px;
background:#ebe3dc;
overflow:hidden;
}

.product-main-image img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

/* SHADE BUTTONS */

.shade-options{
display:flex;
flex-direction:column;
gap:10px;
margin-top:10px;
}

.shade-btn{
border:1px solid #000;
background:#fff;
padding:10px;
font-size:11px;
letter-spacing:2px;
font-family:Arial, sans-serif;
cursor:pointer;
text-align:left;
transition:0.2s;
}

.shade-btn.active{
background:#000;
color:#fff;
}

/* STOCK */

.stock-status{
margin-top:12px;
font-size:10px;
letter-spacing:3px;
font-family:Arial, sans-serif;
}

.stock-status.in{
opacity:0.7;
}

.stock-status.out{
opacity:0.3;
}
/* ============================== */
/* 🔥 LUXURY UI UPGRADE (ADD ONLY) */
/* ============================== */

/* PRODUCT SPACING IMPROVEMENT */

.product-container{
gap:90px;
align-items:center;
}

/* IMAGE MORE PREMIUM */

.product-main-image{
border-radius:4px;
}

.product-main-image img{
transition:transform 0.5s ease, opacity 0.4s ease;
}

/* INFO SPACING */

.product-info{
gap:22px;
}

/* TITLE REFINED */

.product-name{
letter-spacing:5px;
line-height:1.4;
}

/* PRICE CLEAN */

.product-price{
opacity:0.7;
}

/* SHADE OPTIONS → PREMIUM GRID */

/* SHADE OPTIONS CLEAN */

.shade-options{
display:flex;
flex-direction:column;
gap:8px;
margin-top:14px;
margin-bottom:14px;
}

/* BUTTON STYLE */

.shade-btn{
border:1px solid #000;
background:#fff;
padding:9px 12px;
font-size:10px;
letter-spacing:2.5px;
font-family:Arial, sans-serif;
cursor:pointer;
text-align:left;
transition:all 0.25s ease;
}

/* HOVER */

.shade-btn:hover{
background:#000;
color:#fff;
}

/* ACTIVE */

.shade-btn.active{
background:#000;
color:#fff;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

/* OUT OF STOCK */

.shade-btn[data-stock="out"]{
opacity:0.35;
cursor:not-allowed;
}

/* STOCK TEXT */

.stock-status{
margin-top:4px;
font-size:9px;
letter-spacing:3px;
font-family:Arial, sans-serif;
opacity:0.6;
}

/* BUTTON (ORDER) */

.add-to-bag{
margin-top:18px;
padding:16px;
letter-spacing:5px;
font-size:11px;
transition:all 0.3s ease;
}

.add-to-bag:hover{
background:#000;
color:#fff;
transform:translateY(-1px);
}

.add-to-bag:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

/* DISABLED BUTTON */

.add-to-bag[style*="pointer-events: none"]{
opacity:0.3 !important;
transform:none !important;
box-shadow:none !important;
}

/* STOCK TEXT */

.stock-status{
margin-top:6px;
transition:0.3s;
}

.stock-status.in{
opacity:0.6;
}

.stock-status.out{
opacity:0.3;
}

/* FADE IN ANIMATION */

.product-container{
animation:fadeLuxury 0.8s ease;
}

@keyframes fadeLuxury{
from{
opacity:0;
transform:translateY(25px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* MOBILE IMPROVEMENT */

@media(max-width:768px){

.product-container{
gap:35px;
}

.product-name{
font-size:16px;
}

.product-main-image{
height:420px;
}

.shade-options{
gap:6px;
}

}
/* COMBO BOX */

.combo-box{
width:260px;
position:relative;
}

/* BUTTON */

.combo-toggle{
width:100%;
padding:12px;
border:1px solid #000;
background:#fff;
font-family:Arial;
font-size:11px;
letter-spacing:3px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.combo-icon{
font-size:16px;
transition:0.25s;
}

.combo-box.active .combo-icon{
transform:rotate(45deg);
}

/* MENU */

.combo-menu{
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
border:1px solid #000;
border-top:none;
display:none;
z-index:10;
}

.combo-box.active .combo-menu{
display:block;
}

/* OPTIONS */

.combo-option{
width:100%;
padding:12px;
border:none;
border-top:1px solid #eee;
background:#fff;
text-align:left;
font-family:Arial;
font-size:11px;
letter-spacing:2px;
cursor:pointer;

/* الحل هنا */
color:#000;
}



.combo-option:hover{
background:#000;
color:#fff;
}

/* OUT OF STOCK */

.combo-option[data-stock="out"]{
opacity:0.4;
cursor:not-allowed;
}
/* FIX COMBO OPTIONS MOBILE */

@media (max-width:768px){

.combo-option{
color:#000 !important;
background:#fff !important;

appearance:none;
-webkit-appearance:none;

-webkit-tap-highlight-color: transparent;
}

.combo-option:focus,
.combo-option:active{
color:#000 !important;
background:#fff !important;
outline:none !important;
box-shadow:none !important;
}

}

/* REMOVE BLUE TEXT SELECTION (MOBILE FIX) */

.combo-option,
.combo-toggle,
.shade-btn,
.size-btn,
button{
-webkit-user-select: none;
user-select: none;
}

/* لو انحدد غصب */

::selection{
background: transparent;
color: inherit;
}

::-webkit-selection{
background: transparent;
color: inherit;
}
/* FINAL MOBILE BLUE FIX */

button,
.combo-toggle,
.combo-option,
.shade-btn,
.size-btn{
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
}

/* مهم جدًا */
button:focus,
button:active,
.combo-toggle:focus,
.combo-toggle:active,
.combo-option:focus,
.combo-option:active{
outline: none !important;
box-shadow: none !important;
}

/* iOS FIX قوي */
*{
-webkit-focus-ring-color: transparent !important;
}