/* ===================== TOKENS ===================== */
:root{
  --ink:#0e0d0c;
  --ink-soft:#4a463c;
  --paper:#faf7f0;
  --paper-alt:#f1ece1;
  --card:#ffffff;
  --gold:#fbbe03;
  --gold-deep:#d9a400;
  --red:#da0011;
  --line:#e7e0d0;
  --shadow: 0 18px 40px -22px rgba(24,22,15,.35);
  --radius: 14px;
  --font-ar:'Tajawal', sans-serif;
  --font-brand:'Poppins', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-ar);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.icon-sm{width:18px;height:18px;}

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

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:15.5px;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{box-shadow:var(--shadow);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-block{width:100%;}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(250,247,240,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px;}
.brand-logo{height:66px;width:auto;}
.main-nav{display:flex;gap:28px;font-weight:500;}
.main-nav a{position:relative;padding:6px 0;}
.main-nav a:hover{color:var(--gold-deep);}
.header-actions{display:flex;align-items:center;gap:12px;}
.wa-pill{
  display:flex;align-items:center;gap:8px;background:#1fae4c;color:#fff;
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;
}
.cart-btn{
  position:relative;background:var(--ink);color:var(--paper);border:none;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.cart-count{
  position:absolute;top:-4px;left:-4px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);}

/* ===================== HERO ===================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  padding:72px 0 56px;
}
.hero-hex{
  position:absolute;width:340px;height:392px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  opacity:.14;
}
.hex-a{background:var(--gold); top:-140px; left:-90px;}
.hex-b{background:var(--red); bottom:-180px; left:18%;}
.hex-c{background:var(--gold); bottom:-120px; right:-120px; opacity:.1;}
.hero-inner{position:relative;display:flex;align-items:center;gap:56px;}
.hero-copy{flex:1.1;}
.eyebrow{color:var(--gold);font-weight:700;font-size:14.5px;margin:0 0 14px;}
.hero h1{
  font-size:clamp(30px, 4.2vw, 46px);
  line-height:1.25;margin:0 0 18px;font-weight:800;
}
.hero-sub{color:#d9d5c8;font-size:16.5px;max-width:52ch;margin:0 0 30px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
.hero .btn-ghost{border-color:#ffffff55;color:var(--paper);}
.hero .btn-ghost:hover{background:var(--paper);color:var(--ink);}
.hero .btn-primary{background:var(--gold);color:var(--ink);}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero-stats li{display:flex;flex-direction:column;gap:4px;}
.hero-stats strong{font-size:20px;color:#fff;}
.hero-stats span{font-size:13px;color:#b9b4a5;}
.hero-visual{flex:1;display:flex;justify-content:center;}
.printer-img{
  border-radius:20px;max-width:360px;width:100%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}

/* ===================== GALLERY (swipeable carousel) ===================== */
.gallery{padding:64px 0;}
.gallery-static{display:flex;justify-content:center;}
.gallery-static img{
  width:100%;max-width:640px;height:420px;object-fit:cover;border-radius:18px;
  box-shadow:var(--shadow);
}
@media(max-width:640px){
  .gallery-static img{height:280px;}
}

/* ===================== WHY ===================== */
.why{padding:56px 0;border-bottom:1px solid var(--line);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.why-item{text-align:center;padding:0 8px;}
.why-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;background:var(--paper-alt);
  color:var(--gold-deep);margin-bottom:14px;
}
.why-icon svg{width:26px;height:26px;}
.why-item h3{font-size:16.5px;margin:0 0 6px;}
.why-item p{font-size:14px;color:var(--ink-soft);margin:0;}

/* ===================== SECTION HEAD ===================== */
.section-head{text-align:center;max-width:560px;margin:0 auto 40px;}
.section-head h2{font-size:clamp(24px,3vw,32px);margin:8px 0 0;font-weight:800;}
.more-head{margin-top:70px;}

/* ===================== PRODUCTS ===================== */
.products{padding:80px 0;}

.material-section{margin-bottom:56px;}
.material-head{
  display:flex;align-items:baseline;gap:12px;margin-bottom:20px;
  border-bottom:2px solid var(--accent,var(--gold));padding-bottom:10px;
}
.material-head h3{margin:0;font-size:21px;}
.material-head .material-tag{font-size:12.5px;font-weight:700;color:var(--accent,var(--gold-deep));}
.material-head .material-price{margin-inline-start:auto;font-size:14.5px;font-weight:700;color:var(--ink-soft);}

.color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(min-width:640px){.color-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:980px){.color-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1180px){.color-grid{grid-template-columns:repeat(6,1fr);}}

.color-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:box-shadow .2s ease, transform .2s ease;position:relative;
}
.color-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.color-photo{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;}
.color-photo img{max-height:100%;max-width:100%;object-fit:contain;}
.color-info{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 12px;gap:6px;}
.color-name{font-size:13px;font-weight:700;line-height:1.3;}
.color-price{font-size:11.5px;color:var(--ink-soft);display:block;margin-top:1px;}
.mini-cart-btn{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease, transform .15s ease;
}
.mini-cart-btn:hover{background:var(--gold-deep);}
.mini-cart-btn:active{transform:scale(.9);}
.mini-cart-btn svg{width:15px;height:15px;}
.mini-cart-badge{
  position:absolute;top:8px;inset-inline-start:8px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:999px;
  display:none;align-items:center;justify-content:center;padding:0 4px;
}
.mini-cart-badge.show{display:flex;}

