@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
@import url("coming-v2.css");
:root{--bg:#08090b;--surface:#111318;--text:#f5f1eb;--muted:#a9a19b;--border:#2b2d33;--accent:#ff6b18;--accent2:#e43d56;--shadow:0 14px 34px rgba(0,0,0,.28)}
body{background:var(--bg);color:var(--text);font-family:'Vazirmatn','Inter',Tahoma,Arial,sans-serif}
.coming-header{position:relative;top:auto;background:rgba(8,9,11,.96);border-bottom-color:var(--border)}
.coming-brand{color:var(--text)}.brand-mark{overflow:hidden}.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}.coming-nav-links>a,.product-menu>summary{color:var(--muted)}.coming-nav-links>a:hover,.product-menu[open]>summary,.product-menu>summary:hover{background:#1a1b20;color:var(--text)}
.product-menu-panel{background:#15171c;border-color:var(--border)}.product-menu-panel a{color:var(--muted)}.product-menu-panel a:hover{background:#202229;color:var(--text)}.menu-group{padding:4px 4px 8px}.menu-group+ .menu-group{border-top:1px solid var(--border);padding-top:10px}.menu-group>strong{display:block;color:var(--text);font-size:.78rem;padding:4px 8px 6px}.menu-group a{padding:7px 8px}
.coming-search input{background:#15171c;border-color:var(--border);color:var(--text)}.coming-account,.coming-cart{color:var(--muted)}.coming-cart{background:#15171c;border-color:var(--border)}
.coming-hero{background:radial-gradient(1100px 520px at 80% -10%,#542112 0%,transparent 62%),radial-gradient(900px 520px at 0% 110%,#3c1020 0%,transparent 60%),#050506}
.hero-visual{background:radial-gradient(circle at 50% 50%,#32160d 0%,#100b0a 43%,#050506 74%);border:1px solid rgba(255,144,73,.2)}.hero-lens-image{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;animation:heroImageFloat 9s ease-in-out infinite}.hero-glow{inset:12%;background:radial-gradient(circle,rgba(255,107,24,.3),transparent 70%)}.hero-orbit{border-color:rgba(255,158,70,.4)}.hero-orbit.orbit-two{border-color:rgba(228,61,86,.36)}@keyframes heroImageFloat{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.025) rotate(.7deg)}}
.coming-section{background:var(--bg)}.category-group{margin-top:38px}.category-group-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;border-right:3px solid var(--accent);padding:2px 14px 2px 0;margin-bottom:18px}.category-group-heading h3{margin:0;font-size:1.25rem}.category-group-heading .section-eyebrow{direction:ltr}
.category-tile,.camera-card,.contact-card{background:var(--surface);border-color:var(--border);box-shadow:none}.category-tile:hover{border-color:var(--accent);box-shadow:var(--shadow)}.tile-icon{background:linear-gradient(135deg,rgba(255,107,24,.18),rgba(228,61,86,.18))}.category-tile small,.section-heading p,.camera-body p,.contact-card small,.contact-card span{color:var(--muted)}.empty-state{border-color:var(--border);color:var(--muted)}.empty-state strong{color:var(--text)}.camera-image{background:#0b0c0f}.muted-btn{background:#25262b;color:var(--muted)}.coming-footer{background:#0e0f12;border-top-color:var(--border);color:var(--muted)}.footer-inner strong{color:var(--text)}.whatsapp-float svg{width:31px;height:31px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.product-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}.product-rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:2px 2px 14px;direction:ltr;scrollbar-color:var(--accent) #24252a;scrollbar-width:thin}.product-rail .camera-card{direction:rtl;flex:0 0 clamp(245px,28vw,315px);scroll-snap-align:start}.product-rail .empty-state{flex:1 0 100%;direction:rtl}.slider-arrow{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:#191a1f;color:var(--text);font-size:1.6rem;line-height:1;display:grid;place-items:center;transition:.2s}.slider-arrow:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.04)}
.connect-section{padding:64px 0 0}.connect-box{background:linear-gradient(135deg,rgba(255,107,24,.12),rgba(228,61,86,.1));border:1px solid var(--border);border-radius:24px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.connect-box h3{margin:0;font-size:1.2rem}.connect-box p{margin:2px 0 0;color:var(--muted);font-size:.9rem}.connect-links{display:flex;gap:16px;flex-wrap:wrap}.connect-link{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}.connect-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--accent);transition:.2s}.connect-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.connect-link:nth-child(2) .connect-icon svg{fill:currentColor;stroke:none}.connect-link:hover .connect-icon{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;transform:translateY(-3px);box-shadow:var(--shadow)}
@media(max-width:560px){.category-group-heading{align-items:start;flex-direction:column;gap:2px}.hero-visual{max-width:290px}.product-slider{gap:5px}.product-rail{gap:10px}.product-rail .camera-card{flex-basis:78vw}.slider-arrow{width:32px;height:32px;font-size:1.35rem}}
.product-menu-panel{z-index:70}
@media(max-width:900px){.product-menu-panel{top:calc(100% + 88px);right:auto;left:0}}
@media(max-width:560px){.product-menu-panel{top:calc(100% + 96px);left:-38px}}
.coming-nav{max-width:1240px}.hero-copy{min-width:0}.product-section{padding-top:54px}.product-section+.product-section{padding-top:38px}.product-slider{min-width:0}
@media(min-width:1101px){.hero-layout{grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);min-height:620px}.hero-visual{max-width:500px}.hero-copy h1{max-width:690px}.camera-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.connect-box{padding-inline:36px}}
@media(min-width:701px) and (max-width:1100px){.coming-nav{padding-inline:18px}.hero-layout{grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);gap:24px}.hero-visual{max-width:370px}.camera-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-rail .camera-card{flex-basis:290px}}
@media(max-width:700px){.coming-wrap{width:min(100% - 28px,620px)}.coming-header{background:rgba(8,9,11,.98)}.coming-nav{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"brand account cart" "nav nav nav" "search search search";gap:8px;padding:10px 0}.coming-brand{grid-area:brand;justify-self:start;font-size:1.12rem}.brand-mark{width:31px;height:31px}.coming-nav-links{grid-area:nav;order:initial;width:100%;margin:0;justify-content:center;overflow:visible;gap:2px}.coming-nav-links>a,.product-menu>summary{padding:6px 10px;font-size:.82rem}.coming-search{grid-area:search;order:initial;max-width:none;min-width:0;width:100%;margin:0}.coming-account{grid-area:account;width:40px;padding:0;justify-content:center}.coming-account span{display:none}.coming-cart{grid-area:cart}.product-menu-panel{top:calc(100% + 70px);left:50%;right:auto;transform:translateX(-50%);width:min(270px,calc(100vw - 36px))}.hero-layout{grid-template-columns:1fr;min-height:0;gap:28px;padding:42px 0 52px}.hero-visual{order:-1;width:min(78vw,320px);max-width:none}.hero-copy{text-align:center}.hero-copy h1{font-size:clamp(1.85rem,8vw,2.5rem);line-height:1.45}.hero-copy p{font-size:.9rem;margin-inline:auto;margin-bottom:22px}.hero-actions{justify-content:center}.coming-btn{flex:1 1 170px;justify-content:center;padding:11px 14px}.section-heading{gap:8px;margin-bottom:18px}.section-heading h2{font-size:1.3rem}.section-heading p{font-size:.82rem}.product-section{padding-top:42px}.product-slider{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}.product-rail{gap:10px;padding-bottom:10px}.product-rail .camera-card{flex-basis:calc(100vw - 92px);max-width:315px}.slider-arrow{width:30px;height:30px;font-size:1.25rem}.connect-section{padding-top:50px}.connect-box{padding:22px 18px;justify-content:center;text-align:center}.connect-links{justify-content:center;gap:10px}.connect-link{min-width:66px}.connect-icon{width:46px;height:46px}.footer-inner{justify-content:center;text-align:center;flex-direction:column;gap:8px}.coming-footer{padding:24px 0}.whatsapp-float{bottom:16px;left:16px;width:50px;height:50px}}
/* Keep the mobile dropdown below every wrapped header row so it never covers the cart. */
@media(max-width:700px){.product-menu-panel{top:calc(100% + 145px);left:50%;right:auto;transform:translateX(-50%);width:min(270px,calc(100vw - 36px))}.coming-account,.coming-cart{position:relative;z-index:80}}

/* Keep the medium desktop header on one deliberate line instead of letting flex wrap. */
@media(min-width:701px) and (max-width:1100px){
  .coming-nav{display:grid;grid-template-columns:auto minmax(150px,1fr) minmax(175px,260px) auto 40px;grid-template-areas:"brand nav search account cart";gap:8px;padding:10px 0;align-items:center;flex-wrap:nowrap}
  .coming-brand{grid-area:brand;font-size:1.08rem;gap:6px}
  .brand-mark{width:31px;height:31px}
  .coming-nav-links{grid-area:nav;min-width:0;margin:0;gap:1px;justify-content:center;white-space:nowrap}
  .coming-nav-links>a,.product-menu>summary{padding:6px 8px;font-size:.8rem}
  .coming-search{grid-area:search;min-width:0;max-width:none;margin:0}
  .coming-account{grid-area:account;padding:0 3px;font-size:.82rem}
  .coming-cart{grid-area:cart}
  .product-menu-panel{top:calc(100% + 12px);right:0;left:auto;transform:none}
}
@media(min-width:701px) and (max-width:820px){
  .coming-brand{font-size:.98rem}
  .coming-brand .brand-mark{width:28px;height:28px}
  .coming-nav-links>a,.product-menu>summary{padding-inline:5px;font-size:.74rem}
  .coming-account{font-size:0;width:34px;justify-content:center}
  .coming-account svg{width:19px;height:19px}
  .coming-search{min-width:150px}
}

/* Use one complete hero frame: the artwork stays whole and the copy sits inside it below. */
.hero-layout{display:block;min-height:0;padding:52px 0 72px}
.hero-visual{width:100%;max-width:940px;aspect-ratio:auto;min-height:0;margin:0 auto;border-radius:30px;background:linear-gradient(145deg,#32160d 0%,#0d0b0b 48%,#210c18 100%);display:flex;flex-direction:column;align-items:center;overflow:hidden}
.hero-lens-image{width:min(100%,820px);height:auto;aspect-ratio:1/1;object-fit:contain;flex:none;background:#050506}
.hero-copy{position:relative;z-index:3;width:min(760px,calc(100% - 32px));margin-top:-12px;padding:24px 28px 32px;text-align:center;background:rgba(8,9,11,.78);border:1px solid rgba(255,144,73,.25);border-radius:24px;backdrop-filter:blur(10px)}
.hero-copy h1{margin:12px 0 10px;max-width:none}.hero-copy p{max-width:640px;margin:0 auto 22px}.hero-actions{justify-content:center}
.whatsapp-float{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 12px 30px rgba(255,107,24,.25)}.whatsapp-float:hover{background:linear-gradient(135deg,#ff8738,#ee5369)}
@media(max-width:700px){.hero-layout{padding:28px 0 52px}.hero-visual{border-radius:24px}.hero-lens-image{width:100%;max-height:none}.hero-copy{width:calc(100% - 20px);padding:20px 16px 24px;margin-top:-8px;border-radius:20px}.hero-copy h1{font-size:clamp(1.7rem,8vw,2.35rem)}.hero-copy p{font-size:.88rem}.hero-actions{gap:8px}.coming-btn{flex:1 1 150px}}