/* ============================================================
   KEMET Mediterranean Food — Design System
   Fonts: Cinzel (headings EN/DE) + Cairo (body + AR)
   Theme: Luxury Egyptian Dark — Gold on Black
   ============================================================ */

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

   /* ── CSS VARIABLES ────────────────────────────────────────── */
   :root {
     /* Gold */
     --gold:          #C9A34E;
     --gold-light:    #E5C97B;
     --gold-dark:     #A8832F;
     --gold-glow:     rgba(201,163,78,.18);
   
     /* Backgrounds */
     --bg:            #0B0F14;
     --bg-card:       #12191F;
     --bg-deep:       #1A2530;
     --bg-input:      #0F1820;
     --border:        #2A3540;
     --border-hover:  #3A4A58;
   
     /* Text */
     --text:          #FFFFFF;
     --text-sec:      #A0A7B1;
     --text-muted:    #5C6674;
   
     /* Accents */
     --cyan:          #00D1FF;
     --cyan-glow:     rgba(0,209,255,.12);
     --green:         #00FFA6;
     --green-glow:    rgba(0,255,166,.12);
     --red:           #EF4444;
     --red-glow:      rgba(239,68,68,.12);
     --amber:         #F59E0B;
   
     /* Fonts */
     --font-display:  'Cinzel', Georgia, serif;
     --font-body:     'Cairo', system-ui, sans-serif;
   
     /* Gradients */
     --grad-gold:     linear-gradient(135deg,#A8832F 0%,#E5C97B 50%,#A8832F 100%);
     --grad-bg:       linear-gradient(160deg,#0B0F14 0%,#0F1E2D 100%);
     --grad-line:     linear-gradient(90deg,transparent,#C9A34E,transparent);
     --grad-hero:     linear-gradient(90deg,rgba(11,15,20,.97) 0%,rgba(11,15,20,.7) 55%,transparent 100%);
   
     /* Shadows */
     --shadow-card:   0 2px 20px rgba(0,0,0,.5);
     --shadow-gold:   0 4px 24px rgba(201,163,78,.22);
     --shadow-hover:  0 8px 40px rgba(0,0,0,.6);
   
     /* Spacing */
     --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
     --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
     --sp-12:48px; --sp-16:64px; --sp-20:80px;
   
     /* Motion */
     --dur-fast:  150ms;
     --dur-base:  260ms;
     --dur-slow:  450ms;
     --ease-out:  cubic-bezier(.16,1,.3,1);
     --ease-io:   cubic-bezier(.4,0,.2,1);
   
     /* Radius */
     --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
   }
   
   /* ── RESET ────────────────────────────────────────────────── */
   *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
   html{font-size:16px;scroll-behavior:smooth}
   body{
     background:var(--bg);
     color:var(--text);
     font-family:var(--font-body);
     font-size:15px;
     line-height:1.7;
     min-height:100vh;
     overflow-x:hidden;
   }
   img{display:block;max-width:100%}
   a{color:inherit;text-decoration:none}
   button{font-family:inherit;cursor:pointer}
   input,select,textarea{font-family:inherit}
   ul,ol{list-style:none}
   
   /* Arabic body */
   [dir="rtl"] body,[dir="rtl"]{
     font-size:16px;
     line-height:1.85;
   }
   
   /* ── TYPOGRAPHY ───────────────────────────────────────────── */
   .font-display{font-family:var(--font-display)}
   h1,h2,h3,.h1,.h2,.h3{font-family:var(--font-display);color:var(--gold-light);letter-spacing:1.5px;line-height:1.2}
   h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:3px}
   h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;letter-spacing:2px}
   h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600}
   h4{font-size:1rem;font-weight:600;color:var(--gold);letter-spacing:.5px}
   
   .text-gold{color:var(--gold-light)}
   .text-muted{color:var(--text-muted)}
   .text-sec{color:var(--text-sec)}
   .text-sm{font-size:13px}
   .text-xs{font-size:11px}
   
   /* ── LAYOUT ───────────────────────────────────────────────── */
   .container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--sp-6)}
   .container--wide{max-width:1440px;padding:0 var(--sp-8)}
   .container--narrow{max-width:680px;padding:0 var(--sp-6)}
   
   .section{padding:var(--sp-16) 0}
   .section--sm{padding:var(--sp-10) 0}
   
   .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
   .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
   .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
   .grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-6)}
   
   .flex{display:flex}
   .flex-center{display:flex;align-items:center;justify-content:center}
   .flex-between{display:flex;align-items:center;justify-content:space-between}
   .flex-col{display:flex;flex-direction:column}
   .gap-2{gap:var(--sp-2)}
   .gap-3{gap:var(--sp-3)}
   .gap-4{gap:var(--sp-4)}
   .gap-6{gap:var(--sp-6)}
   
   /* ── GOLD LINE DIVIDER ────────────────────────────────────── */
   .gold-line{height:1px;background:var(--grad-line);margin:var(--sp-8) 0}
   .gold-line--sm{height:1px;background:var(--grad-line);width:80px;margin:var(--sp-3) 0}
   
   /* ── SECTION HEADER ───────────────────────────────────────── */
   .section-header{margin-bottom:var(--sp-10)}
   .section-header__eyebrow{
     font-size:11px;font-weight:600;letter-spacing:3px;
     text-transform:uppercase;color:var(--gold);
     display:flex;align-items:center;gap:var(--sp-2);
     margin-bottom:var(--sp-3)
   }
   .section-header__eyebrow::before,
   .section-header__eyebrow::after{content:'';flex:1;height:1px;background:var(--grad-line)}
   .section-header h2{text-align:center}
   .section-header p{text-align:center;color:var(--text-sec);max-width:560px;margin:var(--sp-3) auto 0}
   
   /* ── CARDS ────────────────────────────────────────────────── */
   .card{
     background:var(--bg-card);
     border:1px solid var(--border);
     border-radius:var(--r-lg);
     transition:border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
   }
   .card:hover{
     border-color:rgba(201,163,78,.35);
     transform:translateY(-3px);
     box-shadow:var(--shadow-hover);
   }
   .card--glow-blue{border-color:rgba(0,209,255,.2);box-shadow:0 0 20px var(--cyan-glow)}
   .card--glow-gold{border-color:rgba(201,163,78,.3);box-shadow:0 0 24px var(--gold-glow)}
   
   /* ── BUTTONS ──────────────────────────────────────────────── */
   .btn{
     display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
     font-family:var(--font-body);font-size:14px;font-weight:600;
     letter-spacing:1px;text-transform:uppercase;
     padding:12px 28px;border-radius:var(--r-md);
     border:none;cursor:pointer;
     transition:all var(--dur-fast) var(--ease-io);
     white-space:nowrap;
   }
   .btn:disabled{opacity:.45;cursor:not-allowed}
   
   .btn-primary{
     background:var(--grad-gold);
     background-size:200% 100%;
     color:#0B0F14;
   }
   .btn-primary:hover:not(:disabled){
     background-position:right center;
     box-shadow:var(--shadow-gold);
     transform:translateY(-1px);
   }
   
   .btn-outline{
     background:transparent;
     color:var(--gold);
     border:1px solid var(--gold);
   }
   .btn-outline:hover:not(:disabled){
     background:var(--gold-glow);
     border-color:var(--gold-light);
     color:var(--gold-light);
   }
   
   .btn-ghost{
     background:transparent;
     color:var(--text-sec);
     border:1px solid var(--border);
   }
   .btn-ghost:hover:not(:disabled){
     border-color:var(--border-hover);
     color:var(--text);
   }
   
   .btn-danger{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.3)}
   .btn-danger:hover{background:rgba(239,68,68,.25)}
   
   .btn-sm{padding:8px 16px;font-size:12px}
   .btn-lg{padding:16px 40px;font-size:15px}
   .btn-icon{padding:10px;border-radius:var(--r-md);aspect-ratio:1}
   
   /* ── BADGES ───────────────────────────────────────────────── */
   .badge{
     display:inline-block;
     font-size:10px;font-weight:700;letter-spacing:.8px;
     text-transform:uppercase;padding:3px 8px;
     border-radius:var(--r-sm);
   }
   .badge-new    {background:#00D1FF;color:#0B0F14}
   .badge-sale   {background:var(--gold);color:#0B0F14}
   .badge-pre    {background:var(--bg-deep);color:var(--gold-light);border:1px solid var(--gold)}
   .badge-stock  {background:var(--green-glow);color:var(--green);border:1px solid rgba(0,255,166,.25)}
   .badge-low    {background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
   .badge-out    {background:var(--red-glow);color:var(--red);border:1px solid rgba(239,68,68,.25)}
   
   /* ── FORM ELEMENTS ────────────────────────────────────────── */
   .form-group{margin-bottom:var(--sp-5)}
   .form-label{
     display:block;font-size:12px;font-weight:600;
     letter-spacing:.5px;color:var(--text-sec);
     margin-bottom:var(--sp-2);text-transform:uppercase;
   }
   .form-input,.form-select,.form-textarea{
     width:100%;background:var(--bg-input);
     border:1px solid var(--border);border-radius:var(--r-md);
     color:var(--text);font-family:var(--font-body);font-size:14px;
     padding:12px 16px;outline:none;
     transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
   }
   .form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
   .form-input:focus,.form-select:focus,.form-textarea:focus{
     border-color:var(--gold);
     box-shadow:0 0 0 3px rgba(201,163,78,.12);
   }
   .form-input.error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-glow)}
   .form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A34E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
   .form-textarea{resize:vertical;min-height:100px}
   .form-check{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer}
   .form-check input[type="checkbox"]{
     width:18px;height:18px;min-width:18px;
     background:var(--bg-input);border:1px solid var(--border);
     border-radius:4px;appearance:none;cursor:pointer;
     transition:all var(--dur-fast);margin-top:2px;
   }
   .form-check input[type="checkbox"]:checked{
     background:var(--gold);border-color:var(--gold);
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%230B0F14' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat:no-repeat;background-position:center;
   }
   .form-error{font-size:12px;color:var(--red);margin-top:var(--sp-1)}
   .form-hint{font-size:12px;color:var(--text-muted);margin-top:var(--sp-1)}
   
   /* ── PRODUCT CARD ─────────────────────────────────────────── */
   .product-card{
     background:var(--bg-card);border:1px solid var(--border);
     border-radius:var(--r-lg);overflow:hidden;
     transition:all var(--dur-base) var(--ease-out);
     display:flex;flex-direction:column;position:relative;
   }
   .product-card:hover{
     border-color:rgba(201,163,78,.3);
     transform:translateY(-4px);
     box-shadow:0 12px 40px rgba(0,0,0,.5);
   }
   .product-card__badges{
     position:absolute;top:var(--sp-3);left:var(--sp-3);
     display:flex;flex-direction:column;gap:var(--sp-1);z-index:2;
   }
   [dir="rtl"] .product-card__badges{left:auto;right:var(--sp-3)}
   .product-card__img-wrap{
     position:relative;aspect-ratio:1/1;overflow:hidden;
     background:var(--bg-deep);
     display:flex;align-items:center;justify-content:center;
   }
   .product-card__img-wrap::after{
     content:'';position:absolute;inset:0;
     background:radial-gradient(ellipse at center,rgba(201,163,78,.06) 0%,transparent 70%);
     pointer-events:none;z-index:1;
   }
   .product-card__img-wrap img{
     width:100%;height:100%;object-fit:cover;
     transition:transform var(--dur-slow) var(--ease-out);
   }
   .product-card:hover .product-card__img-wrap img{transform:scale(1.06)}
   .product-card__body{padding:var(--sp-4);flex:1;display:flex;flex-direction:column;gap:var(--sp-2)}
   .product-card__name{font-size:14px;font-weight:600;color:var(--text);line-height:1.4}
   .product-card__desc{font-size:12px;color:var(--text-sec);line-height:1.5;flex:1}
   .product-card__rating{display:flex;align-items:center;gap:var(--sp-1);font-size:12px;color:var(--text-sec)}
   .product-card__stars{color:var(--gold);font-size:11px}
   .product-card__foot{
     display:flex;align-items:center;justify-content:space-between;
     padding:var(--sp-4);border-top:1px solid var(--border);
     gap:var(--sp-2);
   }
   .product-card__price{
     font-family:var(--font-display);font-size:18px;
     font-weight:700;color:var(--gold-light);
   }
   .product-card__compare{
     font-size:13px;color:var(--text-muted);
     text-decoration:line-through;
   }
   .product-card__cart-btn{
     width:38px;height:38px;border-radius:var(--r-md);
     background:var(--gold-glow);border:1px solid rgba(201,163,78,.3);
     color:var(--gold);font-size:16px;
     display:flex;align-items:center;justify-content:center;
     transition:all var(--dur-fast);flex-shrink:0;
   }
   .product-card__cart-btn:hover{background:var(--gold);color:#0B0F14}
   
   /* ── ANNOUNCEMENT BAR ─────────────────────────────────────── */
   .announce-bar{
     background:linear-gradient(90deg,var(--bg-deep),#0D1F2D,var(--bg-deep));
     border-bottom:1px solid var(--border);
     padding:10px var(--sp-6);font-size:12px;
     display:flex;align-items:center;justify-content:space-between;
     gap:var(--sp-4);
   }
   .announce-bar__item{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-sec)}
   .announce-bar__item svg{color:var(--gold)}
   .announce-bar__center{color:var(--gold-light);font-weight:600;letter-spacing:.5px;text-align:center;flex:1}
   
   /* ── HEADER ───────────────────────────────────────────────── */
   .site-header{
     position:sticky;top:0;z-index:100;
     background:rgba(11,15,20,.95);
     backdrop-filter:blur(14px);
     border-bottom:1px solid var(--border);
     padding:0 var(--sp-6);
   }
   .site-header__inner{
     max-width:1280px;margin:0 auto;height:72px;
     display:flex;align-items:center;gap:var(--sp-6);
   }
   .site-header__logo{
     display:flex;align-items:center;gap:var(--sp-3);
     flex-shrink:0;text-decoration:none;
   }
   .site-header__logo-emblem{width:44px;height:44px}
   .site-header__logo-img{
     height:48px;width:auto;max-width:160px;
     object-fit:contain;display:block;
   }
   .site-header__logo-fallback{display:none}
   .site-header__logo-text{
     font-family:var(--font-display);font-size:18px;
     font-weight:700;color:var(--gold-light);letter-spacing:3px;
     line-height:1.1;
   }
   .site-header__logo-sub{
     font-size:9px;letter-spacing:2px;
     color:var(--text-muted);text-transform:uppercase;
   }
   .site-header__search{
     flex:1;max-width:480px;position:relative;
   }
   .site-header__search input{
     width:100%;background:var(--bg-deep);
     border:1px solid var(--border);border-radius:var(--r-md);
     color:var(--text);font-size:13px;
     padding:10px 16px 10px 40px;outline:none;
     transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
   }
   [dir="rtl"] .site-header__search input{padding:10px 40px 10px 16px}
   .site-header__search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
   .site-header__search-icon{
     position:absolute;left:14px;top:50%;transform:translateY(-50%);
     color:var(--text-muted);pointer-events:none;
   }
   [dir="rtl"] .site-header__search-icon{left:auto;right:14px}
   .site-header__actions{
     display:flex;align-items:center;gap:var(--sp-3);margin-left:auto;
   }
   [dir="rtl"] .site-header__actions{margin-left:0;margin-right:auto}
   .header-action{
     display:flex;flex-direction:column;align-items:center;
     gap:2px;color:var(--text-sec);font-size:10px;letter-spacing:.3px;
     padding:8px;border-radius:var(--r-md);
     transition:color var(--dur-fast),background var(--dur-fast);
     position:relative;
   }
   .header-action:hover{color:var(--gold-light);background:var(--gold-glow)}
   .header-action svg{width:20px;height:20px}
   .header-action__badge{
     position:absolute;top:4px;right:4px;
     width:16px;height:16px;border-radius:50%;
     background:var(--gold);color:#0B0F14;
     font-size:9px;font-weight:700;
     display:flex;align-items:center;justify-content:center;
   }
   .lang-switch{
     display:flex;gap:4px;padding:6px;
     background:var(--bg-deep);border-radius:var(--r-md);
     border:1px solid var(--border);
   }
   .lang-btn{
     padding:4px 8px;border-radius:4px;
     font-size:11px;font-weight:600;letter-spacing:.3px;
     color:var(--text-muted);background:transparent;border:none;
     transition:all var(--dur-fast);
   }
   .lang-btn.active,.lang-btn:hover{
     background:var(--gold);color:#0B0F14;
   }
   .site-nav{
     border-top:1px solid var(--border);
     background:rgba(11,15,20,.95);
   }
   .site-nav__inner{
     max-width:1280px;margin:0 auto;
     display:flex;align-items:center;gap:0;
     padding:0 var(--sp-6);
   }
   .nav-link{
     padding:14px var(--sp-5);font-size:13px;font-weight:600;
     letter-spacing:.5px;color:var(--text-sec);
     border-bottom:2px solid transparent;
     transition:all var(--dur-fast);white-space:nowrap;
   }
   .nav-link:hover,.nav-link.active{
     color:var(--gold-light);border-bottom-color:var(--gold);
   }
   
   /* ── HERO ─────────────────────────────────────────────────── */
   .hero{
     position:relative;min-height:580px;
     display:flex;align-items:center;overflow:hidden;
     background:var(--bg);
   }
   .hero__bg{
     position:absolute;inset:0;z-index:0;
     background:var(--grad-bg);
   }
   .hero__bg-img{
     position:absolute;inset:0;
     background-size:cover;background-position:center;
     opacity:.55;
   }
   .hero__overlay{
     position:absolute;inset:0;
     background:var(--grad-hero);z-index:1;
   }
   .hero__content{
     position:relative;z-index:2;
     max-width:1280px;margin:0 auto;
     padding:var(--sp-20) var(--sp-6);
     display:grid;grid-template-columns:1fr 1fr;
     align-items:center;gap:var(--sp-12);
     width:100%;
   }
   .hero__text{}
   .hero__eyebrow{
     font-size:11px;letter-spacing:3px;text-transform:uppercase;
     color:var(--gold);font-weight:600;margin-bottom:var(--sp-4);
     display:flex;align-items:center;gap:var(--sp-3);
   }
   .hero__eyebrow::before{content:'';width:40px;height:1px;background:var(--gold)}
   [dir="rtl"] .hero__eyebrow{flex-direction:row-reverse}
   [dir="rtl"] .hero__eyebrow::before{display:none}
   [dir="rtl"] .hero__eyebrow::after{content:'';width:40px;height:1px;background:var(--gold)}
   .hero__title{
     font-family:var(--font-display);
     font-size:clamp(2.2rem,4vw,3.4rem);
     font-weight:700;color:var(--text);
     letter-spacing:2px;line-height:1.15;
     margin-bottom:var(--sp-3);
   }
   .hero__title span{
     display:block;color:var(--gold-light);
     font-size:clamp(2.6rem,5vw,4rem);
   }
   .hero__sub{
     font-size:15px;color:var(--text-sec);
     max-width:460px;margin-bottom:var(--sp-8);line-height:1.8;
   }
   .hero__cta{display:flex;gap:var(--sp-4);flex-wrap:wrap}
   .hero__img{
     position:relative;
     display:flex;align-items:center;justify-content:center;
   }
   .hero__img img{
     width:25%;max-width:520px;
     border-radius:var(--r-xl);
     box-shadow:0 24px 80px rgba(0,0,0,.6);
     border:1px solid rgba(201,163,78,.15);
   }
   
   /* ── AI BOX ───────────────────────────────────────────────── */
   .ai-box{
     background:linear-gradient(135deg,rgba(0,209,255,.06),rgba(0,255,166,.04));
     border:1px solid rgba(0,209,255,.2);
     border-radius:var(--r-lg);
     padding:var(--sp-5);
     box-shadow:0 0 32px var(--cyan-glow);
   }
   .ai-box__header{
     display:flex;align-items:center;gap:var(--sp-3);
     margin-bottom:var(--sp-4);
   }
   .ai-box__badge{
     font-size:10px;font-weight:700;letter-spacing:1.5px;
     padding:3px 10px;border-radius:20px;
     background:rgba(0,209,255,.15);color:var(--cyan);
     border:1px solid rgba(0,209,255,.3);text-transform:uppercase;
   }
   .ai-box__title{font-size:14px;font-weight:600;color:var(--cyan)}
   .ai-item{
     display:flex;align-items:center;gap:var(--sp-3);
     padding:var(--sp-3) 0;border-bottom:1px solid rgba(0,209,255,.08);
   }
   .ai-item:last-child{border-bottom:none;padding-bottom:0}
   .ai-item__img{
     width:44px;height:44px;min-width:44px;border-radius:var(--r-sm);
     object-fit:cover;background:var(--bg-deep);flex-shrink:0;
     border:1px solid rgba(0,209,255,.12);
   }
   .ai-item__info{flex:1}
   .ai-item__name{font-size:13px;font-weight:600}
   .ai-item__tag{font-size:11px;color:var(--text-muted)}
   .ai-item__badge-disc{
     font-size:10px;font-weight:700;padding:2px 6px;
     border-radius:4px;background:var(--gold);color:#0B0F14;
     flex-shrink:0;
   }
   
   /* ── FEATURES BAR ─────────────────────────────────────────── */
   .features-bar{
     background:var(--bg-deep);
     border-top:1px solid var(--border);
     border-bottom:1px solid var(--border);
     padding:var(--sp-6) 0;
   }
   .features-bar__grid{
     display:grid;
     grid-template-columns:repeat(5,1fr);
     gap:var(--sp-4);
     max-width:1280px;margin:0 auto;padding:0 var(--sp-6);
   }
   .feature-item{
     display:flex;align-items:center;gap:var(--sp-3);
     padding:var(--sp-4);
   }
   .feature-item__icon{
     width:40px;height:40px;border-radius:var(--r-md);
     background:var(--gold-glow);border:1px solid rgba(201,163,78,.2);
     display:flex;align-items:center;justify-content:center;
     flex-shrink:0;
   }
   .feature-item__icon svg{width:20px;height:20px;color:var(--gold)}
   .feature-item__title{font-size:13px;font-weight:600;color:var(--text)}
   .feature-item__sub{font-size:11px;color:var(--text-muted)}
   
   /* ── CATEGORY CARDS ───────────────────────────────────────── */
   .cat-grid{
     display:grid;
     grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
     gap:var(--sp-4);
   }
   .cat-card{
     background:var(--bg-card);border:1px solid var(--border);
     border-radius:var(--r-lg);overflow:hidden;
     transition:all var(--dur-base) var(--ease-out);
     text-align:center;cursor:pointer;
     display:block;
   }
   .cat-card:hover{
     border-color:rgba(201,163,78,.4);
     transform:translateY(-4px);
     box-shadow:var(--shadow-gold);
   }
   .cat-card__img{
     height:120px;background:var(--bg-deep);
     display:flex;align-items:center;justify-content:center;
     overflow:hidden;position:relative;
   }
   .cat-card__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
   .cat-card:hover .cat-card__img img{transform:scale(1.08)}
   .cat-card__name{
     padding:var(--sp-3) var(--sp-3);
     font-size:13px;font-weight:600;color:var(--text);
   }
   
   /* ── CART ─────────────────────────────────────────────────── */
   .cart-item{
     display:grid;grid-template-columns:80px 1fr auto;
     align-items:center;gap:var(--sp-4);
     padding:var(--sp-4) 0;
     border-bottom:1px solid var(--border);
   }
   .cart-item__img{
     width:80px;height:80px;border-radius:var(--r-md);
     object-fit:cover;background:var(--bg-deep);
   }
   .cart-item__qty{
     display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);
   }
   .qty-btn{
     width:28px;height:28px;border-radius:var(--r-sm);
     background:var(--bg-deep);border:1px solid var(--border);
     color:var(--text);font-size:14px;
     display:flex;align-items:center;justify-content:center;
     transition:all var(--dur-fast);
   }
   .qty-btn:hover{border-color:var(--gold);color:var(--gold)}
   .qty-val{
     width:36px;text-align:center;font-weight:600;font-size:14px;
   }
   .cart-item__price{
     font-family:var(--font-display);
     font-size:16px;font-weight:700;color:var(--gold-light);
     white-space:nowrap;
   }
   
   /* ── ORDER SUMMARY BOX ────────────────────────────────────── */
   .order-summary{
     background:var(--bg-card);border:1px solid var(--border);
     border-radius:var(--r-lg);padding:var(--sp-6);
     position:sticky;top:90px;
   }
   .summary-row{
     display:flex;justify-content:space-between;align-items:center;
     padding:var(--sp-3) 0;border-bottom:1px solid var(--border);
     font-size:14px;color:var(--text-sec);
   }
   .summary-row:last-child{border-bottom:none}
   .summary-row--total{
     font-family:var(--font-display);
     font-size:18px;font-weight:700;
     color:var(--gold-light);padding-top:var(--sp-4);
   }
   .summary-row__val{color:var(--text);font-weight:600}
   
   /* ── CHECKOUT STEPS ───────────────────────────────────────── */
   .checkout-steps{
     display:flex;align-items:center;gap:0;
     margin-bottom:var(--sp-10);
   }
   .checkout-step{
     display:flex;align-items:center;gap:var(--sp-3);
     flex:1;
   }
   .checkout-step:not(:last-child)::after{
     content:'';flex:1;height:1px;
     background:var(--border);margin:0 var(--sp-2);
   }
   .checkout-step__num{
     width:32px;height:32px;border-radius:50%;
     display:flex;align-items:center;justify-content:center;
     font-size:13px;font-weight:700;flex-shrink:0;
     background:var(--bg-deep);border:1px solid var(--border);
     color:var(--text-muted);
     transition:all var(--dur-base);
   }
   .checkout-step--active .checkout-step__num{
     background:var(--gold);border-color:var(--gold);color:#0B0F14;
   }
   .checkout-step--done .checkout-step__num{
     background:var(--green-glow);border-color:var(--green);color:var(--green);
   }
   .checkout-step__label{font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--text-muted)}
   .checkout-step--active .checkout-step__label{color:var(--gold-light)}
   .checkout-step--done .checkout-step__label{color:var(--green)}
   
   /* ── PAYMENT OPTION ───────────────────────────────────────── */
   .pay-option{
     display:flex;align-items:center;gap:var(--sp-4);
     padding:var(--sp-4) var(--sp-5);
     background:var(--bg-input);border:1px solid var(--border);
     border-radius:var(--r-md);cursor:pointer;
     transition:all var(--dur-fast);margin-bottom:var(--sp-3);
   }
   .pay-option:hover{border-color:rgba(201,163,78,.3)}
   .pay-option.selected{border-color:var(--gold);background:var(--gold-glow)}
   .pay-option__radio{
     width:18px;height:18px;border-radius:50%;
     border:2px solid var(--border);flex-shrink:0;
     transition:all var(--dur-fast);position:relative;
   }
   .pay-option.selected .pay-option__radio{
     border-color:var(--gold);
     background:radial-gradient(circle,var(--gold) 40%,transparent 45%);
   }
   .pay-option__icon{font-size:24px;flex-shrink:0}
   .pay-option__name{font-weight:600;font-size:14px}
   .pay-option__desc{font-size:12px;color:var(--text-muted)}
   
   /* ── ACCOUNT ──────────────────────────────────────────────── */
   .account-sidebar{
     background:var(--bg-card);border:1px solid var(--border);
     border-radius:var(--r-lg);overflow:hidden;
     position:sticky;top:90px;
   }
   .account-sidebar__profile{
     padding:var(--sp-6);background:var(--bg-deep);
     border-bottom:1px solid var(--border);
     text-align:center;
   }
   .account-avatar{
     width:72px;height:72px;border-radius:50%;
     background:var(--gold-glow);border:2px solid var(--gold);
     display:flex;align-items:center;justify-content:center;
     font-family:var(--font-display);font-size:24px;
     font-weight:700;color:var(--gold);
     margin:0 auto var(--sp-3);
   }
   .account-nav-link{
     display:flex;align-items:center;gap:var(--sp-3);
     padding:var(--sp-4) var(--sp-5);font-size:14px;
     font-weight:600;color:var(--text-sec);
     border-left:3px solid transparent;
     transition:all var(--dur-fast);
   }
   [dir="rtl"] .account-nav-link{border-left:none;border-right:3px solid transparent}
   .account-nav-link:hover{color:var(--gold-light);background:var(--gold-glow)}
   .account-nav-link.active{color:var(--gold-light);border-left-color:var(--gold);background:var(--gold-glow)}
   [dir="rtl"] .account-nav-link.active{border-left-color:transparent;border-right-color:var(--gold)}
   .account-nav-link svg{width:18px;height:18px;flex-shrink:0}
   
   /* ── ORDER STATUS BADGE ───────────────────────────────────── */
   .status-pending   {background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
   .status-confirmed {background:var(--cyan-glow);color:var(--cyan);border:1px solid rgba(0,209,255,.25)}
   .status-processing{background:rgba(99,102,241,.1);color:#818CF8;border:1px solid rgba(99,102,241,.25)}
   .status-shipped   {background:rgba(16,185,129,.1);color:#34D399;border:1px solid rgba(16,185,129,.25)}
   .status-delivered {background:var(--green-glow);color:var(--green);border:1px solid rgba(0,255,166,.25)}
   .status-cancelled {background:var(--red-glow);color:var(--red);border:1px solid rgba(239,68,68,.25)}
   
   /* ── PAGINATION ───────────────────────────────────────────── */
   .pagination{display:flex;align-items:center;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-10)}
   .page-btn{
     width:38px;height:38px;border-radius:var(--r-md);
     display:flex;align-items:center;justify-content:center;
     font-size:13px;font-weight:600;
     background:var(--bg-card);border:1px solid var(--border);
     color:var(--text-sec);transition:all var(--dur-fast);
   }
   .page-btn:hover{border-color:var(--gold);color:var(--gold)}
   .page-btn.active{background:var(--gold);border-color:var(--gold);color:#0B0F14}
   
   /* ── TOAST ────────────────────────────────────────────────── */
   .toast-wrap{position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:9999;display:flex;flex-direction:column;gap:var(--sp-3)}
   [dir="rtl"] .toast-wrap{right:auto;left:var(--sp-6)}
   .toast{
     background:var(--bg-card);border:1px solid var(--border);
     border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
     display:flex;align-items:center;gap:var(--sp-3);
     font-size:13px;font-weight:600;
     box-shadow:var(--shadow-hover);
     animation:toastIn var(--dur-base) var(--ease-out);
     min-width:260px;max-width:360px;
   }
   .toast--success{border-color:rgba(0,255,166,.3);background:rgba(0,255,166,.06)}
   .toast--error  {border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.06)}
   .toast--info   {border-color:rgba(0,209,255,.3);background:rgba(0,209,255,.06)}
   @keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
   [dir="rtl"] @keyframes toastIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
   
   /* ── FOOTER ───────────────────────────────────────────────── */
   .site-footer{
     background:var(--bg-deep);
     border-top:1px solid var(--border);
     padding:var(--sp-16) 0 var(--sp-8);
     margin-top:var(--sp-20);
   }
   .footer-grid{
     display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
     gap:var(--sp-10);margin-bottom:var(--sp-10);
   }
   .footer-brand__logo{
     margin-bottom:var(--sp-4);
   }
   .footer-brand__logo-img{
     height:52px;width:auto;max-width:180px;
     object-fit:contain;display:block;
   }
   .footer-brand__desc{font-size:13px;color:var(--text-sec);line-height:1.8;max-width:280px}
   .footer-social{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
   .footer-social a{
     width:38px;height:38px;border-radius:var(--r-md);
     background:var(--bg-card);border:1px solid var(--border);
     display:flex;align-items:center;justify-content:center;
     color:var(--text-muted);font-size:16px;
     transition:all var(--dur-fast);
   }
   .footer-social a:hover{border-color:var(--gold);color:var(--gold)}
   .footer-col h5{
     font-family:var(--font-display);font-size:12px;
     letter-spacing:2px;text-transform:uppercase;
     color:var(--gold);margin-bottom:var(--sp-5);
   }
   .footer-col ul{display:flex;flex-direction:column;gap:var(--sp-3)}
   .footer-col a{font-size:13px;color:var(--text-sec);transition:color var(--dur-fast)}
   .footer-col a:hover{color:var(--gold-light)}
   .footer-bottom{
     border-top:1px solid var(--border);
     padding-top:var(--sp-6);
     display:flex;align-items:center;justify-content:space-between;
     font-size:12px;color:var(--text-muted);
     flex-wrap:wrap;gap:var(--sp-4);
   }
   
   /* ── PRODUCT LISTING LAYOUT ───────────────────────────────── */
   .product-layout{
     display:grid;grid-template-columns:240px 1fr;
     gap:var(--sp-8);align-items:start;
   }

   /* ── PRODUCT DETAIL LAYOUT ────────────────────────────────── */
   .detail-grid{
     display:grid;grid-template-columns:1fr 1fr;
     gap:var(--sp-10);align-items:start;
   }

   /* ── SIDEBAR FILTER ───────────────────────────────────────── */
   .filter-sidebar{
     background:var(--bg-card);border:1px solid var(--border);
     border-radius:var(--r-lg);padding:var(--sp-5);
     position:sticky;top:90px;
   }
   .filter-sidebar__toggle{display:none;cursor:pointer;list-style:none}
   .filter-sidebar__toggle::-webkit-details-marker{display:none}
   .filter-sidebar__toggle svg{transition:transform var(--dur-fast)}
   .filter-sidebar[open] .filter-sidebar__toggle svg{transform:rotate(180deg)}
   .filter-group{margin-bottom:var(--sp-6);border-bottom:1px solid var(--border);padding-bottom:var(--sp-5)}
   .filter-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
   .filter-group__title{
     font-size:11px;font-weight:700;letter-spacing:1.5px;
     text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-4);
   }
   .filter-option{
     display:flex;align-items:center;gap:var(--sp-3);
     padding:var(--sp-2) 0;cursor:pointer;
   }
   .filter-option input[type="checkbox"]{
     width:16px;height:16px;
     background:var(--bg-input);border:1px solid var(--border);
     border-radius:3px;appearance:none;cursor:pointer;
     transition:all var(--dur-fast);flex-shrink:0;
   }
   .filter-option input[type="checkbox"]:checked{
     background:var(--gold);border-color:var(--gold);
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%230B0F14' stroke-width='2' fill='none'/%3E%3C/svg%3E");
     background-repeat:no-repeat;background-position:center;
   }
   .filter-option label{font-size:13px;color:var(--text-sec);cursor:pointer;flex:1}
   .filter-option span{font-size:11px;color:var(--text-muted)}
   
   /* ── RANGE SLIDER ─────────────────────────────────────────── */
   .range-wrap{padding:var(--sp-2) 0}
   .price-range{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-3)}
   .price-range input{
     width:100%;background:var(--bg-input);
     border:1px solid var(--border);border-radius:var(--r-sm);
     color:var(--text);font-size:13px;padding:8px 10px;outline:none;
   }
   input[type="range"]{
     width:100%;appearance:none;height:4px;
     background:var(--border);border-radius:2px;outline:none;
   }
   input[type="range"]::-webkit-slider-thumb{
     appearance:none;width:16px;height:16px;
     border-radius:50%;background:var(--gold);cursor:pointer;
     box-shadow:0 0 6px var(--gold-glow);
   }
   
   /* ── MISC ─────────────────────────────────────────────────── */
   .divider{height:1px;background:var(--border);margin:var(--sp-6) 0}
   .tag{
     display:inline-block;padding:3px 10px;border-radius:20px;
     font-size:11px;font-weight:600;letter-spacing:.5px;
     background:var(--bg-deep);border:1px solid var(--border);
     color:var(--text-sec);
   }
   .tag:hover,.tag.active{border-color:var(--gold);color:var(--gold-light);background:var(--gold-glow)}
   .empty-state{
     text-align:center;padding:var(--sp-20) var(--sp-6);
   }
   .empty-state__icon{font-size:56px;margin-bottom:var(--sp-5);opacity:.4}
   .empty-state h3{color:var(--text-sec);font-size:18px;margin-bottom:var(--sp-3)}
   .empty-state p{color:var(--text-muted);font-size:14px;max-width:320px;margin:0 auto var(--sp-6)}
   
   /* ── ANIMATIONS ───────────────────────────────────────────── */
   @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
   @keyframes fadeIn{from{opacity:0}to{opacity:1}}
   @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
   @keyframes spin{to{transform:rotate(360deg)}}
   @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
   
   .animate-fadeUp{animation:fadeUp var(--dur-slow) var(--ease-out) both}
   .animate-fadeIn{animation:fadeIn var(--dur-base) var(--ease-io) both}
   .d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}
   
   .skeleton{
     background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-deep) 50%,var(--bg-card) 75%);
     background-size:400px 100%;
     animation:shimmer 1.5s infinite linear;
     border-radius:var(--r-md);
   }
   
   /* ── RESPONSIVE ───────────────────────────────────────────── */
   @media(max-width:1024px){
     .features-bar__grid{grid-template-columns:repeat(3,1fr)}
     .footer-grid{grid-template-columns:1fr 1fr}
     .hero__content{grid-template-columns:1fr;text-align:center}
     .hero__img{display:none}
     .hero__eyebrow{justify-content:center}
     .hero__cta{justify-content:center}
   }
   @media(max-width:900px){
     .product-layout{grid-template-columns:1fr}
     .filter-sidebar{position:static;padding:var(--sp-4)}
     .filter-sidebar__toggle{
       display:flex;align-items:center;justify-content:space-between;
       font-size:12px;font-weight:700;letter-spacing:1px;
       text-transform:uppercase;color:var(--gold);
     }
     .filter-sidebar:not([open]) .filter-sidebar__body{display:none}
     .filter-sidebar__body{margin-top:var(--sp-4)}
     .order-summary,.account-sidebar{position:static}
   }
   @media(max-width:768px){
     .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
     .cat-grid{grid-template-columns:repeat(3,1fr)}
     .detail-grid{grid-template-columns:1fr}
     .container,.container--wide{padding:0 var(--sp-4)}

     /* ── HEADER: stack logo row / search row so nothing overflows ── */
     .site-header{padding:0 var(--sp-4)}
     .site-header__inner{
       height:auto;flex-wrap:wrap;gap:var(--sp-3);
       padding:var(--sp-3) 0;
     }
     .site-header__logo{order:1}
     .site-header__actions{order:2;margin-left:0;gap:var(--sp-2)}
     [dir="rtl"] .site-header__actions{margin-right:0}
     .site-header__search{order:3;flex-basis:100%;max-width:100%}
     .header-action span{display:none}
     .lang-switch{padding:4px}
     .lang-btn{padding:4px 6px}

     .site-nav__inner{overflow-x:auto;-webkit-overflow-scrolling:touch}

     .features-bar__grid{grid-template-columns:1fr 1fr}
     .footer-grid{grid-template-columns:1fr}
     .announce-bar{justify-content:center;flex-wrap:wrap;text-align:center}
     .announce-bar__item:not(.announce-bar__item--mobile){display:none}
     .checkout-step__label{display:none}
     .cart-item{grid-template-columns:64px 1fr auto}
     .cart-item__img{width:64px;height:64px}

     /* Any wide data table gets a horizontal scroller instead of overflowing */
     table{min-width:560px}
     .card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
   }
   @media(max-width:480px){
     .cat-grid{grid-template-columns:repeat(2,1fr)}
     .btn{padding:11px 20px;font-size:13px}
     h1{font-size:1.8rem}
     .section{padding:var(--sp-10) 0}
     .site-header__logo-text{font-size:15px}
     .site-header__logo-img{height:36px}
     .filter-sidebar__body .price-range{flex-direction:column}
   }
   @media(prefers-reduced-motion:reduce){
     *{animation:none !important;transition:none !important}
   }