/* ==========================================================================
   FORMIX3D — Design tokens
   ========================================================================== */
:root{
  --c-primary:#0B1020;
  --c-secondary:#1B4DFF;
  --c-accent:#32A7FF;
  --c-bg:#05070D;
  --c-bg-soft:#0A0E1A;
  --c-surface:rgba(255,255,255,0.04);
  --c-surface-strong:rgba(255,255,255,0.07);
  --c-border:rgba(255,255,255,0.09);
  --c-text:#F5F7FC;
  --c-text-dim:#9AA3B8;
  --c-text-faint:#5C6478;

  --grad-brand:linear-gradient(135deg,var(--c-secondary),var(--c-accent));
  --grad-glow:radial-gradient(circle at 30% 20%, rgba(50,167,255,.35), transparent 60%);

  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;
  --radius-full:999px;

  --shadow-soft:0 20px 60px -30px rgba(0,0,0,.6);
  --shadow-glow:0 0 40px -6px rgba(50,167,255,.45);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur-s:.25s;
  --dur-m:.6s;
  --dur-l:1s;

  --font-en-display:'Poppins', sans-serif;
  --font-en-body:'Inter', sans-serif;
  --font-ar-display:'Almarai', sans-serif;
  --font-ar-body:'Tajawal', sans-serif;

  --container:1240px;
  --header-h:84px;
}

html[lang="ar"]{
  --font-display:var(--font-ar-display);
  --font-body:var(--font-ar-body);
}
html[lang="en"]{
  --font-display:var(--font-en-display);
  --font-body:var(--font-en-body);
}

/* Light theme override */
html[data-theme="light"]{
  --c-bg:#F4F6FB;
  --c-bg-soft:#EBEFF8;
  --c-surface:rgba(11,16,32,0.04);
  --c-surface-strong:rgba(11,16,32,0.07);
  --c-border:rgba(11,16,32,0.09);
  --c-text:#0B1020;
  --c-text-dim:#4A5268;
  --c-text-faint:#8790A4;
  --shadow-soft:0 20px 60px -30px rgba(11,16,32,.25);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{list-style:none;}
input,textarea,select{font:inherit;color:inherit;}
::selection{background:var(--c-secondary);color:#fff;}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-accent);font-weight:600;margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--grad-brand);border-radius:2px;
}
.eyebrow-hero{
  font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.04em;font-weight:800;
  margin-bottom:20px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow-hero::before{width:44px;height:3px;}

.section{padding:120px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  font-weight:700;line-height:1.2;margin-bottom:16px;
}
.section-sub{color:var(--c-text-dim);font-size:1.02rem;max-width:52ch;}
.center{text-align:center;margin-inline:auto;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--radius-full);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s);
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-brand);color:#fff;
  box-shadow:0 12px 30px -10px rgba(27,77,255,.6);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -8px rgba(50,167,255,.7);}
.btn-ghost{
  border:1px solid var(--c-border);color:var(--c-text);background:var(--c-surface);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:var(--c-accent);color:var(--c-accent);transform:translateY(-3px);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none !important;}

/* Glass card */
.glass{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-m);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* ==========================================================================
   Loading screen
   ========================================================================== */
#loading-screen{
  position:fixed;inset:0;z-index:9999;
  background:var(--c-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader-mark{
  font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:.08em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.loader-logo{width:180px;max-width:60vw;filter:drop-shadow(0 10px 30px rgba(50,167,255,.35));animation:loaderPulse 1.8s ease-in-out infinite;}
@keyframes loaderPulse{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.035);}}
.loader-ring{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--c-border);border-top-color:var(--c-accent);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ==========================================================================
   Cursor glow (desktop only)
   ========================================================================== */
#cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(50,167,255,.10), transparent 70%);
  pointer-events:none;z-index:2;transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}

/* ==========================================================================
   Watermark
   ========================================================================== */
.brand-watermark{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.brand-watermark img{
  width:min(1400px,140vw);max-width:none;opacity:.045;filter:blur(.3px);
  user-select:none;-webkit-user-select:none;
}
html[data-theme="light"] .brand-watermark img{opacity:.05;}

/* ==========================================================================
   Search overlay
   ========================================================================== */
.search-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:110px 24px 24px;
  background:rgba(5,7,13,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-s) var(--ease), visibility var(--dur-s), transform var(--dur-s) var(--ease);
}
html[data-theme="light"] .search-overlay{background:rgba(244,246,251,.82);}
.search-overlay.open{opacity:1;visibility:visible;transform:translateY(0);}
.search-overlay-box{
  width:100%;max-width:640px;
  background:var(--c-surface-strong);border:1px solid var(--c-border);border-radius:var(--radius-l);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-soft);overflow:hidden;
}
.search-overlay-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--c-border);}
.search-overlay-head svg{width:20px;height:20px;color:var(--c-text-faint);flex-shrink:0;}
.search-overlay-head input{
  flex:1;background:none;border:none;color:var(--c-text);font-size:1.02rem;min-width:0;
}
.search-overlay-head input:focus{outline:none;}
.search-overlay-head .icon-btn{width:36px;height:36px;flex-shrink:0;}
.search-overlay-results{max-height:60vh;overflow-y:auto;padding:10px;display:none;}
.search-overlay-results.show{display:block;}
.search-result-item{
  width:100%;display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--radius-s);
  transition:background var(--dur-s);text-align:start;
}
.search-result-item:hover{background:var(--c-surface);}
.search-result-thumb{
  width:48px;height:48px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:var(--c-surface);display:flex;align-items:center;justify-content:center;
}
.search-result-thumb img{width:100%;height:100%;object-fit:cover;}
.search-result-thumb svg{width:22px;height:22px;color:var(--c-accent);}
.search-result-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.search-result-title{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-result-price{font-size:.8rem;color:var(--c-accent);}
.search-overlay-empty{padding:24px 10px;text-align:center;color:var(--c-text-faint);font-size:.9rem;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;inset-inline:0;z-index:1000;
  height:var(--header-h);display:flex;align-items:center;
  transition:background var(--dur-s) var(--ease), height var(--dur-s) var(--ease), border-color var(--dur-s);
  border-bottom:1px solid transparent;
}
/* The blurred scrolled background lives on ::before (not on .site-header
   itself) so the header never carries a backdrop-filter. backdrop-filter
   on an element creates a new containing block for ITS OWN fixed-position
   descendants — since the mobile nav drawer (.main-nav.mobile-open) lives
   inside .site-header, that would trap the drawer inside the 68px header
   box instead of the viewport once scrolled. A pseudo-element has no
   descendants, so it can carry the blur with the exact same visual result
   without ever becoming a containing block for the drawer. */
.site-header.scrolled{
  height:68px;
  border-bottom-color:var(--c-border);
}
.site-header.scrolled::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:rgba(5,7,13,.72);
  backdrop-filter:blur(18px);
}
html[data-theme="light"] .site-header.scrolled::before{background:rgba(244,246,251,.8);}

