/* * Zid store restyle — phase M2 (owner, 2026-09-27;decision Z7). * * Pasted into the Zid dashboard's custom-CSS field. It re-skins the store's * existing theme (id 60f18ebd-…, Bootstrap 5 RTL) to match the main site:* Deep Islamic Emerald for structure, Warm Amber for the donate CTA only. * * The values below are the hex equivalents of the oklch tokens in * src/app/globals.css — keep the two in step. Hex, not oklch, because the * Zid editor and older in-app browsers are safer with it. * * Selectors target the theme's markup as served on 2026-09-27. If Zid ships a * theme update and something stops applying, compare against the live HTML * first;nothing here depends on the page's JavaScript. */:root{--fw-brand-50:#ecfdf5;--fw-brand-100:#d0fae5;--fw-brand-200:#a4f4cf;--fw-brand-600:#009965;--fw-brand-700:#007a54;--fw-brand-800:#006044;--fw-brand-900:#004f3a;--fw-brand-950:#002c22;--fw-accent-400:#ffb900;--fw-accent-500:#fe9900;--fw-accent-600:#e27100;--fw-surface:#ffffff;--fw-surface-muted:#f8fafc;--fw-ink:#111828;--fw-ink-muted:#6a7282;--fw-line:#e5e7eb;--fw-radius:16px;--fw-shadow:0 1px 2px rgba(17, 24, 40, 0.04), 0 8px 24px -12px rgba(17, 24, 40, 0.12);--primary-color:var(--fw-brand-800);--primaryColor:var(--fw-brand-800);--grayDark:var(--fw-ink);--gray:var(--fw-ink-muted);--bodyBg:var(--fw-surface-muted);--bodyBgColor:var(--fw-ink);--headerBg:var(--fw-surface);--headerTextColor:var(--fw-brand-900);--headerHoverColor:var(--fw-brand-600);--footerBgColor:var(--fw-brand-950);--footerCopyrightsBgColor:transparent;--footerTextColor:var(--fw-brand-100)}body{font-variant-numeric:lining-nums}::selection{color:#fff;background:var(--fw-brand-800)}/* * The theme removes every focus outline (`*:focus{outline:none}`), which * leaves keyboard users with no visible focus. Restore it for keyboard focus * only, so mouse clicks look unchanged. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible{outline:2px solid var(--fw-brand-600) !important;outline-offset:2px}body .header{background:var(--fw-surface);border-bottom:1px solid var(--fw-line);margin-bottom:24px}body .header.js-is-sticky{box-shadow:0 4px 16px -8px rgba(17, 24, 40, 0.15)}body .header .navbar-menu > li > a,
body .header .navbar-menu > li button{color:var(--fw-brand-900);font-weight:600;font-size:15px;border-radius:8px;padding:6px 12px}body .header .navbar-menu > li > a:hover,
body .header .navbar-menu > li button:hover{color:var(--fw-brand-700);background:var(--fw-brand-50)}body .header .logo-img{max-height:72px;width:auto}body .block-cart .number{background:var(--fw-accent-500);color:var(--fw-brand-950) !important;font-weight:700}body .fw-site-link > a{color:var(--fw-brand-800) !important;border:1px solid var(--fw-brand-200) !important}/* * «تبرع الآن» is the one call to action, so it carries the amber accent, as on * the site. The theme sets its colours through Bootstrap variables and a * `color:#fff !important`, so both are overridden. */
body .btn.btn-primary{--bs-btn-color:var(--fw-brand-950);--bs-btn-bg:var(--fw-accent-500);--bs-btn-border-color:var(--fw-accent-500);--bs-btn-hover-color:var(--fw-brand-950);--bs-btn-hover-bg:var(--fw-accent-400);--bs-btn-hover-border-color:var(--fw-accent-400);--bs-btn-active-color:var(--fw-brand-950);--bs-btn-active-bg:var(--fw-accent-600);--bs-btn-active-border-color:var(--fw-accent-600);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--fw-ink-muted);--bs-btn-disabled-border-color:var(--fw-ink-muted);color:var(--fw-brand-950) !important;background-color:var(--fw-accent-500);border-color:var(--fw-accent-500);font-weight:700;border-radius:12px !important;min-height:44px}body .btn.btn-primary:hover,
body .btn.btn-primary:focus{color:var(--fw-brand-950) !important;background-color:var(--fw-accent-400);border-color:var(--fw-accent-400)}body .btn.btn-primary:active{color:var(--fw-brand-950) !important;background-color:var(--fw-accent-600);border-color:var(--fw-accent-600)}body .list-home-tabs li button,
body .list-home-tabs li a{background:var(--fw-surface);border:1px solid var(--fw-line);color:var(--fw-ink-muted);font-weight:600;padding:6px 18px}body .list-home-tabs li button.active,
body .list-home-tabs li button:hover,
body .list-home-tabs li a.active,
body .list-home-tabs li a:hover{background:var(--fw-brand-900);border-color:var(--fw-brand-900);color:#fff}body .block-product{color:var(--fw-brand-900);border:1px solid var(--fw-line);border-radius:var(--fw-radius);box-shadow:var(--fw-shadow);padding:16px;transition:box-shadow 0.2s ease, transform 0.2s ease}body .row > [class*="col-"] > .block-product:hover{box-shadow:0 2px 4px rgba(17, 24, 40, 0.05), 0 16px 32px -12px rgba(0, 44, 34, 0.22)}body .block-product .thumb{border-radius:12px}body .block-product .thumb img{max-height:180px;aspect-ratio:16 / 10}body .block-product .thumb:after{background:linear-gradient(0deg, rgba(0, 44, 34, 0.85) 0%, rgba(0, 44, 34, 0) 60%)}body .block-product .thumb .content-thumb h3{font-size:18px;line-height:1.5}body .block-product .thumb .label{color:var(--fw-brand-900);font-weight:600}body .block-product .progress-product{background:var(--fw-brand-50);color:var(--fw-brand-900);border-radius:12px}body .progress{--bs-progress-bar-bg:var(--fw-brand-600);background:#fff;border-radius:99px;height:10px;font-size:0}body .progress .progress-bar{background:var(--fw-brand-600);border-radius:99px}body .donation-amount .form-label,
body .sub-title{color:var(--fw-brand-900);font-weight:700}body .button-price{flex:1 1 0;min-height:40px;border:1px solid var(--fw-line);background:var(--fw-surface);color:var(--fw-ink);border-radius:10px;font-weight:600}body .button-price:hover{border-color:var(--fw-brand-600);color:var(--fw-brand-800)}body .button-price.active{background:var(--fw-brand-900);border-color:var(--fw-brand-900);color:#fff}body .donation-amount .input-amount{border:1px solid var(--fw-line);border-radius:10px;min-height:40px}body .donation-amount .input-amount:focus-within{border-color:var(--fw-brand-600);box-shadow:0 0 0 3px var(--fw-brand-100)}body .donation-amount .input-amount span{color:var(--fw-ink-muted)}body .block-product .actions .icon-svg{background-color:var(--fw-brand-800)}body .block-product .actions .btn-link:hover .icon-svg{background-color:var(--fw-brand-600)}body .product-title{color:var(--fw-brand-950)}body .product-badge{background:var(--fw-brand-50);color:var(--fw-brand-800)}body .product-badge [class*="fa-"]{color:var(--fw-brand-600)}body .card{border:1px solid var(--fw-line);border-radius:var(--fw-radius);box-shadow:var(--fw-shadow)}body .card .card-header .card-title{color:var(--fw-brand-950);font-weight:700}body .text-color-primary,
body .text-primary{color:var(--fw-brand-800) !important}body .block-slider img{border-radius:var(--fw-radius)}body .slider-arrow{background:rgba(255, 255, 255, 0.92);color:var(--fw-brand-900);width:40px;height:40px;font-size:16px;box-shadow:0 2px 8px rgba(17, 24, 40, 0.15)}body .slider-arrow::after{display:none}body .swiper-pagination-bullet-active{background:var(--fw-brand-800)}body .footer{margin-top:48px}body .footer .container{background:var(--fw-brand-950);color:var(--fw-brand-100);border-radius:var(--fw-radius);padding:32px 24px !important}body .footer .footer-title{color:#fff;font-size:15px}body .footer p{color:var(--fw-brand-200);font-size:14px;line-height:1.9}body .footer a,
body .footer .footer-menu li a{color:var(--fw-brand-200)}body .footer a:hover,
body .footer .footer-menu li a:hover{color:var(--fw-accent-400)}/* * No fixed size on the social links:one of them (the map pin) carries the * full multi-line address, and a fixed height made it spill over the text. */
body .footer .social-media a{line-height:1.8;background:rgba(255, 255, 255, 0.08);border-radius:10px}body .footer .img-py-footer{background:#fff;border-radius:6px;padding:2px 4px;height:28px;width:auto}body .copyrights{color:var(--fw-ink-muted)}@media (max-width:767px){body .header{margin-bottom:12px}body .header .logo-img{max-height:52px}body .block-product{padding:12px}body .footer .container{padding:24px 16px !important}}body .header{margin-bottom:0;padding:10px 0;background:rgba(255, 255, 255, 0.96)}body .fw-topbar{background:var(--fw-brand-950);color:var(--fw-brand-100);font-size:12px;padding:6px 0}body .fw-topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px}body .fw-topbar a{color:var(--fw-brand-100);text-decoration:none}body .fw-topbar i{color:var(--fw-accent-400);margin-inline-end:6px}body .fw-brand{display:inline-flex;flex-direction:column;line-height:1.3;text-align:right;vertical-align:middle;margin-inline-start:10px}body .fw-brand strong{color:var(--fw-brand-950);font-size:16px;font-weight:700}body .fw-brand small{color:var(--fw-ink-muted);font-size:11px}body .header .fw-donate{display:inline-flex;align-items:center;gap:8px;background:var(--fw-accent-500);color:var(--fw-brand-950) !important;font-weight:700;font-size:14px;padding:9px 18px !important;border-radius:10px !important;text-decoration:none;box-shadow:0 6px 16px -8px rgba(226, 113, 0, 0.6)}body .header .fw-donate:hover{background:var(--fw-accent-400) !important;color:var(--fw-brand-950) !important}body .fw-hero{background:radial-gradient(circle at 15% 20%, rgba(0, 153, 101, 0.35), transparent 45%), linear-gradient(135deg, var(--fw-brand-950) 0%, var(--fw-brand-900) 100%);color:#fff;padding:56px 0;margin-bottom:32px}body .fw-hero .fw-eyebrow{color:var(--fw-accent-400);font-size:14px;font-weight:600;margin-bottom:10px}body .fw-hero h1{color:#fff;font-size:44px;font-weight:700;line-height:1.35;margin-bottom:16px}body .fw-hero p{color:var(--fw-brand-100);font-size:17px;line-height:1.9;max-width:620px;margin-bottom:28px}body .fw-hero .fw-actions{display:flex;flex-wrap:wrap;gap:12px}body .fw-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none}body .fw-btn-amber{background:var(--fw-accent-500);color:var(--fw-brand-950)}body .fw-btn-amber:hover{background:var(--fw-accent-400);color:var(--fw-brand-950)}body .fw-btn-ghost{border:1px solid rgba(255, 255, 255, 0.3);color:#fff;background:rgba(255, 255, 255, 0.04)}body .fw-btn-ghost:hover{background:rgba(255, 255, 255, 0.12);color:#fff}body .fw-section-head{text-align:right;margin-bottom:24px}body .fw-section-head h2{color:var(--fw-brand-950);font-size:32px;font-weight:700;margin-bottom:6px}body .fw-section-head p{color:var(--fw-ink-muted);font-size:16px;margin:0}body .list-home-tabs{justify-content:flex-start !important;margin-bottom:20px}body .list-home-tabs li button,
body .list-home-tabs li a{border-radius:999px}@media (min-width:992px){body .header .row > .col-4.text-center{order:-1;text-align:right !important}body .header .row > .col-4:first-child{text-align:center}}@media (max-width:991px){body .fw-brand, body .fw-topbar .fw-mid{display:none}body .fw-hero{padding:36px 0}body .fw-hero h1{font-size:30px}body .fw-hero p{font-size:15px}body .fw-section-head h2{font-size:24px}body .header .fw-donate span{display:none}body .header .fw-donate{padding:8px 12px !important}}