/* =====================================================================
   GRAPE TREE - THEME (v2 design)
   Loaded LAST on every page. To change colours, edit the values in
   section 1 only. Everything else on the site follows them.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. COLOURS  (main site = Warm Luxury: chocolate, ivory, gold)
   --------------------------------------------------------------- */
:root{
    --ink:        #2A1810;     /* chocolate: headings, dark bands   */
    --ink-rgb:    42,24,16;
    --ink-soft:   #5B4A3F;     /* body text                         */
    --cream:      #FBF7F0;     /* page background                   */
    --cream-2:    #F3EBDD;     /* alternate section background      */
    --paper:      #FFFFFF;     /* cards                             */
    --gold:       #B88A44;     /* accent                            */
    --gold-rgb:   184,138,68;
    --gold-light: #E3CFA3;
    --gt-gold-dark:#8A6528;    /* gold used for small text          */
    --gt-muted:   #7A6A5E;
    --line:       rgba(var(--ink-rgb),.12);

    --serif: 'Cormorant Garamond','Playfair Display',Georgia,serif;
    --serif-2: 'Playfair Display',Georgia,serif;
    --sans: 'Inter',system-ui,sans-serif;

    --radius: 18px;
    --shadow: 0 18px 50px rgba(var(--ink-rgb),.10);
    --shadow-sm: 0 8px 24px rgba(var(--ink-rgb),.08);
    --pad-x: clamp(20px, 6vw, 96px);
    --section-y: clamp(72px, 10vw, 140px);
}

/* Katanukiya pages: soft blush and rose */
body.theme-kat{
    --ink:#3B2429; --ink-rgb:59,36,41; --ink-soft:#6E555A;
    --cream:#FFF7F5; --cream-2:#FCE9E6;
    --gold:#C97F86; --gold-rgb:201,127,134; --gold-light:#F2C9CB;
    --gt-gold-dark:#A5535C;
}
/* GildArt pages: black and rich gold */
body.theme-gild{
    --ink:#15110B; --ink-rgb:21,17,11; --ink-soft:#4F463A;
    --cream:#F7F2E7; --cream-2:#ECE2C9;
    --gold:#B8902A; --gold-rgb:184,144,42; --gold-light:#E6D08E;
    --gt-gold-dark:#8A6A14;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
html{ scroll-padding-top:84px; }
body{
    background:var(--cream);
    color:var(--ink-soft);
    padding-top:76px;
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
}
*{ font-family:var(--sans); }
h1,h2,h3,.hero h1,.item h3,.stat-box h2{ font-family:var(--serif) !important; color:var(--ink); letter-spacing:-.01em; font-weight:600; }
h1,.hero h1{ font-size:clamp(46px,7vw,92px); line-height:1.04; }
h2{ font-size:clamp(34px,4.6vw,60px); line-height:1.1; }
h3{ font-size:clamp(22px,2.2vw,30px); }
p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,17.5px); line-height:1.75; }
section{ padding-inline:var(--pad-x); }

.small-title{
    font-family:var(--sans) !important;
    font-size:12px !important;
    font-weight:600;
    letter-spacing:.28em !important;
    text-transform:uppercase;
    color:var(--gt-gold-dark) !important;
    margin-bottom:18px !important;
    display:inline-flex; align-items:center; gap:14px;
}
.small-title::before, .small-title::after{ content:""; width:28px; height:1px; background:var(--gold); opacity:.7; }
section[class*="cta"] .small-title::after{ display:none; }

/* ---------------------------------------------------------------
   3. HEADER
   --------------------------------------------------------------- */