.header-inner{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,32px);width:100%;}

.brand{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;font-family:var(--font-display);font-weight:700;font-size:1.52rem;flex-shrink:0;}
.brand-mark{
  width:86px;height:78px;
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  filter:drop-shadow(0 6px 14px rgba(50,167,255,.45));
  transition:width var(--dur-s) var(--ease), height var(--dur-s) var(--ease);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;min-width:0;}
.brand-name span{color:var(--c-accent);}
.brand-owner{
  font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.04em;
  color:var(--c-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;margin-top:3px;opacity:1;
}
.footer-brand .brand-mark{width:44px;height:44px;}
.site-header.scrolled .brand-mark{width:68px;height:62px;}

.main-nav{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;flex:1;
  gap:clamp(2px,0.4vw,10px);min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.main-nav::-webkit-scrollbar{display:none;height:0;}
.main-nav a{
  padding:10px clamp(6px,0.7vw,12px);border-radius:var(--radius-full);font-size:.92rem;color:var(--c-text-dim);
  transition:color var(--dur-s), background var(--dur-s);
  position:relative;white-space:nowrap;flex-shrink:0;
  display:flex;align-items:center;
}
.main-nav a:hover, .main-nav a.active{color:var(--c-text);background:var(--c-surface);}

/* English nav labels run noticeably wider than the Arabic ones (e.g. "Custom
   Requests", "Testimonials"), which was pushing the navbar past the
   available width and causing clipping/overlap on laptop and tablet sizes.
   Scoped to widths above the mobile hamburger breakpoint only, so the
   mobile menu is untouched. Applied to both languages since Arabic can
   also get tight once the logo + action icons are accounted for. */
@media (min-width:641px){
  .main-nav{gap:clamp(0px,0.3vw,6px);}
  .main-nav a{
    padding:10px clamp(3px,0.5vw,9px);
    font-size:clamp(.74rem,1vw,.88rem);
  }
}

/* Tablet range: the logo mark and the four action buttons (search, theme,
   language, cart) are fixed-width (flex-shrink:0) so they never get pushed
   underneath the centered nav links. On tablet widths there isn't quite
   enough room for their desktop sizing plus a full single-line nav, so we
   scale the logo and action controls down slightly here to reclaim space
   for the center group — without changing colors, branding or animations. */
@media (min-width:641px) and (max-width:1024px){
  .header-inner{gap:clamp(8px,1.6vw,20px);}
  .brand{gap:clamp(6px,1vw,10px);}
  .brand-mark,
  .site-header.scrolled .brand-mark{width:clamp(46px,7vw,64px);height:clamp(42px,6.4vw,58px);}
  .brand-name{font-size:clamp(1rem,2vw,1.3rem);}
  .brand-owner{font-size:clamp(.6rem,1.4vw,.7rem);max-width:26vw;}
  .header-actions{gap:clamp(4px,1vw,10px);}
  .header-actions .icon-btn{width:clamp(34px,4.2vw,40px);height:clamp(34px,4.2vw,40px);}
  .header-actions .icon-btn svg{width:clamp(15px,2vw,18px);height:clamp(15px,2vw,18px);}
  .lang-btn{padding:0 clamp(8px,1.4vw,14px);height:clamp(34px,4.2vw,40px);font-size:clamp(.76rem,1.4vw,.86rem);gap:6px;}
  .lang-btn svg{width:clamp(12px,1.6vw,14px);height:clamp(12px,1.6vw,14px);}
}

.header-actions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:clamp(8px,1.2vw,14px);flex-shrink:0;}

/* ---- Desktop English navbar only ----
   English labels run wider than Arabic ones ("Custom Requests",
   "Testimonials"), which can push the centered nav strip past the
   available width. This keeps the nav strip scrollable/non-wrapping on
   English without touching left/right group order:
     - html[lang="en"]  → never touches the Arabic navbar
     - min-width:1025px → never touches the tablet/mobile header layouts
   Group order itself is left to the natural document flow: LTR (English)
   places the brand first (left) and the action icons last (right); RTL
   (Arabic) already mirrors this correctly on its own via dir="rtl". */
@media (min-width:1025px){
  html[lang="en"] .main-nav{overflow-x:visible;}
  html[lang="en"] .main-nav a{white-space:nowrap;}
}

.icon-btn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-border);background:var(--c-surface);
  transition:border-color var(--dur-s), transform var(--dur-s);
}
.icon-btn:hover{border-color:var(--c-accent);transform:translateY(-2px);}
.icon-btn svg{width:18px;height:18px;}
.icon-sun{display:none;}
html[data-theme="light"] .icon-moon{display:none;}
html[data-theme="light"] .icon-sun{display:block;}

