/** Shopify CDN: Minification failed Line 33:0 All "@import" rules must come first **/ /* ============================================================ Dahab Al-Hind — storefront styles (RTL) Load once from theme.liquid: {{ 'dahab.css' | asset_url | stylesheet_tag }} ============================================================ */ :root{ --dh-green:#21402F; --dh-green-d:#17301F; --dh-dark:#14261B; --dh-gold:#C9A227; --dh-gold-l:#E0BE5A; --dh-gold-d:#A8892C; --dh-cream:#F5EFE2; --dh-cream-2:#EDE4CE; --dh-ink:#1C1C18; --dh-ink-2:#3C3C33; --dh-mute:#55554C; --dh-mute-2:#7A7A6C; --dh-line:rgba(33,64,47,.14); --dh-line-2:rgba(33,64,47,.25); --dh-max:1180px; --dh-serif:'Amiri',serif; --dh-sans:'Tajawal','Segoe UI',sans-serif; } /* Fonts — add to theme.liquid or keep this import */ @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;800&display=swap'); .dh{direction:rtl;font-family:var(--dh-sans);color:var(--dh-ink);background:var(--dh-cream);overflow-x:hidden} .dh *,.dh *::before,.dh *::after{box-sizing:border-box} .dh-wrap{max-width:var(--dh-max);margin:0 auto;padding:0 22px} .dh a{color:var(--dh-green);text-decoration:none} .dh a:hover{color:#B8901E} .dh img{max-width:100%;display:block} .dh h1,.dh h2,.dh h3{font-family:var(--dh-serif);font-weight:700;line-height:1.25;margin:0} .dh-h1{font-size:clamp(38px,6vw,66px);line-height:1.15} .dh-h2{font-size:clamp(28px,4vw,42px)} .dh-eyebrow{font-size:13px;letter-spacing:2px;color:var(--dh-gold-d);font-weight:700} .dh-lead{font-size:17px;line-height:1.9;color:var(--dh-ink-2)} .dh-center{text-align:center} .dh-sec{padding:66px 0} .dh-sec-lg{padding:70px 0} .dh-cream2{background:var(--dh-cream-2)} .dh-onDark{background:var(--dh-dark);color:var(--dh-cream)} .dh-onDark .dh-lead{color:rgba(245,239,226,.82)} .dh-grid{display:grid;gap:20px} .dh-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:46px;align-items:center} .dh-2col-top{align-items:start} .dh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .dh-cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} /* buttons */ .dh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer; border-radius:999px;font-family:var(--dh-sans);font-weight:800;min-height:48px;padding:0 30px;font-size:17px; transition:background .18s ease,color .18s ease} .dh-btn-gold{background:var(--dh-gold);color:var(--dh-dark)} .dh-btn-gold:hover{background:var(--dh-gold-l);color:var(--dh-dark)} .dh-btn-green{background:var(--dh-green);color:var(--dh-cream-2)} .dh-btn-green:hover{background:var(--dh-green-d);color:var(--dh-cream-2)} .dh-btn-ghost{background:transparent;color:var(--dh-green);border:2px solid var(--dh-green);width:100%;min-height:50px;font-size:16px;font-weight:700} .dh-btn-ghost:hover{background:var(--dh-green);color:var(--dh-cream-2)} .dh-btn-block{width:100%} .dh-pulse{animation:dhPulse 2.6s ease-out infinite} @keyframes dhPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.55)}50%{box-shadow:0 0 0 14px rgba(201,162,39,0)}} /* announcement marquee */ .dh-ann{background:var(--dh-green);color:var(--dh-cream-2);font-size:14px;overflow:hidden;white-space:nowrap;padding:9px 0;letter-spacing:.2px} .dh-ann-track{display:inline-flex;gap:44px;animation:dhMarquee 22s linear infinite} .dh-ann-track span.dh-dot{color:var(--dh-gold)} @keyframes dhMarquee{from{transform:translateX(0)}to{transform:translateX(50%)}} @media (prefers-reduced-motion:reduce){.dh-ann-track{animation:none}.dh-pulse{animation:none}} /* header */ .dh-head{position:sticky;top:0;z-index:40;background:rgba(245,239,226,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--dh-line)} .dh-head-in{max-width:var(--dh-max);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:24px} .dh-logo{display:flex;align-items:center;gap:11px;flex-shrink:0} .dh-logo img{width:44px;height:44px;object-fit:contain} .dh-logo-txt{line-height:1.05} .dh-logo-ar{font-family:var(--dh-serif);font-size:22px;font-weight:700;color:var(--dh-green)} .dh-logo-en{font-size:10px;letter-spacing:3px;color:var(--dh-gold-d)} .dh-nav{display:flex;gap:26px;font-size:15px;font-weight:500;margin-inline-start:auto;flex-wrap:wrap} .dh-head-right{display:flex;align-items:center;gap:12px} .dh-locale{font-size:13px;color:#6C6B60} .dh-cart{display:flex;align-items:center;gap:8px;background:var(--dh-green);color:var(--dh-cream-2);border:0;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;min-height:44px} .dh-cart:hover{background:var(--dh-green-d)} .dh-cart-count{background:var(--dh-gold);color:var(--dh-green);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800} @media(max-width:860px){.dh-nav{display:none}} /* hero */ .dh-hero{position:relative;background:var(--dh-dark);color:var(--dh-cream);overflow:hidden} .dh-hero-in{max-width:var(--dh-max);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center} .dh-hero-copy{padding:74px 0 66px} .dh-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(201,162,39,.5);color:var(--dh-gold-l);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;margin-bottom:26px} .dh-badge i{width:7px;height:7px;border-radius:50%;background:var(--dh-gold);display:inline-block} .dh-hero h1{margin:0 0 20px} .dh-hero .dh-gold{color:var(--dh-gold-l)} .dh-hero-lead{font-size:18px;line-height:1.85;color:rgba(245,239,226,.82);max-width:470px;margin:0 0 30px} .dh-hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:30px} .dh-hero-cta .dh-note{font-size:14px;color:rgba(245,239,226,.7)} .dh-stats{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(245,239,226,.16);padding-top:22px} .dh-stat-n{font-family:var(--dh-serif);font-size:26px;color:var(--dh-gold-l)} .dh-stat-l{font-size:13px;color:rgba(245,239,226,.65)} .dh-hero-media{position:relative;min-height:420px;display:flex;align-items:flex-end;justify-content:center} .dh-hero-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.28),transparent 70%)} .dh-hero-media img{ position:relative;width:100%;max-width:420px;height:auto;max-height:620px;object-fit:contain; -webkit-mask-image: linear-gradient(to top, black 70%, transparent 100%), linear-gradient(to bottom, black 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, black 70%, transparent 100%), linear-gradient(to bottom, black 85%, transparent 100%); mask-composite: intersect; } @media screen and (min-width: 750px) { .dh-hero-media img{ -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%), linear-gradient(to top, black 65%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, black 55%, transparent 100%), linear-gradient(to top, black 65%, transparent 100%); mask-composite: intersect; } } /* trust strip */ .dh-trust{background:var(--dh-green);color:var(--dh-cream-2)} .dh-trust-in{max-width:var(--dh-max);margin:0 auto;padding:18px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;text-align:center;font-size:14px;font-weight:500} /* product */ .dh-gal-main{background:var(--dh-cream-2);border-radius:20px;overflow:hidden;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center} .dh-gal-main img{width:100%;height:100%;object-fit:cover} .dh-gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px} .dh-thumb{padding:0;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--dh-cream-2);border:2px solid transparent} .dh-thumb[aria-current="true"]{border-color:var(--dh-gold)} .dh-thumb img{width:100%;height:100%;object-fit:cover} .dh-prod-title{color:var(--dh-green);margin:0 0 12px} .dh-rating{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:15px} .dh-stars{color:var(--dh-gold);font-size:18px;letter-spacing:2px} .dh-rating span{color:var(--dh-mute)} .dh-bundles{display:flex;flex-direction:column;gap:12px;margin-bottom:24px} .dh-bundle{text-align:start;display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--dh-line-2);border-radius:16px;padding:16px 18px;cursor:pointer;width:100%;min-height:48px;font-family:var(--dh-sans)} .dh-bundle[aria-checked="true"]{background:#FFFDF6;border-color:var(--dh-gold)} .dh-bundle .dh-radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(33,64,47,.3);flex-shrink:0} .dh-bundle[aria-checked="true"] .dh-radio{border-color:var(--dh-gold);background:var(--dh-gold)} .dh-bundle-body{flex:1} .dh-bundle-t{display:block;font-size:17px;font-weight:700;color:var(--dh-green)} .dh-bundle-n{display:block;font-size:13px;color:#6C6B60;margin-top:3px} .dh-bundle-p{text-align:end} .dh-bundle-price{display:block;font-family:var(--dh-serif);font-size:22px;font-weight:700;color:var(--dh-green)} .dh-bundle-was{display:block;font-size:13px;color:#9A9A8C;text-decoration:line-through} .dh-buyrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .dh-qty{display:flex;align-items:center;border:1px solid var(--dh-line-2);border-radius:999px;overflow:hidden} .dh-qty button{width:46px;height:48px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--dh-green)} .dh-qty input{width:42px;height:48px;text-align:center;font-size:17px;font-weight:700;border:0;background:transparent;color:var(--dh-ink); -moz-appearance:textfield} .dh-qty input::-webkit-outer-spin-button,.dh-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .dh-atc{flex:1;min-width:220px;font-size:18px;min-height:52px} .dh-ship{margin-top:24px;border-top:1px solid var(--dh-line);padding-top:20px;display:grid;gap:10px;font-size:15px;color:var(--dh-ink-2)} /* benefits */ .dh-bcard{background:var(--dh-cream);border:1px solid rgba(33,64,47,.12);border-radius:18px;padding:26px 22px} .dh-bnum{font-family:var(--dh-serif);font-size:30px;color:var(--dh-gold);margin-bottom:10px} .dh-bt{font-size:19px;font-weight:700;color:var(--dh-green);margin-bottom:8px} .dh-bb{font-size:15px;line-height:1.8;color:var(--dh-mute)} /* media frame */ .dh-frame{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--dh-cream-2)} .dh-frame img{width:100%;height:100%;object-fit:cover} /* ingredients rows */ .dh-herb{display:flex;gap:14px;align-items:baseline;border-bottom:1px dashed rgba(33,64,47,.2);padding-bottom:12px} .dh-herb b{font-size:17px;font-weight:700;color:var(--dh-green);min-width:116px} .dh-herb span{font-size:15px;color:var(--dh-mute);line-height:1.7} /* steps on dark */ .dh-step{display:flex;gap:14px;align-items:flex-start} .dh-step i{width:34px;height:34px;border-radius:50%;background:rgba(201,162,39,.18);color:var(--dh-gold-l);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-style:normal} .dh-step b{display:block;font-size:17px;font-weight:700} .dh-step span{display:block;font-size:15px;color:rgba(245,239,226,.72);margin-top:4px;line-height:1.7} /* reviews */ .dh-review{background:#fff;border:1px solid rgba(33,64,47,.12);border-radius:18px;padding:24px} .dh-review p{font-size:16px;line-height:1.9;color:var(--dh-ink-2);margin:0 0 18px} .dh-rev-who{display:flex;align-items:center;gap:10px} .dh-avatar{width:36px;height:36px;border-radius:50%;background:var(--dh-green);color:var(--dh-cream-2);display:flex;align-items:center;justify-content:center;font-weight:700} .dh-rev-name{display:block;font-weight:700;color:var(--dh-green)} .dh-rev-city{display:block;font-size:13px;color:var(--dh-mute-2)} /* COD / checkout slot */ .dh-summary{background:var(--dh-cream);border:1px solid var(--dh-line);border-radius:18px;padding:22px;display:grid;gap:12px} .dh-srow{display:flex;justify-content:space-between;font-size:16px} .dh-srow span:first-child{color:var(--dh-mute)} .dh-srow b{font-weight:700;color:var(--dh-green)} .dh-srow .dh-free{font-weight:700;color:#2E7D4F} .dh-stotal{display:flex;justify-content:space-between;border-top:1px solid rgba(33,64,47,.16);padding-top:12px;font-size:20px} .dh-stotal b{font-weight:700;color:var(--dh-green)} .dh-stotal strong{font-family:var(--dh-serif);font-weight:700;color:var(--dh-green)} .dh-codbox{background:#fff;border-radius:20px;padding:28px;border:1px solid rgba(33,64,47,.12)} .dh-form{display:grid;gap:16px} .dh-field{display:grid;gap:7px;font-size:15px;font-weight:600;color:var(--dh-green)} .dh-field input,.dh-field select,.dh-field textarea{border:1px solid var(--dh-line-2);border-radius:12px;padding:0 14px;min-height:48px;font-size:16px;background:#FAF7EF;color:var(--dh-ink);width:100%} .dh-field textarea{padding:12px 14px;min-height:64px;resize:vertical} .dh-field-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px} .dh-form-note{text-align:center;font-size:13px;color:var(--dh-mute-2)} /* EasyCOD (or any COD app) drops its form here — inherits brand look */ .dh-cod-slot{margin-top:4px} .dh-cod-slot input:not([type=checkbox]):not([type=radio]), .dh-cod-slot select,.dh-cod-slot textarea{border:1px solid var(--dh-line-2)!important;border-radius:12px!important; min-height:48px!important;font-size:16px!important;background:#FAF7EF!important;color:var(--dh-ink)!important;font-family:var(--dh-sans)!important} .dh-cod-slot label{font-size:15px!important;font-weight:600!important;color:var(--dh-green)!important;font-family:var(--dh-sans)!important} .dh-cod-slot button,.dh-cod-slot input[type=submit]{background:var(--dh-green)!important;color:var(--dh-cream-2)!important; border:0!important;border-radius:999px!important;min-height:54px!important;font-size:18px!important;font-weight:800!important; font-family:var(--dh-sans)!important;cursor:pointer;width:100%} .dh-cod-slot button:hover,.dh-cod-slot input[type=submit]:hover{background:var(--dh-green-d)!important} .dh-cod-placeholder{border:2px dashed var(--dh-line-2);border-radius:16px;padding:26px;text-align:center;color:var(--dh-mute); font-size:15px;line-height:1.9;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(33,64,47,.04) 10px 20px)} .dh-cod-placeholder code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--dh-green)} /* FAQ */ .dh-faq{max-width:820px;margin:0 auto;padding:70px 22px} .dh-faq-list{display:grid;gap:12px} .dh-q{background:#fff;border:1px solid rgba(33,64,47,.12);border-radius:16px;overflow:hidden} .dh-q>button{width:100%;text-align:start;display:flex;align-items:center;gap:14px;background:transparent;border:0;padding:18px 22px;cursor:pointer;min-height:48px;font-family:var(--dh-sans)} .dh-q>button b{flex:1;font-size:17px;font-weight:700;color:var(--dh-green)} .dh-q>button i{font-size:22px;color:var(--dh-gold);line-height:1;font-style:normal} .dh-a{padding:0 22px 20px;font-size:16px;line-height:1.9;color:var(--dh-mute)} .dh-q[data-open="false"] .dh-a{display:none} /* footer */ .dh-foot{background:var(--dh-dark);color:rgba(245,239,226,.78)} .dh-foot-in{max-width:var(--dh-max);margin:0 auto;padding:54px 22px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px} .dh-foot a{color:rgba(245,239,226,.78)} .dh-foot a:hover{color:var(--dh-gold-l)} .dh-foot h3{font-family:var(--dh-sans);font-size:16px;color:var(--dh-gold-l);font-weight:700;margin:0 0 12px} .dh-foot-links{display:grid;gap:9px;font-size:15px} .dh-foot p{font-size:15px;line-height:1.8;margin:0} .dh-foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:14px} .dh-foot-logo img{width:42px;height:42px;object-fit:contain} .dh-foot-logo span{font-family:var(--dh-serif);font-size:22px;color:var(--dh-cream)} .dh-pays{display:flex;flex-wrap:wrap;gap:8px} .dh-pays span{border:1px solid rgba(245,239,226,.28);border-radius:8px;padding:7px 12px;font-size:13px} .dh-copy{border-top:1px solid rgba(245,239,226,.14);padding:18px 22px;text-align:center;font-size:13px} /* sticky buy bar */ .dh-sticky{position:fixed;bottom:0;inset-inline:0;z-index:50;background:rgba(20,38,27,.96);backdrop-filter:blur(8px); padding:12px 16px;display:flex;align-items:center;gap:14px} .dh-sticky-t{flex:1;min-width:0} .dh-sticky-t b{display:block;color:var(--dh-cream);font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dh-sticky-t span{display:block;color:var(--dh-gold-l);font-size:14px} .dh-sticky .dh-btn{padding:0 26px;min-height:46px;font-size:16px;flex-shrink:0} .dh-sticky-pad{height:74px}