header{
    padding:12px var(--pad-x) !important;
    background:rgba(251,247,240,.86) !important;
    -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
    box-shadow:none !important;
    border-bottom:1px solid var(--line);
}
.logo img{ height:46px !important; }
nav{ gap:clamp(18px,2.4vw,38px) !important; }
nav a{
    font-family:var(--sans) !important;
    font-size:13px !important;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink) !important;
}
nav a:hover{ color:var(--gt-gold-dark) !important; }
nav a::after{ bottom:-8px !important; height:1px !important; }
.header-btn{
    padding:11px 24px !important;
    border-radius:999px !important;
    background:var(--ink) !important;
    color:var(--cream) !important;
    font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.header-btn:hover{ background:var(--gold) !important; color:#fff !important; transform:none !important; box-shadow:var(--shadow-sm) !important; }
.cart-btn{ color:var(--ink) !important; }
.cart-count{ background:var(--gold) !important; color:#fff !important; }

/* GildArt header goes dark */
body.theme-gild header{ background:rgba(21,17,11,.9) !important; border-bottom-color:rgba(255,255,255,.1); }
body.theme-gild nav a, body.theme-gild .cart-btn, body.theme-gild .menu-toggle{ color:#F7F2E7 !important; }
body.theme-gild .header-btn{ background:var(--gold) !important; color:#15110B !important; }
body.theme-gild .logo img{ filter:brightness(0) invert(1); }

/* ---------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------- */
.hero-btn, .contact-btn, .brand-btn, .gt-btn, .submit-btn, .instagram-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:15px 34px !important;
    border-radius:999px !important;
    background:var(--gold) !important;
    color:#fff !important;
    border:1px solid var(--gold) !important;
    font-size:12.5px !important; font-weight:600 !important;
    letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
    transition:background .35s, color .35s, transform .35s, box-shadow .35s, border-color .35s;
}
.hero-btn:hover, .contact-btn:hover, .brand-btn:hover, .gt-btn:hover, .submit-btn:hover, .instagram-btn:hover{
    background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;
    transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.gt-btn-outline, .hero-ghost{
    background:transparent !important; color:var(--ink) !important; border:1px solid rgba(var(--ink-rgb),.35) !important;
}
.gt-btn-outline:hover, .hero-ghost:hover{ background:var(--ink) !important; color:#fff !important; }
.hero .gt-btn-outline, .hero .hero-ghost, .contact-hero .gt-btn-outline{ color:#fff !important; border-color:rgba(255,255,255,.6) !important; }
.hero .gt-btn-outline:hover{ background:#fff !important; color:var(--ink) !important; }
.brand-btn{ background:transparent !important; color:var(--ink) !important; border-color:rgba(var(--ink-rgb),.3) !important; }

/* ---------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------- */
.hero{
    min-height:calc(100vh - 76px) !important;
    padding:60px var(--pad-x) 90px !important;
    align-items:flex-end !important;
    position:relative;
}
.hero::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--ink-rgb),.15) 0%, rgba(var(--ink-rgb),.25) 45%, rgba(var(--ink-rgb),.78) 100%);
}
.hero .overlay{ position:relative; z-index:2; max-width:760px; }
.hero h1, .hero .overlay h1{ color:#fff !important; text-shadow:0 2px 30px rgba(0,0,0,.25); margin-bottom:22px; }
.hero p{ color:rgba(255,255,255,.92) !important; font-size:clamp(16px,1.6vw,20px) !important; max-width:540px; }
.hero .small-title{ color:var(--gold-light) !important; }
.hero .small-title::before,.hero .small-title::after{ background:var(--gold-light); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------------------------------------
   6. SECTIONS
   --------------------------------------------------------------- */
.story,.brands,.why-us,.gallery,.follow-brands,.contact,.product-showcase,.why-gildart,.production-videos{
    padding-block:var(--section-y) !important;
    text-align:center;
}
.story h2,.brands h2,.why-us h2,.gallery h2,.follow-brands h2,.contact h2,.product-showcase h2,.why-gildart h2{
    max-width:880px; margin-inline:auto; margin-bottom:clamp(36px,5vw,64px);
}
.story{ background:var(--cream); }
.brands{ background:var(--cream-2); }
.why-us{ background:var(--cream); }
.gallery{ background:var(--cream-2); }

/* Story */
.timeline{ display:flex !important; justify-content:center; gap:clamp(24px,6vw,90px); margin-bottom:clamp(36px,5vw,60px) !important; flex-wrap:wrap; }
.item{ background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; min-width:180px; }
.item:hover{ transform:none !important; }
.item h3{ font-size:clamp(54px,7vw,92px) !important; color:var(--gold) !important; line-height:1; margin-bottom:6px; font-weight:500; }
.item p{ font-size:13px !important; letter-spacing:.14em; text-transform:uppercase; margin:0; }
.story-images{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; max-width:1100px; margin-inline:auto; text-align:left; }
.story-text-card{ background:var(--paper) !important; border-radius:var(--radius) !important; border:1px solid var(--line); box-shadow:none !important; padding:clamp(28px,3vw,44px) !important; }
.story-text-card h3{ font-size:clamp(24px,2.4vw,32px) !important; text-align:left !important; margin-bottom:16px; }
.story-text-card p{ text-align:left !important; font-family:var(--sans) !important; font-size:15.5px !important; margin:0; }

/* Brands */
.brand-container{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,3vw,40px); max-width:1100px; margin-inline:auto; }
.brand-card{ background:var(--paper) !important; border-radius:var(--radius) !important; overflow:hidden; box-shadow:var(--shadow-sm) !important; display:flex !important; flex-direction:column; width:auto !important; max-width:none !important; margin:0 !important; border:1px solid var(--line); transform:none; }
.brand-card > img{ width:100% !important; height:clamp(280px,32vw,420px) !important; object-fit:cover !important; border-radius:0 !important; }
.brand-text{ padding:30px 28px 36px !important; display:flex; flex-direction:column; align-items:center; gap:14px; flex:1; }
.brand-text p{ margin:0 !important; font-family:var(--sans) !important; font-size:15.5px !important; }
.brand-logo img{ height:54px !important; width:auto; margin-inline:auto; }

/* Why */
.why-container,.why-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; max-width:1200px; margin-inline:auto; }
.why-card,.why-box{ background:var(--paper) !important; border:1px solid var(--line); border-radius:var(--radius) !important; box-shadow:none !important; padding:34px 28px !important; text-align:center; width:auto !important; max-width:none !important; margin:0 !important; }
.why-card h3,.why-box h3{ font-size:26px !important; margin-bottom:10px; }
.why-card p,.why-box p{ margin:0; font-size:15px !important; }

/* Stats band */
.stats{ background:var(--ink) !important; padding:clamp(48px,6vw,84px) var(--pad-x) !important; display:flex !important; justify-content:center; gap:clamp(30px,8vw,120px); flex-wrap:wrap; }
.stat-box{ background:transparent !important; box-shadow:none !important; text-align:center; }
.stat-box h2{ color:var(--gold-light) !important; font-size:clamp(48px,6vw,80px) !important; margin:0; }
.stat-box p{ color:rgba(255,255,255,.75) !important; font-size:12px !important; letter-spacing:.2em; text-transform:uppercase; margin:6px 0 0; }

/* Gallery */
.gallery-container{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; max-width:1200px; margin-inline:auto; }
.gallery-card{ border-radius:var(--radius) !important; overflow:hidden; box-shadow:none !important; aspect-ratio:4/5; }
.gallery-card img, .gallery-container img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:0 !important; }

/* Follow / QR */
.follow-brands{ background:var(--cream); }
.qr-container{ display:flex !important; justify-content:center; gap:28px; flex-wrap:wrap; }
.qr-card{ background:var(--paper) !important; border:1px solid var(--line); border-radius:var(--radius) !important; box-shadow:none !important; padding:28px !important; max-width:300px; }
.qr-card h3{ font-size:24px !important; }
.qr-card p{ font-size:14px !important; margin:0; }

/* Contact band */
.contact{ background:var(--ink) !important; color:#fff; }
.contact h2{ color:#fff !important; }
.contact p, .contact-text{ color:rgba(255,255,255,.78) !important; max-width:620px; margin-inline:auto; }
.contact .small-title{ color:var(--gold-light) !important; }
.contact .small-title::before,.contact .small-title::after{ background:var(--gold-light); }
.contact-btn{ margin-top:12px; }
.contact-btn:hover{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important; }

/* Showcase (brand pages) */
.showcase-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:1200px; margin-inline:auto; }
.showcase-card{ background:var(--paper) !important; border-radius:var(--radius) !important; border:1px solid var(--line); box-shadow:none !important; overflow:hidden; }
.showcase-card img{ width:100% !important; height:340px !important; object-fit:cover !important; border-radius:0 !important; }
.showcase-card h3{ font-size:26px !important; padding:22px 24px 4px; }
.showcase-card p{ padding:0 24px 26px; margin:0; font-size:15px !important; }
.video-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; max-width:1200px; margin-inline:auto; }
.video-card{ border-radius:var(--radius) !important; overflow:hidden; }

/* CTA band (shop/custom) */
.custom-cta.light{ background:var(--cream) !important; }
.custom-cta h2{ text-align:left; margin-bottom:18px; }
.custom-cta.light h2{ color:var(--ink); }
.cta-img{ border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; }

/* ---------------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------------- */
footer{ background:#1D110B !important; color:rgba(255,255,255,.7) !important; padding:clamp(48px,6vw,80px) var(--pad-x) 28px !important; }
footer p, footer a{ color:rgba(255,255,255,.7) !important; }
.footer-links a:hover{ color:var(--gold-light) !important; }
.copyright{ border-top:1px solid rgba(255,255,255,.12) !important; color:rgba(255,255,255,.5) !important; }

/* Forms */
.contact-form-section{ background:var(--cream) !important; }
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{ border-radius:12px !important; border:1px solid var(--line) !important; background:var(--paper) !important; color:var(--ink); }
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(var(--gold-rgb),.2) !important; outline:none; }

/* Mobile */
@media (max-width:980px){
    header{ padding:10px 20px !important; }
    .hero{ align-items:center !important; padding-bottom:70px !important; }
    .story-images{ grid-template-columns:1fr; }
    .small-title::before,.small-title::after{ width:16px; }
}

/* ---------------------------------------------------------------
   8. FINE-TUNING
   --------------------------------------------------------------- */
.why-card h3,.why-box h3,.story-text-card h3,.qr-card h3,.showcase-card h3,.brand-text h3{ color:var(--ink) !important; }
.contact h2{ margin-bottom:22px !important; }
.contact-text{ margin-bottom:28px !important; }
.footer-container{ display:grid !important; grid-template-columns:1.2fr 1fr 1fr; gap:40px; align-items:start; max-width:1200px; margin-inline:auto; }
.footer-links{ display:flex !important; flex-direction:column; gap:10px; }
.footer-info p{ margin:0 0 8px; font-size:14.5px !important; }
.footer-logo img{ height:54px; width:auto; }
@media (max-width:760px){ .footer-container{ grid-template-columns:1fr; text-align:left; } }

/* ---------------------------------------------------------------
   9. LANGUAGE SWITCHER
   --------------------------------------------------------------- */
.lang-switch{ position:relative; margin-inline-start:12px; }
.lang-btn{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    background:transparent; border:1px solid var(--line); color:var(--ink);
    border-radius:999px; padding:8px 13px; font:600 12px/1 var(--sans); letter-spacing:.12em;
    transition:border-color .3s, background .3s;
}
.lang-btn svg{ width:17px; height:17px; }
.lang-btn:hover,.lang-switch.open .lang-btn{ border-color:var(--gold); background:rgba(var(--gold-rgb),.1); }
.lang-menu{
    position:absolute; top:calc(100% + 10px); inset-inline-end:0; min-width:150px;
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:6px;
    box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .25s, transform .25s, visibility 0s .25s; z-index:1100;
}
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.lang-menu button{
    display:block; width:100%; text-align:start; cursor:pointer; background:transparent; border:0;
    padding:10px 14px; border-radius:10px; font:500 15px/1.2 var(--sans); color:var(--ink);
}
.lang-menu button:hover{ background:var(--cream-2); }
.lang-menu button[aria-current="true"]{ color:var(--gt-gold-dark); font-weight:700; }
body.theme-gild .lang-btn{ color:#F7F2E7; border-color:rgba(255,255,255,.25); }
@media (max-width:980px){ .lang-switch{ margin-inline-start:auto; } header .cart-btn{ margin-left:8px !important; } }

/* ---------------------------------------------------------------
   10. RIGHT-TO-LEFT (Arabic, and any other RTL language later)
   --------------------------------------------------------------- */
html[dir="rtl"]{ --ar-sans:'Cairo','Segoe UI',Tahoma,sans-serif; --ar-serif:'Noto Naskh Arabic','Cairo','Traditional Arabic',serif; }
html[dir="rtl"] *{ font-family:var(--ar-sans) !important; letter-spacing:0 !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .hero h1, html[dir="rtl"] .item h3, html[dir="rtl"] .stat-box h2{
    font-family:var(--ar-serif) !important; font-weight:700; line-height:1.35; }
html[dir="rtl"] .hero h1{ line-height:1.25; }
html[dir="rtl"] .small-title, html[dir="rtl"] nav a, html[dir="rtl"] .gt-btn, html[dir="rtl"] .hero-btn,
html[dir="rtl"] .contact-btn, html[dir="rtl"] .brand-btn, html[dir="rtl"] .header-btn, html[dir="rtl"] .submit-btn, html[dir="rtl"] .item p, html[dir="rtl"] .stat-box p{ text-transform:none !important; }
html[dir="rtl"] nav a{ font-size:15px !important; }
html[dir="rtl"] .small-title{ font-size:14px !important; }
html[dir="rtl"] .gt-btn, html[dir="rtl"] .hero-btn, html[dir="rtl"] .contact-btn, html[dir="rtl"] .brand-btn, html[dir="rtl"] .submit-btn{ font-size:15px !important; }
html[dir="rtl"] .story-images, html[dir="rtl"] .story-text-card, html[dir="rtl"] .story-text-card h3, html[dir="rtl"] .story-text-card p, html[dir="rtl"] .custom-cta h2{ text-align:right !important; }
html[dir="rtl"] .cart-count{ right:auto !important; left:-1px; }
html[dir="rtl"] .cart-btn{ margin-left:0 !important; margin-right:14px; }
html[dir="rtl"] .whatsapp-float{ right:auto !important; left:25px; }
html[dir="rtl"] .gt-drawer{ right:auto !important; left:0; transform:translateX(-100%); box-shadow:20px 0 60px rgba(0,0,0,.18); }
html[dir="rtl"] .gt-drawer.open{ transform:none; }
html[dir="rtl"] .pc-badge{ left:auto !important; right:14px; }
html[dir="rtl"] .gt-modal-x{ right:auto !important; left:14px; }
html[dir="rtl"] .gt-toast{ direction:rtl; }
html[dir="rtl"] .gt-progress{ transform-origin:right; right:0; left:auto; }
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="date"]{ direction:ltr; text-align:right; }
html[dir="rtl"] .hero .overlay{ text-align:right; }
html[dir="rtl"] .hero-actions{ justify-content:flex-start; }
html[dir="rtl"] .gt-line{ unicode-bidi:plaintext; }

/* honeypot fields must never create scrolling, in any direction */
.hp-field,.co-hp{ position:absolute !important; left:auto !important; right:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; opacity:0 !important; pointer-events:none; }

/* timeline items: big numbers only for years / short words */
.item h3{ font-size:clamp(28px,3.4vw,46px) !important; overflow-wrap:anywhere; }
.item h3.year, .stats .item h3{ font-size:clamp(54px,7vw,92px) !important; }

/* ---------------------------------------------------------------
   11. HOME HERO: TWO BRANDS (slider)
   --------------------------------------------------------------- */
.duo-hero{ position:relative; padding:0 !important; height:calc(100vh - 76px); height:calc(100svh - 76px); min-height:560px; max-height:980px; overflow:hidden; background:#1d120c; color:#fff; isolation:isolate; }
.duo-slides,.duo-slide{ position:absolute; inset:0; }
.duo-slide{ opacity:0; visibility:hidden; transition:opacity 1.1s ease, visibility 0s 1.1s; }
.duo-slide.is-active{ opacity:1; visibility:visible; transition-delay:0s; z-index:1; }

/* images */
.duo-bg,.duo-panel{ position:absolute; background:var(--img) center/cover no-repeat; transform:scale(1.08); transition:transform 9s cubic-bezier(.2,.6,.2,1); }
.duo-bg{ inset:0; }
.duo-slide.is-active .duo-bg,.duo-slide.is-active .duo-panel{ transform:scale(1); }
.duo-split{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:3px; background:#1d120c; }
.duo-panel{ position:relative; display:block; overflow:hidden; text-decoration:none; color:#fff; }
.duo-panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),.35)); transition:background .5s; }
.duo-panel:hover::after{ background:linear-gradient(180deg,rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.15)); }
.duo-cap{ position:absolute; z-index:2; top:clamp(22px,4vw,48px); inset-inline-end:clamp(20px,4vw,48px); text-align:end; display:flex; flex-direction:column; gap:2px; }
.duo-cap b{ font:600 clamp(20px,2.4vw,32px)/1.1 var(--serif); font-family:var(--serif) !important; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.duo-cap i{ font-style:normal; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); }

/* darkening so white text always reads */
.duo-slide::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,rgba(var(--ink-rgb),.72) 0%,rgba(var(--ink-rgb),.35) 55%,rgba(var(--ink-rgb),.05) 100%),
               linear-gradient(0deg,rgba(var(--ink-rgb),.55) 0%,transparent 45%); }