.cart-toggle{position:relative;}
.cart-badge{
  position:absolute;top:-4px;inset-inline-end:-4px;min-width:19px;height:19px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);
  background:var(--grad-brand);color:#fff;font-size:.68rem;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--c-bg);
}
.cart-badge[hidden]{display:none;}

.lang-switch{position:relative;}
.lang-btn{
  display:flex;align-items:center;gap:8px;
  padding:0 16px;height:42px;border-radius:var(--radius-full);
  border:1px solid var(--c-border);background:var(--c-surface);font-size:.88rem;font-weight:600;
}

.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--c-border);background:var(--c-surface);flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.nav-toggle span{width:18px;height:2px;background:var(--c-text);border-radius:2px;transition:transform var(--dur-s),opacity var(--dur-s);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  padding-top:var(--header-h);padding-bottom:40px;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 75%);
  opacity:.5;
}
.hero .container{max-width:1320px;}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:100%;}
.hero-copy{display:flex;flex-direction:column;gap:28px;}
.hero-inner .eyebrow{margin-bottom:0;}
.hero-slogan{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2vw,1.5rem);
  color:var(--c-accent);line-height:1.5;
  margin-block:clamp(2px,0.6vw,8px);
}
.hero-title{
  font-family:var(--font-display);font-weight:700;margin:0;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.08;letter-spacing:-.01em;
}
.hero-title .accent{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:0;color:var(--c-text-dim);font-size:1.08rem;max-width:52ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:0;}

.hero-scene{
  position:relative;height:460px;display:flex;align-items:center;justify-content:center;
  perspective:1200px;
}
.hero-logo-badge{
  position:absolute;width:64%;max-width:330px;left:50%;top:50%;
  transform:translate(-50%,-50%);
  opacity:.9;pointer-events:none;z-index:0;
  filter:drop-shadow(0 0 40px rgba(50,167,255,.35));
  animation:logoBreathe 5s ease-in-out infinite;
}
@keyframes logoBreathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}}
.hero-crystal-wrap{
  position:relative;z-index:1;width:240px;height:284px;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
}
.hero-crystal{
  width:196px;height:235px;position:relative;
  animation:crystalFloat 6s ease-in-out infinite, crystalSpin 14s linear infinite;
  filter:drop-shadow(0 0 26px rgba(50,167,255,.55)) drop-shadow(0 0 60px rgba(27,77,255,.3));
  transform-style:preserve-3d;
}
.hero-crystal svg{width:100%;height:100%;overflow:visible;}
@keyframes crystalSpin{
  from{transform:perspective(900px) rotateY(0deg) rotateX(6deg);}
  to{transform:perspective(900px) rotateY(360deg) rotateX(6deg);}
}
@keyframes crystalFloat{
  0%,100%{margin-top:0;}
  50%{margin-top:-14px;}
}
.hero-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(50,167,255,.35);
  box-shadow:0 0 24px -4px rgba(50,167,255,.35) inset;
}
.ring-a{
  width:304px;height:304px;
  transform:rotateX(72deg);
  animation:ringSpin 18s linear infinite;
}
.ring-b{
  width:250px;height:250px;
  border-color:rgba(27,77,255,.4);
  transform:rotateX(72deg) rotateZ(60deg);
  animation:ringSpin 12s linear infinite reverse;
}
@keyframes ringSpin{
  from{transform:rotateX(72deg) rotateZ(0deg);}
  to{transform:rotateX(72deg) rotateZ(360deg);}
}
.hero-orbit-dot{
  position:absolute;width:10px;height:10px;border-radius:50%;background:var(--c-accent);
  box-shadow:0 0 16px 4px rgba(50,167,255,.7);
  animation:orbit 8s linear infinite;
}
.hero-orbit-dot.d2{animation-duration:12s;animation-direction:reverse;background:var(--c-secondary);}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(174px) rotate(0deg);}
  to{transform:rotate(360deg) translateX(174px) rotate(-360deg);}
}

.scroll-cue{
  position:relative;z-index:2;margin-top:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--c-text-faint);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  flex-shrink:0;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--c-accent),transparent);animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;justify-content:center;}
.service-card{
  padding:34px 26px;position:relative;overflow:hidden;
  transition:transform var(--dur-m) var(--ease), border-color var(--dur-s);
}
.service-card:hover{transform:translateY(-8px);border-color:rgba(50,167,255,.4);}
.service-card::after{
  content:"";position:absolute;inset:0;opacity:0;background:var(--grad-glow);transition:opacity var(--dur-m);
}
.service-card:hover::after{opacity:1;}
.service-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);margin-bottom:22px;position:relative;z-index:1;
  box-shadow:0 10px 24px -8px rgba(50,167,255,.55);
}
.service-icon svg{width:26px;height:26px;color:#fff;}
.service-card h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:10px;position:relative;z-index:1;}
.service-card p{color:var(--c-text-dim);font-size:.92rem;position:relative;z-index:1;}