/* accessory row (e.g. reusable spool) */
.accessory-card{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--paper-alt);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;
}
.accessory-card .acc-info{font-size:13.5px;color:var(--ink-soft);}
.accessory-card strong{color:var(--ink);}

/* secondary / matte grid */
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.more-card{
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.more-card h4{margin:0;font-size:16px;}
.more-card .more-price{font-size:13px;color:var(--ink-soft);font-weight:700;}
.more-card .color-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;}
.matte-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;}
.matte-dot{width:30px;height:30px;border-radius:50%;outline:1px solid var(--line);border:2px solid #fff;position:relative;cursor:pointer;}
.matte-dot .mini-cart-badge{top:-6px;inset-inline-start:auto;inset-inline-end:-6px;}
.matte-swatch span{font-size:11px;color:var(--ink-soft);}

/* ===================== HOW ===================== */
.how{background:var(--paper-alt);padding:80px 0;}
.how-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
@media(min-width:900px){.how-steps{grid-template-columns:repeat(4,1fr);}}
.how-step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;}
.how-num{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--ink);color:var(--gold);font-weight:800;margin-bottom:14px;
}
.how-step h3{font-size:16px;margin:0 0 6px;}
.how-step p{font-size:13.5px;color:var(--ink-soft);margin:0;}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--ink);color:#d9d5c8;padding:60px 0 0;margin-top:20px;}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #ffffff1f;}
.footer-logo{height:56px;margin-bottom:14px;border-radius:10px;background:var(--paper);padding:6px 10px;}
.footer-brand p{font-size:13.5px;max-width:36ch;color:#b9b4a5;}
.footer-col h4{color:#fff;font-size:15px;margin:0 0 14px;}
.footer-col a,.footer-col p{display:block;font-size:13.5px;margin-bottom:10px;color:#b9b4a5;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{padding:20px 24px;font-size:12.5px;color:#8b8676;text-align:center;}

/* ===================== CART DRAWER ===================== */
.overlay{
  position:fixed;inset:0;background:rgba(24,22,15,.5);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:50;
}
.overlay.show{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;bottom:0;left:0;width:min(400px,90vw);background:var(--paper);
  z-index:60;transform:translateX(-100%);transition:transform .3s ease;
  display:flex;flex-direction:column;box-shadow:20px 0 50px rgba(0,0,0,.2);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line);}
.cart-head h3{margin:0;font-size:18px;}
.icon-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink-soft);}
.cart-items{flex:1;overflow-y:auto;padding:14px 22px;display:flex;flex-direction:column;gap:14px;}
.cart-empty{padding:40px 22px;text-align:center;color:var(--ink-soft);font-size:14px;}
.cart-line{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;}
.cart-line img{width:52px;height:52px;object-fit:contain;background:var(--paper-alt);border-radius:8px;padding:4px;}
.cart-line-info{flex:1;}
.cart-line-info strong{font-size:13.5px;display:block;}
.cart-line-info span{font-size:12px;color:var(--ink-soft);}
.cart-line-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:13px;}
.cart-footer{border-top:1px solid var(--line);padding:18px 22px 22px;}
.cart-total-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--ink-soft);}
.cart-total-row.cart-total-final{font-size:16.5px;color:var(--ink);border-top:1px solid var(--line);padding-top:10px;margin-top:6px;margin-bottom:16px;}
.cart-note{font-size:11.5px;color:var(--ink-soft);text-align:center;margin:10px 0 0;}

/* ===================== MODAL ===================== */
.modal{
  position:fixed;inset:0;background:rgba(24,22,15,.55);display:flex;align-items:center;justify-content:center;
  z-index:70;opacity:0;pointer-events:none;transition:opacity .25s ease;padding:20px;
}
.modal.open{opacity:1;pointer-events:auto;}
.modal-card{background:#fff;border-radius:18px;padding:26px;width:min(420px,100%);max-height:88vh;overflow-y:auto;}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.modal-head h3{margin:0;font-size:18px;}
#checkoutForm{display:flex;flex-direction:column;gap:14px;}
#checkoutForm label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-soft);}
#checkoutForm input,#checkoutForm textarea{
  font-family:inherit;padding:11px 13px;border-radius:10px;border:1px solid var(--line);font-size:14.5px;
  color:var(--ink);resize:vertical;
}
#checkoutForm input:focus,#checkoutForm textarea:focus{outline:2px solid var(--gold);border-color:transparent;}

/* ===================== TOAST ===================== */
.toast{
  position:fixed;bottom:26px;right:26px;background:var(--ink);color:var(--paper);
  padding:14px 20px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow);
  transform:translateY(140%);transition:transform .3s ease;z-index:80;max-width:280px;
}
.toast.show{transform:translateY(0);}

/* ===================== RESPONSIVE ===================== */
@media(max-width:860px){
  .footer-inner{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .hero-inner{flex-direction:column;}
  .main-nav{
    position:fixed;top:76px;right:0;left:0;background:var(--paper);
    flex-direction:column;padding:18px 24px;gap:0;border-bottom:1px solid var(--line);
    transform:translateY(-140%);transition:transform .25s ease;z-index:39;
  }
  .main-nav.open{transform:translateY(0);}
  .main-nav a{padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-toggle{display:flex;}
  .wa-pill span{display:none;}
}
@media(max-width:520px){
  .product-grid{grid-template-columns:1fr 1fr;}
  .hero-stats{gap:22px;}
}