.duo-gild::before{ background:linear-gradient(90deg,rgba(10,8,5,.82) 0%,rgba(10,8,5,.4) 55%,rgba(10,8,5,.05) 100%),linear-gradient(0deg,rgba(10,8,5,.55) 0%,transparent 45%); }
html[dir="rtl"] .duo-slide::before{ transform:scaleX(-1); }

/* text */
.duo-content{ position:absolute; z-index:3; inset-inline-start:var(--pad-x); bottom:clamp(110px,15vh,170px); max-width:min(680px, calc(100% - 2*var(--pad-x))); text-align:start; }
.duo-content h1{ color:#fff !important; font-size:clamp(40px,6vw,84px); margin:0 0 18px; text-shadow:0 2px 30px rgba(0,0,0,.3); }
.duo-content h1 span{ display:block; }
.duo-lead{ color:rgba(255,255,255,.92) !important; max-width:520px; margin:0 0 28px !important; font-size:clamp(15px,1.5vw,19px) !important; }
.duo-content .small-title{ color:var(--gold-light) !important; }
.duo-content .small-title::before,.duo-content .small-title::after{ background:var(--gold-light); }
.duo-content .small-title::after{ display:none; }
.duo-gild .hero-btn{ background:#B8902A !important; border-color:#B8902A !important; }
.duo-content .hero-btn:hover{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important; }
.duo-content .gt-btn-outline{ color:#fff !important; border-color:rgba(255,255,255,.65) !important; }
.duo-content .gt-btn-outline:hover{ background:#fff !important; color:var(--ink) !important; }

/* text entrance (only the active slide) */
.duo-content > *{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform 1s cubic-bezier(.22,.8,.24,1); }
.duo-slide.is-active .duo-content > *{ opacity:1; transform:none; }
.duo-slide.is-active .duo-content > :nth-child(1){ transition-delay:.25s; }
.duo-slide.is-active .duo-content > :nth-child(2){ transition-delay:.4s; }
.duo-slide.is-active .duo-content > :nth-child(3){ transition-delay:.58s; }
.duo-slide.is-active .duo-content > :nth-child(4){ transition-delay:.74s; }
html.gt-js:not(.gt-ready) .duo-slide.is-active .duo-content > *{ opacity:0; transform:translateY(26px); }

/* controls */
.duo-ui{ position:absolute; z-index:5; inset-inline:var(--pad-x); bottom:clamp(24px,4vh,44px); display:flex; align-items:center; gap:14px; }
.duo-tabs{ flex:1; display:flex; gap:clamp(8px,1.6vw,22px); max-width:640px; }
.duo-tabs button{ flex:1; position:relative; padding:14px 2px 0; background:none; border:0; cursor:pointer; text-align:start; color:rgba(255,255,255,.62); transition:color .3s; }
.duo-tabs button span{ white-space:nowrap; font:600 12px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.duo-tabs button:hover,.duo-tabs button.is-active{ color:#fff; }
.duo-tabs em{ position:absolute; top:0; inset-inline:0; height:2px; background:rgba(255,255,255,.28); overflow:hidden; }
.duo-tabs em::after{ content:""; position:absolute; inset:0; background:var(--gold-light); transform:scaleX(0); transform-origin:left; }
html[dir="rtl"] .duo-tabs em::after{ transform-origin:right; }
.duo-tabs .is-active em::after{ transform:scaleX(1); }
.duo-hero.is-timing .duo-tabs .is-active em::after{ transform:scaleX(0); animation:duo-fill 7s linear forwards; }
@keyframes duo-fill{ to{ transform:scaleX(1); } }
.duo-arrow{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.18); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s,color .3s,border-color .3s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.duo-arrow svg{ width:20px; height:20px; }
html[dir="rtl"] .duo-arrow svg{ transform:scaleX(-1); }
.duo-arrow:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.duo-tabs-spacer{ flex:1; }
.duo-prev{ order:3; margin-inline-start:auto; }
.duo-tabs{ order:1; } .duo-next{ order:4; }

/* tablet */
@media (max-width:1100px){
    .duo-content{ bottom:clamp(110px,14vh,150px); }
}
/* phone + portrait tablet */
@media (max-width:820px){
    .duo-hero{ height:calc(100svh - 64px); min-height:600px; max-height:none; }
    .duo-split{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
    .duo-cap{ top:auto; bottom:14px; inset-inline-end:auto; inset-inline-start:var(--pad-x); text-align:start; }
    .duo-cap i{ display:none; }
    .duo-slide::before{ background:linear-gradient(0deg,rgba(var(--ink-rgb),.88) 0%,rgba(var(--ink-rgb),.55) 45%,rgba(var(--ink-rgb),.1) 100%); }
    .duo-gild::before{ background:linear-gradient(0deg,rgba(10,8,5,.9) 0%,rgba(10,8,5,.6) 45%,rgba(10,8,5,.1) 100%); }
    html[dir="rtl"] .duo-slide::before{ transform:none; }
    .duo-content{ bottom:96px; }
    .duo-content h1{ font-size:clamp(36px,10.5vw,60px); }
    .duo-arrow{ display:none; }
    .duo-ui{ bottom:24px; }
    .duo-tabs{ max-width:none; }
    .duo-content .hero-actions .hero-btn,.duo-content .hero-actions .gt-btn{ padding:14px 24px !important; }
}
@media (max-width:420px){ .duo-tabs button span{ font-size:10.5px; letter-spacing:.1em; } }
@media (prefers-reduced-motion:reduce){ .duo-slide,.duo-bg,.duo-panel,.duo-content > *{ transition:none !important; transform:none !important; } }

/* ---------------------------------------------------------------
   12. RESPONSIVE HEADER + HERO FIXES (phone, iPad, laptop)
   --------------------------------------------------------------- */
nav a, .header-btn{ white-space:nowrap; }
@media (max-width:1320px){
    header{ padding:10px 22px !important; }
    header nav{ display:none; }
    header .header-btn{ display:none; }
    header .menu-toggle{ display:block; margin-inline-start:8px; margin-left:0; font-size:30px; line-height:1; cursor:pointer; user-select:none; padding:4px 6px; color:var(--ink); }
    header .lang-switch{ margin-inline-start:auto; }
    header .cart-btn{ margin-left:8px !important; }
    header nav.active{
        display:flex; flex-direction:column; position:absolute; top:100%; inset-inline:0; left:0; right:0; width:100%;
        background:var(--cream); padding:20px 0 26px; text-align:center; gap:20px;
        box-shadow:0 18px 30px rgba(var(--ink-rgb),.12); border-top:1px solid var(--line); z-index:999;
    }
    header nav.active a{ font-size:14px !important; }
    html[dir="rtl"] header nav.active a{ font-size:17px !important; }
    body.theme-gild header nav.active{ background:#15110B; }
}
html[dir="rtl"] header .cart-btn{ margin-left:0 !important; margin-right:8px; }
html[dir="rtl"] header .menu-toggle{ margin-inline-start:8px; }

/* hero controls must not sit under the WhatsApp button */
.duo-ui{ inset-inline-end:calc(var(--pad-x) + 84px); }
.duo-arrow{ display:none; }
@media (min-width:1100px){ .duo-arrow{ display:inline-flex; } .duo-ui{ inset-inline-end:calc(var(--pad-x) + 84px); } }
html[dir="rtl"] .whatsapp-float{ left:25px; }
@media (max-width:820px){
    .duo-ui{ inset-inline-end:92px; }
    .duo-split{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
    .duo-cap{ top:18px; bottom:auto; inset-inline-end:14px; inset-inline-start:auto; text-align:end; }
    .duo-cap b{ font-size:18px; }
}
header .lang-switch{ order:3; }

/* ---------------------------------------------------------------
   13. ACCOUNT ICON + ANNOUNCEMENT BAR (all pages)
   --------------------------------------------------------------- */
.acct-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--ink); order:3; transition:background .3s, color .3s; }
.acct-btn svg{ width:24px; height:24px; }
.acct-btn:hover{ background:rgba(var(--gold-rgb),.2); color:var(--gt-gold-dark); }
.acct-dot{ position:absolute; top:9px; inset-inline-end:9px; width:9px; height:9px; border-radius:50%; background:var(--gold); border:2px solid var(--cream); transform:scale(0); transition:transform .3s; }
.acct-btn.is-in .acct-dot{ transform:scale(1); }
body.theme-gild .acct-btn{ color:#F7F2E7; }
header .acct-btn{ order:3; }
header .cart-btn{ order:4 !important; }
header .menu-toggle{ order:5 !important; }
@media (max-width:1320px){ header .acct-btn{ margin-inline-start:2px; } }

.gt-announce{ position:relative; z-index:900; background:var(--ink); color:#fff; text-align:center; font-size:13px; letter-spacing:.04em; padding:9px var(--pad-x); }
.has-announce body{ padding-top:76px; }