/* ==========================================================================
   Materials
   ========================================================================== */
.materials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.material-card{
  padding:30px 26px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--dur-m) var(--ease), border-color var(--dur-s);
}
.material-card:hover{transform:translateY(-8px);border-color:rgba(50,167,255,.4);}
.material-card::after{
  content:"";position:absolute;inset:0;opacity:0;background:var(--grad-glow);transition:opacity var(--dur-m);
}
.material-card:hover::after{opacity:1;}
.material-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);margin-bottom:20px;position:relative;z-index:1;flex-shrink:0;
  box-shadow:0 10px 24px -8px rgba(50,167,255,.55);
}
.material-icon svg{width:26px;height:26px;color:#fff;}
.material-name{font-family:var(--font-display);font-size:1.2rem;margin-bottom:8px;position:relative;z-index:1;}
.material-desc{color:var(--c-text-dim);font-size:.9rem;margin-bottom:18px;position:relative;z-index:1;}
.material-row{position:relative;z-index:1;margin-bottom:14px;}
.material-row:last-child{margin-bottom:0;}
.material-label{
  display:block;font-family:var(--font-display);font-weight:600;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);margin-bottom:6px;
}
.material-list{color:var(--c-text-dim);font-size:.86rem;line-height:1.7;white-space:pre-line;}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-search-row{margin-bottom:20px;}
.gallery-search{
  position:relative;max-width:460px;
}
.gallery-search svg{
  position:absolute;top:50%;inset-inline-start:16px;transform:translateY(-50%);
  width:18px;height:18px;color:var(--c-text-faint);pointer-events:none;
}
.gallery-search input{
  width:100%;padding:14px 16px 14px 46px;border-radius:var(--radius-full);
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);
  font-size:.92rem;transition:border-color var(--dur-s);
}
html[dir="rtl"] .gallery-search input{padding:14px 46px 14px 16px;}
html[dir="rtl"] .gallery-search svg{inset-inline-start:auto;inset-inline-end:16px;}
.gallery-search input:focus{outline:none;border-color:var(--c-accent);}

.gallery-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.filter-btn{
  padding:9px 20px;border-radius:var(--radius-full);border:1px solid var(--c-border);
  font-size:.85rem;color:var(--c-text-dim);transition:all var(--dur-s);
}
.filter-btn:hover{color:var(--c-text);}
.filter-btn.active{background:var(--grad-brand);color:#fff;border-color:transparent;}

.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.gallery-item{
  border-radius:var(--radius-m);overflow:hidden;position:relative;
  cursor:pointer;border:1px solid var(--c-border);
  transition:transform var(--dur-m) var(--ease), border-color var(--dur-s);
  display:flex;flex-direction:column;
}
.gallery-item:hover{transform:translateY(-6px);border-color:rgba(50,167,255,.4);}
.gallery-thumb{
  width:100%;aspect-ratio:1/1;
  background:
    radial-gradient(circle at 30% 20%, rgba(50,167,255,.35), transparent 55%),
    linear-gradient(155deg, var(--c-primary), #050914 70%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.gallery-thumb svg{width:38%;height:38%;opacity:.85;color:var(--c-accent);}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-m) var(--ease);}
.gallery-item:hover .gallery-thumb img{transform:scale(1.06);}
.gallery-card-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;gap:6px;}
.gallery-card-cat{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);font-weight:600;}
.gallery-card-title{font-family:var(--font-display);font-size:1rem;font-weight:600;}
.gallery-card-desc{font-size:.85rem;color:var(--c-text-dim);}
.gallery-card-price{margin-top:auto;padding-top:8px;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--c-text);}

.btn-add-cart{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;width:100%;padding:11px 16px;border-radius:var(--radius-full);
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  transition:border-color var(--dur-s), color var(--dur-s), transform var(--dur-s), background var(--dur-s);
}
.btn-add-cart svg{width:16px;height:16px;flex-shrink:0;}
.btn-add-cart:hover{border-color:var(--c-accent);color:var(--c-accent);transform:translateY(-2px);}
.btn-add-cart:active{transform:translateY(0);}

.gallery-empty{text-align:center;color:var(--c-text-faint);padding:60px 0;font-size:.95rem;}
.gallery-load-more-wrap{display:flex;justify-content:center;margin-top:42px;}
.gallery-load-more-wrap .btn[hidden]{display:none;}

/* ---- Gallery modal ---- */
.gallery-modal{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(2,3,8,.9);backdrop-filter:blur(6px);padding:24px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-s), visibility var(--dur-s);
}
.gallery-modal.open{opacity:1;visibility:visible;}
/* Light mode: the backdrop scrim must follow the theme too (same pattern
   used for the checkout modal), not stay permanently dark. */
