
:root{--ink:#142b4a;--muted:#61748e;--green:#1763c6;--lime:#b9ddff;--bg:#f5f8fd}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tahoma,Arial,sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}button{cursor:pointer}header{max-width:1240px;margin:auto;padding:25px 32px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #dbe5f2}.brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700}.logo{width:42px;height:42px;border-radius:13px;background:var(--green);color:var(--lime);display:grid;place-items:center;font-size:29px}nav{display:flex;gap:32px;font-size:14px}.nav-cta{font-size:13px;border:1px solid #c9d9ee;border-radius:30px;padding:9px 20px}main{max-width:1240px;margin:auto;padding:0 32px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px;padding:70px 0 80px}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:.4px;color:var(--green)}h1{font-size:clamp(35px,4.4vw,62px);line-height:1.4;letter-spacing:-2px;margin:18px 0}h2{font-size:28px;line-height:1.5;margin:10px 0}p{color:var(--muted)}.hero p{max-width:460px;font-size:16px;margin:20px 0 30px}.button{background:var(--green);color:white;border:none;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:14px 24px;font-weight:bold;font-size:14px}.hero-notes{display:flex;gap:24px;margin-top:27px;font-size:11px;color:var(--muted)}.hero-art{height:390px;position:relative;background:radial-gradient(ellipse at 50% 45%,#c8e4ff,#eaf3ff 65%);border-radius:35% 35% 15% 15%;overflow:hidden;display:grid;place-items:center}.orbit{position:absolute;width:330px;height:330px;border:1px solid #b5d4f4;border-radius:50%}.orbit:after{content:'';position:absolute;inset:25px;border:1px solid #b5d4f4;border-radius:50%}.art-label{position:absolute;top:22px;font-size:11px;color:#54759b}.receiver{width:295px;transform:rotate(-11deg);z-index:1;filter:drop-shadow(0 32px 15px #163f7333)}.receiver-top{height:112px;background:linear-gradient(145deg,#304762,#111f34);border-radius:15px 15px 3px 3px;color:#9cb1cc;font-size:12px;display:flex;justify-content:space-between;align-items:center;padding:30px;letter-spacing:3px;transform:skewX(10deg)}.receiver-top span{color:#e1edff;font-size:20px;letter-spacing:0}.receiver-front{height:43px;background:#0b1527;border-radius:0 0 10px 10px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#6bc4ff;font-size:12px;position:relative;right:10px}.receiver-front i{width:7px;height:7px;border-radius:50%;background:#76d3ff}.remote{position:absolute;left:35px;top:90px;transform:rotate(16deg);background:linear-gradient(90deg,#122238,#344963);border:2px solid #4b6583;border-radius:20px;width:44px;height:210px;text-align:center;color:#acbfd7;line-height:1.8;padding:10px 0;z-index:2}.float-card{position:absolute;right:25px;bottom:35px;background:#ffffffed;box-shadow:0 10px 35px #18467d10;border-radius:13px;display:flex;align-items:center;gap:15px;padding:12px 18px;font-size:12px;z-index:3}.float-card>span{font-size:30px;color:var(--green)}.float-card small{color:var(--muted);font-size:10px}.art-caption{position:absolute;bottom:10px;left:15px;font-size:9px;color:#627d9e}.products-section{padding:30px 0 65px;border-top:1px solid #d9e4f3}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-heading p{font-size:13px}.filters{display:flex;gap:8px;margin:25px 0 12px}button,.filters button{border:1px solid #ccdbee;border-radius:8px;padding:9px 18px;background:transparent;color:var(--ink)}.filters .active{background:var(--green);color:white;border-color:var(--green)}.notice{font-size:11px;margin-bottom:22px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{display:flex;flex-direction:column;min-width:0;border:1px solid #dce6f3;border-radius:16px;overflow:hidden;background:white}.product-art{height:190px;flex:0 0 190px;min-width:0;min-height:0;overflow:hidden;background:#edf4fc;position:relative;display:grid;place-items:center}.product-art.subscription{background:#e5effb}.badge{position:absolute;right:12px;top:12px;font-size:10px;background:#f5faff;padding:3px 9px;border-radius:5px;z-index:1}.product-art img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;padding:16px}.mini-receiver{width:160px;height:70px;background:linear-gradient(145deg,#354e6b,#102137);border-bottom:14px solid #091525;border-radius:9px;transform:rotate(-9deg);box-shadow:0 17px 16px #163f7320;display:flex;align-items:center;justify-content:space-around;color:#b9cfea;font-size:12px}.mini-receiver b{color:#77ccff}.subscription-icon{width:102px;height:117px;transform:rotate(-9deg);background:var(--green);border-radius:13px;color:var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:45px;box-shadow:8px 8px 0 #b6d3f3}.subscription-icon small{font-size:9px;color:white}.card-body{position:relative;display:flex;flex:1;flex-direction:column;min-width:0;padding:20px 17px;background:var(--surface,#fff);overflow-wrap:anywhere}.card-body>small{font-size:10px;color:var(--green)}h3{font-size:17px;margin:5px 0 9px}.card-body p{font-size:12px;min-height:62px;margin:0 0 15px}.card-bottom{margin-top:auto;border-top:1px solid #e8eff8;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.card-bottom strong{font-size:13px}.order{color:var(--green);font-size:11px;font-weight:bold}.contact{text-align:center;padding:42px 20px;background:#e7f1ff;border-radius:20px;margin-bottom:50px}.contact p{font-size:13px}.socials{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:25px}.socials a{background:white;border-radius:8px;padding:9px 22px;font-size:13px}footer{max-width:1240px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #d9e4f3}footer p,footer>a:last-child{font-size:11px}footer .brand{font-size:18px}footer .logo{width:32px;height:32px;font-size:23px}[hidden]{display:none!important}.admin main{max-width:1100px;padding-bottom:60px}.panel{background:white;border:1px solid #dbe5f2;padding:28px;border-radius:16px;margin:22px 0}.login{max-width:440px;margin:60px auto}.login h1{font-size:32px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:12px;color:var(--muted)}input,select{display:block;width:100%;border:1px solid #c9d9ee;background:#f8faff;border-radius:7px;padding:11px;margin:7px 0 14px;color:var(--ink)}input[data-key=image]{direction:ltr}.product-edit{border-top:1px solid #dce6f3;margin-top:20px;padding-top:20px}.delete{color:#ad3a2e}.save-bar{display:flex;align-items:center;justify-content:space-between;position:sticky;bottom:12px;background:#e5efff;border:1px solid #bfd4ef;border-radius:12px;padding:16px;font-size:12px;gap:15px}#message{background:#eaf2ff;padding:12px;border-radius:8px}#message:empty{display:none}.admin h1{font-size:34px}.login button{width:100%;margin-top:12px}.button:hover,.order:hover{filter:brightness(1.15)}@media(max-width:950px){.grid{grid-template-columns:repeat(2,1fr)}.hero{gap:25px}.receiver{width:230px}.remote{left:15px}.hero-art{height:340px}nav{gap:14px}}@media(max-width:640px){header{padding:18px 20px}.brand{font-size:20px}.nav-cta{display:none}nav{font-size:12px}main{padding:0 20px}.hero{grid-template-columns:1fr;padding:35px 0;gap:30px}.hero h1{font-size:42px}.hero-art{height:310px}.receiver{width:260px}.remote{left:35px}.section-heading{align-items:start;flex-direction:column;gap:0}h2{font-size:23px}.grid{gap:12px}.product-art{height:150px;flex-basis:150px}.mini-receiver{width:120px}.card-body{padding:13px}.card-body h3{font-size:15px}.card-bottom{align-items:start;flex-direction:column}.filters button{padding:8px 12px;font-size:12px}.card-body p{min-height:80px}.form-grid{grid-template-columns:1fr}.panel{padding:20px}.save-bar{flex-direction:column}footer{flex-wrap:wrap;padding:20px}footer p{order:3;width:100%;margin:0}.hero-notes{gap:18px}}

.brand .brand-image{width:64px;height:64px;object-fit:contain;border-radius:50%;background:#07111b;border:2px solid #c59a3c}footer .brand .brand-image{width:48px;height:48px}@media(max-width:640px){.brand .brand-image{width:48px;height:48px}.admin header .brand{font-size:16px}}

:root{--surface:#ffffff;--radius:16px}.card,.panel,.socials a,.float-card{background:var(--surface)}.card,.panel,.contact,.product-art,.button{border-radius:var(--radius)}.upload-preview{display:block;max-width:160px;max-height:160px;object-fit:contain;margin:12px 0}.upload-preview[hidden]{display:none}.custom-hero-image{width:100%;height:100%;object-fit:contain}.form-grid input[type=color]{height:48px;padding:4px;cursor:pointer}.form-grid input[type=checkbox]{width:24px;height:24px}.brand .brand-image{border-color:var(--lime)}
.hero-art{background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--green) 23%,var(--surface)),color-mix(in srgb,var(--green) 7%,var(--bg)) 70%)}.contact,.save-bar{background:color-mix(in srgb,var(--green) 9%,var(--surface))}.product-art{background:color-mix(in srgb,var(--green) 6%,var(--surface))}.product-art.subscription{background:color-mix(in srgb,var(--green) 11%,var(--surface))}.badge{background:var(--surface);color:var(--green)}.button{box-shadow:0 7px 20px color-mix(in srgb,var(--green) 18%,transparent)}.orbit,.orbit:after{border-color:color-mix(in srgb,var(--green) 24%,transparent)}.filters button:hover,.nav-cta:hover{border-color:var(--green)}
.socials{gap:14px}.socials .social-link{display:flex;align-items:center;gap:13px;min-width:190px;text-align:right;padding:14px 17px;border:1px solid color-mix(in srgb,var(--green) 13%,transparent);border-radius:15px;box-shadow:0 5px 16px #15396b06;transition:transform .2s,box-shadow .2s,border-color .2s}.social-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:13px;color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--surface))}.social-icon svg{width:25px;height:25px}.social-label{font-weight:bold;font-size:14px;color:var(--ink);line-height:1.7}.social-label small{display:block;font-weight:normal;font-size:10px;color:var(--muted)}.social-arrow{margin-right:auto;color:var(--green);font-size:19px}.socials .social-link:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 10px 24px color-mix(in srgb,var(--green) 12%,transparent)}.social-link:focus-visible{outline:3px solid var(--green)}.social-whatsapp:hover .social-icon{background:#e5f7ed;color:#147d44}.social-telegram:hover .social-icon{background:#e4f3ff;color:#087cae}.social-facebook:hover .social-icon{background:#e8efff;color:#1864d8}@media(max-width:640px){.socials{gap:10px}.socials .social-link{width:100%;max-width:340px}}@media(prefers-reduced-motion:reduce){.socials .social-link{transition:none}.socials .social-link:hover{transform:none}}

.theme-picker{grid-column:1/-1}.theme-preview{border:1px solid #cfdaea;border-radius:14px;padding:20px;margin:10px 0;max-width:500px}.theme-preview p{font-size:12px;margin:7px 0}.theme-picker>small{color:var(--muted)}.theme-swatches{display:flex;gap:8px;margin-bottom:12px}.theme-swatches i{width:38px;height:38px;display:block;border-radius:50%;border:1px solid #ffffff55}.preview-blue{background:#f5f8fd;color:#142b4a}.preview-blue p{color:#61748e}.preview-blue .theme-swatches i:nth-child(1){background:#1763c6}.preview-blue .theme-swatches i:nth-child(2){background:#b9ddff}.preview-blue .theme-swatches i:nth-child(3){background:#ffffff}.preview-navy{background:#f4f6fa;color:#182a46}.preview-navy p{color:#63728b}.preview-navy .theme-swatches i:nth-child(1){background:#243b64}.preview-navy .theme-swatches i:nth-child(2){background:#e8c879}.preview-navy .theme-swatches i:nth-child(3){background:#ffffff}.preview-teal{background:#f1f9f9;color:#133b40}.preview-teal p{color:#53767b}.preview-teal .theme-swatches i:nth-child(1){background:#087b83}.preview-teal .theme-swatches i:nth-child(2){background:#a9e7e2}.preview-teal .theme-swatches i:nth-child(3){background:#ffffff}.preview-violet{background:#f8f5fc;color:#302047}.preview-violet p{color:#77658d}.preview-violet .theme-swatches i:nth-child(1){background:#7044b4}.preview-violet .theme-swatches i:nth-child(2){background:#dccbfa}.preview-violet .theme-swatches i:nth-child(3){background:#ffffff}.preview-gold{background:#fbf8f1;color:#3d2c19}.preview-gold p{color:#7c6c54}.preview-gold .theme-swatches i:nth-child(1){background:#87601b}.preview-gold .theme-swatches i:nth-child(2){background:#efd49c}.preview-gold .theme-swatches i:nth-child(3){background:#ffffff}
/* Uploaded product images retain their natural ratio and expand their frame. */
.product-art:has(>img){display:block;height:auto;min-height:0;flex:0 0 auto;overflow:hidden}.product-art>img{position:static;inset:auto;width:100%;height:auto;max-width:100%;max-height:none;display:block;padding:0;object-fit:contain}.product-art:has(>img) .badge{z-index:1}

/* Keep a visible frame around tall photos without limiting their height. */
.card>.product-art:has(>img){margin:10px 10px 0;padding:6px;border:1px solid color-mix(in srgb,var(--green) 18%,var(--surface));border-radius:max(8px,calc(var(--radius) - 4px));isolation:isolate;overflow:hidden;box-sizing:border-box}
.card>.product-art>img{width:100%;height:auto;max-height:none;margin:0;border-radius:max(4px,calc(var(--radius) - 9px))}
.card>.product-art:has(>img) .badge{top:12px;right:12px}

.card-bottom .order{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 13px;border:1px solid #15803d;border-radius:9px;background:#15803d;color:#ffffff;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;box-shadow:0 3px 8px #15803d1a;transition:background .18s,box-shadow .18s}
.card-bottom .order:hover{background:#166534;border-color:#166534;filter:none;box-shadow:0 5px 12px #15803d29}.card-bottom .order:focus-visible{outline:3px solid #86efac;outline-offset:3px}@media(max-width:640px){.card-bottom .order{width:100%;margin-top:3px}}@media(prefers-reduced-motion:reduce){.card-bottom .order{transition:none}}

@font-face{font-family:Tajawal;src:url('/fonts/Tajawal-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Tajawal;src:url('/fonts/Tajawal-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}body{font-family:Tajawal,Tahoma,Arial,sans-serif}h1{letter-spacing:0}

.product-details{display:block;margin-bottom:15px}.product-details>small{font-size:10px;color:var(--green)}.product-details:hover h3,.view-details{color:var(--green)}.view-details{display:inline-block;font-size:11px;font-weight:700;margin-top:6px}.product-details p{margin-bottom:0}.product-art:focus-visible,.product-details:focus-visible{outline:3px solid var(--green);outline-offset:-3px}.product-page{padding-top:26px;padding-bottom:60px;min-height:70vh}.back-link{display:inline-block;color:var(--green);font-size:14px;margin-bottom:26px}.product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}.product-photo{border:1px solid color-mix(in srgb,var(--green) 18%,var(--surface));border-radius:var(--radius);padding:10px;background:var(--surface);overflow:hidden}.product-photo img{display:block;width:100%;height:auto;border-radius:max(4px,calc(var(--radius) - 8px))}.product-info{padding:12px 0}.product-info h1{font-size:36px;letter-spacing:0;margin:14px 0}.detail-badge{display:inline-block;background:var(--lime);color:var(--ink);font-size:11px;border-radius:6px;padding:3px 10px;margin-right:12px}.product-summary{white-space:pre-wrap;overflow-wrap:anywhere}.detail-price{display:block;font-size:28px;color:var(--green);margin:22px 0}.full-details{border-top:1px solid #dbe5f2;padding-top:20px;margin:24px 0}.full-details h2{font-size:21px}.full-details p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}.detail-order{display:flex;align-items:center;justify-content:center;background:#15803d;color:white;padding:15px 24px;border-radius:10px;font-size:16px;font-weight:bold}.detail-order:hover{background:#166534;filter:none}.more-products{display:block;text-align:center;margin-top:18px;font-size:13px;color:var(--green)}.product-placeholder{display:grid;place-items:center;min-height:320px;background:color-mix(in srgb,var(--green) 8%,var(--surface));color:var(--green);font-size:100px}textarea{display:block;width:100%;font:inherit;padding:12px;margin:7px 0 14px;background:#f8faff;color:var(--ink);border:1px solid #c9d9ee;border-radius:7px;resize:vertical}.details-editor{grid-column:1/-1}@media(max-width:640px){.product-layout{grid-template-columns:1fr;gap:20px}.product-info h1{font-size:28px}.product-placeholder{min-height:220px}.product-page{padding-top:20px}.detail-price{font-size:24px}}

.reviews-section{text-align:center;margin:0 0 55px;padding:32px 24px;background:var(--surface);border:1px solid color-mix(in srgb,var(--green) 15%,var(--surface));border-radius:var(--radius)}.reviews-banner{margin:24px auto 0;padding:16px;border-radius:14px;background:color-mix(in srgb,var(--green) 6%,var(--surface));max-width:950px}.reviews-banner img{display:block;width:100%;height:580px;object-fit:contain;border-radius:9px}.reviews-banner p{font-size:13px;margin:14px 0 0}.review-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 12px}.review-controls button{background:var(--surface);border-color:color-mix(in srgb,var(--green) 22%,var(--surface));color:var(--green)}#review-count{font-size:13px;color:var(--muted);min-width:40px}.review-dots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.review-dots button{padding:0;width:12px;height:12px;border-radius:50%;border:1px solid var(--green);background:transparent}.review-dots button.active{background:var(--green)}.review-edit{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:18px;padding:18px 0;border-top:1px solid #dbe5f2}.review-edit>img{width:100px;height:130px;object-fit:contain;background:var(--bg);border-radius:8px}.review-edit-actions{display:flex;gap:6px;flex-wrap:wrap}.review-edit-actions button{font-size:12px;padding:8px 12px}button:disabled{opacity:.5;cursor:not-allowed}#review-enabled-input{width:24px;height:24px}@media(max-width:640px){.reviews-section{padding:25px 12px}.reviews-banner{padding:8px}.reviews-banner img{height:auto;max-height:650px}.review-controls{gap:8px;flex-wrap:wrap}.review-controls button{padding:8px 12px;font-size:12px}.review-edit{grid-template-columns:75px 1fr;gap:12px}.review-edit>img{width:75px;height:110px}.review-edit-actions{grid-column:1/-1}}

.hero-art:has(>.custom-hero-image){height:auto;border-radius:var(--radius);background:var(--surface);border:1px solid color-mix(in srgb,var(--green) 18%,var(--surface));box-shadow:0 18px 40px #10213715;overflow:hidden}.hero-art>.custom-hero-image{display:block;width:100%;height:auto;object-fit:contain}

.hero-art:has(>.custom-hero-image){border:0;box-shadow:none;background:transparent;border-radius:28px}.hero-art>.custom-hero-image{border-radius:28px;display:block}

/* Theme-aware ambient lighting behind the receiver hero. */
.hero-art:has(>.custom-hero-image){position:relative;isolation:isolate;overflow:visible;padding:24px;background:radial-gradient(ellipse at 45% 48%,color-mix(in srgb,var(--green) 19%,transparent),transparent 68%);border-radius:36px}
.hero-art:has(>.custom-hero-image)::before{content:'';position:absolute;z-index:-2;inset:8% -3%;border-radius:50%;background:radial-gradient(ellipse at 35% 45%,color-mix(in srgb,var(--green) 35%,transparent),color-mix(in srgb,var(--lime) 35%,transparent) 44%,transparent 73%);filter:blur(28px);opacity:.85;pointer-events:none}
.hero-art:has(>.custom-hero-image)::after{content:'';position:absolute;z-index:-1;inset:4% 0;border:1px solid color-mix(in srgb,var(--green) 20%,transparent);border-radius:50%;transform:rotate(-16deg);box-shadow:0 0 0 18px color-mix(in srgb,var(--green) 3%,transparent),0 0 0 38px color-mix(in srgb,var(--green) 2%,transparent);pointer-events:none}
.hero-art>.custom-hero-image{position:relative;z-index:1;border-radius:24px;box-shadow:0 18px 38px color-mix(in srgb,var(--green) 23%,transparent);animation:receiver-float 7s ease-in-out infinite}
@keyframes receiver-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:640px){.hero-art:has(>.custom-hero-image){padding:18px}.hero-art:has(>.custom-hero-image)::after{inset:7% 4%;box-shadow:0 0 0 12px color-mix(in srgb,var(--green) 3%,transparent),0 0 0 22px color-mix(in srgb,var(--green) 2%,transparent)}}
@media(prefers-reduced-motion:reduce){.hero-art>.custom-hero-image{animation:none}}

/* Feather the image into the theme glow instead of showing a photo rectangle. */
.hero-art>.custom-hero-image{border:0;border-radius:0;box-shadow:none;background:transparent;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-art:has(>.custom-hero-image){border:0;box-shadow:none}
