/* 
  الخطوط المحلية 
*/
@font-face {
  font-family: 'GE Hili';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GE-Hili-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'GE Hili';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GE-Hili-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'GE SS Two';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GE-SS-Two-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'GE SS Two';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GE-SS-Two-Light.woff2') format('woff2'); /* Fallback ensuring it stays light */
}
@font-face {
  font-family: 'GE SS Two';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GE-SS-Two-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Cherston';
  src: local('Cherston Regular'), url('fonts/cherston-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* L'Occitane Fonts */
@font-face {
  font-family: 'LOccitaneSerif';
  src: url('fonts/LOccitaneSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LOccitaneSerif';
  src: url('fonts/LOccitaneSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'LOccitaneSans';
  src: url('fonts/LOccitaneSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LOccitaneSans';
  src: url('fonts/LOccitaneSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Seedra Brand Colors */
:root {
  --teal: #122321;       /* Deep Sidr */
  --teal-deep: #122321;  /* Deep Sidr */
  --gold: #BC9C59;       /* Harvest Gold */
  --gold-light: #d4b87a;
  --cream: #ffffff;      
  --sand: #FAF8F3;       /* Parchment */
  --muted: #666666;
  --line: rgba(18,35,33,.08);
  --bdr: 1px solid #ebebeb;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--teal);font-family:'LOccitaneSans','GE SS Two',sans-serif;font-weight:300;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}

/* Typography Hierarchy matched to Loccitane & Seedra Guidelines */
h1,h2,h3,h4,h5,h6, .sec-title, .hero-title, .fh-header h2 {font-family:'LOccitaneSerif','GE Hili',serif !important;font-weight:400;color:var(--teal)}
a{color:var(--teal);text-decoration:none;transition:color .3s; font-weight:300;}
a:hover{color:var(--gold)}
img{max-width:100%;display:block}

/* TOP BAR */
.bar{background:var(--sand);color:var(--teal);text-align:center;font-size:13px;padding:9px 16px;letter-spacing:0.5px;position:relative;z-index:200;border-bottom:1px solid #EBE7DD; font-weight:300;}

/* HEADER — L'Occitane replica */
.site-header{
  position:sticky;
  top:0;
  left:0;right:0;
  z-index:100;
  background:#ffffff;
  border-bottom:1px solid #EBE7DD;
  transition:box-shadow .4s;
}
.site-header.scrolled{
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.hdr-top { display:flex; align-items:center; justify-content:space-between; padding:18px 40px; }
.hdr-side { display:flex; align-items:center; gap:24px; flex:1; }
.hdr-side-right { justify-content:flex-start; }
.hdr-side-left { justify-content:flex-end; }
.hdr-logo { flex:0 0 auto; text-align:center; display:block; text-decoration:none !important; border:none !important; outline:none !important;}
.hdr-logo:hover, .hdr-logo:focus, .hdr-logo:active { text-decoration:none !important; border:none !important; outline:none !important; }
.hdr-logo::after { display:none !important; }

.logo-ar { font-family:'GE Hili','LOccitaneSerif',serif; font-size:36px; color:var(--teal); letter-spacing:0; line-height:1; font-weight:400; text-decoration:none !important; border:none !important;}
.logo-en { font-family:'LOccitaneSerif','Cherston',serif; font-size:32px; color:var(--teal); letter-spacing:3px; display:none; line-height:1; text-decoration:none !important; border:none !important;}

html[lang="en"] .logo-ar{display:none}
html[lang="en"] .logo-en{display:block}

.hdr-icon { display:flex; align-items:center; color:var(--teal); text-decoration:none !important; border:none !important;}
.hdr-icon svg { width:22px; height:22px; stroke:var(--teal); }
.hdr-icon:hover svg { stroke:var(--gold); }

.lang-btn { font-family:'LOccitaneSans','GE SS Two',sans-serif; font-size:14px; font-weight:300; color:var(--teal); border:none!important; padding:0!important; background:transparent!important; cursor:pointer; transition:color 0.3s; text-decoration:none;}
.lang-btn:hover { color:var(--gold)!important; }

/* Navigation Row Desktop */
.hdr-nav-row { border-top:1px solid #f2f2f2; padding:15px 0; }
.hdr-nav { display:flex; gap:45px; list-style:none; margin:0; padding:0; justify-content:center; }
.hdr-nav a { font-size:14px; font-weight:300; color:var(--teal); letter-spacing:0.5px; position:relative; padding-bottom:4px; font-family:'LOccitaneSans','GE SS Two',sans-serif; text-transform:uppercase; text-decoration:none !important; }
.hdr-nav a::after { content:''; position:absolute; bottom:0; right:0; width:0; height:1px; background:var(--teal); transition:width .35s; }
.hdr-nav a:hover { color:var(--teal); text-decoration:none !important; }
.hdr-nav a:hover::after { width:100%; }

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:101}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--teal);transition:all .35s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-drawer{position:fixed;inset:0;background:var(--cream);z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .35s}
.mobile-drawer.open{opacity:1;pointer-events:auto}
.mobile-drawer a{font-family:'GE Hili','LOccitaneSerif',serif;font-size:26px;color:var(--teal);transition:color .3s; text-decoration:none !important;}
.mobile-drawer a:hover{color:var(--gold)}

/* HERO SLIDER — L'Occitane replica */
.hero{position:relative;height:calc(100vh - 150px);min-height:500px;overflow:hidden;background:var(--sand)}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;visibility:hidden;opacity:1;pointer-events:none;z-index:1;}
.hero-slide.active{visibility:visible;pointer-events:auto;z-index:2;}

.hero-ph { 
  position:absolute; 
  inset: 0; 
  background-image: var(--bg-desk);
  background-position: var(--bg-pos-desk, center);
  background-size: var(--bg-size-desk, cover);
  background-repeat: no-repeat;
  will-change: transform; 
}
.hero-ph::before{display:none}
.hero-ph-label, .gift-ph-label { display: none !important; }

/* Subtle overlay instead of heavy gradient */
.hero-overlay{ position:absolute; inset:0; background:rgba(18,35,33,0.12); }

.hero-content{position:relative;z-index:3;max-width:560px}
html[dir="rtl"] .hero-content{margin-right:0;margin-left:auto}
html[dir="ltr"] .hero-content{margin-left:0;margin-right:auto}

.hero-title{ font-size:clamp(32px, 4vw, 46px); font-weight:400; line-height:1.2; letter-spacing:0; margin-bottom:15px; color:#ffffff; text-shadow:0 2px 10px rgba(0,0,0,0.1); }
.hero-sub{ font-size:16px; font-weight:300; color:rgba(255,255,255,.95); line-height:1.6; margin-bottom:30px; text-shadow:0 1px 4px rgba(0,0,0,0.1); max-width:400px; }

/* Solid Button CTA */
.hero-cta-link{ display:inline-block; background:#fff; color:var(--teal); padding:14px 35px; font-size:13px; font-weight:400; letter-spacing:0.5px; text-transform:uppercase; border:none; transition:background 0.3s, color 0.3s; text-decoration:none !important;}
.hero-cta-link:hover{ background:var(--teal); color:#fff; }
.hero-cta-link .arrow{ display:none; }

.hero-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px;align-items:center}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;border:none;padding:0; transition:background 0.3s;}
.hero-dot.active{background:#fff;}

.block{padding:100px 0}
.block-tight{padding:70px 0}

/* SECTION TITLES — L'Occitane elegance */
.sec-row{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:45px;text-align:center;}
.sec-title{font-size:32px !important; margin:0 0 10px 0; font-family:'LOccitaneSerif','GE Hili',serif; font-weight:400; color:var(--teal);}
.sec-link{font-size:13px;font-weight:300;text-decoration:none;text-transform:none;color:var(--muted); position:relative; font-family:'LOccitaneSans','GE SS Two',sans-serif}
.sec-link:hover{color:var(--teal); text-decoration:underline;}
.sec-link::after{display:none;}

.prod-card{display:block;text-align:center;will-change:transform,opacity;transition:transform .4s cubic-bezier(0.2,0.8,0.2,1); text-decoration:none !important;}
.prod-card:hover{transform:translateY(-6px);}
.prod-card-img{aspect-ratio:4/5;border-radius:0;overflow:hidden;margin-bottom:16px;background:#F9F9F6;position:relative;display:flex;align-items:center;justify-content:center}
.prod-card-img::before{display:none}

.prod-name{font-size:15px;margin-bottom:6px;transition:color .3s;font-family:'LOccitaneSans','GE SS Two',sans-serif;font-weight:300;color:var(--teal);}
.prod-card:hover .prod-name{color:var(--gold)}
.prod-price{font-family:'LOccitaneSans','GE SS Two',sans-serif;font-size:14px;color:var(--muted);font-weight:300;}

.add-to-cart-btn { position: absolute; bottom: 12px; left: 12px; width: 36px; height: 36px; background: #fff; color: var(--teal); border:1px solid #ebebeb; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(15px); transition: all .3s cubic-bezier(0.2,0.8,0.2,1); z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
html[dir="rtl"] .add-to-cart-btn { left: 12px; right: auto; }
.add-to-cart-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.prod-card:hover .add-to-cart-btn { opacity: 1; transform: translateY(0); }
.add-to-cart-btn:hover { background: var(--teal); color:#fff; transform: scale(1.1) !important; border-color:var(--teal); }

.cat-item{text-align:center;will-change:transform,opacity;display:block; text-decoration:none !important;}
.cat-circle{width:130px;height:130px;border-radius:50%;margin:0 auto 14px;overflow:hidden;background:#F9F9F6; border:1px solid #ebebeb; display:flex;align-items:center;justify-content:center;transition:transform .4s}
.cat-item:hover .cat-circle{transform:translateY(-4px); border-color:#d4d4d4;}
.cat-name{font-size:14px;color:var(--teal); font-weight:300;}

.occ-item{text-align:center;cursor:pointer}
.occ-circle{width:110px;height:110px;border-radius:50%;background:#F9F9F6; border:1px solid #ebebeb; margin:0 auto 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;position:relative;transition:all .4s;will-change:transform,opacity}
.occ-circle::before{content:'';position:absolute;inset:50% 50%;background:var(--gold);border-radius:50%;transition:inset .5s;z-index:0}
.occ-item:hover .occ-circle::before{inset:0}
.occ-item:hover .occ-circle{color:white; border-color:var(--gold);}
.occ-circle svg{position:relative;z-index:1;width:28px;height:28px;fill:currentColor;transition:fill .4s}
.occ-label{font-size:14px;color:var(--teal); font-weight:300;}

.gift-block{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden}
.gift-ph{position:absolute;inset:-20% 0;background:linear-gradient(160deg,#122321,#1f332f 60%,#122321);will-change:transform}
.gift-ph::before{display:none}
.gift-overlay{position:absolute;inset:0;background:rgba(18,35,33,0.3);z-index:1}
.gift-content{position:relative;z-index:2;color:white;max-width:480px; text-align:center; margin:0 auto;}
.gift-title{font-size:clamp(30px,4vw,42px);color:white;margin-bottom:12px;will-change:transform,opacity;font-family:'GE Hili','LOccitaneSerif',serif;font-weight:400}
.gift-sub{font-size:15px;color:rgba(255,255,255,.9);margin-bottom:32px; font-weight:300;}
.btn-gold { background: #fff; color: var(--teal); padding: 14px 35px; border-radius: 0; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 13px; font-weight:400; text-transform:uppercase; transition: all 0.3s; display:inline-block; text-decoration:none !important;}
.btn-gold:hover { background: var(--teal); color: #fff; }

.partners-section{padding:70px 0;overflow:hidden}
.partners-title{text-align:center;margin-bottom:44px}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 35s linear infinite;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{flex-shrink:0;padding:0 40px;display:flex;align-items:center;justify-content:center;height:60px}
.partner-logo{height:125px;width:auto;filter:grayscale(100%) opacity(0.4);transition:all .4s ease;cursor:pointer;border-radius:4px;}
.partner-logo:hover{filter:grayscale(0%) opacity(1);transform:scale(1.05);}

@keyframes marquee-scroll{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-50%,0,0)} }

/* NEWSLETTER SECTION — L'Occitane Match */
.newsletter-section { padding: 70px 0; background: var(--sand); border-top: 1px solid #EBE7DD; }
.newsletter-section h2 { font-size: 26px !important; margin-bottom: 10px; }
.newsletter-section p { font-size: 14px; margin: 0 auto 25px; color: var(--muted); max-width: 600px; line-height: 1.8; font-weight:300;}
.nl-form input { border: 1px solid #d4d4d4; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 13px; padding: 12px 16px; border-left: none; font-weight:300;}
html[dir="ltr"] .nl-form input { border-left: 1px solid #d4d4d4; border-right: none; }
.nl-form button { background: var(--teal); color: #fff; border: 1px solid var(--teal); padding: 0 30px; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s; font-weight:400; }
.nl-form button:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* FOOTER — L'Occitane Exact Replica */
.site-footer{background:var(--sand);color:var(--teal);padding:40px 0 30px;}
.site-footer h5{font-family:'LOccitaneSans','GE SS Two',sans-serif;letter-spacing:0;font-size:14px;text-transform:none;color:var(--teal);margin-bottom:25px;font-weight:400}
.site-footer a{color:var(--muted);font-size:14px;display:block;margin-bottom:12px;font-weight:300;transition:color 0.2s; text-decoration:none !important;}
.site-footer a:hover{color:var(--teal); text-decoration:underline !important;}

.footer-logo-center { text-align:center; border-top:1px solid #EBE7DD; padding-top:40px; margin-top:40px; }
.footer-logo-center .logo-ar { font-family:'GE Hili','LOccitaneSerif',serif; font-size:38px; color:var(--teal); letter-spacing:0; line-height:1; font-weight:400;}
.footer-logo-center .logo-en { font-family:'LOccitaneSerif','Cherston',serif; font-size:32px; color:var(--teal); letter-spacing:3px; display:none; line-height:1; text-transform:uppercase; font-weight:400;}
html[lang="en"] .footer-logo-center .logo-ar{display:none}
html[lang="en"] .footer-logo-center .logo-en{display:block}

.foot-bottom{margin-top:12px; font-size:12px; color:var(--muted); font-family:'LOccitaneSans','GE SS Two',sans-serif; font-weight:300;}

.foot-social{display:flex;gap:15px;margin-top:15px}
.foot-social a{width:auto;height:auto;border:none;border-radius:0;display:flex;align-items:center;justify-content:center;margin:0;transition:all .3s}
.foot-social a:hover{background:transparent; border:none; text-decoration:none !important;}
.foot-social svg{width:20px;height:20px;stroke:var(--teal);fill:none; transition:stroke 0.3s;}
.foot-social a:hover svg{stroke:var(--gold);}

/* Whatsapp Icon */
.wa-btn{position:fixed;bottom:30px;left:30px;width:60px;height:60px;background:#128C7E;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:150;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:transform .3s, background .3s}
.wa-btn:hover{transform:scale(1.08);background:#075E54;color:white}
.wa-btn svg{width:32px;height:32px;fill:white}

/* MOBILE OVERRIDES */
.dup-item { display: none !important; }

@media(max-width:991px){
  .hdr-nav-row{display:none !important;}
  .hamburger{display:flex}
  .hdr-top { padding: 15px 20px; }
  .hdr-side-right { flex: 1; justify-content: flex-start; }
  .hdr-side-left { flex: 1; justify-content: flex-end; }
  .hdr-logo { flex: 0 0 auto; }
}

@media(max-width:768px){
  .bar{font-size:11px; padding:8px 10px;}
  .block{padding:60px 0}.block-tight{padding:40px 0}
  .hero{height:75svh; min-height:unset; padding:0;}
  .hero-slide { position:absolute; inset: 0; align-items:flex-end; }
  .hero-content { text-align:start; margin:0; padding:0 26px 54px; max-width:100%;}
  .hero-title { font-size: 34px; line-height:1.15; }
  .hero-sub { font-size: 14px; margin:0 0 22px; max-width:90%; }
  .hero-cta-link { margin:0; padding: 13px 30px; }
  .hero-slide .container{ width:100%; max-width:100%; padding-left:0; padding-right:0; }
  .hero-overlay{ background:linear-gradient(to top, rgba(18,35,33,.62) 0%, rgba(18,35,33,.30) 36%, rgba(18,35,33,0) 66%); }
  html[dir="rtl"] .hero-content, html[dir="ltr"] .hero-content { margin:0; }
  .hero-ph { background-image: var(--bg-mob, var(--bg-desk)); background-position: var(--bg-pos-mob, center); background-size: var(--bg-size-mob, cover); }
  
  .sec-title { font-size: 26px !important; }
  
  .dup-item { display: block !important; }
  
  /* MOBILE SWIPEABLE CAROUSELS (No forced animation, native drag/swipe) */
  .mobile-marquee-wrap { 
    overflow-x: auto; 
    overflow-y: hidden; 
    margin: 0 -15px; 
    padding: 0 15px 15px 15px; /* bottom padding for shadow */
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
  }
  .mobile-marquee-wrap::-webkit-scrollbar { display: none; }
  .mobile-marquee-track { 
    display: flex; 
    flex-wrap: nowrap !important; 
    width: max-content; 
    gap: 16px; 
    animation: none !important; /* disabled css animation */
  }
  .mobile-marquee-track > .col, .mobile-marquee-track > a { 
    scroll-snap-align: start; 
    flex: 0 0 240px; 
    padding: 0; 
  }
  .cat-swipe > .col { flex: 0 0 130px; }
  .occ-swipe > .col { flex: 0 0 120px; }

  /* Mobile Fruit Honey Card styling */
  .fh-mobile-layout .mobile-marquee-track > a { flex: 0 0 240px; }
  .fh-mobile-layout .mobile-marquee-track .prod-card-img { 
    aspect-ratio: 4/5; 
    background: #F9F9F6; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border:1px solid #ebebeb; 
    position: relative;
    overflow: hidden;
  }
  /* Mobile Botanical halo - expanded so it doesn't hug */
  .mobile-botanical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
  }
  .fh-mobile-layout .mobile-marquee-track .prod-card-img img.honey-jar { 
    width: 78%; 
    height: 78%; 
    object-fit: contain; 
    position: relative; 
    inset: auto; 
    margin: auto; 
    z-index: 2;
  }

  .cat-circle{width:100px;height:100px}
  .occ-circle{width:90px;height:90px}
  .gift-block{min-height:auto;padding:80px 0}
  .gift-title{font-size:28px;}
  .newsletter-section { padding: 50px 0; }
  .site-footer{padding:40px 0 30px;text-align:center}
  .foot-social{justify-content:center}
}

@media(max-width:480px){
  .hero-title{font-size:28px;}
  .wa-btn { bottom:20px; left:20px; width:50px; height:50px; }
  .wa-btn svg { width:26px; height:26px; }
}

   Bottle Showcase
.sc-wrap { position: relative; }
.sc-pin { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.sc-lay { display: flex; width: 100%; height: 100%; }

.sc-left { position: relative; width: 50%; height: 100%; overflow: hidden; flex-shrink: 0;
  background:linear-gradient(165deg,#F9F5ED 0%,#F0E8D8 45%,#E3D5BC 78%,#D2C09C 100%);
  transition:background 1.1s cubic-bezier(0.4,0,0.2,1);
}
/* Samar — warm amber-honey */
.sc-left.bg-samar { background:linear-gradient(165deg,#F6F1E8 0%,#EBE1D0 45%,#D9CBB0 78%,#C6B48E 100%); }
/* Sidr — deep golden brown */
.sc-left.bg-sidr  { background:linear-gradient(165deg,#F9F5ED 0%,#F0E8D8 45%,#E3D5BC 78%,#D2C09C 100%); }
/* Zuhoor — soft sage-green */
.sc-left.bg-zuhoor{ background:linear-gradient(165deg,#F2F6EA 0%,#E2EBD2 45%,#D2E0BE 78%,#C2D6AC 100%); }
.sc-left .cb { display:none !important; }
.sc-left .cb-t { top: 0; right: 0; width: 100%; height: 55%; z-index: 1; }
.sc-left .cb-bl { bottom: 0; right: 0; width: 45%; height: 45%; z-index: 2; }
.sc-left .cb-br { bottom: 0; left: 0; width: 55%; height: 45%; z-index: 2; }
.sc-left .cb-base { position: absolute; inset: 0; }
.sc-left .cb-wipe { position: absolute; inset: 0; will-change: clip-path; }

.sc-left .sc-spotlight{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 60% at 50% 46%,
      rgba(255,245,225,.55) 0%,
      rgba(255,235,210,.25) 40%,
      rgba(255,255,255,0) 74%);
}

/* Pushed stage padding to move bottle lower from top */
.sc-left .stage { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding-top: 6vh; }
.sc-left .jar { position: absolute; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }

/* Constrain max height to avoid clipping */
.sc-left .jar-img { width: 520px; height: auto; max-height: 75vh; object-fit: contain; pointer-events: none; filter: drop-shadow(0 40px 30px rgba(0, 0, 0, 0.2)) drop-shadow(0 15px 15px rgba(0, 0, 0, 0.15)); will-change: transform, opacity; }

.sc-left .bottle-rotate {
  width: 520px;
  max-height: 75vh;
  aspect-ratio: 400 / 516;
  cursor: grab;
  filter: drop-shadow(0 40px 30px rgba(0,0,0,0.2)) drop-shadow(0 15px 15px rgba(0,0,0,0.15));
  will-change: transform, opacity;
  background-blend-mode: normal, normal;
}
.sc-left .bottle-rotate:active { cursor: grabbing; }
.sc-left .jar-shd { width: 260px; height: 20px; margin-top: 20px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 30%, transparent 70%); border-radius: 50%; filter: blur(5px); opacity: 0.8; will-change: transform, opacity; }

.sc-right { position: relative; width: 50%; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 5;
  background: linear-gradient(175deg, #FBF6EE 0%, #F5EBDA 55%, #ECD9C0 100%);
  transition: background 1.1s cubic-bezier(0.4,0,0.2,1);
}
/* Right panel tints — subtler than left, same family */
.sc-right.bg-samar { background: linear-gradient(175deg, #FBF4E8 0%, #F4E6C8 55%, #E8D0A0 100%); }
.sc-right.bg-sidr  { background: linear-gradient(175deg, #FBF6EE 0%, #F5EBDA 55%, #ECD9C0 100%); }
.sc-right.bg-zuhoor{ background: linear-gradient(175deg, #F4F7EE 0%, #E6EDD8 55%, #D2E0BC 100%); }
.sc-right .sc-frame { width: 100%; max-width: 520px; padding: 36px 48px; }

/* Sidr Branch — anchored to bottom-left of the left panel */
.sc-branch {
  position: absolute;
  bottom: -40px;
  left: -45px;
  width: 300px;
  height: 400px;
  z-index: 3;
  pointer-events: none;
  opacity: .4;
}
.sc-branch svg {
  width: 100%;
  height: 100%;
}

.sc-roll { overflow: hidden; position: relative; }
.sc-track { display: flex; flex-direction: column; will-change: transform; }
.sc-track-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.sc-right .f-type { text-align: center; margin-bottom: 18px; }
.sc-right .f-type-txt { display: inline-block; border: 1px solid #EFE8DA; padding: 6px 24px; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 12px; letter-spacing: 2px; color: var(--teal); font-weight:300;}

.sc-right .f-name { border:none; border-bottom:1px solid #EFE8DA; margin-bottom: 0; text-align: center; padding: 6px 16px 22px; }
.sc-right .f-name .sc-roll { overflow: hidden; position: relative; }
.sc-right .nm { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.3; white-space: nowrap; color: var(--teal); font-weight: 400; font-family: 'GE Hili', 'LOccitaneSerif', serif; }

.sc-right .f-card { border:none; margin-bottom: 0; }
.sc-right .f-card-inner { display: flex; align-items: stretch; }
.sc-right .f-desc-col { flex: 1.1; padding: 22px 24px; border-left: 1px solid #EFE8DA; display: flex; align-items: center; }
.sc-right .desc-txt { font-size: 13px; line-height: 1.7; color: var(--muted); text-align: justify; margin: 0; font-weight:300;}
.sc-right .f-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.sc-right .f-cell { padding: 18px 8px; text-align: center; border-left: 1px solid #EFE8DA; display: flex; flex-direction: column; }
.sc-right .f-cell:first-child { border-left: none; }
.sc-right .f-cell h4 { font-family: 'GE Hili', 'LOccitaneSerif', serif; font-size: 15px; color: var(--teal); margin-bottom: 8px; font-weight: 400; }
.sc-right .cell-txt { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 0; text-align: center; font-weight:300;}

.sc-right .f-wt { display: block; text-align:center; border:none; padding: 16px 0 2px; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 12px; color: var(--muted); letter-spacing: 2px; margin-bottom: 16px; font-weight:300;}

.sc-right .f-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 6px; }
.sc-right .pr-txt { font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: clamp(26px, 3vw, 30px); font-weight: 300; color: var(--teal); letter-spacing: 0; }
.sc-right .f-buy { padding: 13px 38px; background: var(--teal); color: #fff; font-family: 'GE SS Two', 'LOccitaneSans', sans-serif; font-size: 13px; letter-spacing: 0.5px; border: none; border-radius: 0; cursor: pointer; transition: background .3s; font-weight:400;}
.sc-right .f-buy:hover { background: var(--gold); }

.sc-dots { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.sc-dots.vis { opacity: 1; pointer-events: auto; }
.sc-dt { width: 10px; height: 10px; border: 1.5px solid var(--teal); background: none; border-radius: 50%; padding: 0; cursor: pointer; transition: all .3s; }
.sc-dt.on { background: var(--teal); transform: scale(1.1); }

.sc-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 10px; color: rgba(18,35,33,.3); letter-spacing: 2px; text-transform:uppercase; font-weight:300;}

@media(max-width: 991px){
  .sc-lay { flex-direction: column; }
  .sc-left { width: 100%; height: 40%; }
  .sc-right { width: 100%; height: 60%; }
  .sc-left .jar-img { width: 720px; max-height: 450px; }
  .sc-left .bottle-rotate { width: 720px; max-height: 450px; }
  .sc-left .jar-shd { width: 160px; height: 15px; margin-top: 15px; }
  .sc-right .sc-frame { padding: 18px 24px; }
  .sc-right .nm { font-size: 26px; }
  .sc-right .f-name { padding: 16px 20px; }
  .sc-right .f-name .sc-roll { padding: 0; }
  .sc-right .f-card-inner { flex-direction: column; }
  .sc-right .f-desc-col { border-left: none; border-bottom: var(--bdr); padding: 14px 16px; }
  .sc-right .desc-txt { font-size: 13px; }
  .sc-right .f-foot { flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
  .sc-right .f-foot .f-price { text-align: center; }
  .sc-right .f-buy { width: 100%; }
  .sc-dots { left: 10px; gap: 8px; }
  .sc-dt { width: 8px; height: 8px; }
}

@media(max-width: 480px){
  .sc-left .stage { padding-top: 10vh; }
  .sc-right .sc-frame { padding: 12px 16px; }
  .sc-right .nm { font-size: 24px; }
  .sc-right .f-name { padding: 12px 14px; }
  .sc-right .f-cell { padding: 10px 5px; }
  .sc-right .f-cell h4 { font-size: 13px; margin-bottom: 5px; }
  .sc-right .cell-txt { font-size: 11px; }
  .sc-right .f-type-txt { font-size: 11px; padding: 4px 14px; }
  .sc-right .f-wt { font-size: 11px; padding: 5px 14px; margin-bottom: 14px; }
  .sc-right .pr-txt { font-size: 22px; }
}

.prod-card-img img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1;transition:transform .6s ease; }
.prod-card:hover .prod-card-img img { transform:scale(1.03); }
.cat-circle img { width:100%;height:100%;object-fit:cover;transition:transform .6s ease; }
.cat-item:hover .cat-circle img { transform:scale(1.08); }
.gift-ph img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }

   Fruit Honey Section
.fh-section { position: relative; background: var(--cream); overflow: hidden; }

/* Increased padding-top to prevent clipping under sticky header */
.fh-pin { height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; position: relative; overflow: hidden; padding-top: 168px; }

/* Header sits in normal flow at top of the centered column */
.fh-header { position: relative; top: auto; left: auto; transform: none; text-align: center; z-index: 10; width: 100%; }
.fh-header h2 { font-family: 'GE Hili', 'LOccitaneSerif', serif; font-size: 32px; font-weight: 400; color: var(--teal); margin-bottom: 5px; line-height: 1.2; }
.fh-header h2 span { color: var(--gold); }
.fh-header p { font-size: 15px; color: var(--muted); font-weight: 300; font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; letter-spacing: 0.5px;}

.fh-grid-desktop { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-end !important; gap: 2%; width: 95%; max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; direction: ltr; }

.fh-item-desk { width: 23% !important; flex: 0 0 23% !important; display: flex; flex-direction: column; align-items: center; position: relative; }

.fh-card-desk { width: 100%; height: 280px; position: relative; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 0px; overflow: visible; }

/* Soft radial glow behind each jar */
.fh-bg-desk { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 82%; height: 62%; border-radius: 50%; z-index: 1; transform-origin: center; will-change: transform, opacity; filter: blur(22px); opacity: 0; }
.bg-red    { background: radial-gradient(ellipse at center, rgba(214,120,100,.38) 0%, rgba(214,120,100,.10) 50%, rgba(214,120,100,0) 72%); }
.bg-blue   { background: radial-gradient(ellipse at center, rgba(120,150,175,.38) 0%, rgba(120,150,175,.10) 50%, rgba(120,150,175,0) 72%); }
.bg-yellow { background: radial-gradient(ellipse at center, rgba(205,170,90,.40) 0%, rgba(205,170,90,.10) 50%, rgba(205,170,90,0) 72%); }
.bg-green  { background: radial-gradient(ellipse at center, rgba(150,170,120,.38) 0%, rgba(150,170,120,.10) 50%, rgba(150,170,120,0) 72%); }

/* Faint botanical sketch behind jar */
.fh-botanical { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); width: 75%; max-width: 220px; z-index: 1; opacity: .28; pointer-events: none; }
.fh-botanical img { width: 100%; height: auto; display: block; }

/* Jars */
.fh-img-desk { position: relative; z-index: 2; width: 115%; max-width: 290px; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(80,50,30,0.15)); will-change: transform; transform-origin: bottom center; }

/* Add button */
.desk-add-cart-btn { width: 32px; height: 32px; background: transparent; color: var(--teal); border: 1px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s; will-change: transform, opacity; opacity: 0; flex-shrink: 0; }
.desk-add-cart-btn:hover { background: var(--teal); color: #fff; transform: scale(1.1); border-color:var(--teal); }
.desk-add-cart-btn svg { width: 14px; height: 14px; stroke: currentColor; }

.fh-info-desk { margin-top: 18px; text-align: center; direction: rtl; width: 100%; will-change: transform, opacity; }
.fh-info-desk .prod-name { font-family: 'GE Hili', 'LOccitaneSerif', serif; font-size: 24px; font-weight: 400; color: var(--teal); margin-bottom: 4px; }
.fh-price-row { display: flex; align-items: center; justify-content: center; gap: 14px; direction: ltr; }
.fh-info-desk .prod-price { font-family: 'LOccitaneSans', 'GE SS Two', sans-serif; font-size: 15px; color: var(--muted); margin: 0; font-weight:300;}

.fh-view-all { position: relative; bottom: auto; left: auto; transform: none; z-index: 10; opacity: 0; margin-top: 1vh; will-change: transform, opacity; display: flex; justify-content: center; width: 100%; text-align: center;}
.fh-view-all a { display: inline-block; padding: 12px 35px; border: 1px solid var(--teal); color: var(--teal); font-family: 'GE SS Two', 'LOccitaneSans', sans-serif; font-size: 13px; font-weight:400; text-transform: uppercase; border-radius: 0; transition: all 0.3s; background: transparent; text-decoration:none !important;}
.fh-view-all a:hover { background: var(--teal); color: #fff; }

.sugar-free-stamp { display: none; }

.fh-desktop-layout { display: block; }
.fh-mobile-layout { display: none; }

@media(max-width: 991px) {
  .fh-desktop-layout { display: none !important; }
  .fh-mobile-layout { display: block !important; }
  .fh-mobile-layout.block-tight { padding-bottom: 60px; padding-top: 60px; }
}