html[data-theme="light"] .gallery-modal{
  background:rgba(11,16,32,.35);
}
.gallery-modal-box{
  position:relative;width:min(920px,94vw);max-height:88vh;overflow-y:auto;border-radius:var(--radius-l);padding:32px;
  /* Solid, theme-aware surface: the shared .glass class alone is too
     translucent here and lets the dark backdrop show through in Light
     Mode, so give the box its own opaque, theme-following background
     and shadow on top of it (same fix already applied to the checkout
     modal box). */
  background:var(--c-bg-soft);
  color:var(--c-text);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
html[data-theme="light"] .gallery-modal-box{
  box-shadow:0 30px 80px -20px rgba(15,23,42,.22);
}
/* Themed scrollbar for the modal's scrollable content (WebKit browsers). */
.gallery-modal-box::-webkit-scrollbar{width:8px;}
.gallery-modal-box::-webkit-scrollbar-track{background:transparent;}
.gallery-modal-box::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--radius-full);}
.gallery-modal-box::-webkit-scrollbar-thumb:hover{background:var(--c-text-faint);}
.gallery-modal-close{
  position:absolute;top:20px;inset-inline-end:20px;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:2;
  background:var(--c-surface);border:1px solid var(--c-border);
  color:var(--c-text);
}
.gallery-modal-close svg{width:18px;height:18px;}
.gm-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.gm-main-image{
  position:relative;
  width:100%;aspect-ratio:1/1;border-radius:var(--radius-m);overflow:hidden;
  background:linear-gradient(155deg, var(--c-primary), #050914 70%);
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;
}
.gm-main-content{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.gm-main-content img{width:100%;height:100%;object-fit:cover;}
.gm-main-content svg{width:36%;height:36%;color:var(--c-accent);}
.gm-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,14,26,.55);border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;z-index:3;
  transition:background .2s var(--dur-s), transform .2s var(--dur-s);
}
.gm-nav-btn:hover{ background:rgba(10,14,26,.8); }
.gm-nav-btn svg{ width:18px; height:18px; }
.gm-nav-prev{ inset-inline-start:10px; }
.gm-nav-next{ inset-inline-end:10px; }
.gm-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gm-thumbs img{
  width:64px;height:64px;object-fit:cover;border-radius:10px;cursor:pointer;
  border:2px solid transparent;transition:border-color var(--dur-s);
}
.gm-thumbs img.active,.gm-thumbs img:hover{border-color:var(--c-accent);}
.gm-category{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);font-weight:600;}
.gm-info h3{font-family:var(--font-display);font-size:1.5rem;margin:8px 0 12px;}
.gm-info p{color:var(--c-text-dim);font-size:.95rem;margin-bottom:20px;}
.gm-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.gm-spec{padding:14px;border-radius:var(--radius-s);background:var(--c-surface);border:1px solid var(--c-border);text-align:center;}
.gm-spec span{display:block;font-size:.72rem;color:var(--c-text-faint);margin-bottom:6px;}
.gm-spec strong{font-family:var(--font-display);font-size:.9rem;}
.gm-actions{display:flex;gap:12px;margin-top:28px;}
.gm-actions .btn{flex:1;}

/* ==========================================================================
   Upload page
   ========================================================================== */
.page-hero{padding:calc(var(--header-h) + 60px) 0 40px;}
.page-hero .eyebrow{margin-bottom:12px;}
.page-hero .section-title{max-width:16ch;}
.upload-order-section{padding-top:20px;}
.upload-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}

.dropzone{
  padding:52px 24px;border-radius:var(--radius-l);
  border:1.5px dashed var(--c-border);text-align:center;cursor:pointer;
  transition:border-color var(--dur-s), background var(--dur-s);
}
.dropzone.drag-over{border-color:var(--c-accent);background:rgba(50,167,255,.06);}
.dropzone-icon{
  width:64px;height:64px;border-radius:18px;margin-inline:auto;margin-bottom:20px;
  background:var(--grad-brand);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(50,167,255,.6);
}
.dropzone-icon svg{width:30px;height:30px;color:#fff;}
.dropzone h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:8px;}
.dropzone p{color:var(--c-text-faint);font-size:.85rem;margin-bottom:20px;}
#file-input{display:none;}

.file-list-title{font-family:var(--font-display);margin-top:28px;margin-bottom:12px;font-size:.95rem;}
.file-list{margin-top:22px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.file-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius-s);
}
.file-ico{width:38px;height:38px;border-radius:9px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.file-ico svg{width:18px;height:18px;color:#fff;}
.file-meta{flex:1;min-width:0;}
.file-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-sub{font-size:.75rem;color:var(--c-text-faint);}
.file-progress{height:4px;border-radius:2px;background:var(--c-border);margin-top:8px;overflow:hidden;}
.file-progress-bar{height:100%;width:0%;background:var(--grad-brand);border-radius:2px;transition:width .25s ease;}
.file-remove{width:30px;height:30px;border-radius:50%;flex-shrink:0;color:var(--c-text-faint);}
.file-remove:hover{color:#ff5470;background:rgba(255,84,112,.1);}
.file-empty{color:var(--c-text-faint);font-size:.85rem;text-align:center;padding:20px 0;}

.order-form{padding:34px;}
.order-form h3{font-family:var(--font-display);margin-bottom:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.82rem;color:var(--c-text-dim);margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%;padding:13px 16px;border-radius:var(--radius-s);
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);
  transition:border-color var(--dur-s);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--c-accent);}
.field textarea{resize:vertical;min-height:96px;}

/* Dark mode dropdown fix: native <option> popups ignore the page's
   translucent surface colors, so we give them solid colors explicitly.
   Scoped to dark mode only (default / non "light" theme) so light mode
   is untouched. */
html:not([data-theme="light"]) .field select{
  background-color:var(--c-bg-soft);
  color:var(--c-text);
}
html:not([data-theme="light"]) .field select option{
  background-color:var(--c-bg-soft);
  color:var(--c-text);
}
html:not([data-theme="light"]) .field select option:hover,
html:not([data-theme="light"]) .field select option:focus,
html:not([data-theme="light"]) .field select option:checked{
  background-color:var(--c-secondary);
  color:#ffffff;
}
.form-note{
  margin-top:14px;padding:14px 16px;border-radius:var(--radius-s);
  background:rgba(50,167,255,.08);border:1px solid rgba(50,167,255,.25);
  font-size:.85rem;color:var(--c-accent);display:none;white-space:pre-line;line-height:1.6;
}
.form-note.show{display:block;}
.form-note.error{
  background:rgba(255,84,112,.08);border-color:rgba(255,84,112,.3);color:#ff5470;
}
.form-note.success{
  background:rgba(46,125,50,.1);border-color:rgba(46,125,50,.35);color:#2e7d32;
}
.btn-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  display:inline-block;animation:spin .8s linear infinite;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.testi-card{padding:30px;}
.testi-stars{display:flex;gap:4px;margin-bottom:16px;color:#FFB020;}
.testi-stars svg{width:16px;height:16px;}
.testi-text{color:var(--c-text-dim);font-size:.94rem;margin-bottom:22px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;color:#fff;flex-shrink:0;
}
.testi-name{font-size:.9rem;font-weight:600;}
.testi-role{font-size:.78rem;color:var(--c-text-faint);}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{overflow:hidden;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;text-align:start;font-family:var(--font-display);font-weight:600;font-size:.98rem;
}
.faq-q svg{width:18px;height:18px;flex-shrink:0;transition:transform var(--dur-s);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-m) var(--ease);}
.faq-a p{padding:0 26px 22px;color:var(--c-text-dim);font-size:.9rem;max-width:65ch;}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.about-visual{
  aspect-ratio:4/5;border-radius:var(--radius-l);position:relative;overflow:hidden;
  background:linear-gradient(160deg, var(--c-primary), #050914);
  display:flex;align-items:center;justify-content:center;
}
.about-visual::before{content:"";position:absolute;inset:0;background:var(--grad-glow);}
.about-visual svg{width:36%;height:36%;color:var(--c-accent);position:relative;z-index:1;}
.about-logo{
  width:50%;height:50%;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 18px 34px rgba(50,167,255,.35));
}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;}
.about-card{padding:24px;}
.about-card h4{font-family:var(--font-display);font-size:1rem;margin-bottom:8px;color:var(--c-accent);}
.about-card p{font-size:.88rem;color:var(--c-text-dim);}
.about-story{grid-column:1/-1;margin-bottom:8px;color:var(--c-text-dim);}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.contact-form{padding:34px;}
.contact-info{padding:34px;display:flex;flex-direction:column;gap:22px;}
.contact-quick-actions{display:flex;flex-direction:column;gap:12px;}
.contact-quick-btn{display:flex;align-items:center;justify-content:center;gap:10px;}
.contact-channels{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.channel{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius-s);border:1px solid var(--c-border);transition:border-color var(--dur-s), transform var(--dur-s);}
.channel:hover{border-color:var(--c-accent);transform:translateY(-3px);}
.channel-ico{width:38px;height:38px;border-radius:10px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.channel-ico svg{width:18px;height:18px;color:#fff;}
.channel-label{font-size:.78rem;color:var(--c-text-faint);}
.channel-value{font-size:.88rem;font-weight:600;}
.map-frame{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--c-border);aspect-ratio:16/9;}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.3) invert(.92) contrast(.9);}
html[data-theme="light"] .map-frame iframe{filter:none;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--c-border);padding:80px 0 30px;background:var(--c-bg-soft);position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;}
.footer-brand p{color:var(--c-text-dim);font-size:.9rem;margin-top:16px;max-width:32ch;}
.footer-col h5{font-family:var(--font-display);font-size:.95rem;margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{color:var(--c-text-dim);font-size:.88rem;transition:color var(--dur-s);}
.footer-col a:hover{color:var(--c-accent);}
.social-row{display:flex;gap:10px;margin-top:18px;}
.newsletter-form{display:flex;gap:8px;margin-top:14px;}
.newsletter-form input{flex:1;padding:12px 14px;border-radius:var(--radius-s);border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);min-width:0;}
.newsletter-form button{padding:0 18px;border-radius:var(--radius-s);background:var(--grad-brand);color:#fff;font-weight:600;font-size:.85rem;flex-shrink:0;}
.newsletter-form button[disabled]{opacity:.5;cursor:not-allowed;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;border-top:1px solid var(--c-border);color:var(--c-text-faint);font-size:.82rem;}

.back-to-top{
  position:fixed;bottom:28px;inset-inline-end:28px;z-index:500;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--dur-s) var(--ease);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top svg{width:18px;height:18px;}

/* ==========================================================================
   Floating social panel (WhatsApp, Instagram, TikTok)
   ========================================================================== */
.social-float{
  position:fixed;bottom:28px;inset-inline-start:28px;z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.social-float-btn{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.5);
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), filter var(--dur-s) var(--ease);
}
.social-float-btn svg{width:26px;height:26px;}
.social-float-btn:hover{transform:translateY(-4px) scale(1.08);filter:brightness(1.08);}
.social-float-btn:active{transform:translateY(-1px) scale(1.02);}
.social-float-btn.whatsapp{background:#25D366;box-shadow:0 14px 30px -8px rgba(37,211,102,.7);}
.social-float-btn.instagram{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow:0 14px 30px -8px rgba(214,36,159,.6);
}
.social-float-btn.tiktok{background:#111318;box-shadow:0 14px 30px -8px rgba(0,0,0,.6);}

/* ==========================================================================
   Shopping cart
   ========================================================================== */
.cart-drawer{
  position:fixed;inset:0;z-index:2200;
  visibility:hidden;pointer-events:none;
}
.cart-drawer.open{visibility:visible;pointer-events:auto;}
.cart-backdrop{
  position:absolute;inset:0;background:rgba(2,3,8,.72);backdrop-filter:blur(4px);
  opacity:0;transition:opacity var(--dur-s) var(--ease);
}
.cart-drawer.open .cart-backdrop{opacity:1;}
.cart-panel{
  position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(420px,92vw);
  display:flex;flex-direction:column;border-radius:0;border-inline-start:1px solid var(--c-border);
  background:var(--c-bg);
  transform:translateX(100%);transition:transform var(--dur-m) var(--ease);
  padding:26px 22px;
}
html[dir="rtl"] .cart-panel{transform:translateX(-100%);}
.cart-drawer.open .cart-panel{transform:translateX(0);}
.cart-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.cart-panel-head h3{font-family:var(--font-display);font-size:1.2rem;}
.cart-close{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--c-border);background:var(--c-surface);
}
.cart-close svg{width:16px;height:16px;}

.cart-items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-inline-end:4px;}
.cart-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--c-text-faint);font-size:.92rem;}

.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;grid-template-rows:auto auto;column-gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--c-border);position:relative;
}
.cart-item-img{
  grid-row:1 / 3;width:64px;height:64px;border-radius:var(--radius-s);overflow:hidden;
  background:linear-gradient(155deg, var(--c-primary), #050914 70%);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cart-item-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-item-info{grid-column:2;grid-row:1;min-width:0;}
.cart-item-name{font-family:var(--font-display);font-weight:600;font-size:.92rem;margin-bottom:4px;}
.cart-item-unit{font-size:.76rem;color:var(--c-text-faint);margin-bottom:10px;}
.cart-item-qty{display:flex;align-items:center;gap:10px;}
.qty-btn{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;font-weight:700;
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);
  transition:border-color var(--dur-s), color var(--dur-s);
}
.qty-btn:hover{border-color:var(--c-accent);color:var(--c-accent);}
.qty-value{min-width:18px;text-align:center;font-size:.9rem;font-weight:600;}
.cart-item-total{
  grid-column:3;grid-row:1;font-family:var(--font-display);font-weight:700;font-size:.9rem;
  white-space:nowrap;text-align:end;
}
.cart-item-remove{
  grid-column:2 / 4;grid-row:2;justify-self:start;margin-top:8px;
  display:flex;align-items:center;gap:6px;color:var(--c-text-faint);font-size:.78rem;
  transition:color var(--dur-s);
}
.cart-item-remove svg{width:14px;height:14px;}
.cart-item-remove:hover{color:#e0576b;}

.cart-panel-footer{padding-top:18px;border-top:1px solid var(--c-border);display:flex;flex-direction:column;gap:14px;}
.cart-subtotal-row{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);}
.cart-subtotal-row span{color:var(--c-text-dim);font-size:.88rem;}
.cart-subtotal-row strong{font-size:1.15rem;}
.cart-checkout-btn{font-size:1rem;padding:17px 30px;}

.cart-toast{
  position:fixed;bottom:28px;inset-inline:0;margin-inline:auto;width:fit-content;z-index:3000;
  padding:14px 26px;border-radius:var(--radius-full);
  background:var(--c-surface-strong,var(--c-surface));border:1px solid var(--c-border);
  backdrop-filter:blur(16px);color:var(--c-text);font-weight:600;font-size:.9rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility var(--dur-s);
}
.cart-toast.show{opacity:1;visibility:visible;transform:translateY(0);}

/* ==========================================================================
   Checkout modal
   ========================================================================== */
.checkout-modal{
  position:fixed;inset:0;z-index:2400;display:flex;align-items:center;justify-content:center;
  background:rgba(2,3,8,.9);backdrop-filter:blur(6px);padding:24px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-s), visibility var(--dur-s);
}
.checkout-modal.open{opacity:1;visibility:visible;}
/* Light mode: the backdrop scrim itself must follow the theme too (same
   pattern already used for the search overlay), not stay permanently dark. */
html[data-theme="light"] .checkout-modal{
  background:rgba(11,16,32,.35);
}
.checkout-modal-box{
  position:relative;width:min(560px,94vw);max-height:90vh;overflow-y:auto;
  border-radius:var(--radius-l);padding:36px;
  /* Solid, theme-aware surface: the shared .glass class alone is too
     translucent here and lets the dark backdrop show through in Light
     Mode, so give the box its own opaque, theme-following background
     and shadow on top of it. */
  background:var(--c-bg-soft);
  color:var(--c-text);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
html[data-theme="light"] .checkout-modal-box{
  box-shadow:0 30px 80px -20px rgba(15,23,42,.22);
}
.checkout-modal-box::-webkit-scrollbar{width:8px;}
.checkout-modal-box::-webkit-scrollbar-track{background:transparent;}
.checkout-modal-box::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--radius-full);}
.checkout-modal-box::-webkit-scrollbar-thumb:hover{background:var(--c-text-faint);}
.checkout-modal-box h3{
  font-family:var(--font-display);font-size:1.3rem;margin-bottom:22px;padding-inline-end:36px;
}
.field-error{display:block;margin-top:6px;font-size:.78rem;color:#ff5470;min-height:1em;}

.checkout-summary{
  margin:20px 0 22px;padding:16px 18px;border-radius:var(--radius-s);
  background:var(--c-surface);border:1px solid var(--c-border);
}
.checkout-summary-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:.92rem;}
.checkout-summary-row span{color:var(--c-text-dim);}
.checkout-summary-row strong{font-family:var(--font-display);font-weight:700;}
.checkout-summary-hint{font-size:.8rem;color:var(--c-text-faint);padding-top:4px;}
.checkout-grand-total{border-top:1px solid var(--c-border);margin-top:8px;padding-top:14px;}
.checkout-grand-total span, .checkout-grand-total strong{font-size:1.08rem;color:var(--c-text);}

/* ==========================================================================
   Order Success screen (shown after "Complete Order" / "Submit order" once
   the order has been saved to Firestore). Follows the current theme and
   language, same as the checkout modal it sits on top of.
   ========================================================================== */
.thankyou-modal{
  position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;
  background:rgba(2,3,8,.9);backdrop-filter:blur(6px);padding:24px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-s) var(--ease), visibility var(--dur-s) var(--ease);
}
html[data-theme="light"] .thankyou-modal{
  background:rgba(11,16,32,.35);
}
.thankyou-modal.open{opacity:1;visibility:visible;}
.thankyou-modal-box{
  position:relative;width:min(420px,92vw);text-align:center;
  border-radius:var(--radius-l);padding:44px 36px;
  background:var(--c-bg-soft);color:var(--c-text);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.96);opacity:0;
  transition:transform var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease);
}
html[data-theme="light"] .thankyou-modal-box{
  box-shadow:0 30px 80px -20px rgba(15,23,42,.22);
}
.thankyou-modal.open .thankyou-modal-box{transform:translateY(0) scale(1);opacity:1;}
.thankyou-icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);box-shadow:0 14px 30px -10px rgba(50,167,255,.6);
}
.thankyou-icon svg{width:30px;height:30px;color:#fff;}
.thankyou-text{
  font-size:1rem;line-height:1.7;color:var(--c-text);white-space:pre-line;
}
.thankyou-order-number{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  padding:12px 22px;border-radius:var(--radius-full);
  background:var(--c-surface-strong);border:1px solid var(--c-border);
}
.thankyou-order-number-label{
  font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-faint);
}
.thankyou-order-number-value{
  font-family:var(--font-display);font-weight:700;font-size:1.08rem;letter-spacing:.02em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================================
   Reveal animations
   ========================================================================== */
[data-reveal]{opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal="up"]{transform:translateY(36px);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-36px);}
[data-reveal="right"]{transform:translateX(36px);}
[data-reveal].in-view{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .materials-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .testi-track{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
  .upload-layout{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .gm-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-scene{height:280px;order:-1;}
  .hero-crystal-wrap{transform:scale(.8);}
  .hero-cta{justify-content:center;}
  .form-row{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .section{padding:80px 0;}

  /* ---- Mobile header: keep logo, search, theme, language and cart all
     fully visible with no clipping/overlap, without touching Desktop/Tablet ---- */
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .main-nav.mobile-open{
    display:flex;position:fixed;top:0;inset-inline:0;bottom:0;
    height:100vh;height:100dvh;
    background:var(--c-bg);flex-direction:column;
    padding:calc(var(--header-h) + 30px) 24px 30px;gap:6px;z-index:900;
    overflow-y:auto;
  }
  .main-nav.mobile-open a{padding:16px 18px;font-size:1.05rem;}
  .container{padding-inline:clamp(12px,4vw,24px);}
  .header-inner{gap:clamp(8px,3vw,24px);}
  .brand{gap:clamp(4px,2vw,14px);min-width:0;}
  .brand-mark,
  .site-header.scrolled .brand-mark{width:clamp(36px,13vw,64px);height:clamp(33px,11.8vw,58px);}
  .brand-name{font-size:clamp(.8rem,3.6vw,1.05rem);white-space:nowrap;}
  .brand-owner{font-size:clamp(.56rem,2.2vw,.68rem);max-width:34vw;}
  .header-actions{gap:clamp(4px,1.5vw,10px);}
  .header-actions .icon-btn,
  .header-actions .nav-toggle,
  .header-actions .lang-btn{
    width:clamp(32px,8.5vw,42px);height:clamp(32px,8.5vw,42px);
    flex-shrink:0;
  }
  .header-actions .icon-btn svg{width:clamp(14px,3.6vw,18px);height:clamp(14px,3.6vw,18px);}
  .lang-btn{width:auto;padding:0 clamp(8px,2.6vw,12px);justify-content:center;gap:0;font-size:clamp(.62rem,2.6vw,.74rem);}

  .services-grid{grid-template-columns:1fr;}
  .materials-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .testi-track{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .contact-channels{grid-template-columns:1fr;}
  .gallery-modal-box{padding:20px;}
  .checkout-modal-box{padding:22px;}
  .gm-actions{flex-direction:column;}
  .social-float{bottom:20px;inset-inline-start:20px;gap:10px;}
  .social-float-btn{width:48px;height:48px;}
  .social-float-btn svg{width:22px;height:22px;}
  .back-to-top{bottom:20px;inset-inline-end:20px;}
}
@media (max-width:420px){
  .gallery-grid{grid-template-columns:1fr;}
  .cart-panel{width:100vw;padding:20px 16px;}
  .cart-item{grid-template-columns:56px 1fr auto;column-gap:10px;}
  .cart-item-img{width:56px;height:56px;}
  .cart-toast{width:calc(100vw - 32px);text-align:center;}
}