/* ========================================================= PRO MAKER — SINGLE WIDE BANNER component-id: 2048588421 ========================================================= */ section[component-id="2048588421"] { padding-top: 8px !important; padding-bottom: 8px !important; margin-top: 0 !important; margin-bottom: -80px !important; } /* نشيل أي مسافات داخلية زيادة من الـcontainer */ section[component-id="2048588421"] > .container { padding-top: 0 !important; padding-bottom: 0 !important; } /* نصغر البانر سنة بسيطة ونخليه في النص */ section[component-id="2048588421"] .banner--fixed { display: block !important; width: 100% !important; max-width: 1000px !important; margin-inline: auto !important; border-radius: 12px; overflow: hidden; } /* الصورة تملأ البانر بدون Crop */ section[component-id="2048588421"] .fixed-banner__image { display: block !important; width: 100% !important; height: 65px !important; max-width: 100% !important; object-fit: fill !important; } /* Mobile */ @media (max-width: 639px) { section[component-id="2048588421"] { margin-bottom: -50px !important; } section[component-id="2048588421"] .banner--fixed { width: 100% !important; border-radius: 9px; } section[component-id="2048588421"] .fixed-banner__image { height: 50px !important; } } /* ========================================= TAMARA BANNER - GOLD SHINE ========================================= */ .fixed-banner--1 .banner--fixed { position: relative; overflow: hidden; isolation: isolate; } .fixed-banner--1 .banner--fixed::after { content: ""; position: absolute; top: -20%; bottom: -20%; right: -35%; width: 22%; pointer-events: none; z-index: 2; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 215, 120, 0.00) 10%, rgba(255, 224, 150, 0.18) 35%, rgba(255, 240, 190, 0.55) 50%, rgba(255, 224, 150, 0.18) 65%, rgba(255, 215, 120, 0.00) 90%, rgba(255, 255, 255, 0) 100% ); transform: skewX(22deg) translateX(0); filter: blur(1px); opacity: 0; animation: pmTamaraShine 5s ease-in-out infinite; } @keyframes pmTamaraShine { 0% { opacity: 0; right: -35%; } 8% { opacity: 1; } 22% { opacity: 1; } 32% { opacity: 0; right: 120%; } 100% { opacity: 0; right: 120%; } } /* ========================================= TAMARA + TABBY SLIM BANNERS Component: 377526098 ========================================= */ section[component-id="377526098"] .double-banner__row { align-items: stretch; } section[component-id="377526098"] .banner { height: 90px !important; min-height: 0 !important; border-radius: 12px; overflow: hidden; } section[component-id="377526098"] .double-banner__image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* Mobile */ @media (max-width: 639px) { section[component-id="377526098"] .banner { height: 58px !important; border-radius: 9px; } section[component-id="377526098"] .double-banner__row { gap: 8px !important; } } /* Reduce vertical space around Tamara + Tabby banners */ section[component-id="377526098"] { padding-top: 8px !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: -50px !important; } section[component-id="377526098"] .container { padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= PRO MAKER — CLEAN STABLE HEADER ONE VISUAL SURFACE ========================================================= */ :root { --pm-gold: #a26d35; --pm-gold-deep: #8e5929; --pm-gold-mid: #b77d3f; --pm-gold-light: #e7c58f; --pm-gold-bright: #fff4da; } /* ========================================================= OLD CUSTOM ELEMENTS ========================================================= */ .pm-header-space, .pm-header-card { display: none !important; } /* ========================================================= INVISIBLE LAYOUT PLACEHOLDER It only preserves document geometry. It will only receive height after the original header has completely passed above the viewport. ========================================================= */ .pm-header-spacer { display: block; width: 100%; height: 0; margin: 0; padding: 0; border: 0; background: transparent !important; pointer-events: none; } /* ========================================================= HEADER WRAPPER ========================================================= */ .store-header { position: relative; z-index: 999999 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= FIXED STATE Same header. Same design. No second visual state. ========================================================= */ .store-header.pm-header-fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; z-index: 999999 !important; overflow: visible !important; transform: none !important; } /* ========================================================= MAIN NAV SINGLE SURFACE ========================================================= */ #mainnav.main-nav-container, #mainnav.main-nav-container.fixed-header, #mainnav.main-nav-container.fixed-pinned, #mainnav.main-nav-container.animated, #mainnav.main-nav-container.fixed-header.fixed-pinned { /* * Selia may add fixed-pinned/fixed-header. * We don't allow that element to create a second * positioning system. */ position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; margin: 0 !important; transform: none !important; translate: none !important; animation: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; /* ------------------------------------------------------- Balanced background Same brightness right / left ------------------------------------------------------- */ background-color: #eadfce !important; background-image: radial-gradient( ellipse at 50% 108%, rgba(162, 109, 53, .075) 0%, rgba(162, 109, 53, .024) 43%, transparent 68% ), linear-gradient( 180deg, #f1e8dc 0%, #e7dac7 100% ) !important; border: 0 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 7px 20px rgba(44, 29, 14, .065) !important; } /* ========================================================= NO EXTRA THEME SURFACES ========================================================= */ #mainnav::before, #mainnav::after { content: none !important; display: none !important; } /* ========================================================= INNER ========================================================= */ #mainnav > .inner { position: relative !important; z-index: 10 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #mainnav .header__main-container, #mainnav .header__main-row { position: relative; overflow: visible !important; background: transparent !important; box-shadow: none !important; } /* ========================================================= المزيد / DROPDOWN ========================================================= */ .store-header, #mainnav, #mainnav > .inner, #mainnav .header__main-container, #mainnav .header__main-row, #mainnav .header__main-start, #mainnav custom-main-menu, #mainnav .main-menu, #mainnav .main-menu-container, #mainnav nav, #mainnav ul, #mainnav li { overflow: visible !important; } /* menu stacking */ #mainnav .header__main-start { position: relative; z-index: 50000 !important; overflow: visible !important; } #mainnav custom-main-menu { position: relative; z-index: 50000 !important; overflow: visible !important; } /* * Desktop menu descendants. * Prevent clipping. */ @media (min-width: 1024px) { #mainnav custom-main-menu *, #mainnav .main-menu *, #mainnav .main-menu-container *, #mainnav nav * { overflow: visible !important; } } /* real dropdown layers */ #mainnav ul ul, #mainnav li > ul, #mainnav [class*="dropdown"], #mainnav [class*="submenu"], #mainnav [class*="sub-menu"], #mainnav [class*="mega-menu"], #mainnav [role="menu"] { z-index: 9999999 !important; overflow: visible !important; } /* ========================================================= SIGNATURE KEEP EXACTLY THIS STYLE ========================================================= */ .pm-header-signature { position: absolute; left: 50%; bottom: 3px; width: min(72%, 900px); height: 15px; transform: translateX(-50%); z-index: 5; pointer-events: none; opacity: .90; } /* LEFT LINE */ .pm-header-line--left { position: absolute; left: 0; top: 7px; width: calc(50% - 19px); height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(184,154,106,.07) 17%, rgba(180,133,72,.34) 70%, rgba(239,212,170,.84) 100% ); } /* RIGHT LINE */ .pm-header-line--right { position: absolute; right: 0; top: 7px; width: calc(50% - 19px); height: 1px; background: linear-gradient( 90deg, rgba(239,212,170,.84) 0%, rgba(180,133,72,.34) 30%, rgba(184,154,106,.07) 83%, transparent 100% ); } /* STAR */ .pm-header-star { position: absolute; left: 50%; top: 0; width: 15px; height: 15px; transform: translateX(-50%); clip-path: polygon( 50% 0%, 59% 38%, 100% 50%, 59% 62%, 50% 100%, 41% 62%, 0% 50%, 41% 38% ); background: radial-gradient( circle at 36% 31%, #fff5df 0%, #e8c388 30%, #b87938 65%, #82501f 100% ); filter: drop-shadow( 0 0 6px rgba(184,154,106,.40) ); } /* ========================================================= NAV LABEL ========================================================= */ .pm-nav-category .pm-nav-label { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; color: inherit; -webkit-text-fill-color: currentColor; /* * نفس اللون النهائي للـ Hover والـ Current */ --pm-nav-gold: #9b642f; /* * اللون الطبيعي قبل مرور اللمعة */ --pm-nav-base: #171717; transition: transform .16s cubic-bezier(.16,1,.3,1), text-shadow .15s ease; } /* ========================================================= DARK MODE BASE COLOR ========================================================= */ .dark .pm-nav-category .pm-nav-label, [data-theme="dark"] .pm-nav-category .pm-nav-label { --pm-nav-base: #ffffff; } /* ========================================================= REMOVE OLD DUPLICATE TEXT LAYERS مفيش ::before أو ::after بيكرروا الكلمة. ========================================================= */ .pm-nav-category .pm-nav-label::before, .pm-nav-category .pm-nav-label::after { content: none !important; display: none !important; } /* ========================================================= HOVER Gradient واحد على نفس الكلمة: Normal → Shine → Gold ========================================================= */ .pm-nav-category:hover .pm-nav-label { color: transparent !important; -webkit-text-fill-color: transparent; /* * ترتيب الـGradient مهم: * * الأول = اللون الطبيعي * المنتصف = اللمعة البيج * الآخر = اللون الذهبي * * ولما الخلفية تتحرك لليسار: * اللمعة تدخل من اليمين، * والذهبي يفضل وراها. */ background-image: linear-gradient( 90deg, var(--pm-nav-base) 0%, var(--pm-nav-base) 38%, #b98348 44%, #d8ad72 47%, #f0d3a0 49%, #fff6df 50%, #f0d3a0 51%, #d8ad72 53%, #b98348 56%, var(--pm-nav-gold) 62%, var(--pm-nav-gold) 100% ); background-size: 300% 100%; background-position: 0% 50%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; transform: translateY(-1px); text-shadow: 0 0 7px rgba(155,100,47,.07); /* * Linear = نفس السرعة من أول حرف لآخر حرف. * * .80s أبطأ سنة بسيطة من الحركة السابقة، * لكن من غير التباطؤ القوي في النهاية. */ animation: pm-nav-premium-sweep .80s linear forwards; } /* ========================================================= RIGHT → LEFT SHINE + GOLD MOVE TOGETHER ========================================================= */ @keyframes pm-nav-premium-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ========================================================= CURRENT CATEGORY نفس اللون النهائي للـ Hover بالضبط ========================================================= */ .pm-nav-category.pm-nav-current .pm-nav-label { color: var(--pm-nav-gold) !important; -webkit-text-fill-color: var(--pm-nav-gold) !important; background: none !important; animation: none !important; text-shadow: 0 0 11px rgba(155,100,47,.13); } /* ========================================================= CURRENT + HOVER الصفحة الحالية تفضل ثابتة بنفس الذهب. ========================================================= */ .pm-nav-category.pm-nav-current:hover .pm-nav-label { color: var(--pm-nav-gold) !important; -webkit-text-fill-color: var(--pm-nav-gold) !important; background: none !important; animation: none !important; transform: translateY(-1px); } /* ========================================================= MORE NEVER BECOMES CURRENT ========================================================= */ .pm-nav-more.pm-nav-current .pm-nav-label { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; animation: none !important; text-shadow: none !important; } /* ========================================================= DARK MODE ========================================================= */ .dark #mainnav.main-nav-container, .dark #mainnav.main-nav-container.fixed-header, .dark #mainnav.main-nav-container.fixed-pinned, [data-theme="dark"] #mainnav.main-nav-container, [data-theme="dark"] #mainnav.main-nav-container.fixed-header, [data-theme="dark"] #mainnav.main-nav-container.fixed-pinned { background-color: #171615 !important; background-image: radial-gradient( ellipse at 50% 108%, rgba(184,154,106,.055), transparent 66% ), linear-gradient( 180deg, #201e1b, #141313 ) !important; box-shadow: 0 7px 22px rgba(0,0,0,.24) !important; } /* ========================================================= ICONS KEEP CURRENT BEHAVIOUR ========================================================= */ @media (min-width:1024px) { .header__main-end > .theme-toggle, .header__main-end > button[data-selia="header-search-button"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .header__main-end .theme-toggle .sun-and-moon { display: block !important; width: 24px !important; height: 24px !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; transform-origin: center; } .header__main-end button[data-selia="header-search-button"] .header-btn__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; line-height: 24px !important; } /* no circles / underline */ .header__main-end > .theme-toggle::before, .header__main-end > .theme-toggle::after, .header__main-end > button[data-selia="header-search-button"]::before, .header__main-end > button[data-selia="header-search-button"]::after, .header__main-end salla-user-menu .header-btn::before, .header__main-end salla-user-menu .header-btn::after, .header__main-end salla-cart-summary #s-cart-icon::before, .header__main-end salla-cart-summary #s-cart-icon::after, .header__main-end salla-cart-summary .s-cart-summary-wrapper::before, .header__main-end salla-cart-summary .s-cart-summary-wrapper::after { content: none !important; display: none !important; } /* icon motion */ .header__main-end .sun-and-moon, .header__main-end .header-btn__icon, .header__main-end #s-cart-icon svg { transition: transform .17s cubic-bezier(.16,1,.3,1), color .12s ease, filter .16s ease; } .header__main-end > .theme-toggle:hover .sun-and-moon { color: var(--pm-gold) !important; transform: translateY(-1px) rotate(7deg) scale(1.06); filter: drop-shadow( 0 2px 4px rgba(184,154,106,.22) ); } .header__main-end > button[data-selia="header-search-button"]:hover .header-btn__icon { color: var(--pm-gold) !important; transform: translateY(-1px) rotate(-2deg) scale(1.07); filter: drop-shadow( 0 2px 4px rgba(184,154,106,.22) ); } .header__main-end salla-user-menu .header-btn:hover .header-btn__icon { color: var(--pm-gold) !important; transform: translateY(-1px) scale(1.06); filter: drop-shadow( 0 2px 4px rgba(184,154,106,.20) ); } .header__main-end salla-cart-summary .s-cart-summary-wrapper:hover #s-cart-icon { color: var(--pm-gold) !important; } .header__main-end salla-cart-summary .s-cart-summary-wrapper:hover #s-cart-icon svg, .header__main-end salla-cart-summary .s-cart-summary-wrapper:hover .header-btn__icon { transform: translateY(-1px) scale(1.06); filter: drop-shadow( 0 2px 4px rgba(184,154,106,.20) ); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:1023px) { .pm-header-signature { width: calc(100% - 80px); opacity: .70; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .pm-nav-label, .pm-nav-label::after, .header__main-end * { animation: none !important; transition-duration: .01ms !important; } } /* ========================================================= PRO MAKER — GLOBAL PREMIUM TITLE Reusable class: pm-premium-title ========================================================= */ /* ---------- Title container ---------- */ .pm-premium-title .home-block-title { margin-bottom: 34px !important; text-align: center !important; } /* ---------- Main heading ---------- */ .pm-premium-title .home-block-title > h2, .pm-premium-title .home-block-title > h3 { position: relative !important; display: inline-block !important; font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; /* النص يفضل ظاهر طول الوقت */ background-image: linear-gradient( 105deg, #ffffff 0%, #ffffff 40%, #b97a2b 45%, #e1b66a 48%, #fff2cb 50%, #e1b66a 52%, #b97a2b 55%, #ffffff 60%, #ffffff 100% ) !important; background-size: 300% 100% !important; background-repeat: no-repeat !important; /* يبدأ من اليمين */ background-position: 0% 50%; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; /* Depth ثابت وواضح */ filter: drop-shadow(0 2px 2px rgba(0,0,0,.38)) drop-shadow(0 6px 11px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(215,170,103,.12)); /* حركة من اليمين للشمال */ animation: pm-premium-title-sweep-rtl 5s ease-in-out infinite !important; will-change: background-position; transition: transform .3s ease, filter .3s ease; } /* ---------- RTL sweep ---------- */ @keyframes pm-premium-title-sweep-rtl { 0%, 18% { background-position: 0% 50%; } 72% { background-position: 100% 50%; } 100% { background-position: 100% 50%; } } /* ---------- Diamonds around title ---------- */ .pm-premium-title .home-block-title > h2::before, .pm-premium-title .home-block-title > h2::after, .pm-premium-title .home-block-title > h3::before, .pm-premium-title .home-block-title > h3::after { content: ""; display: inline-block; width: 7px; height: 7px; vertical-align: middle; background: #d2a15c; border: 1px solid #8b6028; transform: rotate(45deg); box-shadow: 0 0 7px rgba(218,170,101,.58), 0 0 16px rgba(218,170,101,.28); animation: pm-premium-diamond-glow 3.4s ease-in-out infinite; } .pm-premium-title .home-block-title > h2::before, .pm-premium-title .home-block-title > h3::before { margin-left: 14px; } .pm-premium-title .home-block-title > h2::after, .pm-premium-title .home-block-title > h3::after { margin-right: 14px; } @keyframes pm-premium-diamond-glow { 0%, 100% { box-shadow: 0 0 6px rgba(218,170,101,.38), 0 0 13px rgba(218,170,101,.16); } 50% { box-shadow: 0 0 9px rgba(230,188,124,.80), 0 0 21px rgba(230,188,124,.38); } } /* ---------- Native line under title ---------- */ .pm-premium-title .home-block-line { position: relative !important; display: block !important; width: 112px !important; height: 3px !important; margin: 12px auto 0 !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, #8d622b 0%, #c99650 26%, #fff2d2 50%, #c99650 74%, #8d622b 100% ) !important; background-size: 240% 100% !important; box-shadow: 0 0 8px rgba(202,157,91,.50), 0 0 18px rgba(202,157,91,.22); animation: pm-premium-line-sweep 3.2s linear infinite !important; } .pm-premium-title .home-block-line::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: #171717; border: 2px solid #e4c28f; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 10px rgba(218,172,103,.58); } @keyframes pm-premium-line-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } } /* ---------- Hover ---------- */ @media (hover: hover) { .pm-premium-title .home-block-title:hover > h2, .pm-premium-title .home-block-title:hover > h3 { transform: translateY(-2px); filter: drop-shadow(0 2px 2px rgba(0,0,0,.42)) drop-shadow(0 7px 12px rgba(0,0,0,.25)) drop-shadow(0 0 9px rgba(220,172,100,.65)) drop-shadow(0 0 18px rgba(220,172,100,.28)); } } /* ---------- Mobile ---------- */ @media (max-width: 639px) { .pm-premium-title .home-block-title { margin-bottom: 27px !important; } .pm-premium-title .home-block-title > h2, .pm-premium-title .home-block-title > h3 { font-size: 28px !important; } .pm-premium-title .home-block-title > h2::before, .pm-premium-title .home-block-title > h2::after, .pm-premium-title .home-block-title > h3::before, .pm-premium-title .home-block-title > h3::after { width: 6px; height: 6px; } .pm-premium-title .home-block-line { width: 78px !important; } } /* ========================================================= PRO MAKER — CATEGORIES TITLE FIX Narrower shine + hover on text only ========================================================= */ /* 1) Narrower shine */ .pm-premium-title .home-block-title > h2, .pm-premium-title .home-block-title > h3 { background-image: linear-gradient( 60deg, #ffffff 0%, #ffffff 47%, #d9a441 49%, #f2c968 50%, #ffe2a0 51%, #ffffff 53%, #ffffff 100% ) !important; } /* 2) Cancel hover caused by the whole title row */ @media (hover: hover) { .pm-premium-title .home-block-title:hover > h2, .pm-premium-title .home-block-title:hover > h3 { transform: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.38)) drop-shadow(0 6px 11px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(215,170,103,.12)); } /* Hover ONLY when cursor is actually on the word */ .pm-premium-title .home-block-title > h2:hover, .pm-premium-title .home-block-title > h3:hover { transform: translateY(-2px); filter: drop-shadow(0 2px 2px rgba(0,0,0,.42)) drop-shadow(0 7px 12px rgba(0,0,0,.25)) drop-shadow(0 0 9px rgba(220,172,100,.65)) drop-shadow(0 0 18px rgba(220,172,100,.28)); } } /* ========================================================= PRO MAKER — CATEGORIES Class: pm-categories ========================================================= */ /* ---------- Section ---------- */ .pm-categories { padding-top: 28px; padding-bottom: 42px; } /* ========================================================= GRID ========================================================= */ .pm-categories .square-links__grid { display: grid !important; gap: 22px !important; align-items: stretch !important; } /* Desktop = 4 cards */ @media (min-width: 1024px) { .pm-categories .square-links__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Tablet = 3 cards */ @media (min-width: 640px) and (max-width: 1023px) { .pm-categories .square-links__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Hide currently unused empty item */ .pm-categories .square-links__item:has(img[data-src=""]) { display: none !important; } /* ========================================================= CATEGORY CARD ========================================================= */ .pm-categories .square-links__item > a { position: relative !important; display: block !important; height: 100%; padding: 7px !important; overflow: hidden; border: 1px solid rgba(174, 132, 73, 0.28) !important; border-radius: 24px !important; background: linear-gradient( 145deg, #fcf7ef 0%, #f2e4d1 100% ) !important; box-shadow: 0 8px 22px rgba(23, 23, 23, 0.08), 0 2px 5px rgba(23, 23, 23, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease; } /* ========================================================= IMAGE FRAME ========================================================= */ .pm-categories .square-links__image-wrap { position: relative !important; overflow: hidden !important; border-radius: 18px !important; background: #fffaf3 !important; box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.04); isolation: isolate; } /* ========================================================= IMAGE No crop ========================================================= */ .pm-categories .square-links__image-wrap img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center !important; border-radius: 17px !important; transform: none !important; transition: transform 0.38s cubic-bezier(.2,.8,.2,1), filter 0.38s ease !important; } /* ========================================================= REFLECTION LAYER ========================================================= */ .pm-categories .square-links__image-wrap::after { content: ""; position: absolute; top: -65%; left: -80%; width: 40%; height: 230%; opacity: 0; pointer-events: none; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0.68) 50%, rgba(255,255,255,0.10) 72%, transparent 100% ); transform: rotate(17deg); z-index: 2; } /* ========================================================= DESKTOP HOVER ========================================================= */ @media (hover: hover) { .pm-categories .square-links__item > a:hover { transform: translateY(-7px); border-color: rgba(183, 132, 60, 0.58) !important; background: linear-gradient( 145deg, #fffaf2 0%, #edd9bb 100% ) !important; box-shadow: 0 18px 38px rgba(23, 23, 23, 0.14), 0 4px 10px rgba(23, 23, 23, 0.05), 0 0 0 1px rgba(202, 158, 94, 0.12); } .pm-categories .square-links__item > a:hover .square-links__image-wrap img { transform: scale(1.022) !important; filter: brightness(1.04) contrast(1.015); } .pm-categories .square-links__item > a:hover .square-links__image-wrap::after { opacity: 1; animation: pm-category-card-shine 0.85s ease-out forwards; } } @keyframes pm-category-card-shine { from { left: -80%; } to { left: 145%; } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-categories .square-links__item > a { background: linear-gradient( 145deg, #26221d 0%, #191817 100% ) !important; border-color: rgba(218, 177, 116, 0.22) !important; } .dark .pm-categories .square-links__image-wrap { background: #1f1f1f !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 639px) { .pm-categories { padding-top: 20px; padding-bottom: 30px; } /* Mobile = 2 cards */ .pm-categories .square-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 13px !important; } .pm-categories .square-links__item > a { padding: 5px !important; border-radius: 18px !important; } .pm-categories .square-links__image-wrap, .pm-categories .square-links__image-wrap img { border-radius: 14px !important; } } /* ========================================================= PRO MAKER — HERO / ADVANCED SLIDER Custom class: pm-hero ========================================================= */ /* ========================= HERO SECTION ========================= */ .pm-hero { position: relative; overflow: hidden; } /* ========================= SLIDE ========================= */ .pm-hero .advanced-slider__slide { position: relative !important; overflow: hidden !important; background: #171717; } /* ========================= VIDEO ========================= */ .pm-hero .advanced-slider__video { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center top !important; filter: brightness(.88) contrast(1.04) saturate(.94); transition: filter .4s ease; } /* ========================= VIDEO OVERLAY ========================= */ /* طبقة داكنة خفيفة تحافظ على الفيديو وتخلي النص الأبيض واضح فوق البيج والأبيض */ .pm-hero .advanced-slider__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(10, 10, 10, .18) 0%, rgba(10, 10, 10, .12) 35%, rgba(10, 10, 10, .28) 100% ), radial-gradient( circle at center, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .20) 100% ); z-index: 1; } /* ========================= CAPTION ========================= */ .pm-hero .advanced-slider__caption { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; z-index: 2 !important; pointer-events: none; } .pm-hero .advanced-slider__caption .container { width: 100% !important; } /* ========================= CONTENT ========================= */ .pm-hero .advanced-slider__caption__inner__content { position: relative; max-width: 760px; margin-inline: auto; padding: 24px 32px; text-align: center; pointer-events: auto; } /* ========================= HERO TITLE ========================= */ .pm-hero .advanced-slider__caption__inner__content__heading { position: relative; margin: 0 0 12px !important; color: #ffffff !important; font-size: clamp(38px, 4.4vw, 68px) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.035em; text-shadow: 0 2px 3px rgba(0, 0, 0, .48), 0 7px 20px rgba(0, 0, 0, .34), 0 0 22px rgba(225, 190, 138, .15); filter: drop-shadow(0 2px 2px rgba(0,0,0,.30)); animation: pm-hero-title-enter .9s cubic-bezier(.2,.8,.2,1) both; } /* Accent صغير تحت العنوان */ .pm-hero .advanced-slider__caption__inner__content__heading::after { content: ""; display: block; width: 72px; height: 3px; margin: 16px auto 0; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, #b77928 20%, #e4bc79 50%, #b77928 80%, transparent 100% ); box-shadow: 0 0 8px rgba(214, 172, 104, .42), 0 0 18px rgba(214, 172, 104, .18); } /* ========================= HERO DESCRIPTION ========================= */ .pm-hero .advanced-slider__caption__inner__content__text { max-width: 620px; margin: 0 auto 24px !important; color: rgba(255, 255, 255, .94) !important; font-size: clamp(17px, 1.55vw, 22px) !important; line-height: 1.8 !important; font-weight: 400 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, .48), 0 5px 14px rgba(0, 0, 0, .24); animation: pm-hero-text-enter 1s .12s cubic-bezier(.2,.8,.2,1) both; } /* ========================= CTA BUTTON ========================= */ .pm-hero .advanced-slider__caption__inner__content__button { position: relative; display: inline-flex !important; align-items: center; justify-content: center; min-width: 170px; padding: 13px 26px !important; color: #171717 !important; background: linear-gradient( 135deg, #f7ead7 0%, #dcc19a 100% ) !important; border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 999px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .75); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; animation: pm-hero-button-enter 1s .22s cubic-bezier(.2,.8,.2,1) both; } /* لمعة بسيطة على الزر */ .pm-hero .advanced-slider__caption__inner__content__button::after { content: ""; position: absolute; top: -70%; left: -70%; width: 35%; height: 240%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, .75), transparent ); transform: rotate(18deg); pointer-events: none; } /* Button hover */ @media (hover: hover) { .pm-hero .advanced-slider__caption__inner__content__button:hover { transform: translateY(-3px); background: linear-gradient( 135deg, #fff3e0 0%, #e3c69d 100% ) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, .30), 0 0 18px rgba(218, 177, 116, .18), inset 0 1px 0 rgba(255, 255, 255, .85); } .pm-hero .advanced-slider__caption__inner__content__button:hover::after { animation: pm-hero-button-shine .75s ease-out forwards; } } @keyframes pm-hero-button-shine { from { left: -70%; } to { left: 135%; } } /* ========================= ENTRANCE ANIMATIONS ========================= */ @keyframes pm-hero-title-enter { from { opacity: 0; transform: translateY(18px); filter: blur(5px) drop-shadow(0 2px 2px rgba(0,0,0,.30)); } to { opacity: 1; transform: translateY(0); filter: blur(0) drop-shadow(0 2px 2px rgba(0,0,0,.30)); } } @keyframes pm-hero-text-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes pm-hero-button-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .pm-hero .advanced-slider__caption__inner__content { max-width: 94%; padding: 20px 18px; } .pm-hero .advanced-slider__caption__inner__content__heading { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.2 !important; } .pm-hero .advanced-slider__caption__inner__content__heading::after { width: 56px; margin-top: 12px; } .pm-hero .advanced-slider__caption__inner__content__text { max-width: 92%; margin-bottom: 20px !important; font-size: 16px !important; line-height: 1.7 !important; } .pm-hero .advanced-slider__caption__inner__content__button { min-width: 150px; padding: 11px 21px !important; font-size: 15px !important; } } /* ========================= VERY SMALL MOBILE ========================= */ @media (max-width: 420px) { .pm-hero .advanced-slider__caption__inner__content { padding-inline: 12px; } .pm-hero .advanced-slider__caption__inner__content__heading { font-size: 30px !important; } .pm-hero .advanced-slider__caption__inner__content__text { font-size: 14px !important; } } /* ========================================================= PRO MAKER — CUSTOM DESIGN BANNER Class: pm-custom-design-banner ========================================================= */ .pm-custom-design-banner { position: relative; padding-top: 30px !important; padding-bottom: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .pm-custom-design-banner .dynamic-banner__inner { position: relative; } /* ========================= Banner container ========================= */ .pm-custom-design-banner .banner { position: relative; display: block; overflow: hidden !important; border-radius: 24px !important; border: 1px solid rgba(176, 133, 72, .18); box-shadow: 0 12px 30px rgba(25, 20, 15, .10), 0 3px 8px rgba(25, 20, 15, .05); transform: translateY(0); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* ========================= Images IMPORTANT: don't force display here ========================= */ .pm-custom-design-banner .banner img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; border-radius: inherit !important; transition: transform .5s ease, filter .35s ease; } /* ========================= Banner image Same image on all devices ========================= */ .pm-custom-design-banner .banner img { display: block !important; } /* ========================= Soft shine ========================= */ .pm-custom-design-banner .banner::after { content: ""; position: absolute; top: -60%; left: -40%; width: 18%; height: 220%; background: linear-gradient( 105deg, transparent, rgba(255,255,255,.22), transparent ); transform: rotate(16deg); opacity: 0; pointer-events: none; } /* ========================= Hover ========================= */ @media (hover: hover) { .pm-custom-design-banner .banner:hover { transform: translateY(-5px); border-color: rgba(183,132,62,.32); box-shadow: 0 19px 40px rgba(25,20,15,.14), 0 5px 12px rgba(25,20,15,.07); } .pm-custom-design-banner .banner:hover img { transform: scale(1.006); filter: brightness(1.01) contrast(1.01); } .pm-custom-design-banner .banner:hover::after { opacity: 1; animation: pm-custom-banner-shine .85s ease-out forwards; } } @keyframes pm-custom-banner-shine { from { left: -40%; } to { left: 125%; } } /* ========================= Mobile ========================= */ @media (max-width: 639px) { .pm-custom-design-banner { padding-top: 7px !important; padding-bottom: 7px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .pm-custom-design-banner .dynamic-banner__inner { padding-left: 14px !important; padding-right: 14px !important; } .pm-custom-design-banner .banner { border-radius: 20px !important; box-shadow: 0 10px 24px rgba(25,20,15,.10), 0 2px 7px rgba(25,20,15,.05); } .pm-custom-design-banner .banner img { height: 160px !important; object-fit: fill !important; object-position: center !important; } } /* ========================================================= PRO MAKER — FEATURED PRODUCTS SECTION Class: pm-featured-products ========================================================= */ .pm-featured-products { position: relative; padding: 42px 0; overflow: hidden; background: #f7f3ec !important; } /* ========================================================= MAIN LAYOUT ========================================================= */ .pm-featured-products .special-products-slider__inner { max-width: 1440px; margin-inline: auto; gap: 30px !important; } /* ========================================================= IMAGE / CONTENT PANEL ========================================================= */ .pm-featured-products .special-slider__media { position: relative; overflow: hidden; min-height: 620px !important; max-height: 700px !important; border-radius: 26px; background: #1a1713 !important; box-shadow: 0 18px 40px rgba(25, 20, 15, .13), 0 4px 12px rgba(25, 20, 15, .07); } .pm-featured-products .special-slider__media > img { width: 100%; height: 100% !important; min-height: 620px !important; max-height: 700px !important; object-fit: cover !important; object-position: center !important; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease; } /* Overlay */ .pm-featured-products .special-slider__media::before { background: linear-gradient( 180deg, rgba(12, 10, 8, .25) 0%, rgba(12, 10, 8, .38) 55%, rgba(12, 10, 8, .52) 100% ) !important; } /* ========================================================= CONTENT ========================================================= */ .pm-featured-products .special-slider__content { padding: 42px 28px !important; gap: 18px !important; } /* ========================================================= TITLE ========================================================= */ .pm-featured-products .special-products-slider__title { position: relative; margin: 0 !important; font-size: 36px !important; line-height: 1.25 !important; font-weight: 700 !important; background: linear-gradient( 105deg, #ffffff 0%, #ffffff 40%, #d5a45e 45%, #edcc91 48%, #fff5df 50%, #edcc91 52%, #d5a45e 55%, #ffffff 60%, #ffffff 100% ); background-size: 300% 100%; background-repeat: no-repeat; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)) drop-shadow(0 8px 18px rgba(0, 0, 0, .20)); animation: pm-featured-title-sweep 7s ease-in-out infinite; } .pm-featured-products .special-products-slider__title::after { content: ""; display: block; width: 60px; height: 2px; margin: 14px auto 0; border-radius: 999px; background: linear-gradient( 90deg, transparent, #bd8741, #efd19a, #bd8741, transparent ); box-shadow: 0 0 10px rgba(220, 175, 106, .35); animation: pm-featured-title-line 3.2s ease-in-out infinite; } @keyframes pm-featured-title-sweep { 0%, 20% { background-position: 0% 50%; } 70%, 100% { background-position: 100% 50%; } } @keyframes pm-featured-title-line { 0%, 100% { opacity: .55; transform: scaleX(.82); } 50% { opacity: 1; transform: scaleX(1); } } /* ========================================================= DESCRIPTION ========================================================= */ .pm-featured-products .special-slider__content .description { max-width: 390px !important; margin: 0 !important; padding: 10px 16px; color: rgba(255, 255, 255, .97) !important; font-size: 18px !important; line-height: 1.85 !important; font-weight: 600 !important; background: rgba(10, 9, 8, .20); border: 1px solid rgba(255, 255, 255, .10); border-radius: 13px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-shadow: 0 2px 5px rgba(0, 0, 0, .42); } /* ========================================================= CTA BUTTON التحكم في ظهوره من إعدادات Selia ========================================================= */ .pm-featured-products .special-products-slider__button { position: relative !important; display: inline-flex; align-items: center; justify-content: center; min-width: 145px; padding: 11px 22px !important; border-radius: 999px !important; overflow: hidden !important; isolation: isolate; border: 1px solid rgba(255, 255, 255, .28) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; } /* أي Hover layer من Selia يحافظ على نفس الحواف */ .pm-featured-products .special-products-slider__button::before, .pm-featured-products .special-products-slider__button::after { border-radius: inherit !important; } .pm-featured-products .special-products-slider__button > span { position: relative; z-index: 3; } @media (hover: hover) { .pm-featured-products .special-products-slider__button:hover { transform: translateY(-3px); border-radius: 999px !important; overflow: hidden !important; box-shadow: 0 14px 28px rgba(0, 0, 0, .27), 0 0 18px rgba(217, 186, 138, .20), inset 0 1px 0 rgba(255, 255, 255, .35); } .pm-featured-products .special-products-slider__button:hover::before, .pm-featured-products .special-products-slider__button:hover::after { border-radius: inherit !important; } } /* ========================================================= PRODUCTS AREA ========================================================= */ .pm-featured-products .slider-wrap { padding-top: 60px !important; padding-bottom: 80px !important; } /* Product Card */ .pm-featured-products .product-card { overflow: hidden; background: #ffffff !important; border: 1px solid rgba(174, 132, 73, .16) !important; border-radius: 22px !important; box-shadow: 0 8px 24px rgba(25, 20, 15, .08) !important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .pm-featured-products .product-card__image { overflow: hidden; background: #faf7f1; } .pm-featured-products .product-card__image img { object-fit: cover !important; transition: opacity .25s ease, transform .35s ease; } .pm-featured-products .product-card__title a { color: #171717 !important; font-weight: 600 !important; } /* ========================================================= PRODUCT CARD HOVER ========================================================= */ @media (hover: hover) { .pm-featured-products .product-card:hover { transform: translateY(-6px); border-color: rgba(174, 132, 73, .30) !important; box-shadow: 0 16px 34px rgba(25, 20, 15, .13) !important; } .pm-featured-products .special-slider__media:hover > img { transform: scale(1.02); filter: brightness(1.02); } } /* ========================================================= MAIN PRODUCTS SLIDER SCROLLBAR ========================================================= */ .pm-featured-products .swiper-scrollbar { height: 7px !important; border: 1px solid rgba(174, 132, 73, .10); border-radius: 999px !important; background: rgba(23, 23, 23, .07) !important; overflow: hidden; transition: background .3s ease, box-shadow .3s ease; } .pm-featured-products .swiper-scrollbar-drag { border-radius: 999px !important; background: linear-gradient( 90deg, #171717, #5e4a34, #b58950 ) !important; box-shadow: 0 1px 5px rgba(0, 0, 0, .20); transition: box-shadow .25s ease, filter .25s ease; } .pm-featured-products .swiper-scrollbar:hover { background: rgba(23, 23, 23, .11) !important; box-shadow: 0 0 8px rgba(174, 132, 73, .12); } .pm-featured-products .swiper-scrollbar:hover .swiper-scrollbar-drag { filter: brightness(1.08); box-shadow: 0 0 9px rgba(174, 132, 73, .35), 0 2px 6px rgba(0, 0, 0, .22); } /* ========================================================= MODERN PRODUCT SLIDER ARROWS ========================================================= */ .pm-featured-products .s-slider-nav-arrow { width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(174, 132, 73, .20) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .88) !important; color: #171717 !important; box-shadow: 0 6px 16px rgba(25, 20, 15, .10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease; } .pm-featured-products .s-slider-nav-arrow svg { width: 19px !important; height: 19px !important; } .pm-featured-products .s-slider-nav-arrow svg path { fill: currentColor !important; } @media (hover: hover) { .pm-featured-products .s-slider-nav-arrow:not(:disabled):hover { transform: translateY(-2px); background: #ead1aa !important; border-color: rgba(174, 132, 73, .42) !important; box-shadow: 0 9px 20px rgba(25, 20, 15, .15), 0 0 12px rgba(198, 151, 85, .18); } } .pm-featured-products .s-slider-nav-arrow:disabled { opacity: .32 !important; cursor: default !important; box-shadow: none; } /* ========================================================= DARK MODE — SECTION ========================================================= */ .dark .pm-featured-products, [data-theme="dark"] .pm-featured-products { background: #0f0f0f !important; } .dark .pm-featured-products .product-card, [data-theme="dark"] .pm-featured-products .product-card { background: #1f1f1f !important; border-color: rgba(218, 177, 112, .14) !important; } .dark .pm-featured-products .product-card__title a, [data-theme="dark"] .pm-featured-products .product-card__title a { color: #f7f3ec !important; } .dark .pm-featured-products .s-slider-nav-arrow, [data-theme="dark"] .pm-featured-products .s-slider-nav-arrow { color: #f7f3ec !important; background: rgba(31, 31, 31, .90) !important; border-color: rgba(218, 177, 112, .20) !important; } /* ========================================================= RESPONSIVE — SECTION ========================================================= */ @media (max-width: 1023px) { .pm-featured-products { padding: 28px 0 34px; } .pm-featured-products .special-products-slider__inner { gap: 20px !important; } .pm-featured-products .special-slider__media { min-height: 420px !important; max-height: 500px !important; margin-inline: 14px; border-radius: 22px; } .pm-featured-products .special-slider__media > img { min-height: 420px !important; max-height: 500px !important; } .pm-featured-products .special-products-slider__title { font-size: 30px !important; } .pm-featured-products .special-slider__content .description { max-width: 340px !important; padding: 9px 13px; font-size: 16px !important; line-height: 1.8 !important; } .pm-featured-products .slider-wrap { padding-top: 20px !important; padding-bottom: 55px !important; } .pm-featured-products .s-slider-nav-arrow { width: 38px !important; height: 38px !important; } } /* ========================================================= PRO MAKER — PRODUCT CARD HOVER Stable card: no vertical jumping ========================================================= */ .pm-featured-products .product-card { transform: none !important; transition: box-shadow .3s ease, border-color .3s ease; } @media (hover:hover) { .pm-featured-products .product-card:hover { transform: none !important; border-color: rgba(174,132,73,.32) !important; box-shadow: 0 17px 36px rgba(25,20,15,.14) !important; } .pm-featured-products .product-card:hover .product-card__image img { transform: scale(1.018); } } /* ========================================================= PRO MAKER — GLOBAL COLOR OPTIONS Native scrollbar removed completely ========================================================= */ .s-product-options-colors-wrapper { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; direction: rtl !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 6px 4px 5px !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Firefox */ scrollbar-width: none !important; /* Prevent product swiper drag */ touch-action: pan-x !important; } /* Chrome / Edge / Brave */ .s-product-options-colors-wrapper::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Individual colors */ .s-product-options-colors-item { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } .s-product-options-colors-item label { flex: 0 0 auto !important; } /* ========================================================= CUSTOM COLOR SCROLLBAR ========================================================= */ .pm-color-scrollbar { position: relative; width: 100%; height: 22px; display: flex; align-items: center; padding: 0 5px; margin: 5px 0 2px; direction: ltr; user-select: none; -webkit-user-select: none; touch-action: none; z-index: 5; } .pm-color-scrollbar[hidden] { display: none !important; } /* Track */ .pm-color-scrollbar__track { position: relative; width: 100%; height: 9px; border-radius: 999px; background: linear-gradient( 90deg, rgba(23,23,23,.055), rgba(187,142,84,.13), rgba(23,23,23,.055) ); border: 1px solid rgba(174,132,73,.16); box-shadow: inset 0 1px 3px rgba(0,0,0,.08); cursor: pointer; overflow: visible; transition: height .22s ease, box-shadow .25s ease, background .25s ease; } /* Thumb */ .pm-color-scrollbar__thumb { position: absolute; top: 50%; left: 0; height: 15px; min-width: 55px; transform: translateY(-50%); border-radius: 999px; cursor: grab; touch-action: none; background: linear-gradient( 90deg, #805524 0%, #ad7941 20%, #d2a96d 38%, #f1d7aa 50%, #d9b47d 62%, #a66f38 82%, #805524 100% ); border: 2px solid rgba(255,255,255,.92); box-shadow: 0 3px 8px rgba(58,37,15,.26); transition: height .18s ease, filter .18s ease, box-shadow .18s ease; } /* Grip */ .pm-color-scrollbar__thumb::before, .pm-color-scrollbar__thumb::after { content: ""; position: absolute; top: 50%; width: 2px; height: 7px; border-radius: 999px; background: rgba(74,45,19,.32); transform: translateY(-50%); } .pm-color-scrollbar__thumb::before { left: calc(50% - 3px); } .pm-color-scrollbar__thumb::after { left: calc(50% + 2px); } /* Hover */ @media (hover:hover) { .pm-color-scrollbar:hover .pm-color-scrollbar__track { height: 11px; box-shadow: inset 0 1px 3px rgba(0,0,0,.08), 0 0 9px rgba(184,135,72,.14); } .pm-color-scrollbar__thumb:hover { height: 17px; filter: brightness(1.07); box-shadow: 0 0 11px rgba(201,151,87,.48), 0 4px 9px rgba(58,37,15,.27); } } /* Dragging */ .pm-color-scrollbar.is-dragging .pm-color-scrollbar__thumb { height: 18px; cursor: grabbing; filter: brightness(1.12); box-shadow: 0 0 15px rgba(220,169,99,.72), 0 5px 11px rgba(54,31,10,.30); } /* Moving */ .pm-color-scrollbar.is-scrolling .pm-color-scrollbar__track { background: linear-gradient( 90deg, rgba(23,23,23,.06), rgba(216,170,105,.22), rgba(23,23,23,.06) ); } /* ========================================================= COLOR SWATCH HOVER ========================================================= */ @media (hover:hover) { .s-product-options-colors-item label > span { transition: transform .2s ease, box-shadow .2s ease; } .s-product-options-colors-item label:hover > span { transform: scale(1.06); box-shadow: 0 4px 10px rgba(0,0,0,.15); } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-color-scrollbar__track, [data-theme="dark"] .pm-color-scrollbar__track { background: linear-gradient( 90deg, rgba(255,255,255,.045), rgba(216,174,111,.13), rgba(255,255,255,.045) ); border-color: rgba(216,174,111,.18); } .dark .pm-color-scrollbar__thumb, [data-theme="dark"] .pm-color-scrollbar__thumb { border-color: rgba(20,20,20,.88); background: linear-gradient( 90deg, #70491f, #a8733b, #d6ab6f, #eccb96, #b37c43, #70491f ); } /* ========================================================= MOBILE ========================================================= */ @media (max-width:639px) { .s-product-options-colors-wrapper { gap: 7px !important; } .pm-color-scrollbar { height: 20px; } .pm-color-scrollbar__track { height: 8px; } .pm-color-scrollbar__thumb { height: 14px; } } /* ========================================================= PRO MAKER — PREMIUM BENEFITS FINAL FULL CSS Class: pm-premium-benefits Uses existing SVG-border JavaScript ========================================================= */ /* ========================================================= SECTION — TRANSPARENT GLOSSY GLASS ========================================================= */ .pm-premium-benefits { position: relative; isolation: isolate; margin-top: 42px; margin-bottom: 42px; padding: 54px 34px !important; overflow: hidden; border-radius: 30px; background-color: rgba(24, 21, 18, .22) !important; border: 1px solid rgba(255, 255, 255, .17); backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); box-shadow: 0 20px 50px rgba(20, 15, 10, .11), inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(0, 0, 0, .13); } /* ========================================================= SECTION GLOSS ========================================================= */ .pm-premium-benefits::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 118deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .045) 17%, transparent 35%, transparent 58%, rgba(231, 191, 127, .055) 78%, transparent 100% ); } /* Warm ambient glow */ .pm-premium-benefits::after { content: ""; position: absolute; width: 700px; height: 420px; top: -315px; left: 50%; z-index: 0; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(237, 202, 145, .18) 0%, rgba(237, 202, 145, .07) 34%, transparent 72% ); } /* ========================================================= GRID ========================================================= */ .pm-premium-benefits .enhanced-features__grid { position: relative; z-index: 2; align-items: stretch; gap: 22px !important; } /* ========================================================= CARD ========================================================= */ .pm-premium-benefits .s-block--enhanced-features__item { position: relative !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 265px; padding: 32px 20px 27px !important; overflow: hidden !important; text-align: center; border-radius: 22px !important; background: linear-gradient( 155deg, rgba(255, 254, 250, .985) 0%, rgba(250, 246, 239, .975) 48%, rgba(244, 237, 226, .97) 100% ) !important; border: 1px solid rgba(221, 185, 129, .16); box-shadow: 0 13px 30px rgba(0, 0, 0, .13), 0 3px 9px rgba(0, 0, 0, .055), inset 0 1px 0 rgba(255, 255, 255, .98); transform: translateY(0); transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease, border-color .35s ease; } /* ========================================================= REMOVE SELIA DEFAULT BORDER LINES ========================================================= */ .pm-premium-benefits .s-block--enhanced-features__item > .absolute { display: none !important; } /* ========================================================= CARD REFLECTION ========================================================= */ .pm-premium-benefits .s-block--enhanced-features__item::after { content: ""; position: absolute; top: -70%; left: -42%; z-index: 8; width: 17%; height: 240%; transform: rotate(17deg); pointer-events: none; opacity: 0; background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, .52), transparent ); } /* ========================================================= SVG GOLD BORDER SAME LINE: small bar at rest expands from center on both sides follows rounded corners meets at bottom center ========================================================= */ .pm-premium-benefits .pm-benefit-border-svg { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* * Each SVG path starts from the top center. * * Path 1: * top center → right → bottom center * * Path 2: * top center → left → bottom center * * At rest we show only the beginning of both paths. * Together they visually form ONE small centered gold bar. */ .pm-premium-benefits .pm-benefit-border-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pathLength: 1; stroke-dasharray: .075 1; stroke-dashoffset: 0; filter: drop-shadow( 0 0 3px rgba(210, 160, 90, .48) ); transition: stroke-dasharray .9s cubic-bezier(.22, .75, .2, 1), filter .35s ease; } /* ========================================================= ICON ========================================================= */ .pm-premium-benefits .feature-icon { position: relative; z-index: 10; width: 68px !important; height: 68px !important; flex: 0 0 68px; display: flex !important; align-items: center; justify-content: center; margin: 0 auto 22px !important; border-radius: 50% !important; color: #171717 !important; background: linear-gradient( 145deg, #ffffff 0%, #eadac2 100% ) !important; border: 1px solid rgba(178, 128, 63, .23); box-shadow: 0 8px 18px rgba(68, 46, 20, .10), inset 0 1px 0 rgba(255, 255, 255, .96); transition: transform .35s cubic-bezier(.2, .75, .2, 1), background .35s ease, box-shadow .35s ease; } .pm-premium-benefits .feature-icon i { color: #171717 !important; font-size: 30px !important; line-height: 1 !important; transition: color .3s ease, transform .3s ease; } /* Icon halo */ .pm-premium-benefits .feature-icon::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(190, 142, 78, 0); pointer-events: none; transition: border-color .3s ease, transform .3s ease; } /* ========================================================= TITLE ========================================================= */ .pm-premium-benefits .s-block--enhanced-features__item h2 { position: relative; z-index: 10; margin: 0 0 9px !important; color: #171717 !important; font-size: 20px !important; line-height: 1.45 !important; font-weight: 700 !important; letter-spacing: -.15px; } /* ========================================================= DESCRIPTION ========================================================= */ .pm-premium-benefits .s-block--enhanced-features__item p { position: relative; z-index: 10; max-width: 250px; margin: 0 auto !important; color: #686159 !important; font-size: 15.5px !important; line-height: 1.85 !important; font-weight: 450 !important; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { .pm-premium-benefits .s-block--enhanced-features__item:hover { transform: translateY(-6px); border-color: rgba(197, 147, 79, .08); box-shadow: 0 23px 46px rgba(0, 0, 0, .18), 0 7px 15px rgba(0, 0, 0, .07), inset 0 1px 0 rgba(255, 255, 255, 1); } /* * SAME GOLD LINE expands. * No second line. */ .pm-premium-benefits .s-block--enhanced-features__item:hover .pm-benefit-border-path { stroke-dasharray: 1 0; filter: drop-shadow( 0 0 5px rgba(220, 170, 100, .62) ); } /* Reflection */ .pm-premium-benefits .s-block--enhanced-features__item:hover::after { opacity: 1; animation: pm-benefits-shine .85s ease-out forwards; } /* Icon */ .pm-premium-benefits .s-block--enhanced-features__item:hover .feature-icon { transform: translateY(-3px) scale(1.04); background: linear-gradient( 145deg, #fffdf8, #e7cea6 ) !important; box-shadow: 0 11px 24px rgba(98, 66, 29, .16), 0 0 0 5px rgba(199, 151, 87, .07); } .pm-premium-benefits .s-block--enhanced-features__item:hover .feature-icon::after { border-color: rgba(183, 132, 64, .20); transform: scale(1.02); } .pm-premium-benefits .s-block--enhanced-features__item:hover .feature-icon i { color: #956329 !important; transform: scale(1.06); } } /* ========================================================= REFLECTION ANIMATION ========================================================= */ @keyframes pm-benefits-shine { from { left: -42%; } to { left: 125%; } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-premium-benefits, [data-theme="dark"] .pm-premium-benefits { background-color: rgba(9, 9, 9, .35) !important; border-color: rgba(221, 180, 112, .14); } .dark .pm-premium-benefits .s-block--enhanced-features__item, [data-theme="dark"] .pm-premium-benefits .s-block--enhanced-features__item { background: linear-gradient( 155deg, rgba(35, 35, 35, .96), rgba(27, 27, 27, .97) ) !important; border-color: rgba(218, 177, 112, .14); } .dark .pm-premium-benefits .s-block--enhanced-features__item h2, [data-theme="dark"] .pm-premium-benefits .s-block--enhanced-features__item h2 { color: #f7f3ec !important; } .dark .pm-premium-benefits .s-block--enhanced-features__item p, [data-theme="dark"] .pm-premium-benefits .s-block--enhanced-features__item p { color: #c1b9ad !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1023px) { .pm-premium-benefits { margin-top: 32px; margin-bottom: 32px; padding: 40px 24px !important; border-radius: 25px; } .pm-premium-benefits .enhanced-features__grid { gap: 18px !important; } .pm-premium-benefits .s-block--enhanced-features__item { min-height: 245px; padding: 28px 17px 24px !important; border-radius: 20px !important; } .pm-premium-benefits .feature-icon { width: 62px !important; height: 62px !important; flex-basis: 62px; margin-bottom: 18px !important; } .pm-premium-benefits .feature-icon i { font-size: 27px !important; } .pm-premium-benefits .s-block--enhanced-features__item h2 { font-size: 18px !important; } .pm-premium-benefits .s-block--enhanced-features__item p { font-size: 14.5px !important; line-height: 1.8 !important; } } /* ========================================================= MOBILE Selia stays 2 columns ========================================================= */ @media (max-width: 639px) { .pm-premium-benefits { margin: 24px 10px; padding: 24px 12px !important; border-radius: 22px; } .pm-premium-benefits .enhanced-features__grid { gap: 11px !important; } .pm-premium-benefits .s-block--enhanced-features__item { min-height: 220px; padding: 24px 12px 21px !important; border-radius: 17px !important; } /* * Slightly shorter default bar * on smaller cards */ .pm-premium-benefits .pm-benefit-border-path { stroke-dasharray: .065 1; } .pm-premium-benefits .s-block--enhanced-features__item:hover .pm-benefit-border-path { stroke-dasharray: 1 0; } .pm-premium-benefits .feature-icon { width: 54px !important; height: 54px !important; flex-basis: 54px; margin-bottom: 15px !important; } .pm-premium-benefits .feature-icon i { font-size: 24px !important; } .pm-premium-benefits .s-block--enhanced-features__item h2 { margin-bottom: 7px !important; font-size: 16px !important; line-height: 1.4 !important; } .pm-premium-benefits .s-block--enhanced-features__item p { font-size: 13px !important; line-height: 1.7 !important; } } /* ========================================================= PRO MAKER — ABOUT / BRAND STORY Class: pm-about-story ========================================================= */ /* ========================================================= SECTION ========================================================= */ .pm-about-story { position: relative; padding: 78px 0 !important; overflow: hidden; background: linear-gradient( 135deg, rgba(250,247,241,.98), rgba(243,236,225,.96) ) !important; border-top: 1px solid rgba(177,132,72,.10); border-bottom: 1px solid rgba(177,132,72,.10); } /* Soft ambient light */ .pm-about-story::before { content: ""; position: absolute; width: 580px; height: 580px; top: -330px; right: -160px; border-radius: 50%; background: radial-gradient( circle, rgba(203,157,94,.13), rgba(203,157,94,.045) 38%, transparent 70% ); pointer-events: none; } /* ========================================================= ROW ========================================================= */ .pm-about-story .about__row { position: relative; z-index: 2; gap: 64px !important; } /* ========================================================= CONTENT ========================================================= */ .pm-about-story .about__content { position: relative; padding: 24px 10px 24px 22px; } /* Small vertical accent */ .pm-about-story .about__content::before { content: ""; position: absolute; top: 28px; right: -18px; width: 3px; height: 78px; border-radius: 999px; background: linear-gradient( 180deg, #9e6b31, #e0bb80, transparent ); box-shadow: 0 0 12px rgba(190,141,75,.20); } /* ========================================================= SUBTITLE ========================================================= */ .pm-about-story .about__subtitle { margin: 0 0 8px !important; color: #9a6b35 !important; opacity: 1 !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .3px; } /* ========================================================= TITLE ========================================================= */ .pm-about-story .about__title { position: relative; display: inline-block; margin: 0 0 24px !important; color: #171717 !important; font-size: 42px !important; line-height: 1.25 !important; font-weight: 700 !important; } /* Gold underline */ .pm-about-story .about__title::after { content: ""; display: block; width: 68px; height: 3px; margin-top: 13px; border-radius: 999px; background: linear-gradient( 90deg, #9b672d, #e5c187, #9b672d ); box-shadow: 0 0 9px rgba(195,146,79,.22); transition: width .35s ease; } /* ========================================================= DESCRIPTION ========================================================= */ .pm-about-story .about__description { max-width: 680px; margin: 0 !important; color: #514c46 !important; font-size: 17px !important; line-height: 2.05 !important; font-weight: 400 !important; white-space: pre-line; } /* ========================================================= VIDEO WRAPPER ========================================================= */ .pm-about-story .about__media { position: relative; overflow: visible; border-radius: 26px; } /* Premium back plate */ .pm-about-story .about__media::before { content: ""; position: absolute; inset: 16px -14px -16px 14px; z-index: -1; border-radius: 26px; background: linear-gradient( 145deg, rgba(190,142,76,.16), rgba(23,23,23,.06) ); border: 1px solid rgba(190,142,76,.14); transition: transform .4s ease; } /* Small decorative corner */ .pm-about-story .about__media::after { content: ""; position: absolute; width: 72px; height: 72px; top: -13px; left: -13px; border-top: 2px solid rgba(184,132,66,.72); border-left: 2px solid rgba(184,132,66,.72); border-radius: 18px 0 0 0; pointer-events: none; z-index: 4; } /* ========================================================= VIDEO ========================================================= */ .pm-about-story .about__video { display: block; width: 100% !important; height: 400px !important; max-height: none !important; object-fit: cover !important; border-radius: 24px !important; border: 1px solid rgba(173,128,68,.18); box-shadow: 0 20px 42px rgba(25,20,15,.16), 0 5px 12px rgba(25,20,15,.07); filter: saturate(.88) contrast(1.04); transform: scale(1); transition: transform .6s cubic-bezier(.2,.75,.2,1), filter .45s ease, box-shadow .45s ease; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .pm-about-story:hover .about__title::after { width: 112px; } .pm-about-story .about__media:hover::before { transform: translate(4px,4px); } .pm-about-story .about__media:hover .about__video { transform: scale(1.015); filter: saturate(.96) contrast(1.05); box-shadow: 0 26px 50px rgba(25,20,15,.19), 0 7px 16px rgba(25,20,15,.08); } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-about-story, [data-theme="dark"] .pm-about-story { background: linear-gradient( 135deg, #171717, #111111 ) !important; border-color: rgba(218,177,112,.10); } .dark .pm-about-story .about__title, [data-theme="dark"] .pm-about-story .about__title { color: #f7f3ec !important; } .dark .pm-about-story .about__description, [data-theme="dark"] .pm-about-story .about__description { color: #c8c0b5 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1023px) { .pm-about-story { padding: 58px 0 !important; } .pm-about-story .about__row { gap: 38px !important; } .pm-about-story .about__title { font-size: 34px !important; } .pm-about-story .about__description { font-size: 16px !important; line-height: 1.95 !important; } .pm-about-story .about__video { height: 340px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .pm-about-story { padding: 42px 0 !important; } .pm-about-story .about__row { gap: 30px !important; } .pm-about-story .about__content { padding: 10px 4px 0; } .pm-about-story .about__content::before { display: none; } .pm-about-story .about__subtitle { font-size: 14px !important; } .pm-about-story .about__title { font-size: 29px !important; margin-bottom: 20px !important; } .pm-about-story .about__title::after { width: 54px; } .pm-about-story .about__description { font-size: 15px !important; line-height: 1.9 !important; } .pm-about-story .about__media { border-radius: 20px; } .pm-about-story .about__media::before { inset: 10px -8px -10px 8px; border-radius: 20px; } .pm-about-story .about__media::after { width: 54px; height: 54px; top: -9px; left: -9px; } .pm-about-story .about__video { height: 280px !important; border-radius: 19px !important; } } @media (min-width: 1200px) and (pointer: fine) { .pm-about-story .about__description { text-wrap: pretty; } .pm-about-story .pm-brand-nowrap { white-space: nowrap; } } /* ========================================================= PRO MAKER — PREMIUM FAQ FINAL FULL CSS Class: pm-faq-premium ========================================================= */ /* ========================================================= SECTION ========================================================= */ .pm-faq-premium { position: relative; padding: 68px 0 76px !important; background: transparent !important; } /* ========================================================= TITLE AREA ========================================================= */ .pm-faq-premium .home-block-title { margin-bottom: 38px !important; } .pm-faq-premium .home-block-title > div { width: 100%; text-align: center !important; } /* ========================================================= PREMIUM TITLE WHITE BASE + GOLD SWEEP RIGHT → LEFT ONLY ========================================================= */ .pm-faq-premium .faq__title { position: relative; display: inline-block !important; width: fit-content !important; margin: 0 auto !important; padding: 0 28px !important; text-align: center !important; font-size: 38px !important; line-height: 1.35 !important; font-weight: 700 !important; /* White base + gold band */ background-image: linear-gradient( 90deg, #ffffff 0%, #ffffff 39%, #b77c38 44%, #dcae6a 47%, #f6ddb0 50%, #dcae6a 53%, #b77c38 56%, #ffffff 61%, #ffffff 100% ) !important; background-size: 300% 100% !important; background-repeat: no-repeat !important; background-position: 0% 50%; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow( 0 2px 4px rgba(0,0,0,.48) ) drop-shadow( 0 7px 16px rgba(0,0,0,.18) ); animation: pm-faq-title-gold-rtl 5s linear infinite !important; animation-direction: normal !important; transition: transform .3s ease, filter .3s ease; } /* ========================================================= LEFT DIAMOND ========================================================= */ .pm-faq-premium .faq__title::before { content: ""; position: absolute; top: 50%; left: 4px; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg); border-radius: 1px; background: linear-gradient( 145deg, #f3d8a4, #a86f2e ); box-shadow: 0 0 10px rgba(220,174,103,.62); -webkit-text-fill-color: initial; pointer-events: none; } /* ========================================================= RIGHT DIAMOND ========================================================= */ .pm-faq-premium .faq__title::after { content: ""; position: absolute; top: 50%; right: 4px; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg); border-radius: 1px; background: linear-gradient( 145deg, #f3d8a4, #a86f2e ); box-shadow: 0 0 10px rgba(220,174,103,.62); -webkit-text-fill-color: initial; pointer-events: none; } /* ========================================================= GOLD SWEEP RIGHT → LEFT ONLY 0% → 100% moves the large background visually from right to left. Reset happens instantly at 100% while the gold band is already outside. ========================================================= */ @keyframes pm-faq-title-gold-rtl { /* Gold waiting outside on the right */ 0%, 14% { background-position: 0% 50%; } /* Pass through title from right → left */ 68% { background-position: 100% 50%; } /* Stay outside on the left */ 99.8% { background-position: 100% 50%; } /* Invisible instant reset */ 100% { background-position: 0% 50%; } } /* Title hover */ @media (hover:hover) { .pm-faq-premium .faq__title:hover { transform: translateY(-2px); filter: drop-shadow( 0 3px 5px rgba(0,0,0,.50) ) drop-shadow( 0 0 12px rgba(220,174,103,.27) ); } } /* ========================================================= SUBTITLE ========================================================= */ .pm-faq-premium .faq__subtitle { margin: 10px auto 0 !important; opacity: 1 !important; color: #37322d !important; font-size: 17px !important; line-height: 1.8 !important; font-weight: 600 !important; text-align: center !important; } /* ========================================================= STATIC GOLD TITLE LINE ========================================================= */ .pm-faq-premium .enhanced-title-border { position: relative; display: block !important; width: 84px !important; height: 2px !important; margin: 18px auto 0 !important; overflow: visible; border-radius: 999px; background: linear-gradient( 90deg, transparent, #9d692f, #d5a761, #f0d39e, #d5a761, #9d692f, transparent ) !important; box-shadow: 0 0 10px rgba(205,156,88,.34); animation: none !important; } /* No animation on the line */ .pm-faq-premium .enhanced-title-border::before { content: none !important; display: none !important; animation: none !important; } /* Center diamond */ .pm-faq-premium .enhanced-title-border::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; background: #d7a75f; box-shadow: 0 0 9px rgba(216,169,98,.60); } /* ========================================================= GRID ========================================================= */ .pm-faq-premium .faq__grid { position: relative; align-items: start; gap: 17px 20px !important; } /* Last question centered */ @media (min-width:768px) { .pm-faq-premium .faq__grid .single-faq:last-child { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; } } /* ========================================================= FAQ CARD ========================================================= */ .pm-faq-premium .single-faq { position: relative; overflow: hidden; padding: 0 !important; border: 1px solid rgba(31,27,22,.11) !important; border-radius: 18px !important; background: rgba(255,255,255,.94) !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: 0 7px 20px rgba(24,19,14,.07), inset 0 1px 0 rgba(255,255,255,.92); transform: translateY(0); transition: transform .32s cubic-bezier(.2,.75,.2,1), border-color .30s ease, box-shadow .30s ease, background-color .30s ease; } /* ========================================================= CARD GOLD ACCENT ========================================================= */ .pm-faq-premium .single-faq::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 7; width: 42px; height: 2px; transform: translateX(-50%); border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, transparent, #9d682e, #e3bd80, #9d682e, transparent ); box-shadow: 0 2px 8px rgba(196,146,78,.25); transition: width .38s ease, box-shadow .38s ease; } /* ========================================================= CARD REFLECTION ========================================================= */ .pm-faq-premium .single-faq::after { content: ""; position: absolute; top: -110%; left: -28%; z-index: 2; width: 12%; height: 320%; transform: rotate(17deg); pointer-events: none; opacity: 0; background: linear-gradient( 105deg, transparent, rgba(255,255,255,.67), transparent ); } /* ========================================================= BUTTON ========================================================= */ .pm-faq-premium .faq-btn { position: relative; z-index: 5; min-height: 68px; padding: 16px 18px !important; border: 0 !important; background: transparent !important; cursor: pointer; } /* ========================================================= QUESTION ========================================================= */ .pm-faq-premium .faq__question { margin: 0 !important; color: #25211d !important; font-size: 17px !important; line-height: 1.65 !important; font-weight: 600 !important; transition: color .28s ease; } /* ========================================================= ARROW Closed = UP Open = DOWN ========================================================= */ .pm-faq-premium .faq-btn > i { width: 36px; height: 36px; flex: 0 0 36px; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; border-radius: 50% !important; color: #f8f1e7 !important; background: #171717 !important; border: 1px solid rgba(185,135,70,.16); box-shadow: 0 5px 13px rgba(20,16,12,.14); transform: rotate(180deg) !important; transition: transform .38s cubic-bezier(.2,.75,.2,1), background .30s ease, color .30s ease, box-shadow .30s ease; } /* Open */ .pm-faq-premium .single-faq.pm-faq-open .faq-btn > i { transform: rotate(0deg) !important; color: #171717 !important; background: linear-gradient( 145deg, #f4dfbb, #c89657 ) !important; box-shadow: 0 7px 16px rgba(116,76,32,.18), 0 0 0 4px rgba(197,150,86,.08); } /* ========================================================= CONTENT JavaScript controls the height ========================================================= */ .pm-faq-premium .faq-content { display: block !important; height: 0; max-height: none !important; overflow: hidden !important; opacity: 0; padding: 0 !important; margin: 0 !important; } /* ========================================================= ANSWER ========================================================= */ .pm-faq-premium .faq__answer { display: block; margin: 0 !important; padding: 2px 18px 19px !important; color: #625b53 !important; font-size: 15px !important; line-height: 1.95 !important; font-weight: 400 !important; } /* ========================================================= OPEN STATE ========================================================= */ .pm-faq-premium .single-faq.pm-faq-open { border-color: rgba(181,130,65,.34) !important; background: rgba(255,252,246,.98) !important; box-shadow: 0 15px 32px rgba(26,19,12,.11), 0 0 0 1px rgba(207,163,101,.06), inset 0 1px 0 rgba(255,255,255,.96); } .pm-faq-premium .single-faq.pm-faq-open::before { width: calc(100% - 46px); box-shadow: 0 3px 11px rgba(200,149,80,.30); } .pm-faq-premium .single-faq.pm-faq-open .faq__question { color: #8f5e27 !important; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .pm-faq-premium .single-faq:hover { transform: translateY(-3px); border-color: rgba(181,130,65,.27) !important; box-shadow: 0 14px 30px rgba(24,18,12,.10), inset 0 1px 0 rgba(255,255,255,.95); } .pm-faq-premium .single-faq:hover::before { width: 86px; } .pm-faq-premium .single-faq:hover::after { opacity: 1; animation: pm-faq-card-shine .8s ease-out forwards; } .pm-faq-premium .single-faq:hover .faq__question { color: #8f5e27 !important; } .pm-faq-premium .faq-btn > i:hover { box-shadow: 0 8px 18px rgba(20,16,12,.19), 0 0 0 4px rgba(194,145,78,.07); } } @keyframes pm-faq-card-shine { from { left: -28%; } to { left: 125%; } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-faq-premium .single-faq, [data-theme="dark"] .pm-faq-premium .single-faq { background: rgba(31,31,31,.95) !important; border-color: rgba(218,177,112,.12) !important; } .dark .pm-faq-premium .faq__question, [data-theme="dark"] .pm-faq-premium .faq__question { color: #f7f3ec !important; } .dark .pm-faq-premium .faq__answer, [data-theme="dark"] .pm-faq-premium .faq__answer { color: #c4bcb1 !important; } .dark .pm-faq-premium .faq__subtitle, [data-theme="dark"] .pm-faq-premium .faq__subtitle { color: #d0c7ba !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1023px) { .pm-faq-premium { padding: 54px 0 62px !important; } .pm-faq-premium .faq__title { font-size: 34px !important; } .pm-faq-premium .faq__subtitle { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .pm-faq-premium { padding: 42px 0 48px !important; } .pm-faq-premium .home-block-title { margin-bottom: 27px !important; } .pm-faq-premium .faq__title { padding: 0 20px !important; font-size: 28px !important; } .pm-faq-premium .faq__title::before, .pm-faq-premium .faq__title::after { width: 6px; height: 6px; } .pm-faq-premium .faq__subtitle { max-width: 330px; margin: 8px auto 0 !important; font-size: 14.5px !important; line-height: 1.7 !important; } .pm-faq-premium .faq__grid { gap: 12px !important; } .pm-faq-premium .faq__grid .single-faq:last-child { width: 100%; } .pm-faq-premium .single-faq { border-radius: 16px !important; } .pm-faq-premium .faq-btn { min-height: 62px; padding: 14px !important; } .pm-faq-premium .faq__question { font-size: 15px !important; line-height: 1.6 !important; } .pm-faq-premium .faq-btn > i { width: 33px; height: 33px; flex-basis: 33px; } .pm-faq-premium .faq__answer { padding: 2px 14px 16px !important; font-size: 14px !important; line-height: 1.85 !important; } } /* ========================================================= PRO MAKER — COMPACT PREMIUM FOOTER FINAL VERSION Light Mode default + Dark Mode override ========================================================= */ /* ========================================================= ROOT — LIGHT MODE ========================================================= */ .store-footer { position: relative; color: #1f1f1f !important; background: #f4efe7 !important; } .store-footer .store-footer__curve { color: #f4efe7 !important; } /* ========================================================= MAIN AREA ========================================================= */ .store-footer .store-footer__inner { position: relative; padding: 34px 0 24px !important; background: linear-gradient( 180deg, #f5f0e8 0%, #f0e9df 100% ) !important; border-top: 1px solid rgba(171,132,76,.10); } /* Subtle ambient glow */ .store-footer .store-footer__inner::before { content: ""; position: absolute; top: -120px; left: 50%; width: min(650px, 100%); height: 260px; transform: translateX(-50%); pointer-events: none; background: radial-gradient( circle, rgba(200,157,94,.10), transparent 70% ); } /* ========================================================= PRO MAKER — PREMIUM FOOTER FINAL VERSION Light + Dark ========================================================= */ /* ========================================================= ROOT — LIGHT MODE ========================================================= */ .store-footer { position: relative; color: #1f1f1f !important; background: #f4efe7 !important; } .store-footer .store-footer__curve { color: #f4efe7 !important; } /* ========================================================= MAIN AREA ========================================================= */ .store-footer .store-footer__inner { position: relative; padding: 34px 0 24px !important; background: linear-gradient( 180deg, #f5f0e8 0%, #f0e9df 100% ) !important; border-top: 1px solid rgba(171,132,76,.10); } /* Ambient glow */ .store-footer .store-footer__inner::before { content: ""; position: absolute; top: -120px; left: 50%; width: min(650px, 100%); height: 260px; transform: translateX(-50%); pointer-events: none; background: radial-gradient( circle, rgba(200,157,94,.10), transparent 70% ); } /* ========================================================= DESKTOP LAYOUT Brand truly centered Links stay on right ========================================================= */ @media (min-width:1024px) { .store-footer .store-footer__grid { position: relative; z-index: 2; display: grid !important; width: calc(100% - 80px); max-width: 1280px; margin: 0 auto !important; grid-template-columns: 220px minmax(560px,720px) 240px !important; justify-content: center !important; align-items: center !important; column-gap: 40px !important; direction: ltr; } /* Brand */ .store-footer .store-footer__brand { grid-column: 2 !important; grid-row: 1 !important; width: 100%; max-width: 720px; margin: 0 auto !important; padding: 0 !important; justify-self: center; align-self: center; direction: rtl; text-align: center !important; } /* Links */ .store-footer .store-footer__menu { grid-column: 3 !important; grid-row: 1 !important; width: 100%; max-width: 220px; margin: 0 !important; padding: 0 !important; justify-self: end; align-self: center; direction: rtl; text-align: right !important; } } /* Remove empty apps column */ .store-footer .store-footer__apps { display: none !important; } /* ========================================================= BRAND ========================================================= */ .store-footer .store-footer__logo-link { justify-content: center !important; margin: 0 0 10px !important; } .store-footer .store-footer__logo-link img { width: auto !important; height: 62px !important; object-fit: contain; filter: none; transition: transform .3s ease; } @media (hover:hover) { .store-footer .store-footer__logo-link:hover img { transform: translateY(-2px); } } /* ========================================================= DESCRIPTION ========================================================= */ .store-footer .footer-description { width: 100%; max-width: 720px; margin: 0 auto !important; color: #5b554f !important; font-size: 14.5px !important; line-height: 1.85 !important; text-align: center !important; } .store-footer .footer-description p { margin: 0 0 5px !important; color: inherit !important; text-align: center !important; } .store-footer .footer-description strong { color: #202020 !important; font-weight: 700 !important; } /* Slogan */ .store-footer .footer-description p:first-child { margin-bottom: 8px !important; color: #80603a !important; font-size: 15px !important; font-weight: 600 !important; font-style: normal !important; } /* Empty paragraphs */ .store-footer .footer-description p:empty { display: none !important; } /* ========================================================= FREE WORK DOCUMENT PREMIUM GLASS CARD ========================================================= */ .store-footer .footer-badges { display: flex !important; justify-content: center !important; align-items: center; margin-top: 16px !important; } /* Host + internal class */ .store-footer salla-trust-badges, .store-footer .s-trust-badges-wrapper { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 11px; width: fit-content !important; min-width: 185px; min-height: 64px; padding: 9px 14px !important; overflow: hidden; border: 1px solid rgba(160,119,65,.18) !important; border-radius: 16px !important; background: linear-gradient( 145deg, rgba(255,255,255,.70), rgba(255,255,255,.34) ) !important; backdrop-filter: blur(10px) saturate(1.12); -webkit-backdrop-filter: blur(10px) saturate(1.12); box-shadow: 0 8px 22px rgba(91,67,36,.07), inset 0 1px 0 rgba(255,255,255,.85); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } /* Gloss reflection */ .store-footer salla-trust-badges::before, .store-footer .s-trust-badges-wrapper::before { content: ""; position: absolute; top: -80%; left: -35%; width: 24%; height: 260%; transform: rotate(18deg); pointer-events: none; opacity: .50; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.80), transparent ); } /* Tiny warm glow */ .store-footer salla-trust-badges::after, .store-footer .s-trust-badges-wrapper::after { content: ""; position: absolute; width: 90px; height: 90px; top: -55px; right: -45px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(205,157,87,.16), transparent 70% ); } /* Document image */ .store-footer .s-trust-badges-image { position: relative; z-index: 2; width: 48px !important; height: 48px !important; flex: 0 0 48px; object-fit: contain; } /* Document content */ .store-footer .s-trust-badges-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; text-align: right; } .store-footer .s-trust-badges-label { margin: 0 0 2px !important; color: #746d65 !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; } .store-footer .s-trust-badges-number { color: #252525 !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 700 !important; } @media (hover:hover) { .store-footer salla-trust-badges:hover, .store-footer .s-trust-badges-wrapper:hover { transform: translateY(-3px); border-color: rgba(170,124,62,.32) !important; background: linear-gradient( 145deg, rgba(255,255,255,.84), rgba(255,255,255,.48) ) !important; box-shadow: 0 13px 28px rgba(91,67,36,.10), inset 0 1px 0 rgba(255,255,255,.95); } .store-footer salla-trust-badges:hover::before, .store-footer .s-trust-badges-wrapper:hover::before { animation: pm-footer-badge-shine .8s ease-out forwards; } } @keyframes pm-footer-badge-shine { from { left: -35%; } to { left: 125%; } } /* ========================================================= LINKS TITLE ========================================================= */ .store-footer .store-footer__menu-title { position: relative; display: inline-block; margin: 0 0 18px !important; padding-bottom: 9px; color: #1f1f1f !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 700 !important; } .store-footer .store-footer__menu-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 48px; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #98672f, #d0a05a ); } /* Hide desktop collapse arrow */ @media (min-width:1024px) { .store-footer .footer-collapse__arrow { display: none !important; } } /* ========================================================= LINKS ========================================================= */ .store-footer .store-footer__menu-link { position: relative; display: inline-block !important; margin-bottom: 12px !important; padding-right: 14px; color: #625b54 !important; font-size: 14.5px !important; line-height: 1.5 !important; transition: color .25s ease, transform .25s ease; } .store-footer .store-footer__menu-link::before { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg); background: #b47c3d; border-radius: 1px; opacity: .78; } @media (hover:hover) { .store-footer .store-footer__menu-link:hover { color: #1d1d1d !important; transform: translateX(-3px); } } /* ========================================================= CONTACTS ========================================================= */ .store-footer .store-footer__contacts-row { position: relative; z-index: 2; padding: 15px 16px 14px !important; background: rgba(255,255,255,.20) !important; border-top: 1px solid rgba(164,126,72,.10); } .store-footer .enhanced_rounded_contacts { gap: 10px !important; } .store-footer .enhanced-contact-item { min-width: 105px; justify-content: center; padding: 8px 14px !important; color: #403b35 !important; border: 1px solid rgba(164,126,72,.18) !important; border-radius: 999px !important; background: rgba(255,255,255,.55) !important; transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; } .store-footer .enhanced-contact-item i { color: #af7738 !important; font-size: 16px !important; } @media (hover:hover) { .store-footer .enhanced-contact-item:hover { transform: translateY(-2px); background: rgba(255,255,255,.85) !important; border-color: rgba(177,122,61,.35) !important; box-shadow: 0 7px 15px rgba(0,0,0,.06); } } /* ========================================================= SOCIAL ========================================================= */ .store-footer .store-footer__social { margin-top: 9px !important; } .store-footer .s-social-link a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #292929 !important; background: rgba(255,255,255,.50); border: 1px solid rgba(164,126,72,.16); transition: transform .25s ease, background .25s ease, border-color .25s ease; } .store-footer .s-social-icon { display: flex; align-items: center; justify-content: center; } .store-footer .s-social-icon svg { width: 17px !important; height: 17px !important; fill: currentColor !important; } @media (hover:hover) { .store-footer .s-social-link a:hover { transform: translateY(-2px); background: #ffffff; border-color: rgba(177,122,61,.34); } } /* ========================================================= BOTTOM BAR ========================================================= */ .store-footer .footer-bottom { background: #ebe4da !important; border-top: 1px solid rgba(164,126,72,.10); } .store-footer .store-footer__bottom-inner { min-height: 58px; padding-top: 10px !important; padding-bottom: 10px !important; } /* Rights */ .store-footer .footer-rights, .store-footer .footer-rights p { margin: 0 !important; color: #6d655e !important; font-size: 13px !important; } .store-footer .footer-rights a { color: #966831 !important; transition: color .25s ease; } @media (hover:hover) { .store-footer .footer-rights a:hover { color: #70491f !important; } } /* ========================================================= PAYMENTS ========================================================= */ .store-footer .s-payments-list { align-items: center; gap: 7px !important; } .store-footer .s-payments-list-item { display: flex; align-items: center; justify-content: center; min-width: 41px; height: 29px; padding: 4px 6px; border-radius: 7px; background: rgba(255,255,255,.90); border: 1px solid rgba(164,126,72,.10); transition: transform .25s ease, box-shadow .25s ease; } @media (hover:hover) { .store-footer .s-payments-list-item:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.05); } } /* ========================================================= DARK MODE ========================================================= */ html.dark .store-footer, body.dark .store-footer, .dark .store-footer, [data-theme="dark"] .store-footer, .theme-dark .store-footer, body.mode-dark .store-footer { color: #f7f3ec !important; background: #111111 !important; } /* Curve */ html.dark .store-footer .store-footer__curve, body.dark .store-footer .store-footer__curve, .dark .store-footer .store-footer__curve, [data-theme="dark"] .store-footer .store-footer__curve, .theme-dark .store-footer .store-footer__curve, body.mode-dark .store-footer .store-footer__curve { color: #111111 !important; } /* Inner */ html.dark .store-footer .store-footer__inner, body.dark .store-footer .store-footer__inner, .dark .store-footer .store-footer__inner, [data-theme="dark"] .store-footer .store-footer__inner, .theme-dark .store-footer .store-footer__inner, body.mode-dark .store-footer .store-footer__inner { background: linear-gradient( 180deg, #141414, #111111 ) !important; border-color: rgba(215,170,100,.08); } /* Logo */ html.dark .store-footer .store-footer__logo-link img, body.dark .store-footer .store-footer__logo-link img, .dark .store-footer .store-footer__logo-link img, [data-theme="dark"] .store-footer .store-footer__logo-link img, .theme-dark .store-footer .store-footer__logo-link img, body.mode-dark .store-footer .store-footer__logo-link img { filter: brightness(0) invert(1); } /* Description */ html.dark .store-footer .footer-description, body.dark .store-footer .footer-description, .dark .store-footer .footer-description, [data-theme="dark"] .store-footer .footer-description, .theme-dark .store-footer .footer-description, body.mode-dark .store-footer .footer-description { color: #c5bdb2 !important; } html.dark .store-footer .footer-description strong, body.dark .store-footer .footer-description strong, .dark .store-footer .footer-description strong, [data-theme="dark"] .store-footer .footer-description strong, .theme-dark .store-footer .footer-description strong, body.mode-dark .store-footer .footer-description strong { color: #ffffff !important; } html.dark .store-footer .footer-description p:first-child, body.dark .store-footer .footer-description p:first-child, .dark .store-footer .footer-description p:first-child, [data-theme="dark"] .store-footer .footer-description p:first-child, .theme-dark .store-footer .footer-description p:first-child, body.mode-dark .store-footer .footer-description p:first-child { color: #d9ad6b !important; } /* ========================================================= DARK GLASS DOCUMENT CARD ========================================================= */ html.dark .store-footer salla-trust-badges, html.dark .store-footer .s-trust-badges-wrapper, body.dark .store-footer salla-trust-badges, body.dark .store-footer .s-trust-badges-wrapper, .dark .store-footer salla-trust-badges, .dark .store-footer .s-trust-badges-wrapper, [data-theme="dark"] .store-footer salla-trust-badges, [data-theme="dark"] .store-footer .s-trust-badges-wrapper, .theme-dark .store-footer salla-trust-badges, .theme-dark .store-footer .s-trust-badges-wrapper, body.mode-dark .store-footer salla-trust-badges, body.mode-dark .store-footer .s-trust-badges-wrapper { border-color: rgba(220,177,106,.18) !important; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ) !important; box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); } html.dark .store-footer .s-trust-badges-label, body.dark .store-footer .s-trust-badges-label, .dark .store-footer .s-trust-badges-label, [data-theme="dark"] .store-footer .s-trust-badges-label, .theme-dark .store-footer .s-trust-badges-label, body.mode-dark .store-footer .s-trust-badges-label { color: #aaa297 !important; } html.dark .store-footer .s-trust-badges-number, body.dark .store-footer .s-trust-badges-number, .dark .store-footer .s-trust-badges-number, [data-theme="dark"] .store-footer .s-trust-badges-number, .theme-dark .store-footer .s-trust-badges-number, body.mode-dark .store-footer .s-trust-badges-number { color: #f7f3ec !important; } @media (hover:hover) { html.dark .store-footer salla-trust-badges:hover, html.dark .store-footer .s-trust-badges-wrapper:hover, body.dark .store-footer salla-trust-badges:hover, body.dark .store-footer .s-trust-badges-wrapper:hover, .dark .store-footer salla-trust-badges:hover, .dark .store-footer .s-trust-badges-wrapper:hover, [data-theme="dark"] .store-footer salla-trust-badges:hover, [data-theme="dark"] .store-footer .s-trust-badges-wrapper:hover { border-color: rgba(222,178,105,.34) !important; background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.04) ) !important; box-shadow: 0 13px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(211,162,91,.05), inset 0 1px 0 rgba(255,255,255,.10); } } /* Menu */ html.dark .store-footer .store-footer__menu-title, body.dark .store-footer .store-footer__menu-title, .dark .store-footer .store-footer__menu-title, [data-theme="dark"] .store-footer .store-footer__menu-title, .theme-dark .store-footer .store-footer__menu-title, body.mode-dark .store-footer .store-footer__menu-title { color: #f7f3ec !important; } html.dark .store-footer .store-footer__menu-link, body.dark .store-footer .store-footer__menu-link, .dark .store-footer .store-footer__menu-link, [data-theme="dark"] .store-footer .store-footer__menu-link, .theme-dark .store-footer .store-footer__menu-link, body.mode-dark .store-footer .store-footer__menu-link { color: #bbb3a8 !important; } html.dark .store-footer .store-footer__menu-link:hover, body.dark .store-footer .store-footer__menu-link:hover, .dark .store-footer .store-footer__menu-link:hover, [data-theme="dark"] .store-footer .store-footer__menu-link:hover, .theme-dark .store-footer .store-footer__menu-link:hover, body.mode-dark .store-footer .store-footer__menu-link:hover { color: #efd09c !important; } /* Contacts */ html.dark .store-footer .store-footer__contacts-row, body.dark .store-footer .store-footer__contacts-row, .dark .store-footer .store-footer__contacts-row, [data-theme="dark"] .store-footer .store-footer__contacts-row, .theme-dark .store-footer .store-footer__contacts-row, body.mode-dark .store-footer .store-footer__contacts-row { background: #101010 !important; border-color: rgba(255,255,255,.06); } html.dark .store-footer .enhanced-contact-item, body.dark .store-footer .enhanced-contact-item, .dark .store-footer .enhanced-contact-item, [data-theme="dark"] .store-footer .enhanced-contact-item, .theme-dark .store-footer .enhanced-contact-item, body.mode-dark .store-footer .enhanced-contact-item { color: #d7cfc4 !important; background: rgba(255,255,255,.035) !important; border-color: rgba(214,169,99,.18) !important; } /* Social */ html.dark .store-footer .s-social-link a, body.dark .store-footer .s-social-link a, .dark .store-footer .s-social-link a, [data-theme="dark"] .store-footer .s-social-link a, .theme-dark .store-footer .s-social-link a, body.mode-dark .store-footer .s-social-link a { color: #f7f3ec !important; background: rgba(255,255,255,.04); border-color: rgba(217,171,101,.16); } /* Bottom */ html.dark .store-footer .footer-bottom, body.dark .store-footer .footer-bottom, .dark .store-footer .footer-bottom, [data-theme="dark"] .store-footer .footer-bottom, .theme-dark .store-footer .footer-bottom, body.mode-dark .store-footer .footer-bottom { background: #0b0b0b !important; border-color: rgba(255,255,255,.06); } html.dark .store-footer .footer-rights, html.dark .store-footer .footer-rights p, body.dark .store-footer .footer-rights, body.dark .store-footer .footer-rights p, .dark .store-footer .footer-rights, .dark .store-footer .footer-rights p, [data-theme="dark"] .store-footer .footer-rights, [data-theme="dark"] .store-footer .footer-rights p, .theme-dark .store-footer .footer-rights, .theme-dark .store-footer .footer-rights p, body.mode-dark .store-footer .footer-rights, body.mode-dark .store-footer .footer-rights p { color: #918a81 !important; } html.dark .store-footer .footer-rights a, body.dark .store-footer .footer-rights a, .dark .store-footer .footer-rights a, [data-theme="dark"] .store-footer .footer-rights a, .theme-dark .store-footer .footer-rights a, body.mode-dark .store-footer .footer-rights a { color: #d0a15e !important; } /* Payments remain white */ html.dark .store-footer .s-payments-list-item, body.dark .store-footer .s-payments-list-item, .dark .store-footer .s-payments-list-item, [data-theme="dark"] .store-footer .s-payments-list-item, .theme-dark .store-footer .s-payments-list-item, body.mode-dark .store-footer .s-payments-list-item { background: #ffffff; border-color: rgba(255,255,255,.08); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1023px) { .store-footer .store-footer__inner { padding: 32px 0 20px !important; } .store-footer .store-footer__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; } .store-footer .store-footer__brand, .store-footer .store-footer__menu { width: 100%; max-width: none; margin: 0 !important; padding: 0 !important; text-align: center !important; } .store-footer .store-footer__menu-title::after { right: 50%; transform: translateX(50%); } .store-footer .store-footer__menu-link { padding-right: 0; } .store-footer .store-footer__menu-link::before { display: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .store-footer .store-footer__inner { padding: 28px 0 16px !important; } .store-footer .store-footer__grid { gap: 18px !important; } .store-footer .store-footer__logo-link img { height: 56px !important; } .store-footer .footer-description { padding: 0 8px; font-size: 13.5px !important; line-height: 1.8 !important; } .store-footer .footer-description p:first-child { font-size: 14px !important; } /* Trust badge */ .store-footer salla-trust-badges, .store-footer .s-trust-badges-wrapper { min-width: 170px; min-height: 60px; padding: 8px 11px !important; border-radius: 14px !important; } .store-footer .s-trust-badges-image { width: 43px !important; height: 43px !important; flex-basis: 43px; } .store-footer .store-footer__menu-title { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-bottom: 12px !important; } .store-footer .footer-collapse__arrow { display: inline-flex !important; color: #ad7738 !important; } .store-footer .store-footer__contacts-row { padding: 13px 10px !important; } .store-footer .enhanced-contact-item { min-width: 94px; padding: 8px 11px !important; font-size: 13px !important; } .store-footer .store-footer__bottom-inner { min-height: auto; gap: 10px; padding: 12px 10px !important; } .store-footer .footer-rights, .store-footer .footer-rights p { font-size: 12.5px !important; } .store-footer .s-payments-list { justify-content: center !important; flex-wrap: wrap; } } /* ========================================================= PRO MAKER — CUSTOM DESIGN GALLERY FINAL VERSION Class: pm-custom-gallery ========================================================= */ /* ========================================================= SECTION ========================================================= */ .pm-custom-gallery { position: relative; padding-top: 92px !important; padding-bottom: 22px !important; } /* ========================================================= SECTION TITLE ========================================================= */ .pm-custom-gallery::before { content: "أفكار يمكننا تنفيذها"; position: absolute; top: 16px; left: 50%; z-index: 20; width: max-content; max-width: calc(100% - 40px); transform: translateX(-50%); color: #171717; font-size: 34px; line-height: 1.35; font-weight: 700; text-align: center; white-space: nowrap; letter-spacing: -.2px; text-shadow: 0 2px 8px rgba(0,0,0,.05); } /* ========================================================= GOLD LINE ========================================================= */ .pm-custom-gallery::after { content: ""; position: absolute; top: 67px; left: 50%; z-index: 20; width: 82px; height: 2px; transform: translateX(-50%); border-radius: 999px; background: linear-gradient( 90deg, transparent, #9b682f, #d1a25e, #efd19d, #d1a25e, #9b682f, transparent ); box-shadow: 0 0 9px rgba(203,154,83,.24); } /* ========================================================= CENTER DIAMOND Exactly centered on gold line ========================================================= */ .pm-custom-gallery .container { position: relative; } .pm-custom-gallery .container::before { content: ""; position: absolute; top: -25px; left: 50%; z-index: 21; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; background: linear-gradient( 145deg, #f0d39c, #a97031 ); box-shadow: 0 0 9px rgba(216,169,98,.45); pointer-events: none; } /* ========================================================= HIDE ORIGINAL TITLE INSIDE FIRST IMAGE ========================================================= */ .pm-custom-gallery [data-selia="home-images-grid-title-1"] { display: none !important; } /* ========================================================= GRID ========================================================= */ .pm-custom-gallery .images-grid__grid { gap: 16px !important; } /* ========================================================= IMAGE CARDS ========================================================= */ .pm-custom-gallery .images-grid__item { position: relative; overflow: hidden !important; border-radius: 18px !important; border: 1px solid rgba(175,132,72,.12); background: #ffffff; box-shadow: 0 8px 22px rgba(24,18,12,.08); transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease, border-color .35s ease; } /* ========================================================= IMAGES ========================================================= */ .pm-custom-gallery .images-grid__image, .pm-custom-gallery .images-grid__item img { object-fit: cover !important; transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .45s ease !important; } /* ========================================================= SUBTLE OVERLAY ========================================================= */ .pm-custom-gallery .images-grid__overlay { background: linear-gradient( 180deg, rgba(0,0,0,.035), rgba(0,0,0,.01) ) !important; opacity: 1 !important; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .pm-custom-gallery .images-grid__item:hover { transform: translateY(-4px); border-color: rgba(177,127,62,.26); box-shadow: 0 16px 32px rgba(24,18,12,.11); } .pm-custom-gallery .images-grid__item:hover img { transform: scale(1.035) !important; filter: brightness(1.02) contrast(1.025); } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-custom-gallery::before, [data-theme="dark"] .pm-custom-gallery::before { color: #f7f3ec; } .dark .pm-custom-gallery .images-grid__item, [data-theme="dark"] .pm-custom-gallery .images-grid__item { background: #171717; border-color: rgba(218,177,112,.14); box-shadow: 0 10px 24px rgba(0,0,0,.22); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1023px) { .pm-custom-gallery { padding-top: 82px !important; } .pm-custom-gallery::before { top: 15px; font-size: 29px; } .pm-custom-gallery::after { top: 60px; width: 72px; } .pm-custom-gallery .container::before { top: -22px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .pm-custom-gallery { padding-top: 72px !important; padding-bottom: 12px !important; } .pm-custom-gallery::before { top: 13px; max-width: calc(100% - 28px); font-size: 24px; white-space: normal; } .pm-custom-gallery::after { top: 52px; width: 60px; } /* * 52px line position * minus 72px section padding * = -20px * * لذلك المعين في منتصف الخط بالضبط. */ .pm-custom-gallery .container::before { top: -20px; width: 6px; height: 6px; } .pm-custom-gallery .images-grid__grid { gap: 12px !important; } .pm-custom-gallery .images-grid__item { border-radius: 15px !important; } } /* ========================================================= PRO MAKER — CUSTOM DESIGN HERO ========================================================= */ .s-information-page .s-block--hero-area { position: relative; overflow: hidden; padding: 54px 0 58px !important; background: #f7f3ec !important; color: #171717 !important; } .s-information-page .s-block--hero-area::before { content: ""; position: absolute; top: -180px; right: -120px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(201,153,83,.08) 0%, rgba(201,153,83,.02) 45%, transparent 72%); } .s-information-page .s-block--hero-area::after { content: ""; position: absolute; bottom: -220px; left: -120px; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(23,23,23,.035) 0%, transparent 70%); } /* layout */ .s-information-page .s-block--hero-area .lp-container.row { position: relative; z-index: 2; display: grid !important; width: calc(100% - 48px); max-width: 1240px; margin: 0 auto !important; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); grid-template-areas: "media content"; align-items: center; gap: 72px; direction: ltr; } /* content */ .s-information-page .s-block--hero-area .content { grid-area: content; width: 100%; max-width: 590px; margin: 0 !important; padding: 0 !important; direction: rtl; text-align: right; } /* subtitle */ .s-information-page .s-block--hero-area .sub { display: inline-block; margin: 0 0 18px !important; color: #765126 !important; font-size: 16px !important; line-height: 1.5; font-weight: 600 !important; padding: 0 !important; } /* شيل أي خط أو شرطة إضافية أنا كنت عاملها */ .s-information-page .s-block--hero-area .sub::before, .s-information-page .s-block--hero-area .sub::after { content: none !important; display: none !important; } /* title */ .s-information-page .s-block--hero-area .main { max-width: 590px; margin: 0 0 18px !important; color: #171717 !important; font-size: clamp(38px, 4.2vw, 58px) !important; line-height: 1.18 !important; font-weight: 750 !important; letter-spacing: -.8px; text-wrap: balance; } /* description */ .s-information-page .s-block--hero-area .desc { max-width: 560px; margin: 0 !important; color: #5d5750 !important; font-size: 19px !important; line-height: 1.9 !important; font-weight: 400 !important; text-wrap: pretty; } /* hide empty CTA */ .s-information-page .s-block--hero-area .cta { display: none !important; } /* media */ .s-information-page .s-block--hero-area .media { grid-area: media; position: relative; width: 100%; aspect-ratio: 8 / 7; overflow: visible; isolation: isolate; } /* إطار الصورة نفسه */ .s-information-page .s-block--hero-area .media img { width: 100% !important; height: 100% !important; display: block; object-fit: cover !important; object-position: center; border-radius: 24px; border: 1px solid rgba(166,122,61,.14); background: #171717; position: relative; z-index: 3; box-shadow: 0 18px 44px rgba(24,18,12,.13), 0 0 0 1px rgba(255,255,255,.5); transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .5s ease, box-shadow .4s ease; } /* زخرفة خلف الصورة - إطار بريميوم خفيف */ .s-information-page .s-block--hero-area .media::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; z-index: 1; border-radius: 28px; border: 1px solid rgba(198,151,84,.26); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)); opacity: .95; } /* زخرفة إضافية ناعمة */ .s-information-page .s-block--hero-area .media::after { content: ""; position: absolute; inset: -14px 24px 24px -14px; z-index: 0; border-radius: 32px; background: radial-gradient(circle at top left, rgba(217,170,99,.17), transparent 40%), radial-gradient(circle at bottom right, rgba(23,23,23,.08), transparent 42%); border: 1px dashed rgba(181,137,74,.16); } /* corner accents */ .s-information-page .s-block--hero-area .media { background-image: radial-gradient(circle at top right, rgba(214,173,108,.10) 0, rgba(214,173,108,.10) 2px, transparent 2px), radial-gradient(circle at bottom left, rgba(214,173,108,.08) 0, rgba(214,173,108,.08) 2px, transparent 2px); background-size: 18px 18px, 18px 18px; background-position: calc(100% - 6px) 8px, 8px calc(100% - 6px); background-repeat: no-repeat; } /* hover */ @media (hover:hover) { .s-information-page .s-block--hero-area .media:hover img { transform: scale(1.022); filter: brightness(1.02) contrast(1.02); box-shadow: 0 24px 52px rgba(24,18,12,.16), 0 0 0 1px rgba(187,137,70,.12); } .s-information-page .s-block--hero-area .media:hover::before { transform: translate(4px, 4px); transition: transform .45s ease; } .s-information-page .s-block--hero-area .media:hover::after { transform: translate(-4px, -4px); transition: transform .45s ease; } } /* dark mode */ .dark .s-information-page .s-block--hero-area, [data-theme="dark"] .s-information-page .s-block--hero-area { background: #171717 !important; color: #f7f3ec !important; } .dark .s-information-page .s-block--hero-area .main, [data-theme="dark"] .s-information-page .s-block--hero-area .main { color: #f7f3ec !important; } .dark .s-information-page .s-block--hero-area .sub, [data-theme="dark"] .s-information-page .s-block--hero-area .sub { color: #d7a75f !important; } .dark .s-information-page .s-block--hero-area .desc, [data-theme="dark"] .s-information-page .s-block--hero-area .desc { color: #c5bdb2 !important; } .dark .s-information-page .s-block--hero-area .media img, [data-theme="dark"] .s-information-page .s-block--hero-area .media img { border-color: rgba(218,177,112,.16); box-shadow: 0 20px 44px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.025); } .dark .s-information-page .s-block--hero-area .media::before, [data-theme="dark"] .s-information-page .s-block--hero-area .media::before { border-color: rgba(218,177,112,.20); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); } .dark .s-information-page .s-block--hero-area .media::after, [data-theme="dark"] .s-information-page .s-block--hero-area .media::after { border-color: rgba(218,177,112,.12); background: radial-gradient(circle at top left, rgba(217,170,99,.12), transparent 40%), radial-gradient(circle at bottom right, rgba(255,255,255,.03), transparent 42%); } /* tablet */ @media (max-width:1023px) { .s-information-page .s-block--hero-area { padding: 42px 0 46px !important; } .s-information-page .s-block--hero-area .lp-container.row { width: calc(100% - 36px); gap: 38px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .s-information-page .s-block--hero-area .main { font-size: 40px !important; } .s-information-page .s-block--hero-area .desc { font-size: 17px !important; line-height: 1.8 !important; } } /* mobile */ @media (max-width:767px) { .s-information-page .s-block--hero-area { padding: 32px 0 36px !important; } .s-information-page .s-block--hero-area .lp-container.row { width: calc(100% - 28px); grid-template-columns: 1fr; grid-template-areas: "content" "media"; gap: 28px; direction: ltr; } .s-information-page .s-block--hero-area .content { max-width: none; direction: rtl; text-align: center; } .s-information-page .s-block--hero-area .sub { margin-bottom: 15px !important; font-size: 14px !important; } .s-information-page .s-block--hero-area .main { max-width: 520px; margin: 0 auto 14px !important; font-size: 34px !important; line-height: 1.22 !important; letter-spacing: -.4px; } .s-information-page .s-block--hero-area .desc { max-width: 500px; margin: 0 auto !important; font-size: 15.5px !important; line-height: 1.8 !important; } .s-information-page .s-block--hero-area .media { max-width: 560px; margin: 0 auto; } .s-information-page .s-block--hero-area .media img { border-radius: 18px; } .s-information-page .s-block--hero-area .media::before { inset: 14px -10px -10px 14px; border-radius: 22px; } .s-information-page .s-block--hero-area .media::after { inset: -8px 14px 14px -8px; border-radius: 24px; } } /* ========================================================= PRO MAKER — CUSTOM DESIGN PROCESS TIMELINE FINAL COMPACT DESKTOP VERSION ========================================================= */ .pm-process { position: relative; overflow: hidden; padding: 78px 0 94px; background: #f7f3ec; color: #171717; } /* ========================================================= AMBIENT DECORATION ========================================================= */ .pm-process::before { content: ""; position: absolute; width: 520px; height: 520px; top: 10%; right: -280px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(205, 159, 91, .08), transparent 68% ); } .pm-process::after { content: ""; position: absolute; width: 440px; height: 440px; bottom: -220px; left: -220px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(23, 23, 23, .035), transparent 70% ); } /* ========================================================= CONTAINER ========================================================= */ .pm-process__container { position: relative; z-index: 2; width: calc(100% - 48px); max-width: 1180px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .pm-process__header { max-width: 720px; margin: 0 auto 68px; text-align: center; } .pm-process__title { margin: 0; color: #171717; font-size: 42px; line-height: 1.3; font-weight: 750; letter-spacing: -.5px; } .pm-process__subtitle { margin: 10px 0 0; color: #655e56; font-size: 17px; line-height: 1.8; font-weight: 400; } /* ========================================================= TITLE ACCENT ========================================================= */ .pm-process__title-line { position: relative; width: 82px; height: 8px; margin: 17px auto 0; } .pm-process__title-line::before { content: ""; position: absolute; top: 3px; left: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, #98642b, #d5a55f, #efd19b, #d5a55f, #98642b, transparent ); } .pm-process__title-line span { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; background: linear-gradient( 145deg, #efd09a, #a76e2e ); box-shadow: 0 0 9px rgba(214, 166, 96, .45); } /* ========================================================= TIMELINE ========================================================= */ .pm-process__timeline { position: relative; max-width: 1060px; margin: 0 auto; padding: 34px 0; } /* ========================================================= TRACK ========================================================= */ .pm-process__track { position: absolute; top: 115px; bottom: 115px; left: 50%; width: 3px; transform: translateX(-50%); z-index: 3; } .pm-process__track-bg { position: absolute; inset: 0; border-radius: 999px; background: rgba(162, 121, 63, .17); } /* ========================================================= GOLD PROGRESS ========================================================= */ .pm-process__progress { position: absolute; top: 0; left: 0; width: 100%; height: 0%; border-radius: 999px; background: linear-gradient( 180deg, #9b682e, #d8aa61, #efd29c ); box-shadow: 0 0 10px rgba(202, 151, 79, .28); transition: height .08s linear; } /* ========================================================= MOVING INDICATOR ========================================================= */ .pm-process__indicator { position: absolute; top: 0; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: #d6a457; border: 3px solid #f7f3ec; box-shadow: 0 0 0 1px rgba(156, 105, 46, .35), 0 0 16px rgba(210, 161, 88, .48); transition: top .08s linear; } /* ========================================================= STEP ========================================================= */ .pm-process__step { position: relative; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; min-height: 260px; } .pm-process__step + .pm-process__step { margin-top: 26px; } /* Card right */ .pm-process__step--right .pm-process__card { grid-column: 3; } /* Card left */ .pm-process__step--left .pm-process__card { grid-column: 1; } /* ========================================================= MARKER ========================================================= */ .pm-process__marker { position: absolute; top: 50%; left: 50%; z-index: 8; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(159, 115, 54, .16); background: #fbf8f2; box-shadow: 0 8px 18px rgba(37, 27, 16, .07); transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.75,.2,1); } .pm-process__marker span { color: #68615a; font-size: 15px; font-weight: 700; transition: color .35s ease; } /* ========================================================= CARD ========================================================= */ .pm-process__card { position: relative; min-height: 170px; display: flex; align-items: center; padding: 30px 34px; overflow: hidden; border: 1px solid rgba(166, 122, 61, .10); border-radius: 22px; background: rgba(255, 255, 255, .83); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(35, 26, 17, .07); transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .4s ease, border-color .4s ease, background .4s ease; } /* ========================================================= DECORATIVE CORNER ========================================================= */ .pm-process__decor { position: absolute; top: 18px; right: 18px; width: 10px; height: 10px; border: 1px solid rgba(192, 144, 75, .28); border-radius: 3px; transform: rotate(45deg); transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; } /* ========================================================= CONTENT ========================================================= */ .pm-process__content { position: relative; z-index: 2; width: 100%; text-align: right; } .pm-process__step--left .pm-process__content { text-align: left; } .pm-process__eyebrow { display: inline-block; margin-bottom: 7px; color: #aa7737; font-size: 12px; font-weight: 600; opacity: .80; } .pm-process__step-title { margin: 0 0 8px; color: #24211e; font-size: 23px; line-height: 1.45; font-weight: 700; transition: color .35s ease; } .pm-process__step-text { max-width: 430px; margin: 0; color: #665f58; font-size: 15px; line-height: 1.95; font-weight: 400; } /* Left cards content alignment */ .pm-process__step--left .pm-process__step-text { margin-left: 0; margin-right: auto; } /* ========================================================= ACTIVE STEP ========================================================= */ .pm-process__step.is-active .pm-process__marker { transform: translate(-50%, -50%) scale(1.06); background: linear-gradient( 145deg, #e3b86f, #b77a32 ); border-color: rgba(165, 111, 44, .34); box-shadow: 0 10px 23px rgba(137, 91, 37, .18), 0 0 0 6px rgba(207, 158, 86, .08), 0 0 19px rgba(216, 166, 93, .26); } .pm-process__step.is-active .pm-process__marker span { color: #ffffff; } .pm-process__step.is-active .pm-process__card { transform: translateY(-5px); border-color: rgba(182, 130, 61, .27); background: rgba(255, 253, 249, .96); box-shadow: 0 19px 40px rgba(38, 27, 15, .10); } .pm-process__step.is-active .pm-process__step-title { color: #9e692e; } .pm-process__step.is-active .pm-process__decor { border-color: #c7934e; background: #d8a85e; box-shadow: 0 0 9px rgba(210, 160, 88, .38); } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .pm-process__card:hover { transform: translateY(-4px); border-color: rgba(180, 128, 60, .22); box-shadow: 0 17px 35px rgba(38, 27, 15, .09); } } /* ========================================================= DESKTOP COMPACT VERSION ========================================================= */ @media (min-width:1024px) { .pm-process { padding: 54px 0 62px; } .pm-process__header { margin-bottom: 44px; } .pm-process__timeline { max-width: 980px; padding: 18px 0; } .pm-process__track { top: 85px; bottom: 85px; } .pm-process__step { min-height: 200px; grid-template-columns: 1fr 82px 1fr; } .pm-process__step + .pm-process__step { margin-top: 10px; } .pm-process__card { min-height: 145px; padding: 25px 30px; border-radius: 20px; } .pm-process__marker { width: 56px; height: 56px; } .pm-process__step-title { font-size: 22px; } .pm-process__step-text { line-height: 1.85; } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-process, [data-theme="dark"] .pm-process { background: #171717; color: #f7f3ec; } .dark .pm-process__title, [data-theme="dark"] .pm-process__title { color: #f7f3ec; } .dark .pm-process__subtitle, [data-theme="dark"] .pm-process__subtitle { color: #bdb5aa; } .dark .pm-process__track-bg, [data-theme="dark"] .pm-process__track-bg { background: rgba(222, 177, 107, .13); } .dark .pm-process__indicator, [data-theme="dark"] .pm-process__indicator { border-color: #171717; } .dark .pm-process__marker, [data-theme="dark"] .pm-process__marker { background: #222222; border-color: rgba(220, 175, 106, .13); } .dark .pm-process__marker span, [data-theme="dark"] .pm-process__marker span { color: #c1b8ab; } .dark .pm-process__card, [data-theme="dark"] .pm-process__card { background: rgba(31,31,31,.92); border-color: rgba(218,177,112,.10); box-shadow: 0 14px 34px rgba(0,0,0,.21); } .dark .pm-process__step-title, [data-theme="dark"] .pm-process__step-title { color: #f7f3ec; } .dark .pm-process__step-text, [data-theme="dark"] .pm-process__step-text { color: #bcb3a8; } .dark .pm-process__step.is-active .pm-process__card, [data-theme="dark"] .pm-process__step.is-active .pm-process__card { background: rgba(36,33,29,.97); border-color: rgba(215,166,92,.25); } .dark .pm-process__step.is-active .pm-process__step-title, [data-theme="dark"] .pm-process__step.is-active .pm-process__step-title { color: #e0b36e; } /* ========================================================= TABLET COMPACT VERSION 768px → 1023px ========================================================= */ @media (min-width:768px) and (max-width:1023px) { .pm-process { padding: 48px 0 58px; } .pm-process__container { width: calc(100% - 36px); max-width: 940px; } .pm-process__header { max-width: 650px; margin-bottom: 38px; } .pm-process__title { font-size: 36px; line-height: 1.3; } .pm-process__subtitle { margin-top: 8px; font-size: 16px; line-height: 1.75; } .pm-process__title-line { margin-top: 15px; } .pm-process__timeline { max-width: 880px; padding: 14px 0; } .pm-process__track { top: 76px; bottom: 76px; } .pm-process__step { min-height: 185px; grid-template-columns: 1fr 72px 1fr; } .pm-process__step + .pm-process__step { margin-top: 8px; } .pm-process__marker { width: 52px; height: 52px; } .pm-process__marker span { font-size: 14px; } .pm-process__card { min-height: 138px; padding: 22px 24px; border-radius: 18px; } .pm-process__decor { top: 15px; right: 15px; width: 9px; height: 9px; } .pm-process__eyebrow { margin-bottom: 5px; font-size: 11.5px; } .pm-process__step-title { margin-bottom: 6px; font-size: 20px; line-height: 1.4; } .pm-process__step-text { max-width: 370px; font-size: 14.5px; line-height: 1.8; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .pm-process { padding: 52px 0 62px; } .pm-process__container { width: calc(100% - 26px); } .pm-process__header { margin-bottom: 42px; padding: 0 8px; } .pm-process__title { font-size: 30px; line-height: 1.3; } .pm-process__subtitle { margin-top: 8px; font-size: 14.5px; line-height: 1.7; } .pm-process__title-line { margin-top: 14px; } .pm-process__timeline { padding: 10px 0 20px; } /* Line on right for RTL */ .pm-process__track { top: 54px; bottom: 54px; right: 25px; left: auto; transform: none; } .pm-process__step { display: block; min-height: 0; padding-right: 72px; margin: 0 !important; } .pm-process__step + .pm-process__step { margin-top: 28px !important; } .pm-process__marker { top: 50%; right: -3px; left: auto; width: 56px; height: 56px; transform: translateY(-50%); } .pm-process__step.is-active .pm-process__marker { transform: translateY(-50%) scale(1.05); } .pm-process__card { width: 100%; min-height: 155px; padding: 24px 20px; border-radius: 18px; } .pm-process__content, .pm-process__step--left .pm-process__content { text-align: right; } .pm-process__step-text, .pm-process__step--left .pm-process__step-text { max-width: none; margin: 0; } .pm-process__step-title { font-size: 20px; } .pm-process__step-text { font-size: 14px; line-height: 1.85; } .pm-process__eyebrow { font-size: 11.5px; } .pm-process__decor { top: 15px; right: auto; left: 15px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .pm-process *, .pm-process *::before, .pm-process *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================= PRO MAKER — PHYSICS CAPABILITIES "إيش نقدر نصمم لك؟" ========================================================= */ /* ========================================================= SECTION ========================================================= */ .pm-capabilities { position: relative; overflow: hidden; padding: 66px 0 76px; background: #f7f3ec; color: #171717; } .pm-capabilities__container { position: relative; z-index: 2; width: calc(100% - 48px); max-width: 1180px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .pm-capabilities__header { max-width: 720px; margin: 0 auto 36px; text-align: center; } .pm-capabilities__title { margin: 0; color: #171717; font-size: 40px; line-height: 1.3; font-weight: 750; letter-spacing: -.4px; } .pm-capabilities__subtitle { margin: 9px 0 0; color: #655e56; font-size: 16px; line-height: 1.8; font-weight: 400; } /* ========================================================= TITLE ACCENT ========================================================= */ .pm-capabilities__title-line { position: relative; width: 80px; height: 8px; margin: 15px auto 0; } .pm-capabilities__title-line::before { content: ""; position: absolute; top: 3px; left: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, #98642b, #d5a55f, #efd19b, #d5a55f, #98642b, transparent ); } .pm-capabilities__title-line span { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; background: linear-gradient( 145deg, #efd09a, #a76e2e ); box-shadow: 0 0 9px rgba(214,166,96,.45); } /* ========================================================= PHYSICS PLAYGROUND ========================================================= */ .pm-capabilities__playground { position: relative; width: 100%; height: 500px; overflow: hidden; isolation: isolate; border: 1px solid rgba(166,123,63,.16); border-radius: 28px; background: linear-gradient( 145deg, rgba(255,255,255,.48), rgba(248,243,235,.78) ); box-shadow: 0 18px 45px rgba(32,23,14,.075), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); /* * يسمح بالـscroll الطبيعي على الموبايل. * Drag physics هنفعله فقط للأجهزة ذات mouse. */ touch-action: pan-y; } /* ========================================================= PREMIUM CORNER FRAME ========================================================= */ .pm-capabilities__playground::before { content: ""; position: absolute; inset: 14px; z-index: 8; pointer-events: none; border-radius: 20px; background: /* top right */ linear-gradient( #b98645, #b98645 ) top right / 54px 1px no-repeat, linear-gradient( #b98645, #b98645 ) top right / 1px 54px no-repeat, /* top left */ linear-gradient( #b98645, #b98645 ) top left / 54px 1px no-repeat, linear-gradient( #b98645, #b98645 ) top left / 1px 54px no-repeat, /* bottom right */ linear-gradient( #b98645, #b98645 ) bottom right / 54px 1px no-repeat, linear-gradient( #b98645, #b98645 ) bottom right / 1px 54px no-repeat, /* bottom left */ linear-gradient( #b98645, #b98645 ) bottom left / 54px 1px no-repeat, linear-gradient( #b98645, #b98645 ) bottom left / 1px 54px no-repeat; opacity: .38; } /* ========================================================= SUBTLE TECH GRID ========================================================= */ .pm-capabilities__playground::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .22; background-image: radial-gradient( circle, rgba(160,115,53,.23) 1px, transparent 1.2px ); background-size: 24px 24px; -webkit-mask-image: radial-gradient( ellipse at center, rgba(0,0,0,.55), transparent 78% ); mask-image: radial-gradient( ellipse at center, rgba(0,0,0,.55), transparent 78% ); } /* ========================================================= DRAG HINT ========================================================= */ .pm-capabilities__hint { position: absolute; top: 24px; right: 27px; z-index: 12; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(165,120,59,.12); border-radius: 999px; color: #87745e; background: rgba(255,255,255,.52); font-size: 11.5px; line-height: 1; font-weight: 500; pointer-events: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .pm-capabilities__hint-icon { color: #b27a39; font-size: 14px; } /* ========================================================= PILLS LAYER FALLBACK MODE ========================================================= */ .pm-capabilities__pills { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 60px 42px 30px; } /* ========================================================= PHYSICS MODE ========================================================= */ .pm-capabilities.is-physics-ready .pm-capabilities__pills { position: absolute; inset: 0; display: block; padding: 0; } /* ========================================================= PHYSICS BODY ========================================================= */ .pm-capability-pill { position: relative; width: fit-content; height: fit-content; user-select: none; -webkit-user-select: none; cursor: default; } .pm-capabilities.is-physics-ready .pm-capability-pill { position: absolute; top: 0; left: 0; margin: 0; opacity: 0; transform-origin: center center; will-change: transform; cursor: grab; transition: opacity .25s ease; } .pm-capabilities.is-physics-ready .pm-capability-pill:active { cursor: grabbing; } /* ========================================================= VISUAL PILL ========================================================= */ .pm-capability-pill__inner { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 20px; border: 1px solid rgba(142,105,57,.16); border-radius: 18px; background: rgba(255,255,255,.92); color: #27231f; box-shadow: 0 8px 18px rgba(35,25,15,.095), inset 0 1px 0 rgba(255,255,255,.9); font-size: 14px; line-height: 1.25; font-weight: 600; white-space: nowrap; pointer-events: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* ========================================================= COLOR VARIANTS ========================================================= */ .pm-capability-pill[data-tone="beige"] .pm-capability-pill__inner { background: linear-gradient( 145deg, #f5eee3, #e9dac4 ); border-color: rgba(160,115,54,.16); } .pm-capability-pill[data-tone="gold"] .pm-capability-pill__inner { background: linear-gradient( 145deg, #e7c991, #c89a57 ); color: #21180f; border-color: rgba(145,95,34,.16); box-shadow: 0 9px 20px rgba(121,82,34,.13), inset 0 1px 0 rgba(255,245,221,.58); } .pm-capability-pill[data-tone="dark"] .pm-capability-pill__inner { background: linear-gradient( 145deg, #292622, #171717 ); color: #f7f3ec; border-color: rgba(216,170,99,.18); box-shadow: 0 10px 22px rgba(20,15,10,.16), inset 0 1px 0 rgba(255,255,255,.08); } .pm-capability-pill[data-tone="special"] .pm-capability-pill__inner { min-height: 54px; padding: 12px 24px; border: 1px solid rgba(171,118,48,.32); background: linear-gradient( 145deg, #fffaf1, #ead3ad ); color: #7c5120; font-size: 15px; font-weight: 700; box-shadow: 0 10px 24px rgba(112,75,29,.13), 0 0 0 4px rgba(191,143,76,.045); } /* ========================================================= DESKTOP HOVER ========================================================= */ @media (hover:hover) { .pm-capability-pill:hover .pm-capability-pill__inner { transform: translateY(-2px) scale(1.025); border-color: rgba(180,126,57,.32); box-shadow: 0 12px 26px rgba(35,25,15,.13), 0 0 0 4px rgba(195,146,79,.045); } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-capabilities, [data-theme="dark"] .pm-capabilities { background: #171717; color: #f7f3ec; } .dark .pm-capabilities__title, [data-theme="dark"] .pm-capabilities__title { color: #f7f3ec; } .dark .pm-capabilities__subtitle, [data-theme="dark"] .pm-capabilities__subtitle { color: #bdb5aa; } .dark .pm-capabilities__playground, [data-theme="dark"] .pm-capabilities__playground { border-color: rgba(218,177,112,.13); background: linear-gradient( 145deg, rgba(35,35,35,.92), rgba(23,23,23,.97) ); box-shadow: 0 20px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); } .dark .pm-capabilities__hint, [data-theme="dark"] .pm-capabilities__hint { color: #bdb4a8; border-color: rgba(217,171,102,.14); background: rgba(255,255,255,.04); } .dark .pm-capability-pill__inner, [data-theme="dark"] .pm-capability-pill__inner { color: #f7f3ec; background: linear-gradient( 145deg, #2d2a26, #23211e ); border-color: rgba(218,177,112,.14); box-shadow: 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.045); } .dark .pm-capability-pill[data-tone="beige"] .pm-capability-pill__inner, [data-theme="dark"] .pm-capability-pill[data-tone="beige"] .pm-capability-pill__inner { color: #f7f3ec; background: linear-gradient( 145deg, #3b3329, #2a2621 ); } .dark .pm-capability-pill[data-tone="gold"] .pm-capability-pill__inner, [data-theme="dark"] .pm-capability-pill[data-tone="gold"] .pm-capability-pill__inner { color: #1c160f; background: linear-gradient( 145deg, #d9b675, #ae7d3e ); } .dark .pm-capability-pill[data-tone="special"] .pm-capability-pill__inner, [data-theme="dark"] .pm-capability-pill[data-tone="special"] .pm-capability-pill__inner { color: #f3d39d; background: linear-gradient( 145deg, #382d20, #221d17 ); border-color: rgba(218,166,88,.28); } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1023px) { .pm-capabilities { padding: 54px 0 64px; } .pm-capabilities__container { width: calc(100% - 36px); } .pm-capabilities__header { margin-bottom: 30px; } .pm-capabilities__title { font-size: 34px; } .pm-capabilities__playground { height: 460px; border-radius: 24px; } .pm-capability-pill__inner { min-height: 44px; padding: 10px 17px; font-size: 13px; border-radius: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .pm-capabilities { padding: 48px 0 56px; } .pm-capabilities__container { width: calc(100% - 24px); } .pm-capabilities__header { margin-bottom: 26px; padding: 0 8px; } .pm-capabilities__title { font-size: 29px; line-height: 1.3; } .pm-capabilities__subtitle { margin-top: 7px; font-size: 14px; line-height: 1.7; } .pm-capabilities__title-line { margin-top: 13px; } .pm-capabilities__playground { height: 500px; border-radius: 20px; } .pm-capabilities__playground::before { inset: 10px; border-radius: 15px; opacity: .30; } /* * نخفي تعليمات السحب على الموبايل، * لأن السحب متوقف للحفاظ على Scroll الصفحة. */ .pm-capabilities__hint { display: none; } .pm-capability-pill__inner { min-height: 39px; padding: 8px 12px; border-radius: 14px; font-size: 12px; } .pm-capability-pill[data-tone="special"] .pm-capability-pill__inner { min-height: 43px; padding: 9px 15px; font-size: 12.5px; } } /* ========================================================= REDUCED MOTION FALLBACK ========================================================= */ @media (prefers-reduced-motion: reduce) { .pm-capabilities__playground { height: auto; min-height: 360px; } .pm-capabilities__pills { position: relative !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 55px 25px !important; } .pm-capability-pill { position: relative !important; top: auto !important; left: auto !important; opacity: 1 !important; transform: none !important; } } /* ========================================================= PRO MAKER — FINAL WHATSAPP CTA ========================================================= */ .pm-idea-cta { position: relative; overflow: hidden; padding: 70px 0 82px; background: #f7f3ec; } .pm-idea-cta__shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr); align-items: center; gap: 58px; width: calc(100% - 48px); max-width: 1180px; min-height: 480px; margin: 0 auto; padding: 60px 64px; overflow: hidden; border: 1px solid rgba(211, 167, 100, .17); border-radius: 32px; background: linear-gradient( 135deg, #191817 0%, #111110 55%, #171513 100% ); box-shadow: 0 28px 70px rgba(30, 21, 12, .16), inset 0 1px 0 rgba(255,255,255,.045); isolation: isolate; } /* ========================================================= AMBIENT GLOWS ========================================================= */ .pm-idea-cta__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; } .pm-idea-cta__glow--one { width: 500px; height: 500px; top: -300px; right: -130px; background: radial-gradient( circle, rgba(216, 166, 90, .20), rgba(177, 121, 50, .055) 40%, transparent 72% ); } .pm-idea-cta__glow--two { width: 430px; height: 430px; bottom: -300px; left: 17%; background: radial-gradient( circle, rgba(201, 149, 76, .11), transparent 70% ); } /* ========================================================= CONTENT ========================================================= */ .pm-idea-cta__content { position: relative; z-index: 5; text-align: right; } .pm-idea-cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #d6ab69; font-size: 13px; font-weight: 600; letter-spacing: .2px; } .pm-idea-cta__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #d8a75e; box-shadow: 0 0 0 5px rgba(216,167,94,.09), 0 0 14px rgba(216,167,94,.45); } /* ========================================================= TITLE ========================================================= */ .pm-idea-cta__title { max-width: 580px; margin: 0; color: #f7f3ec; font-size: clamp(38px, 4vw, 58px); line-height: 1.2; font-weight: 750; letter-spacing: -.8px; } .pm-idea-cta__title span { position: relative; display: inline-block; color: #d8aa63; } .pm-idea-cta__title span::after { content: ""; position: absolute; right: 0; bottom: -4px; width: 44%; height: 1px; background: linear-gradient( 90deg, transparent, #c9934d ); } /* ========================================================= DESCRIPTION ========================================================= */ .pm-idea-cta__description { max-width: 560px; margin: 19px 0 0; color: #c3bbb0; font-size: 16px; line-height: 1.9; font-weight: 400; } /* ========================================================= IDEA TYPES ========================================================= */ .pm-idea-cta__types { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; } .pm-idea-cta__type { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(218,174,108,.13); border-radius: 999px; background: rgba(255,255,255,.035); color: #c9c1b6; font-size: 12px; line-height: 1; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .pm-idea-cta__type i { width: 5px; height: 5px; border-radius: 50%; background: #c7954c; box-shadow: 0 0 7px rgba(199,149,76,.45); } /* ========================================================= WHATSAPP BUTTON ========================================================= */ .pm-idea-cta__button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 58px; margin-top: 30px; padding: 10px 19px 10px 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 17px; background: #f7f3ec; color: #171717 !important; text-decoration: none !important; box-shadow: 0 13px 28px rgba(0,0,0,.17), inset 0 1px 0 #fff; transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease, background .35s ease; } .pm-idea-cta__button::before { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; pointer-events: none; transform: skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.78), transparent ); transition: left .7s ease; } .pm-idea-cta__button:hover::before { left: 145%; } .pm-idea-cta__button:hover { transform: translateY(-3px); background: #fffaf1; box-shadow: 0 18px 36px rgba(0,0,0,.22), 0 0 0 4px rgba(211,162,89,.07); } /* WhatsApp icon */ .pm-idea-cta__button-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: #171717; color: #f0ca91; } .pm-idea-cta__button-icon svg { width: 21px; height: 21px; } /* button text */ .pm-idea-cta__button-text { font-size: 14.5px; font-weight: 700; white-space: nowrap; } .pm-idea-cta__button-arrow { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; margin-right: 2px; border-radius: 50%; color: #9d6b2d; background: rgba(185,132,64,.10); font-size: 17px; transition: transform .3s ease; } .pm-idea-cta__button:hover .pm-idea-cta__button-arrow { transform: translateX(-4px); } /* ========================================================= NOTE ========================================================= */ .pm-idea-cta__note { margin: 12px 3px 0; color: #847d74; font-size: 11.5px; line-height: 1.6; } /* ========================================================= VISUAL SIDE ========================================================= */ .pm-idea-cta__visual { position: relative; z-index: 3; width: 100%; max-width: 430px; aspect-ratio: 1 / 1; margin: 0 auto; transform-style: preserve-3d; } /* ========================================================= GRID ========================================================= */ .pm-idea-cta__visual-grid { position: absolute; inset: 9%; opacity: .24; border-radius: 50%; background-image: linear-gradient( rgba(217,170,99,.16) 1px, transparent 1px ), linear-gradient( 90deg, rgba(217,170,99,.16) 1px, transparent 1px ); background-size: 24px 24px; -webkit-mask-image: radial-gradient( circle, #000 0%, transparent 69% ); mask-image: radial-gradient( circle, #000 0%, transparent 69% ); } /* ========================================================= ORBITS ========================================================= */ .pm-idea-cta__orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(216,167,94,.20); pointer-events: none; } .pm-idea-cta__orbit--outer { width: 90%; height: 90%; border-style: dashed; animation: pmCtaOrbit 34s linear infinite; } .pm-idea-cta__orbit--middle { width: 67%; height: 67%; border-color: rgba(216,167,94,.27); animation: pmCtaOrbitReverse 27s linear infinite; } .pm-idea-cta__orbit--inner { width: 43%; height: 43%; border-color: rgba(234,199,143,.33); } @keyframes pmCtaOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes pmCtaOrbitReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } } /* ========================================================= STAGE LABELS ========================================================= */ .pm-idea-cta__stage { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(221,179,113,.17); border-radius: 13px; background: rgba(20,19,17,.79); color: #e6ddd1; box-shadow: 0 11px 25px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; transform: translateZ(20px); transition: transform .35s ease, border-color .35s ease; } .pm-idea-cta__stage-number { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(213,162,88,.11); color: #d8a85f; font-size: 10px; font-weight: 700; } .pm-idea-cta__stage--idea { top: 15%; right: 3%; } .pm-idea-cta__stage--design { top: 48%; left: -1%; } .pm-idea-cta__stage--print { right: 10%; bottom: 11%; } /* ========================================================= CENTRAL 3D CUBE ========================================================= */ .pm-idea-cta__core { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 122px; height: 122px; transform: translate(-50%, -50%); border: 1px solid rgba(224,183,119,.25); border-radius: 50%; background: radial-gradient( circle, rgba(218,169,94,.18), rgba(218,169,94,.025) 60%, transparent 72% ); box-shadow: 0 0 45px rgba(205,150,72,.10), inset 0 0 30px rgba(215,167,96,.06); } .pm-idea-cta__cube { position: relative; width: 54px; height: 54px; transform-style: preserve-3d; transform: rotateX(-23deg) rotateY(35deg); animation: pmCtaCube 11s ease-in-out infinite alternate; } @keyframes pmCtaCube { 0% { transform: rotateX(-23deg) rotateY(35deg); } 100% { transform: rotateX(-13deg) rotateY(80deg); } } .pm-idea-cta__cube-face { position: absolute; inset: 0; border: 1px solid rgba(241,208,154,.66); background: rgba(211,159,82,.07); box-shadow: inset 0 0 16px rgba(215,165,92,.06); } .pm-idea-cta__cube-face--front { transform: translateZ(27px); } .pm-idea-cta__cube-face--back { transform: rotateY(180deg) translateZ(27px); } .pm-idea-cta__cube-face--right { transform: rotateY(90deg) translateZ(27px); } .pm-idea-cta__cube-face--left { transform: rotateY(-90deg) translateZ(27px); } .pm-idea-cta__cube-face--top { transform: rotateX(90deg) translateZ(27px); } .pm-idea-cta__cube-face--bottom { transform: rotateX(-90deg) translateZ(27px); } /* ========================================================= SPARKS ========================================================= */ .pm-idea-cta__spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #d8a55a; box-shadow: 0 0 10px rgba(216,165,90,.65); } .pm-idea-cta__spark--1 { top: 29%; left: 27%; } .pm-idea-cta__spark--2 { right: 27%; bottom: 33%; width: 3px; height: 3px; } .pm-idea-cta__spark--3 { right: 38%; top: 18%; width: 3px; height: 3px; } /* ========================================================= DESKTOP HOVER ========================================================= */ @media (hover:hover) { .pm-idea-cta__stage:hover { transform: translateZ(20px) translateY(-3px); border-color: rgba(223,174,102,.34); } } /* ========================================================= IDEA MESSAGE FIELD ========================================================= */ .pm-idea-cta__message-box { max-width: 580px; margin-top: 24px; padding: 15px 16px 16px; border: 1px solid rgba(218,174,108,.15); border-radius: 18px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; } .pm-idea-cta__message-box:focus-within { border-color: rgba(217,169,94,.38); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(211,162,89,.055), inset 0 1px 0 rgba(255,255,255,.05); } .pm-idea-cta__message-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; } .pm-idea-cta__message-label { color: #eee4d7; font-size: 13px; font-weight: 700; } .pm-idea-cta__message-optional { color: #827a71; font-size: 10.5px; } .pm-idea-cta__message { display: block; width: 100%; min-height: 105px; resize: vertical; padding: 13px 14px; outline: none; border: 1px solid rgba(220,179,115,.10); border-radius: 13px; background: rgba(0,0,0,.17); color: #f7f3ec; font-family: inherit; font-size: 13.5px; line-height: 1.8; transition: border-color .3s ease, background .3s ease; } .pm-idea-cta__message::placeholder { color: #746e66; opacity: 1; } .pm-idea-cta__message:focus { border-color: rgba(216,168,94,.30); background: rgba(0,0,0,.23); } /* Button reset because it is now a button */ button.pm-idea-cta__button { font-family: inherit; cursor: pointer; } /* ========================================================= MOBILE MESSAGE FIELD ========================================================= */ @media (max-width:767px) { .pm-idea-cta__message-box { margin-top: 20px; padding: 13px; text-align: right; } .pm-idea-cta__message-head { display: block; } .pm-idea-cta__message-label { display: block; } .pm-idea-cta__message-optional { display: block; margin-top: 3px; } .pm-idea-cta__message { min-height: 110px; font-size: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1023px) { .pm-idea-cta { padding: 58px 0 66px; } .pm-idea-cta__shell { grid-template-columns: 1fr .78fr; gap: 30px; width: calc(100% - 36px); min-height: 420px; padding: 46px 40px; } .pm-idea-cta__title { font-size: 40px; } .pm-idea-cta__visual { max-width: 340px; } .pm-idea-cta__stage { padding: 7px 9px; font-size: 11px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .pm-idea-cta { padding: 48px 0 58px; } .pm-idea-cta__shell { display: flex; flex-direction: column; gap: 30px; width: calc(100% - 24px); min-height: 0; padding: 38px 22px 24px; border-radius: 24px; } .pm-idea-cta__content { width: 100%; text-align: center; } .pm-idea-cta__eyebrow { margin-bottom: 15px; } .pm-idea-cta__title { max-width: 100%; font-size: 34px; line-height: 1.25; } .pm-idea-cta__title span::after { right: 28%; width: 44%; } .pm-idea-cta__description { margin: 15px auto 0; font-size: 14px; line-height: 1.8; } .pm-idea-cta__types { justify-content: center; gap: 7px; margin-top: 20px; } .pm-idea-cta__type { padding: 7px 10px; font-size: 10.5px; } .pm-idea-cta__button { width: 100%; margin-top: 24px; min-height: 57px; padding: 9px 13px; } .pm-idea-cta__button-text { flex: 1; font-size: 14px; } .pm-idea-cta__note { text-align: center; } .pm-idea-cta__visual { order: 2; max-width: 310px; } .pm-idea-cta__stage { padding: 7px 8px; border-radius: 11px; font-size: 10.5px; } .pm-idea-cta__stage-number { width: 22px; height: 22px; font-size: 9px; } .pm-idea-cta__core { width: 96px; height: 96px; } .pm-idea-cta__cube { width: 43px; height: 43px; } .pm-idea-cta__cube-face--front { transform: translateZ(21.5px); } .pm-idea-cta__cube-face--back { transform: rotateY(180deg) translateZ(21.5px); } .pm-idea-cta__cube-face--right { transform: rotateY(90deg) translateZ(21.5px); } .pm-idea-cta__cube-face--left { transform: rotateY(-90deg) translateZ(21.5px); } .pm-idea-cta__cube-face--top { transform: rotateX(90deg) translateZ(21.5px); } .pm-idea-cta__cube-face--bottom { transform: rotateX(-90deg) translateZ(21.5px); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .pm-idea-cta__orbit, .pm-idea-cta__cube { animation: none !important; } .pm-idea-cta__button, .pm-idea-cta__stage { transition: none !important; } } /* ========================================================= PRO MAKER — CUSTOM DESIGN PAGE FINAL CLEAN FIX Hero Button + Physics + FAQ + CTA ========================================================= */ /* ========================================================= SALLA HOST BLOCKS الكلاسات دي بيضيفها الـJavaScript للـWrappers الحقيقية ========================================================= */ .pm-host--capabilities, .pm-host--faq, .pm-host--cta { background: transparent !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= 1) HERO QUICK CTA BUTTON ========================================================= */ .pm-hero-jump-slot { display: flex !important; align-items: center; justify-content: flex-start; width: 100%; margin-top: 24px; } .pm-hero-jump-btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 10px 20px; overflow: hidden; border: 1px solid rgba(23,23,23,.16) !important; border-radius: 15px; background: #171717 !important; color: #f7f3ec !important; text-decoration: none !important; font-family: inherit; font-size: 14px; line-height: 1; font-weight: 700; box-shadow: 0 10px 24px rgba(23,23,23,.13); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; } .pm-hero-jump-btn::before { content: ""; position: absolute; top: 0; left: -120%; width: 75%; height: 100%; pointer-events: none; transform: skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent ); transition: left .65s ease; } .pm-hero-jump-btn:hover::before { left: 140%; } .pm-hero-jump-btn__text { position: relative; z-index: 2; color: inherit; white-space: nowrap; } .pm-hero-jump-btn__arrow { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; background: rgba(215,168,96,.13); color: #e0b36e; font-size: 16px; line-height: 1; transition: transform .3s ease, background .3s ease; } @media (hover:hover) { .pm-hero-jump-btn:hover { transform: translateY(-3px); border-color: rgba(183,130,60,.35) !important; background: #22211f !important; box-shadow: 0 15px 30px rgba(23,23,23,.17), 0 0 0 4px rgba(191,141,70,.05); } .pm-hero-jump-btn:hover .pm-hero-jump-btn__arrow { transform: translateY(3px); background: rgba(215,168,96,.18); } } /* Dark Mode Hero Button */ .dark .pm-hero-jump-btn, [data-theme="dark"] .pm-hero-jump-btn { background: #f7f3ec !important; color: #171717 !important; border-color: rgba(226,186,125,.22) !important; } .dark .pm-hero-jump-btn__arrow, [data-theme="dark"] .pm-hero-jump-btn__arrow { background: #171717; color: #e2b66e; } /* ========================================================= 2) PHYSICS "إيش نقدر نصمم لك؟" ========================================================= */ /* * الخلفية البيج الخارجية تتشال. * البوكس نفسه يفضل كما هو. */ .pm-capabilities { background: transparent !important; padding-top: 36px !important; padding-bottom: 24px !important; } /* قلل الفراغ بين العنوان والبوكس سنة */ .pm-capabilities__header { margin-bottom: 26px !important; } /* Desktop */ @media (min-width:1024px) { .pm-capabilities__playground { height: 460px !important; } } /* Tablet */ @media (min-width:768px) and (max-width:1023px) { .pm-capabilities { padding-top: 32px !important; padding-bottom: 22px !important; } .pm-capabilities__header { margin-bottom: 24px !important; } .pm-capabilities__playground { height: 460px !important; } } /* Mobile */ @media (max-width:767px) { .pm-capabilities { padding-top: 30px !important; padding-bottom: 20px !important; } .pm-capabilities__header { margin-bottom: 23px !important; } .pm-capabilities__playground { height: 500px !important; } } /* ========================================================= 3) FAQ تقليل بسيط فقط ========================================================= */ .pm-faq-premium { padding-top: 34px !important; padding-bottom: 36px !important; } /* Tablet */ @media (min-width:768px) and (max-width:1023px) { .pm-faq-premium { padding-top: 32px !important; padding-bottom: 34px !important; } } /* Mobile */ @media (max-width:767px) { .pm-faq-premium { padding-top: 30px !important; padding-bottom: 32px !important; } } /* ========================================================= 4) FINAL CTA نشيل الخلفية البيج الخارجية فقط الـShell الداخلي Light/Dark لا نلمسه ========================================================= */ .pm-idea-cta { background: transparent !important; } /* ========================================================= HERO BUTTON RESPONSIVE ========================================================= */ @media (min-width:768px) and (max-width:1023px) { .pm-hero-jump-slot { margin-top: 21px; } .pm-hero-jump-btn { min-height: 50px; padding: 9px 18px; } } @media (max-width:767px) { .pm-hero-jump-slot { margin-top: 19px; justify-content: stretch; } .pm-hero-jump-btn { width: 100%; min-height: 50px; padding: 9px 15px; border-radius: 14px; } .pm-hero-jump-btn__text { flex: 1; text-align: center; } } /* ========================================================= PRO MAKER CTA LIGHT / DARK MODE FINAL OVERRIDES ========================================================= */ /* ========================================================= REMOVE OUTER BEIGE BACKGROUND ========================================================= */ .pm-idea-cta { background: transparent; } /* ========================================================= LIGHT MODE — CTA SHELL ========================================================= */ .pm-idea-cta__shell { border: 1px solid rgba(151, 111, 59, .15); background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(250,248,244,.98) 48%, rgba(246,241,233,.98) 100% ); box-shadow: 0 24px 60px rgba(52, 37, 19, .10), inset 0 1px 0 rgba(255,255,255,.95); } /* ========================================================= LIGHT MODE — GLOWS ========================================================= */ .pm-idea-cta__glow--one { background: radial-gradient( circle, rgba(205, 153, 78, .15), rgba(196, 145, 70, .04) 42%, transparent 72% ); } .pm-idea-cta__glow--two { background: radial-gradient( circle, rgba(191, 140, 68, .08), transparent 70% ); } /* ========================================================= LIGHT MODE — TEXT ========================================================= */ .pm-idea-cta__eyebrow { color: #9d682d; } .pm-idea-cta__title { color: #171717; } .pm-idea-cta__title span { color: #a56f31; } .pm-idea-cta__description { color: #625c55; } .pm-idea-cta__note { color: #847b70; } /* ========================================================= LIGHT MODE — SMALL TYPE PILLS ========================================================= */ .pm-idea-cta__type { border-color: rgba(165, 119, 57, .15); background: rgba(255,255,255,.72); color: #625b53; box-shadow: 0 4px 12px rgba(43,30,16,.035); } .pm-idea-cta__type i { background: #b37b39; } /* ========================================================= LIGHT MODE — MESSAGE BOX ========================================================= */ .pm-idea-cta__message-box { border-color: rgba(161, 115, 54, .16); background: rgba(255,255,255,.72); box-shadow: 0 10px 26px rgba(49,34,17,.045), inset 0 1px 0 rgba(255,255,255,.9); } .pm-idea-cta__message-box:focus-within { border-color: rgba(181, 128, 58, .40); background: rgba(255,255,255,.92); box-shadow: 0 0 0 4px rgba(192, 141, 70, .06), 0 12px 30px rgba(49,34,17,.055); } .pm-idea-cta__message-label { color: #27231f; } .pm-idea-cta__message-optional { color: #8d857c; } .pm-idea-cta__message { border-color: rgba(157, 111, 51, .13); background: rgba(247,243,236,.90); color: #171717; } .pm-idea-cta__message::placeholder { color: #948b81; } .pm-idea-cta__message:focus { border-color: rgba(181, 127, 58, .32); background: #ffffff; } /* ========================================================= LIGHT MODE — WHATSAPP BUTTON ========================================================= */ .pm-idea-cta__button { border-color: #171717; background: #171717; color: #f7f3ec !important; box-shadow: 0 13px 28px rgba(23,23,23,.14); } .pm-idea-cta__button:hover { background: #242321; box-shadow: 0 18px 34px rgba(23,23,23,.18), 0 0 0 4px rgba(194,144,72,.065); } .pm-idea-cta__button-icon { background: #f7f3ec; color: #a86f30; } .pm-idea-cta__button-arrow { color: #d3a25c; background: rgba(216,168,94,.10); } /* ========================================================= LIGHT MODE — VISUAL GRID ========================================================= */ .pm-idea-cta__visual-grid { opacity: .30; background-image: linear-gradient( rgba(157,109,48,.13) 1px, transparent 1px ), linear-gradient( 90deg, rgba(157,109,48,.13) 1px, transparent 1px ); } /* ========================================================= LIGHT MODE — ORBITS ========================================================= */ .pm-idea-cta__orbit { border-color: rgba(159,111,47,.19); } .pm-idea-cta__orbit--middle { border-color: rgba(159,111,47,.25); } .pm-idea-cta__orbit--inner { border-color: rgba(171,122,56,.29); } /* ========================================================= LIGHT MODE — STAGES ========================================================= */ .pm-idea-cta__stage { border-color: rgba(163,115,53,.15); background: rgba(255,255,255,.84); color: #292520; box-shadow: 0 10px 24px rgba(42,29,15,.08), inset 0 1px 0 rgba(255,255,255,.95); } .pm-idea-cta__stage-number { background: rgba(195,143,72,.10); color: #9d682d; } /* ========================================================= LIGHT MODE — 3D CORE ========================================================= */ .pm-idea-cta__core { border-color: rgba(166,116,50,.22); background: radial-gradient( circle, rgba(205,154,82,.13), rgba(205,154,82,.025) 60%, transparent 72% ); box-shadow: 0 0 45px rgba(155,108,48,.075), inset 0 0 30px rgba(188,137,69,.045); } .pm-idea-cta__cube-face { border-color: rgba(157,106,42,.58); background: rgba(206,157,87,.07); box-shadow: inset 0 0 14px rgba(195,142,69,.055); } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-idea-cta__shell, [data-theme="dark"] .pm-idea-cta__shell { border-color: rgba(211,167,100,.17); background: linear-gradient( 135deg, #191817 0%, #111110 55%, #171513 100% ); box-shadow: 0 28px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.045); } .dark .pm-idea-cta__glow--one, [data-theme="dark"] .pm-idea-cta__glow--one { background: radial-gradient( circle, rgba(216,166,90,.20), rgba(177,121,50,.055) 40%, transparent 72% ); } .dark .pm-idea-cta__glow--two, [data-theme="dark"] .pm-idea-cta__glow--two { background: radial-gradient( circle, rgba(201,149,76,.11), transparent 70% ); } .dark .pm-idea-cta__eyebrow, [data-theme="dark"] .pm-idea-cta__eyebrow { color: #d6ab69; } .dark .pm-idea-cta__title, [data-theme="dark"] .pm-idea-cta__title { color: #f7f3ec; } .dark .pm-idea-cta__title span, [data-theme="dark"] .pm-idea-cta__title span { color: #d8aa63; } .dark .pm-idea-cta__description, [data-theme="dark"] .pm-idea-cta__description { color: #c3bbb0; } .dark .pm-idea-cta__note, [data-theme="dark"] .pm-idea-cta__note { color: #847d74; } /* Types */ .dark .pm-idea-cta__type, [data-theme="dark"] .pm-idea-cta__type { border-color: rgba(218,174,108,.13); background: rgba(255,255,255,.035); color: #c9c1b6; box-shadow: none; } /* Message box */ .dark .pm-idea-cta__message-box, [data-theme="dark"] .pm-idea-cta__message-box { border-color: rgba(218,174,108,.15); background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } .dark .pm-idea-cta__message-box:focus-within, [data-theme="dark"] .pm-idea-cta__message-box:focus-within { border-color: rgba(217,169,94,.38); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(211,162,89,.055), inset 0 1px 0 rgba(255,255,255,.05); } .dark .pm-idea-cta__message-label, [data-theme="dark"] .pm-idea-cta__message-label { color: #eee4d7; } .dark .pm-idea-cta__message-optional, [data-theme="dark"] .pm-idea-cta__message-optional { color: #827a71; } .dark .pm-idea-cta__message, [data-theme="dark"] .pm-idea-cta__message { border-color: rgba(220,179,115,.10); background: rgba(0,0,0,.17); color: #f7f3ec; } .dark .pm-idea-cta__message::placeholder, [data-theme="dark"] .pm-idea-cta__message::placeholder { color: #746e66; } /* Button */ .dark .pm-idea-cta__button, [data-theme="dark"] .pm-idea-cta__button { border-color: rgba(255,255,255,.45); background: #f7f3ec; color: #171717 !important; box-shadow: 0 13px 28px rgba(0,0,0,.17), inset 0 1px 0 #fff; } .dark .pm-idea-cta__button:hover, [data-theme="dark"] .pm-idea-cta__button:hover { background: #fffaf1; box-shadow: 0 18px 36px rgba(0,0,0,.22), 0 0 0 4px rgba(211,162,89,.07); } .dark .pm-idea-cta__button-icon, [data-theme="dark"] .pm-idea-cta__button-icon { background: #171717; color: #f0ca91; } /* Stages */ .dark .pm-idea-cta__stage, [data-theme="dark"] .pm-idea-cta__stage { border-color: rgba(221,179,113,.17); background: rgba(20,19,17,.79); color: #e6ddd1; box-shadow: 0 11px 25px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.035); } .dark .pm-idea-cta__stage-number, [data-theme="dark"] .pm-idea-cta__stage-number { background: rgba(213,162,88,.11); color: #d8a85f; } /* Grid + orbits */ .dark .pm-idea-cta__visual-grid, [data-theme="dark"] .pm-idea-cta__visual-grid { opacity: .24; background-image: linear-gradient( rgba(217,170,99,.16) 1px, transparent 1px ), linear-gradient( 90deg, rgba(217,170,99,.16) 1px, transparent 1px ); } .dark .pm-idea-cta__orbit, [data-theme="dark"] .pm-idea-cta__orbit { border-color: rgba(216,167,94,.20); } .dark .pm-idea-cta__orbit--middle, [data-theme="dark"] .pm-idea-cta__orbit--middle { border-color: rgba(216,167,94,.27); } .dark .pm-idea-cta__orbit--inner, [data-theme="dark"] .pm-idea-cta__orbit--inner { border-color: rgba(234,199,143,.33); } /* Core */ .dark .pm-idea-cta__core, [data-theme="dark"] .pm-idea-cta__core { border-color: rgba(224,183,119,.25); background: radial-gradient( circle, rgba(218,169,94,.18), rgba(218,169,94,.025) 60%, transparent 72% ); box-shadow: 0 0 45px rgba(205,150,72,.10), inset 0 0 30px rgba(215,167,96,.06); } .dark .pm-idea-cta__cube-face, [data-theme="dark"] .pm-idea-cta__cube-face { border-color: rgba(241,208,154,.66); background: rgba(211,159,82,.07); } /* ========================================================= PRO MAKER CUSTOM DESIGN HERO — QUICK CTA FINAL VERSION ========================================================= */ /* ========================================================= IMPORTANT: KEEP ORIGINAL HERO + RESTORE BEIGE SPACE BELOW IMAGE ========================================================= */ .s-information-page .s-block--hero-area { margin-bottom: 0 !important; } /* * المساحة دي جوه الـHero نفسه، * وبالتالي لون الـBeige يكمل تحت الصورة * قبل بداية Gallery. */ .s-information-page .s-block--hero-area .lp-container { padding-bottom: 38px !important; } /* * ممنوع سحب Gallery فوق الـHero */ .s-information-page .pm-custom-gallery { margin-top: 0 !important; } /* ========================================================= QUICK CTA SLOT ========================================================= */ .pm-hero-jump-slot { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-top: 24px; } /* ========================================================= BUTTON ========================================================= */ .pm-hero-jump-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 10px 20px; overflow: hidden; border: 1px solid rgba(23,23,23,.16); border-radius: 15px; background: #171717; color: #f7f3ec !important; text-decoration: none !important; font-size: 14px; line-height: 1; font-weight: 700; box-shadow: 0 10px 24px rgba(23,23,23,.13); transition: transform .3s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease; } /* ========================================================= LIGHT REFLECTION ========================================================= */ .pm-hero-jump-btn::before { content: ""; position: absolute; top: 0; left: -120%; width: 75%; height: 100%; pointer-events: none; transform: skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent ); transition: left .65s ease; } .pm-hero-jump-btn:hover::before { left: 140%; } /* ========================================================= TEXT ========================================================= */ .pm-hero-jump-btn__text { position: relative; z-index: 2; white-space: nowrap; } /* ========================================================= ARROW ========================================================= */ .pm-hero-jump-btn__arrow { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; background: rgba(215,168,96,.13); color: #e0b36e; font-size: 16px; line-height: 1; transition: transform .3s ease, background .3s ease; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .pm-hero-jump-btn:hover { transform: translateY(-3px); border-color: rgba(183,130,60,.35); background: #22211f; box-shadow: 0 15px 30px rgba(23,23,23,.17), 0 0 0 4px rgba(191,141,70,.05); } .pm-hero-jump-btn:hover .pm-hero-jump-btn__arrow { transform: translateY(3px); background: rgba(215,168,96,.18); } } /* ========================================================= DARK MODE ========================================================= */ .dark .pm-hero-jump-btn, [data-theme="dark"] .pm-hero-jump-btn { border-color: rgba(226,186,125,.22); background: #f7f3ec; color: #171717 !important; box-shadow: 0 12px 26px rgba(0,0,0,.20); } .dark .pm-hero-jump-btn__arrow, [data-theme="dark"] .pm-hero-jump-btn__arrow { background: #171717; color: #e2b66e; } @media (hover:hover) { .dark .pm-hero-jump-btn:hover, [data-theme="dark"] .pm-hero-jump-btn:hover { background: #fffaf1; border-color: rgba(226,186,125,.35); } } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1023px) { .s-information-page .s-block--hero-area .lp-container { padding-bottom: 30px !important; } .pm-hero-jump-slot { margin-top: 21px; } .pm-hero-jump-btn { min-height: 50px; padding: 9px 18px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { /* * نسيب Beige space تحت الصورة * لكن أقل شوية من Desktop. */ .s-information-page .s-block--hero-area .lp-container { padding-bottom: 24px !important; } .pm-hero-jump-slot { margin-top: 19px; justify-content: stretch; } .pm-hero-jump-btn { width: 100%; min-height: 50px; padding: 9px 15px; border-radius: 14px; } .pm-hero-jump-btn__text { flex: 1; text-align: center; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .pm-hero-jump-btn, .pm-hero-jump-btn::before, .pm-hero-jump-btn__arrow { transition: none !important; } } /* ========================================================= CUSTOM DESIGN HERO → GALLERY SPACING ========================================================= */ .s-information-page .s-block--hero-area { margin-bottom: 14px !important; } /* Tablet */ @media (min-width:768px) and (max-width:1023px) { .s-information-page .s-block--hero-area { margin-bottom: 12px !important; } } /* Mobile */ @media (max-width:767px) { .s-information-page .s-block--hero-area { margin-bottom: 10px !important; } } /* * PRO MAKER — Selia product page * Scope: product pages only. Header and footer are intentionally untouched. * Source selectors verified against the captured product-page body HTML. * * Main selectors: * .container--product-details, .product-single__inner, * .product-single__columns, .product-single__slider, * .product-single__main-media, .product-single__info, * .s-product-options-colors-wrapper, .product-price, * .sticky-product-bar, .product-features--wrapper, * salla-payments, .product-more-info, .s-before-related, * .simplified-products, salla-products-slider. */ /* ========================================================= PRO MAKER — SELIA PRODUCT PAGE PREMIUM FINAL V2 ========================================================= */ /* ========================================================= 1) DESIGN TOKENS ========================================================= */ body.product-single main { --pm-black: #171717; --pm-black-soft: #24211e; --pm-cream: #f7f3ec; --pm-cream-2: #f1ebe2; --pm-white: #ffffff; --pm-gold: #b98543; --pm-gold-light: #dfbd86; --pm-gold-soft: rgba(185, 133, 67, .12); --pm-green: #248956; --pm-green-soft: rgba(36, 137, 86, .09); --pm-green-border: rgba(36, 137, 86, .27); --pm-danger: #c74b40; --pm-danger-soft: rgba(199, 75, 64, .08); --pm-danger-border: rgba(199, 75, 64, .25); --pm-surface: #ffffff; --pm-surface-soft: #faf8f4; --pm-surface-warm: #f7f3ec; --pm-surface-raised: #ffffff; --pm-text: #171717; --pm-muted: #716a62; --pm-border: rgba(23, 23, 23, .09); --pm-border-strong: rgba(23, 23, 23, .16); --pm-shadow-sm: 0 7px 22px rgba(23, 23, 23, .05); --pm-shadow-md: 0 14px 36px rgba(23, 23, 23, .075); --pm-shadow-lg: 0 24px 58px rgba(23, 23, 23, .09); --pm-radius-sm: 13px; --pm-radius-md: 18px; --pm-radius-lg: 28px; color: var(--pm-text); } /* ========================================================= 2) DARK MODE ========================================================= */ html.dark body.product-single main, body.product-single.color-mode-dark main { --pm-black: #f5efe6; --pm-black-soft: #ddd5ca; --pm-cream: #171715; --pm-cream-2: #1d1c19; --pm-white: #151515; --pm-gold: #d4a664; --pm-gold-light: #e5c28d; --pm-gold-soft: rgba(212, 166, 100, .13); --pm-green: #65cf92; --pm-green-soft: rgba(101, 207, 146, .10); --pm-green-border: rgba(101, 207, 146, .28); --pm-danger: #f1847a; --pm-danger-soft: rgba(241, 132, 122, .10); --pm-danger-border: rgba(241, 132, 122, .26); --pm-surface: #151515; --pm-surface-soft: #1b1a18; --pm-surface-warm: #211e19; --pm-surface-raised: #181818; --pm-text: #f4efe8; --pm-muted: #aaa299; --pm-border: rgba(255, 255, 255, .09); --pm-border-strong: rgba(255, 255, 255, .17); --pm-shadow-sm: 0 10px 28px rgba(0, 0, 0, .18); --pm-shadow-md: 0 16px 42px rgba(0, 0, 0, .24); --pm-shadow-lg: 0 26px 70px rgba(0, 0, 0, .30); } /* ========================================================= 3) HORIZONTAL PAGE SHIFT PROTECTION ========================================================= */ body.product-single { max-width: 100%; overflow-x: clip !important; } body.product-single main { max-width: 100%; overflow-x: clip !important; } @supports not (overflow: clip) { body.product-single, body.product-single main { overflow-x: hidden !important; } } body.product-single main .container--product-details, body.product-single main .product-single, body.product-single main .product-single__layout, body.product-single main .product-single__inner, body.product-single main .product-single__columns, body.product-single main .product-single__slider, body.product-single main .product-single__info, body.product-single main .product-form, body.product-single main salla-product-options, body.product-single main .s-product-options-wrapper, body.product-single main .s-product-options-option, body.product-single main .s-product-options-option-content { min-width: 0 !important; max-width: 100%; } /* ========================================================= 4) BREADCRUMBS ========================================================= */ body.product-single main .container--breadcrumbs .breadcrumbs { padding-block: 10px !important; } body.product-single main .container--breadcrumbs .s-breadcrumb-wrapper { gap: 6px; color: var(--pm-muted); font-size: 13px; } /* ========================================================= 5) EMPTY BLOCKS ========================================================= */ body.product-single main .s-before-product-info:empty, body.product-single main .s-before-reviews:empty, body.product-single main .s-after-related:empty { display: none !important; } /* ========================================================= 6) MAIN PRODUCT LAYOUT ========================================================= */ body.product-single main .container--product-details { width: min(calc(100% - 34px), 1360px); max-width: 1360px; margin-inline: auto; padding-top: 8px; padding-bottom: 34px; } body.product-single main .product-single__inner { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; } body.product-single main .product-single__sidebar { display: none !important; } body.product-single main .product-single__layout, body.product-single main .product-single__columns, body.product-single main .product-single__row { margin: 0 !important; } body.product-single main .product-single__columns { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: start; gap: clamp(24px, 3vw, 42px); height: auto !important; } body.product-single main .product-single__slider, body.product-single main .product-single__info { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } /* ========================================================= 7) PRODUCT GALLERY ========================================================= */ @media (min-width: 1024px) { body.product-single main .product-single__slider { position: sticky; top: 92px; } } /* Product media column */ body.product-single main .product-single.without-thumbs .product-single__media-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Main Gallery Card */ body.product-single main .product-single__main-media { position: relative; overflow: hidden; padding: 12px; border: 1px solid var(--pm-border); border-radius: 30px !important; background: linear-gradient( 145deg, var(--pm-surface-raised), var(--pm-surface-soft) ); box-shadow: var(--pm-shadow-lg); } /* ========================================================= FOUR PREMIUM CORNERS follows the actual rounded border ========================================================= */ body.product-single main .product-single__main-media::before { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; padding: 3px; background: conic-gradient( from 0deg, transparent 0deg 34deg, rgba(185,133,67,.96) 34deg 56deg, transparent 56deg 124deg, rgba(185,133,67,.96) 124deg 146deg, transparent 146deg 214deg, rgba(185,133,67,.96) 214deg 236deg, transparent 236deg 304deg, rgba(185,133,67,.96) 304deg 326deg, transparent 326deg 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow( 0 0 3px rgba(185,133,67,.20) ); } body.product-single main .product-single__main-media::after { content: none !important; } /* Dark Mode Corners */ html.dark body.product-single main .product-single__main-media::before { background: conic-gradient( from 0deg, transparent 0deg 34deg, rgba(216,170,101,.98) 34deg 56deg, transparent 56deg 124deg, rgba(216,170,101,.98) 124deg 146deg, transparent 146deg 214deg, rgba(216,170,101,.98) 214deg 236deg, transparent 236deg 304deg, rgba(216,170,101,.98) 304deg 326deg, transparent 326deg 360deg ); } /* Slider Structure */ body.product-single main .details-slider, body.product-single main .details-slider .s-slider-container, body.product-single main .details-slider .s-slider-swiper-wrapper { border-radius: 22px !important; } body.product-single main .details-slider .s-slider-swiper-wrapper { height: auto !important; } /* Main Image Area */ body.product-single main .details-slider .magnify-wrapper { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 0 !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px !important; background: var(--pm-surface); } /* Product Image */ body.product-single main .product-single__slide-image { width: 100% !important; height: 100% !important; max-height: none !important; padding: 4px; border-radius: 20px !important; object-fit: contain !important; transition: transform .36s cubic-bezier(.2,.7,.2,1), filter .36s ease; } @media (hover:hover) { body.product-single main .details-slider .magnify-wrapper:hover .product-single__slide-image { transform: scale(1.018); filter: contrast(1.015) saturate(1.025); } } /* Pagination */ body.product-single main .details-slider .swiper-pagination-bullet { width: 7px; height: 7px; background: var(--pm-muted); opacity: .35; } body.product-single main .details-slider .swiper-pagination-bullet-active { width: 22px; border-radius: 999px; background: var(--pm-gold); opacity: 1; } /* Mobile */ @media (max-width: 639px) { body.product-single main .product-single__main-media { padding: 7px; border-radius: 21px !important; box-shadow: var(--pm-shadow-sm); } body.product-single main .product-single__main-media::before { padding: 2px; background: conic-gradient( from 0deg, transparent 0deg 32deg, rgba(185,133,67,.90) 32deg 58deg, transparent 58deg 122deg, rgba(185,133,67,.90) 122deg 148deg, transparent 148deg 212deg, rgba(185,133,67,.90) 212deg 238deg, transparent 238deg 302deg, rgba(185,133,67,.90) 302deg 328deg, transparent 328deg 360deg ); } body.product-single main .details-slider .magnify-wrapper { aspect-ratio: 4 / 3; border-radius: 15px !important; } body.product-single main .product-single__slide-image { padding: 3px; border-radius: 14px !important; } } /* ========================================================= 8) GALLERY THUMBNAILS ========================================================= */ body.product-single main .product-single__slider .swiper-slide:not(.magnify-wrapper) { overflow: hidden; border: 1px solid var(--pm-border) !important; border-radius: 13px !important; background: var(--pm-surface-raised) !important; opacity: 1 !important; filter: saturate(.96); box-shadow: 0 4px 12px rgba(23,23,23,.045); transition: transform .22s ease, filter .22s ease, border-color .22s ease, box-shadow .22s ease; } body.product-single main .product-single__slider .swiper-slide:not(.magnify-wrapper) img { width: 100%; height: 100%; border-radius: 11px !important; object-fit: cover; transition: transform .30s ease, filter .30s ease; } @media (hover:hover) { body.product-single main .product-single__slider .swiper-slide:not(.magnify-wrapper):hover { transform: translateY(-3px); filter: saturate(1.06); border-color: rgba(185,133,67,.36) !important; box-shadow: 0 10px 23px rgba(23,23,23,.10); } body.product-single main .product-single__slider .swiper-slide:not(.magnify-wrapper):hover img { transform: scale(1.045); filter: contrast(1.025); } } body.product-single main .product-single__slider .swiper-slide-thumb-active { border-color: var(--pm-gold) !important; box-shadow: 0 0 0 2px var(--pm-gold-soft), 0 8px 18px rgba(23,23,23,.08); } /* slider bullets */ body.product-single main .details-slider .swiper-pagination-bullet { width: 7px; height: 7px; background: var(--pm-muted); opacity: .35; } body.product-single main .details-slider .swiper-pagination-bullet-active { width: 22px; border-radius: 999px; background: var(--pm-gold); opacity: 1; } /* ========================================================= 9) PRODUCT INFORMATION PANEL ========================================================= */ body.product-single main .product-single__info { position: relative; align-self: start !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: clamp(20px, 2.4vw, 30px) !important; overflow: hidden; border: 1px solid var(--pm-border); border-radius: 30px; background: var(--pm-surface-raised); box-shadow: var(--pm-shadow-md); color: var(--pm-text); direction: rtl; text-align: right; } /* ========================================================= FOUR PREMIUM CORNERS exact same style as Gallery ========================================================= */ body.product-single main .product-single__info::before { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; padding: 3px; background: conic-gradient( from 0deg, transparent 0deg 34deg, rgba(185,133,67,.96) 34deg 56deg, transparent 56deg 124deg, rgba(185,133,67,.96) 124deg 146deg, transparent 146deg 214deg, rgba(185,133,67,.96) 214deg 236deg, transparent 236deg 304deg, rgba(185,133,67,.96) 304deg 326deg, transparent 326deg 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow( 0 0 3px rgba(185,133,67,.20) ); } body.product-single main .product-single__info::after { content: none !important; } /* Dark Mode Corners */ html.dark body.product-single main .product-single__info::before { background: conic-gradient( from 0deg, transparent 0deg 34deg, rgba(216,170,101,.98) 34deg 56deg, transparent 56deg 124deg, rgba(216,170,101,.98) 124deg 146deg, transparent 146deg 214deg, rgba(216,170,101,.98) 214deg 236deg, transparent 236deg 304deg, rgba(216,170,101,.98) 304deg 326deg, transparent 326deg 360deg ); } /* Brand Row */ body.product-single main .product-single__brand-row { min-height: 42px; margin-bottom: 12px !important; } /* Share Buttons */ body.product-single main .product-single__share-row { gap: 8px; } body.product-single main .product-single__share-row .s-button-element { width: 42px; height: 42px; min-height: 42px; border: 1px solid var(--pm-border) !important; border-radius: 50% !important; background: var(--pm-surface-soft) !important; color: var(--pm-text) !important; box-shadow: none !important; transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease; } @media (hover:hover) { body.product-single main .product-single__share-row .s-button-element:hover { transform: translateY(-2px) rotate(-3deg); border-color: rgba(185,133,67,.42) !important; background: var(--pm-gold-soft) !important; color: var(--pm-gold) !important; box-shadow: 0 7px 16px rgba(185,133,67,.11) !important; } } /* Mobile */ @media (max-width: 639px) { body.product-single main .product-single__info { padding: 17px 14px !important; border-radius: 21px; } body.product-single main .product-single__info::before { padding: 2px; background: conic-gradient( from 0deg, transparent 0deg 32deg, rgba(185,133,67,.90) 32deg 58deg, transparent 58deg 122deg, rgba(185,133,67,.90) 122deg 148deg, transparent 148deg 212deg, rgba(185,133,67,.90) 212deg 238deg, transparent 238deg 302deg, rgba(185,133,67,.90) 302deg 328deg, transparent 328deg 360deg ); } } /* ========================================================= 10) PRODUCT TITLE shine = RIGHT → LEFT + slower ========================================================= */ body.product-single main .product-single__title { position: relative; width: fit-content; max-width: 100%; margin: 0 0 8px; direction: rtl; text-align: right !important; font-size: clamp(26px, 2.25vw, 36px) !important; line-height: 1.32 !important; font-weight: 800; letter-spacing: -.025em; background: linear-gradient( 105deg, var(--pm-text) 0%, var(--pm-text) 45%, #ba8240 48.5%, #efd09d 50%, #ba8240 51.5%, var(--pm-text) 55%, var(--pm-text) 100% ); background-size: 300% 100%; /* * highlight starts outside on RIGHT, * then travels to LEFT. */ background-position: 0% center; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: pm-title-shine-rtl 9.5s ease-in-out infinite; } @keyframes pm-title-shine-rtl { 0%, 56% { background-position: 0% center; } 88%, 100% { background-position: 100% center; } } /* ========================================================= 11) PRODUCT DESCRIPTION RTL ========================================================= */ body.product-single main .product-single__info > p, body.product-single main .product-single__info p, body.product-single main .product-single__info .product-description, body.product-single main .product-single__info .description, body.product-single main .product-single__info [class*="description"], body.product-single main .product-single__info .ql-editor, body.product-single main .product-single__info .ql-align-left, body.product-single main .product-single__info .ql-align-center, body.product-single main .product-single__info .ql-align-right { direction: rtl !important; text-align: right !important; } body.product-single main .product-single__info p { color: var(--pm-muted); line-height: 1.95; } /* ========================================================= 12) PRICE ========================================================= */ body.product-single main .product-price-top { width: 100%; margin: 0 0 12px !important; gap: 10px !important; } body.product-single main .product-price-top .total-price { color: var(--pm-text) !important; font-size: clamp(25px, 2vw, 31px) !important; line-height: 1.2; font-weight: 850 !important; } body.product-single main .product-price-top .before-price { color: var(--pm-muted) !important; font-size: 14px; } body.product-single main .product-price-bottom { display: none !important; } /* ========================================================= 13) STOCK STATUS ========================================================= */ body.product-single main .product-single__stock-info { margin: 2px 0 15px !important; } /* AVAILABLE */ body.product-single main #variant-inventory { display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 34px; padding: 6px 11px; border: 1px solid var(--pm-green-border) !important; border-radius: 999px; background: var(--pm-green-soft) !important; color: var(--pm-green) !important; font-size: 13px; font-weight: 750; } /* OUT OF STOCK */ body.product-single main #variant-inventory.out_stock, body.product-single main #variant-inventory.out-of-stock { border-color: var(--pm-danger-border) !important; background: var(--pm-danger-soft) !important; color: var(--pm-danger) !important; } /* ========================================================= 14) PRODUCT FORM ========================================================= */ body.product-single main .product-form { width: 100%; max-width: 100%; min-width: 0; margin-top: 14px; } /* ========================================================= 15) COLORS ========================================================= */ body.product-single main .s-product-options-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-anchor: none; } body.product-single main .s-product-options-option-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 14px; padding: 15px; overflow: hidden; border: 1px solid rgba(185,133,67,.15); border-radius: 18px; background: var(--pm-surface-warm); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); overflow-anchor: none; } html.dark body.product-single main .s-product-options-option-container { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } body.product-single main .s-product-options-option { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } body.product-single main .s-product-options-option-content { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.product-single main .s-product-options-option-label { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 12px !important; color: var(--pm-text) !important; font-size: 14px; font-weight: 800; } body.product-single main .s-product-options-option-label b > span { color: var(--pm-danger); } /* ========================================================= 16) COLOR ITEMS Exact DOM-specific selectors ========================================================= */ body.product-single main fieldset.s-product-options-colors-wrapper { display: grid !important; grid-auto-flow: column; grid-template-rows: repeat(2, 70px); grid-auto-columns: 122px; gap: 8px; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 2px 2px 4px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; direction: rtl; scroll-behavior: smooth; overscroll-behavior-x: contain; overflow-anchor: none; scrollbar-width: none !important; -ms-overflow-style: none; } body.product-single main fieldset.s-product-options-colors-wrapper::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Each option */ body.product-single main .s-product-options-colors-item { position: relative; display: block; width: 122px; min-width: 122px; max-width: 122px; height: 70px; min-height: 70px; overflow: visible; } /* Real radio input stays hidden */ body.product-single main .s-product-options-colors-item > input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0 !important; pointer-events: none; } /* Actual color card */ body.product-single main .s-product-options-colors-item > label { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px; width: 100% !important; height: 70px !important; min-height: 70px !important; padding: 8px 9px !important; overflow: hidden; border: 1px solid var(--pm-border) !important; border-radius: 12px !important; background: var(--pm-surface-raised) !important; color: var(--pm-text) !important; cursor: pointer; box-shadow: 0 3px 10px rgba(23,23,23,.035); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } /* THIS IS ONLY THE COLOR CIRCLE */ body.product-single main .s-product-options-colors-item > label > span { display: block !important; flex: 0 0 26px !important; width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: 3px solid var(--pm-surface-raised) !important; border-radius: 50% !important; box-shadow: 0 0 0 1px var(--pm-border-strong); aspect-ratio: 1 / 1 !important; } /* Name + stock status */ body.product-single main .s-product-options-colors-item > label > div { display: block !important; flex: 1 1 auto; min-width: 0; overflow: visible; color: var(--pm-text) !important; font-size: 11px; font-weight: 700; line-height: 1.25; white-space: normal !important; text-align: right; } /* stock status */ body.product-single main .s-product-options-colors-item > label > div > p { display: block !important; margin: 3px 0 0 !important; padding: 0 !important; color: var(--pm-danger) !important; font-size: 9px !important; font-weight: 700; line-height: 1.1; white-space: nowrap; } /* selected */ body.product-single main .s-product-options-colors-item > input[type="radio"]:checked + label { border-color: rgba(185,133,67,.65) !important; background: color-mix( in srgb, var(--pm-gold-soft) 38%, var(--pm-surface-raised) ) !important; box-shadow: 0 0 0 2px var(--pm-gold-soft), 0 7px 16px rgba(23,23,23,.05); } /* out of stock */ body.product-single main .s-product-options-option-stock-out > label { border-color: var(--pm-danger-border) !important; background: color-mix( in srgb, var(--pm-danger-soft) 35%, var(--pm-surface-raised) ) !important; opacity: .72; } /* hover */ @media (hover:hover) { body.product-single main .s-product-options-colors-item:not( .s-product-options-option-stock-out ) > label:hover { transform: translateY(-1px); border-color: rgba(185,133,67,.50) !important; box-shadow: 0 7px 17px rgba(23,23,23,.07); } } /* Dark */ html.dark body.product-single main .s-product-options-colors-item > label { background: var(--pm-surface-raised) !important; color: var(--pm-text) !important; } /* Mobile */ @media (max-width: 639px) { body.product-single main fieldset.s-product-options-colors-wrapper { grid-template-rows: repeat(2, 66px); grid-auto-columns: 116px; } body.product-single main .s-product-options-colors-item { width: 116px; min-width: 116px; max-width: 116px; height: 66px; min-height: 66px; } body.product-single main .s-product-options-colors-item > label { height: 66px !important; min-height: 66px !important; padding: 7px 8px !important; } } /* ========================================================= 17) CUSTOM COLOR SCROLLBAR ========================================================= */ body.product-single main .pm-color-scrollbar:not([hidden]) { display: block; width: 100%; padding: 11px 3px 1px; } body.product-single main .pm-color-scrollbar__track { position: relative; width: 100%; height: 9px; overflow: hidden; border: 1px solid rgba(185,133,67,.15); border-radius: 999px; background: rgba(185,133,67,.12); } body.product-single main .pm-color-scrollbar__thumb { height: 100% !important; min-width: 54px; border-radius: 999px; background: linear-gradient( 90deg, #8f602d, #c7904d, #e4c18a ); box-shadow: 0 1px 9px rgba(185,133,67,.32); cursor: grab; transition: box-shadow .18s ease, filter .18s ease; } body.product-single main .pm-color-scrollbar__thumb:hover { filter: brightness(1.06); box-shadow: 0 2px 12px rgba(185,133,67,.42); } body.product-single main .pm-color-scrollbar__thumb:active { cursor: grabbing; } /* ========================================================= 18) PRODUCT CATEGORY ETC. ========================================================= */ body.product-single main .product-form > section.bg-storeBG:not(.sticky-product-bar) { margin: 0 0 12px !important; padding: 14px 16px !important; border: 1px solid var(--pm-border); border-radius: 14px !important; background: var(--pm-surface-soft) !important; color: var(--pm-text); transition: border-color .20s ease, background .20s ease; } body.product-single main .product-form > section.bg-storeBG:not(.sticky-product-bar) a { color: var(--pm-text) !important; text-decoration-color: rgba(185,133,67,.55) !important; } @media (hover:hover) { body.product-single main .product-form > section.bg-storeBG:not(.sticky-product-bar):hover { border-color: rgba(185,133,67,.28); background: color-mix( in srgb, var(--pm-gold-soft) 20%, var(--pm-surface-soft) ) !important; } } /* ========================================================= 19) PURCHASE AREA ========================================================= */ body.product-single main .product-form .sticky-product-bar { margin: 13px 0 0; padding: 15px !important; border: 1px solid var(--pm-border); border-radius: 18px !important; background: var(--pm-surface-soft) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); } body.product-single main .product-form .sticky-product-bar__btn { display: block; width: 100%; margin-top: 0 !important; } /* ========================================================= 20) QUANTITY CONTROL ========================================================= */ body.product-single main .sticky-product-bar salla-quantity-input, body.product-single main .sticky-product-bar .s-quantity-input-container, body.product-single main .sticky-product-bar .quantity-input, body.product-single main .sticky-product-bar [class*="quantity-input"], body.product-single main .sticky-product-bar [class*="quantity-control"] { align-items: center !important; gap: 7px; overflow: visible !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* plus / minus */ body.product-single main .sticky-product-bar salla-quantity-input button, body.product-single main .sticky-product-bar [class*="quantity"] button:not(.s-button-primary) { display: inline-grid !important; place-items: center !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--pm-border) !important; border-radius: 10px !important; background: var(--pm-surface-raised) !important; color: var(--pm-text) !important; font-size: 20px !important; line-height: 1 !important; box-shadow: 0 3px 9px rgba(23,23,23,.035); transition: color .20s ease, background .20s ease, border-color .20s ease, box-shadow .20s ease, transform .20s ease; } body.product-single main .sticky-product-bar [class*="quantity"] button i, body.product-single main .sticky-product-bar [class*="quantity"] button svg, body.product-single main .sticky-product-bar salla-quantity-input button i, body.product-single main .sticky-product-bar salla-quantity-input button svg { display: block; margin: 0 !important; padding: 0 !important; line-height: 1 !important; transform: none !important; } @media (hover:hover) { body.product-single main .sticky-product-bar [class*="quantity"] button:not(.s-button-primary):hover, body.product-single main .sticky-product-bar salla-quantity-input button:hover { transform: translateY(-1px); color: var(--pm-gold) !important; border-color: rgba(185,133,67,.45) !important; background: var(--pm-gold-soft) !important; box-shadow: 0 0 0 3px rgba(185,133,67,.07), 0 7px 18px rgba(185,133,67,.18); } } /* number */ body.product-single main .sticky-product-bar input[type="number"], body.product-single main .sticky-product-bar input[name="quantity"]:not([type="hidden"]) { width: 48px; height: 38px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--pm-text) !important; text-align: center; line-height: 38px; font-weight: 800; box-shadow: none !important; } /* ========================================================= 21) BUY BUTTONS Add to cart / Buy now / Apple Pay ========================================================= */ body.product-single main .sticky-product-bar .s-button-element, body.product-single main .sticky-product-bar button:not([class*="quantity"]), body.product-single main .sticky-product-bar [class*="apple"] button { position: relative; overflow: hidden; min-height: 52px; border-radius: 13px !important; font-size: 15px; font-weight: 800; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease; } /* moving premium reflection */ body.product-single main .sticky-product-bar .s-button-element::before, body.product-single main .sticky-product-bar [class*="apple"] button::before { content: ""; position: absolute; top: 0; left: -115%; width: 55%; height: 100%; pointer-events: none; transform: skewX(-23deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent ); transition: left .62s ease; } @media (hover:hover) { body.product-single main .sticky-product-bar .s-button-element:hover, body.product-single main .sticky-product-bar [class*="apple"] button:hover { transform: translateY(-2px); filter: brightness(.96); box-shadow: 0 13px 29px rgba(23,23,23,.16); } body.product-single main .sticky-product-bar .s-button-element:hover::before, body.product-single main .sticky-product-bar [class*="apple"] button:hover::before { left: 145%; } } /* Outline Buy Now */ body.product-single main .sticky-product-bar .s-button-outline:hover { background: var(--pm-black-soft) !important; border-color: var(--pm-black-soft) !important; color: var(--pm-cream) !important; } /* Primary Add to Cart */ body.product-single main .sticky-product-bar .s-button-primary:hover { background: #29231c !important; border-color: #29231c !important; color: #fff !important; } /* ========================================================= 22) PREMIUM TRUST FEATURES ========================================================= */ body.product-single main .product-features--wrapper { margin: 14px 0 !important; } body.product-single main .product-features__grid { gap: 10px !important; } body.product-single main .product-features-item { position: relative; isolation: isolate; min-width: 0; min-height: 78px; padding: 12px 9px !important; overflow: hidden; border: 1px solid var(--pm-border) !important; border-radius: 15px; background: linear-gradient( 145deg, var(--pm-surface-raised), var(--pm-surface-soft) ); color: var(--pm-text); text-align: center; box-shadow: 0 5px 15px rgba(23,23,23,.035); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } body.product-single main .product-features-item::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-145%) skewX(-20deg); background: linear-gradient( 100deg, transparent 30%, rgba(255,255,255,.23), transparent 70% ); transition: transform .65s ease; } html.dark body.product-single main .product-features-item::after { background: linear-gradient( 100deg, transparent 30%, rgba(255,255,255,.065), transparent 70% ); } body.product-single main .product-features-item .feature-icon { width: 36px; min-width: 36px; height: 36px; border: 1px solid rgba(185,133,67,.10); border-radius: 50%; background: var(--pm-gold-soft); color: var(--pm-gold); transition: transform .30s ease, background .30s ease; } body.product-single main .product-features-item .feature-text h3 { color: var(--pm-text) !important; font-size: 12px !important; line-height: 1.35; font-weight: 750; } @media (hover:hover) { body.product-single main .product-features-item:hover { transform: translateY(-4px); border-color: rgba(185,133,67,.28) !important; box-shadow: 0 12px 26px rgba(23,23,23,.085); } body.product-single main .product-features-item:hover::after { transform: translateX(145%) skewX(-20deg); } body.product-single main .product-features-item:hover .feature-icon { transform: rotate(-5deg) scale(1.06); background: rgba(185,133,67,.17); } } /* ========================================================= 23) PAYMENTS + INFO EMPTY SPACE CLEANUP ========================================================= */ body.product-single main .product-single__info > salla-payments.s-payments-list-wrap { display: block; margin: 0 !important; padding: 12px 14px; border: 1px solid var(--pm-border); border-radius: 16px; background: linear-gradient( 145deg, var(--pm-surface-soft), var(--pm-surface-raised) ); box-shadow: none; } body.product-single main .product-single__info > salla-payments.s-payments-list-wrap::before { content: "طرق دفع آمنة"; display: block; margin-bottom: 9px; color: var(--pm-muted); font-size: 12px; font-weight: 750; } body.product-single main .product-single__info > salla-payments .s-payments-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 7px; } body.product-single main .product-single__info > salla-payments .s-payments-list-item { display: grid; place-items: center; width: 48px; height: 33px; margin: 0 !important; padding: 4px 6px; border: 1px solid rgba(23,23,23,.08); border-radius: 9px; background: #fff; box-shadow: 0 3px 10px rgba(23,23,23,.035); transition: transform .20s ease, box-shadow .20s ease; } body.product-single main .product-single__info > salla-payments .s-payments-list-item img { width: 100%; height: 100%; object-fit: contain; } @media (hover:hover) { body.product-single main .product-single__info > salla-payments .s-payments-list-item:hover { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(23,23,23,.08); } } /* ----------------------------------------- REMOVE EMPTY / HIDDEN SPACE AFTER PAYMENTS ----------------------------------------- */ body.product-single main .product-single__info > .s-block--bundle-out-of-stock-alternative:has(> [hidden]) { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body.product-single main .product-single__info > salla-bought-together:empty, body.product-single main .product-single__info > salla-verified-review:empty, body.product-single main .product-single__info > salla-hook[name="product:single.description.end"]:empty { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } @media (min-width: 640px) { body.product-single main .product-single__quick-order--mobile, body.product-single main .product-single__mini-offer--mobile { display: none !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= PAYMENT METHODS SIZE FIX ========================================================= */ body.product-single main .product-single__info [class*="payment"] { overflow: hidden; } body.product-single main .product-single__info [class*="payment"] img, body.product-single main .product-single__info [class*="payment"] svg { max-width: 28px !important; max-height: 18px !important; width: auto !important; height: auto !important; object-fit: contain !important; } body.product-single main .product-single__info [class*="payment"] > * { display: inline-flex !important; align-items: center; justify-content: center; } body.product-single main .product-single__info [class*="payment"] > *:first-child img, body.product-single main .product-single__info [class*="payment"] > *:first-child svg { max-width: 24px !important; max-height: 16px !important; } /* ========================================================= 24) REVIEWS FINAL CLEAN TITLE ========================================================= */ body.product-single main .product-more-info { position: relative; display: block !important; width: min(calc(100% - 34px), 1360px); margin: 24px auto 0; padding: 22px 30px 22px 42px; overflow: hidden; border: 1px solid rgba(185,133,67,.12); border-radius: 25px; background: linear-gradient( 145deg, var(--pm-surface-raised), var(--pm-surface-soft) ); box-shadow: var(--pm-shadow-sm); color: var(--pm-text); } /* ========================================================= FAR LEFT DECORATIVE LINE ========================================================= */ body.product-single main .product-more-info::before { content: ""; position: absolute; left: 23px; top: 18px; bottom: 18px; width: 2px; border-radius: 999px; background: linear-gradient( to bottom, transparent 0%, rgba(185,133,67,.48) 15%, #d0a05e 50%, rgba(185,133,67,.48) 85%, transparent 100% ); box-shadow: 0 0 7px rgba(185,133,67,.20); } /* ========================================================= REMOVE OLD DUPLICATE DECORATIONS ========================================================= */ body.product-single main .product-more-info .more-info-tabs__nav::before, body.product-single main .product-more-info .more-info-tabs__nav::after, body.product-single main .product-more-info .more-info-tabs__nav-item::before, body.product-single main .product-more-info .more-info-tabs__nav-item::after, body.product-single main .product-more-info .more-info-tabs__nav-link::before, body.product-single main .product-more-info .more-info-tabs__nav-link::after { content: none !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 640px) { /* Hide duplicate mobile title */ body.product-single main .product-more-info .more-tab-container > .more-info-tabs__nav-link.mobile, body.product-single main .product-more-info .more-info-tabs__content .more-info-tabs__nav-link.mobile { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Keep desktop title */ body.product-single main .product-more-info > .product-more-info__inner > .content-ul-tab { display: block !important; visibility: visible !important; opacity: 1 !important; } body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav { display: flex !important; align-items: center; justify-content: flex-start; width: 100%; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; } body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav-item { margin: 0 !important; padding: 0 !important; border: 0 !important; } body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav-link.active { position: relative; display: inline-flex !important; align-items: center; width: fit-content; margin: 0 !important; padding: 2px 0 9px 0 !important; border: 0 !important; color: var(--pm-text) !important; font-size: 18px; line-height: 1.35; font-weight: 850; text-decoration: none !important; } /* ===================================================== VERTICAL LINE — LEFT SIDE OF TITLE ===================================================== */ body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav-link.active::before { content: "" !important; position: absolute; left: -20px; right: auto; top: 50%; width: 3px; height: 32px; transform: translateY(-55%); border-radius: 999px; background: linear-gradient( to bottom, #8f602d, #d0a05e, #8f602d ); box-shadow: 0 0 5px rgba(185,133,67,.20); } /* No line on the link itself */ body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav-link.active::after { content: none !important; } /* ===================================================== TITLE TEXT + SINGLE UNDERLINE ===================================================== */ body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav-link.active > span { position: relative; display: inline-block; padding-bottom: 7px; background: linear-gradient( 105deg, var(--pm-text) 0%, var(--pm-text) 45%, #b77d3b 48.5%, #e9c78e 50%, #b77d3b 51.5%, var(--pm-text) 55%, var(--pm-text) 100% ); background-size: 300% 100%; background-position: 0% center; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: pm-title-shine-rtl 9.5s ease-in-out infinite; } /* ONE underline only */ body.product-single main .product-more-info .content-ul-tab .more-info-tabs__nav-link.active > span::after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(185,133,67,0) 0%, #9a6730 14%, #c28e49 32%, #e0bb7a 50%, #c28e49 68%, #9a6730 86%, rgba(185,133,67,0) 100% ); box-shadow: 0 1px 6px rgba(185,133,67,.18); opacity: 1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 639px) { /* Hide desktop title */ body.product-single main .product-more-info > .product-more-info__inner > .content-ul-tab { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Show mobile title */ body.product-single main .product-more-info .more-tab-container > .more-info-tabs__nav-link.mobile { position: relative !important; display: inline-flex !important; visibility: visible !important; align-items: center; width: fit-content !important; height: auto !important; margin: 0 0 15px !important; padding: 2px 0 8px 0 !important; opacity: 1 !important; overflow: visible !important; pointer-events: auto !important; color: var(--pm-text) !important; font-size: 16px; line-height: 1.35; font-weight: 850; border: 0 !important; } /* Vertical line on LEFT */ body.product-single main .product-more-info .more-tab-container > .more-info-tabs__nav-link.mobile::before { content: "" !important; position: absolute; left: -14px; right: auto; top: 50%; width: 3px; height: 28px; transform: translateY(-55%); border-radius: 999px; background: linear-gradient( to bottom, #8f602d, #d0a05e, #8f602d ); } /* only one bottom line */ body.product-single main .product-more-info .more-tab-container > .more-info-tabs__nav-link.mobile::after { content: "" !important; position: absolute; right: 0; left: 0; bottom: 0; height: 1.5px; border-radius: 999px; background: var(--pm-text); opacity: .55; } } /* ========================================================= REVIEW CONTENT ========================================================= */ body.product-single main .product-more-info .more-info-tabs__content { display: block !important; color: var(--pm-muted); } /* ========================================================= DARK MODE ========================================================= */ html.dark body.product-single main .product-more-info { border-color: var(--pm-border); background: linear-gradient( 145deg, var(--pm-surface-raised), var(--pm-surface-soft) ); } /* ========================================================= 25) SIMILAR PRODUCTS ========================================================= */ body.product-single main .s-before-related, body.product-single main .simplified-products { width: min(calc(100% - 34px), 1360px); max-width: 1360px; margin-inline: auto; } body.product-single main .s-before-related:not(:empty), body.product-single main .simplified-products:not(:empty) { padding-block: 30px; } body.product-single main .s-before-related + .simplified-products { padding-top: 0; } body.product-single main .simplified-products:has( salla-products-slider[data-products-empty] ) { display: none !important; } body.product-single main .s-block--bundle-similar-products { position: relative; overflow: hidden; padding: 24px; border: 1px solid var(--pm-border); border-radius: 25px; background: linear-gradient( 145deg, var(--pm-surface-raised), var(--pm-surface-soft) ); box-shadow: var(--pm-shadow-sm); } body.product-single main .s-block--bundle-similar-products::before { content: ""; position: absolute; top: -120px; right: -110px; width: 260px; height: 260px; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, var(--pm-gold-soft), transparent 68% ); } /* titles */ body.product-single main .s-before-related .s-block__title, body.product-single main .simplified-products .s-block__title, body.product-single main .s-before-related .section-title, body.product-single main .simplified-products .section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } body.product-single main .s-before-related .s-block__title h2, body.product-single main .simplified-products .s-block__title h2, body.product-single main .s-before-related .section-title h2, body.product-single main .simplified-products .section-title h2 { position: relative; color: var(--pm-text) !important; font-size: clamp(22px, 2vw, 29px) !important; font-weight: 850; letter-spacing: -.02em; } body.product-single main .s-before-related .s-block__title h2::after, body.product-single main .simplified-products .s-block__title h2::after, body.product-single main .s-before-related .section-title h2::after, body.product-single main .simplified-products .section-title h2::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 8px; border-radius: 999px; background: linear-gradient( 90deg, var(--pm-gold), transparent ); } /* cards */ body.product-single main .s-before-related .s-product-card-entry, body.product-single main .simplified-products .s-product-card-entry, body.product-single main .s-before-related .product-entry, body.product-single main .simplified-products .product-entry, body.product-single main .s-before-related salla-product-card, body.product-single main .simplified-products salla-product-card { overflow: hidden; border: 1px solid var(--pm-border) !important; border-radius: 18px !important; background: var(--pm-surface-raised) !important; box-shadow: var(--pm-shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } @media (hover:hover) { body.product-single main .s-before-related .s-product-card-entry:hover, body.product-single main .simplified-products .s-product-card-entry:hover, body.product-single main .s-before-related .product-entry:hover, body.product-single main .simplified-products .product-entry:hover, body.product-single main .s-before-related salla-product-card:hover, body.product-single main .simplified-products salla-product-card:hover { transform: translateY(-4px); border-color: rgba(185,133,67,.30) !important; box-shadow: var(--pm-shadow-md); } } /* slider arrows */ body.product-single main .s-before-related .swiper-button-next, body.product-single main .s-before-related .swiper-button-prev, body.product-single main .simplified-products .swiper-button-next, body.product-single main .simplified-products .swiper-button-prev { width: 42px; height: 42px; border: 1px solid var(--pm-border); border-radius: 50%; background: var(--pm-surface-raised); color: var(--pm-gold); box-shadow: var(--pm-shadow-sm); transition: transform .20s ease, border-color .20s ease, background .20s ease; } @media (hover:hover) { body.product-single main .s-before-related .swiper-button-next:hover, body.product-single main .s-before-related .swiper-button-prev:hover, body.product-single main .simplified-products .swiper-button-next:hover, body.product-single main .simplified-products .swiper-button-prev:hover { transform: scale(1.07); border-color: rgba(185,133,67,.35); background: var(--pm-gold-soft); } } /* ========================================================= 26) DUPLICATE DESKTOP STICKY CART ========================================================= */ @media (min-width: 1024px) { body.product-single .sticky-cart-single { display: none !important; } } /* ========================================================= 27) MOBILE/TABLET STICKY CART ========================================================= */ @media (max-width: 1023px) { body.product-single .sticky-cart-single { border: 1px solid var(--pm-border) !important; background: color-mix( in srgb, var(--pm-surface-raised) 94%, transparent ) !important; box-shadow: 0 -12px 32px rgba(23,23,23,.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.product-single .sticky-cart-single .item-thumb img { border-radius: 10px; background: var(--pm-surface-soft); object-fit: contain; } } /* ========================================================= 28) DARK MODE TEXT FIXES ========================================================= */ html.dark body.product-single main .text-store-text-primary, html.dark body.product-single main .product-single__info .text-store-text-primary, html.dark body.product-single main .product-more-info .text-store-text-primary, html.dark body.product-single main .product-form .text-store-text-primary { color: var(--pm-text) !important; } html.dark body.product-single main .text-store-text-secondary, html.dark body.product-single main .product-single__info .text-store-text-secondary, html.dark body.product-single main .product-more-info .text-store-text-secondary, html.dark body.product-single main .product-form .text-store-text-secondary { color: var(--pm-muted) !important; } html.dark body.product-single main .bg-storeBG { background: var(--pm-surface-soft) !important; } /* ========================================================= 29) TABLET ========================================================= */ @media (max-width: 1023px) { body.product-single main .product-single__columns { grid-template-columns: minmax(0, 1fr); gap: 20px; } body.product-single main .product-single__slider { position: static !important; top: auto; } body.product-single main .details-slider .magnify-wrapper { aspect-ratio: 4 / 3; } body.product-single main .product-single__info { padding: 22px !important; } body.product-single main .s-product-options-colors-wrapper { grid-auto-columns: minmax(140px, 1fr); } } /* ========================================================= 30) MOBILE ========================================================= */ @media (max-width: 639px) { body.product-single main .container--breadcrumbs .breadcrumbs { padding-block: 7px !important; } body.product-single main .container--product-details, body.product-single main .s-before-related, body.product-single main .simplified-products, body.product-single main .product-more-info { width: min(calc(100% - 20px), 1360px); } body.product-single main .container--product-details { padding-top: 4px; padding-bottom: 26px; } body.product-single main .product-single__main-media { padding: 7px; border-radius: 21px !important; box-shadow: var(--pm-shadow-sm); } body.product-single main .product-single__main-media::before, body.product-single main .product-single__info::before { background: linear-gradient( 90deg, rgba(185,133,67,.72), rgba(223,189,134,.38) ) top right / 26px 2px no-repeat, linear-gradient( 180deg, rgba(185,133,67,.72), rgba(223,189,134,.38) ) top right / 2px 26px no-repeat, linear-gradient( 270deg, rgba(185,133,67,.45), transparent ) top left / 26px 2px no-repeat, linear-gradient( 180deg, rgba(185,133,67,.45), transparent ) top left / 2px 26px no-repeat, linear-gradient( 90deg, rgba(185,133,67,.40), transparent ) bottom left / 26px 2px no-repeat, linear-gradient( 0deg, rgba(185,133,67,.40), transparent ) bottom left / 2px 26px no-repeat, linear-gradient( 270deg, rgba(185,133,67,.50), transparent ) bottom right / 26px 2px no-repeat, linear-gradient( 0deg, rgba(185,133,67,.50), transparent ) bottom right / 2px 26px no-repeat; } body.product-single main .details-slider .magnify-wrapper { aspect-ratio: 4 / 3; border-radius: 15px !important; } body.product-single main .product-single__slide-image { padding: 3px; border-radius: 14px !important; } body.product-single main .product-single__info { padding: 17px 14px !important; border-radius: 21px; } body.product-single main .product-single__title { font-size: 23px !important; } body.product-single main .s-product-options-option-container { padding: 13px; } body.product-single main .s-product-options-colors-wrapper { grid-auto-columns: minmax(132px, 46vw); grid-template-rows: repeat(2, minmax(52px, auto)); } body.product-single main .pm-color-scrollbar__track { height: 8px; } body.product-single main .product-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.product-single main .product-features-item { flex-direction: column; gap: 6px !important; min-height: 90px; } body.product-single main .product-single__info > salla-payments.s-payments-list-wrap { padding: 12px; } body.product-single main .product-more-info { margin-top: 18px; padding: 17px 24px 17px 31px; border-radius: 20px; } body.product-single main .product-more-info::before { left: 15px; top: 15px; bottom: 15px; } body.product-single main .more-info-tabs__nav-link { font-size: 16px; } body.product-single main .s-before-related:not(:empty), body.product-single main .simplified-products:not(:empty) { padding-block: 26px; } body.product-single main .s-block--bundle-similar-products { padding: 16px; border-radius: 20px; } } /* ========================================================= 31) VERY SMALL MOBILE ========================================================= */ @media (max-width: 389px) { body.product-single main .product-features__grid { grid-template-columns: 1fr !important; } body.product-single main .product-features-item { flex-direction: row; justify-content: flex-start; min-height: 58px; padding-inline: 12px !important; text-align: start; } } /* ========================================================= 32) REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body.product-single main *, body.product-single main *::before, body.product-single main *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= CATEGORY PAGE — PRO MAKER ========================================================= */ /* ========================================================= 1) CATEGORY PAGE TOKENS ========================================================= */ body.product-index { --pm-cat-gold: #b98543; --pm-cat-gold-light: #dfbd86; --pm-cat-gold-soft: rgba(185, 133, 67, .12); --pm-cat-dark: #171717; --pm-cat-white: #ffffff; --pm-cat-border: rgba(23, 23, 23, .10); --pm-cat-shadow: 0 10px 26px rgba(23, 23, 23, .08); } html.dark body.product-index { --pm-cat-border: rgba(255, 255, 255, .10); --pm-cat-shadow: 0 10px 28px rgba(0, 0, 0, .22); } /* ========================================================= 2) CATEGORY TITLE Premium RTL Shine ========================================================= */ body.product-index main .product-index__title { position: relative; width: fit-content; margin: 0; padding-bottom: 10px; font-size: clamp(22px, 2vw, 29px) !important; font-weight: 850 !important; line-height: 1.35; background: linear-gradient( 105deg, currentColor 0%, currentColor 44%, #9b672d 47.5%, #e4bd7d 50%, #b77d3b 52.5%, currentColor 56%, currentColor 100% ); background-size: 300% 100%; /* * البداية من اليمين */ background-position: 0% center; -webkit-background-clip: text; background-clip: text; color: #171717 !important; -webkit-text-fill-color: transparent; animation: pm-category-title-shine-rtl 9.5s ease-in-out infinite; } /* subtle gold accent under category title */ body.product-index main .product-index__title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 48px; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #9a6730 0%, #d7aa67 58%, rgba(215,170,103,0) 100% ); } html.dark body.product-index main .product-index__title { color: #f5f3ef !important; } /* * RIGHT → LEFT */ @keyframes pm-category-title-shine-rtl { 0%, 57% { background-position: 0% center; } 88%, 100% { background-position: 100% center; } } /* ========================================================= 3) SORTING CONTROL ========================================================= */ body.product-index main .product-index__sorting { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid rgba(185,133,67,.14); border-radius: 14px; background: rgba(255,255,255,.70); box-shadow: 0 5px 16px rgba(23,23,23,.045); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.product-index main .product-index__sorting label { margin: 0 8px !important; color: #3d3933 !important; font-size: 13px; font-weight: 750; } /* actual select */ body.product-index main #product-filter { width: auto !important; min-width: 178px; height: 42px; padding-top: 0 !important; padding-bottom: 0 !important; border: 1px solid rgba(185,133,67,.20) !important; border-radius: 10px !important; outline: none !important; background-color: #ffffff !important; color: #171717 !important; font-size: 13px; font-weight: 650; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease; } body.product-index main #product-filter:hover { transform: translateY(-1px); border-color: rgba(185,133,67,.55) !important; box-shadow: 0 5px 14px rgba(23,23,23,.055); } body.product-index main #product-filter:focus { border-color: rgba(185,133,67,.78) !important; box-shadow: 0 0 0 3px rgba(185,133,67,.10) !important; } /* Dropdown options - browser permitting */ body.product-index main #product-filter option { background: #ffffff; color: #171717; font-size: 13px; padding: 10px; } /* Dark Mode */ html.dark body.product-index main .product-index__sorting { border-color: rgba(223,189,134,.16); background: rgba(24,24,24,.78); box-shadow: 0 6px 18px rgba(0,0,0,.18); } html.dark body.product-index main .product-index__sorting label { color: #eee9e1 !important; } html.dark body.product-index main #product-filter { border-color: rgba(223,189,134,.18) !important; background-color: #202020 !important; color: #f6f3ed !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } html.dark body.product-index main #product-filter:hover { border-color: rgba(223,189,134,.50) !important; } html.dark body.product-index main #product-filter option { background: #202020; color: #f6f3ed; } /* ========================================================= 4) PRODUCT IMAGE HOVER Subtle premium zoom ========================================================= */ body.product-index main .product-card .product-card__image { overflow: hidden; } body.product-index main .product-card .product-card__image .main-image { transform: scale(1); transform-origin: center center; transition: transform .42s cubic-bezier(.2, .7, .2, 1), filter .42s ease !important; will-change: transform; } @media (hover: hover) { body.product-index main .product-card:hover .product-card__image .main-image { transform: scale(1.045); filter: brightness(1.025) contrast(1.015); } } /* ========================================================= 5) GLOBAL PRODUCT CARD ACTIONS Quick View + Wishlist Whole Store ========================================================= */ /* ========================================================= LIGHT MODE White circle + black icon NO BLACK BORDER ========================================================= */ .product-card__actions .wishlist .s-button-element, .product-card__actions .quickview-btn .s-button-element, .product-card__buttons .wishlist .s-button-element, .product-card__buttons .quickview-btn .s-button-element { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 50% !important; background: #ffffff !important; color: #171717 !important; box-shadow: 0 6px 18px rgba(0,0,0,.11) !important; transition: transform .20s ease, background .20s ease, color .20s ease, border-color .20s ease, box-shadow .20s ease !important; } .product-card__actions .s-button-element .s-button-text, .product-card__actions .s-button-element i, .product-card__buttons .s-button-element .s-button-text, .product-card__buttons .s-button-element i { color: #171717 !important; } /* Light button hover */ @media (hover:hover) { .product-card__actions .wishlist .s-button-element:hover, .product-card__actions .quickview-btn .s-button-element:hover, .product-card__buttons .wishlist .s-button-element:hover, .product-card__buttons .quickview-btn .s-button-element:hover { transform: translateY(-2px) scale(1.07); border-color: transparent !important; background: #171717 !important; color: #ffffff !important; box-shadow: 0 9px 22px rgba(0,0,0,.17) !important; } .product-card__actions .s-button-element:hover .s-button-text, .product-card__actions .s-button-element:hover i, .product-card__buttons .s-button-element:hover .s-button-text, .product-card__buttons .s-button-element:hover i { color: #ffffff !important; } } /* ========================================================= DARK MODE Product Hover = BLACK circle + WHITE icon ========================================================= */ html.dark .product-card__actions .wishlist .s-button-element, html.dark .product-card__actions .quickview-btn .s-button-element, html.dark .product-card__buttons .wishlist .s-button-element, html.dark .product-card__buttons .quickview-btn .s-button-element { border-color: rgba(255,255,255,.10) !important; background: #171717 !important; color: #ffffff !important; box-shadow: 0 7px 20px rgba(0,0,0,.34) !important; } html.dark .product-card__actions .s-button-element .s-button-text, html.dark .product-card__actions .s-button-element i, html.dark .product-card__buttons .s-button-element .s-button-text, html.dark .product-card__buttons .s-button-element i { color: #ffffff !important; } /* * Hovering directly over black circle * stays dark, gets premium gold accent */ @media (hover:hover) { html.dark .product-card__actions .wishlist .s-button-element:hover, html.dark .product-card__actions .quickview-btn .s-button-element:hover, html.dark .product-card__buttons .wishlist .s-button-element:hover, html.dark .product-card__buttons .quickview-btn .s-button-element:hover { transform: translateY(-2px) scale(1.07); background: #111111 !important; border-color: rgba(223,189,134,.55) !important; color: #ffffff !important; box-shadow: 0 0 0 2px rgba(185,133,67,.10), 0 10px 24px rgba(0,0,0,.38) !important; } html.dark .product-card__actions .s-button-element:hover .s-button-text, html.dark .product-card__actions .s-button-element:hover i, html.dark .product-card__buttons .s-button-element:hover .s-button-text, html.dark .product-card__buttons .s-button-element:hover i { color: #ffffff !important; } } /* ========================================================= 6) LOAD MORE BUTTON Premium Color Shift ========================================================= */ body.product-index main .s-infinite-scroll-wrapper { display: block !important; width: 100% !important; margin: 30px 0 8px !important; text-align: center !important; } /* ========================================================= LIGHT MODE — DEFAULT ========================================================= */ body.product-index main .s-infinite-scroll-btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 132px !important; max-width: 180px !important; min-height: 44px; padding: 0 24px !important; margin: 0 auto !important; overflow: hidden; border: 1px solid #171717 !important; border-radius: 12px !important; background: #171717 !important; background-image: none !important; color: #ffffff !important; font-size: 13px; font-weight: 750; box-shadow: 0 7px 18px rgba(23,23,23,.13); filter: none !important; transition: transform .24s ease, background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease !important; } body.product-index main .s-infinite-scroll-btn .s-button-text { position: relative; z-index: 2; color: inherit !important; } /* * Remove the old shine completely */ body.product-index main .s-infinite-scroll-btn::before, body.product-index main .s-infinite-scroll-btn::after { content: none !important; } /* ========================================================= LIGHT MODE — HOVER Black → Bronze / Gold ========================================================= */ @media (hover:hover) { body.product-index main .s-infinite-scroll-btn:hover { transform: translateY(-3px) scale(1.025); border-color: #b98543 !important; background: linear-gradient( 135deg, #9f6c31 0%, #b98543 38%, #d2a25d 72%, #b47a38 100% ) !important; background-image: linear-gradient( 135deg, #9f6c31 0%, #b98543 38%, #d2a25d 72%, #b47a38 100% ) !important; color: #ffffff !important; box-shadow: 0 12px 25px rgba(185,133,67,.24), 0 0 0 3px rgba(185,133,67,.08) !important; } } /* ========================================================= DARK MODE Keep the current dark look ========================================================= */ html.dark body.product-index main .s-infinite-scroll-btn { border-color: rgba(223,189,134,.28) !important; background: #171717 !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 8px 22px rgba(0,0,0,.30); filter: none !important; } @media (hover:hover) { html.dark body.product-index main .s-infinite-scroll-btn:hover { transform: translateY(-3px); border-color: rgba(223,189,134,.72) !important; background: #0f0f0f !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 0 0 3px rgba(185,133,67,.09), 0 11px 27px rgba(0,0,0,.38) !important; } } /* ========================================================= 7) MOBILE ========================================================= */ @media (max-width: 639px) { body.product-index main .product-index__toolbar { gap: 13px; align-items: flex-start !important; } body.product-index main .product-index__title { font-size: 20px !important; } body.product-index main .product-index__sorting { padding: 4px; } body.product-index main #product-filter { min-width: 145px; height: 40px; font-size: 12px; } body.product-index main .s-infinite-scroll-btn { min-width: 135px; min-height: 43px; border-radius: 12px !important; } } /* ========================================================= 8) REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body.product-index main .product-index__title { animation: none !important; } body.product-index main .product-card__image .main-image, body.product-index main .s-infinite-scroll-btn, body.product-index main .product-card__actions .s-button-element, body.product-index main .product-card__buttons .s-button-element { transition: none !important; } } /* ========================================================= PRO MAKER — CART PAGE ========================================================= */ /* ========================================================= 1) CART TOKENS ========================================================= */ body.cart { --pm-cart-gold: #b98543; --pm-cart-gold-light: #dfbd86; --pm-cart-gold-soft: rgba(185, 133, 67, .10); --pm-cart-text: #171717; --pm-cart-muted: #77716a; --pm-cart-surface: #ffffff; --pm-cart-soft: #faf7f2; --pm-cart-warm: #f7f2e9; --pm-cart-border: rgba(23, 23, 23, .09); --pm-cart-border-gold: rgba(185, 133, 67, .22); --pm-cart-shadow: 0 10px 28px rgba(23, 23, 23, .065); --pm-cart-shadow-hover: 0 14px 34px rgba(23, 23, 23, .09); --pm-cart-danger: #d75151; --pm-cart-danger-soft: rgba(215, 81, 81, .09); } html.dark body.cart { --pm-cart-text: #f4f1eb; --pm-cart-muted: #aaa39b; --pm-cart-surface: #1b1b1b; --pm-cart-soft: #202020; --pm-cart-warm: #24211d; --pm-cart-border: rgba(255, 255, 255, .09); --pm-cart-border-gold: rgba(223, 189, 134, .20); --pm-cart-shadow: 0 12px 30px rgba(0, 0, 0, .23); --pm-cart-shadow-hover: 0 15px 38px rgba(0, 0, 0, .30); } /* ========================================================= 2) CART ITEM CARD Remove cheap black border ========================================================= */ body.cart main .cart-item { position: relative; overflow: hidden; border: 1px solid var(--pm-cart-border-gold) !important; border-radius: 22px !important; background: linear-gradient( 145deg, var(--pm-cart-surface), var(--pm-cart-soft) ) !important; box-shadow: var(--pm-cart-shadow); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } @media (hover:hover) { body.cart main .cart-item:hover { transform: translateY(-2px); border-color: rgba(185, 133, 67, .34) !important; box-shadow: var(--pm-cart-shadow-hover); } } /* subtle top accent */ body.cart main .cart-item::before { content: ""; position: absolute; top: 0; right: 28px; width: 78px; height: 2px; border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, rgba(185,133,67,0), var(--pm-cart-gold-light), var(--pm-cart-gold), rgba(185,133,67,0) ); opacity: .8; pointer-events: none; } /* ========================================================= 3) PRODUCT IMAGE + TITLE ========================================================= */ body.cart main .cart-item a > img.w-24 { overflow: hidden; border: 1px solid var(--pm-cart-border) !important; border-radius: 14px !important; background: var(--pm-cart-soft) !important; box-shadow: 0 5px 14px rgba(23,23,23,.055); transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease; } @media (hover:hover) { body.cart main .cart-item a:hover > img.w-24 { transform: scale(1.035); border-color: rgba(185,133,67,.30) !important; box-shadow: 0 8px 20px rgba(23,23,23,.09); } } body.cart main .cart-item h1 a { color: var(--pm-cart-text) !important; font-weight: 750; transition: color .20s ease; } @media (hover:hover) { body.cart main .cart-item h1 a:hover { color: var(--pm-cart-gold) !important; } } body.cart main .cart-item .item-price { color: var(--pm-cart-text) !important; font-weight: 700; } /* ========================================================= 4) QUANTITY CONTROL ========================================================= */ body.cart main .cart-item .s-quantity-input-container { display: flex !important; align-items: center; gap: 5px; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cart main .cart-item .s-quantity-input-button { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: 1px solid var(--pm-cart-border) !important; border-radius: 10px !important; background: var(--pm-cart-surface) !important; color: var(--pm-cart-text) !important; box-shadow: 0 3px 9px rgba(23,23,23,.035); transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } body.cart main .cart-item .s-quantity-input-button svg { width: 16px !important; height: 16px !important; } @media (hover:hover) { body.cart main .cart-item .s-quantity-input-button:hover { transform: translateY(-1px); border-color: rgba(185,133,67,.50) !important; background: var(--pm-cart-gold-soft) !important; color: var(--pm-cart-gold) !important; box-shadow: 0 6px 15px rgba(185,133,67,.10); } } body.cart main .cart-item .s-quantity-input-input { width: 44px !important; min-width: 44px !important; height: 38px !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--pm-cart-text) !important; font-weight: 800; text-align: center; box-shadow: none !important; } /* total */ body.cart main .cart-item .item-total { color: var(--pm-cart-text) !important; font-weight: 850; } /* ========================================================= 5) DELETE BUTTON ========================================================= */ body.cart main .cart-item .btn--delete .s-button-element, body.cart main .cart-item button.btn--delete { border: 1px solid rgba(215,81,81,.12) !important; background: var(--pm-cart-danger-soft) !important; color: var(--pm-cart-danger) !important; box-shadow: none !important; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } body.cart main .cart-item .btn--delete i { color: inherit !important; } @media (hover:hover) { body.cart main .cart-item .btn--delete .s-button-element:hover, body.cart main .cart-item button.btn--delete:hover { transform: rotate(4deg) scale(1.06); background: var(--pm-cart-danger) !important; color: #ffffff !important; box-shadow: 0 6px 15px rgba(215,81,81,.20) !important; } } /* ========================================================= 6) CART COLOR OPTIONS Larger swatches + clean selection ========================================================= */ body.cart main .cart-item salla-product-options.s-product-options-wrapper { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 18px 0 14px !important; } body.cart main .cart-item .s-product-options-option-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 14px 16px 12px !important; overflow: hidden; border: 1px solid rgba(185,133,67,.22); border-radius: 17px; background: rgba(185,133,67,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.30); } body.cart main .cart-item .s-product-options-option, body.cart main .cart-item .s-product-options-option-content { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* label "اللون" */ body.cart main .cart-item .s-product-options-option-label { display: flex; align-items: center; justify-content: flex-start; width: 100%; margin: 0 0 7px !important; color: var(--pm-cart-text) !important; font-size: 13px; font-weight: 800; } body.cart main .cart-item .s-product-options-option-label b > span { color: #d45252 !important; } /* ========================================================= COLOR ROW ========================================================= */ body.cart main .cart-item fieldset.s-product-options-colors-wrapper { display: flex !important; flex-direction: row; align-items: flex-start; gap: 6px; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; /* Extra top space prevents selected ring from being clipped. */ padding: 7px 3px 8px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; background: transparent !important; box-shadow: none !important; direction: rtl; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none !important; -ms-overflow-style: none !important; } body.cart main .cart-item fieldset.s-product-options-colors-wrapper::-webkit-scrollbar { display: none !important; } /* ========================================================= EACH COLOR ITEM ========================================================= */ body.cart main .cart-item .s-product-options-colors-item { position: relative; display: block; flex: 0 0 86px; width: 86px; min-width: 86px; max-width: 86px; height: 76px; min-height: 76px; overflow: visible; } /* radio */ body.cart main .cart-item .s-product-options-colors-item > input[type="radio"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* clickable label */ body.cart main .cart-item .s-product-options-colors-item > label { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px; width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 5px 3px 4px !important; overflow: visible; border: 0 !important; border-radius: 11px; background: transparent !important; cursor: pointer; transition: transform .20s ease, background .20s ease; } /* ========================================================= COLOR CIRCLE ========================================================= */ body.cart main .cart-item .s-product-options-colors-item > label > span { display: block !important; flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 3px solid var(--pm-cart-surface) !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; box-shadow: 0 0 0 1px rgba(23,23,23,.13); transition: transform .20s ease, box-shadow .20s ease; } /* ========================================================= COLOR NAME ========================================================= */ body.cart main .cart-item .s-product-options-colors-item > label > div { display: -webkit-box !important; width: 100%; min-width: 0; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--pm-cart-text) !important; font-size: 10px; font-weight: 650; line-height: 1.15; text-align: center; white-space: normal !important; } /* ========================================================= SELECTED COLOR ========================================================= */ body.cart main .cart-item .s-product-options-colors-item > input[type="radio"]:checked + label { background: rgba(185,133,67,.075) !important; } body.cart main .cart-item .s-product-options-colors-item > input[type="radio"]:checked + label > span { transform: scale(1.02); box-shadow: 0 0 0 2px var(--pm-cart-surface), 0 0 0 4px rgba(185,133,67,.94), 0 5px 12px rgba(185,133,67,.14); } /* hover */ @media (hover:hover) { body.cart main .cart-item .s-product-options-colors-item > label:hover { transform: translateY(-1px); background: rgba(185,133,67,.055) !important; } body.cart main .cart-item .s-product-options-colors-item > label:hover > span { transform: scale(1.06); } } /* ========================================================= 7) CART CUSTOM COLOR SCROLLBAR LOWER POSITION + CLEAN CENTERING ========================================================= */ body.cart main .cart-item .pm-color-scrollbar { display: block !important; position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* * Lower the whole scrollbar slightly */ margin: 13px 0 3px !important; padding: 0 3px !important; box-sizing: border-box; } body.cart main .cart-item .pm-color-scrollbar__track { position: relative; display: block !important; width: 100% !important; height: 12px !important; min-height: 12px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid rgba(185,133,67,.16); border-radius: 999px; background: linear-gradient( 180deg, rgba(185,133,67,.055), rgba(185,133,67,.12) ); box-shadow: inset 0 1px 2px rgba(23,23,23,.045); box-sizing: border-box; } body.cart main .cart-item .pm-color-scrollbar__thumb { position: absolute !important; /* * Explicit vertical placement. * Slightly lower than mathematical center. */ top: 3px !important; height: 6px !important; min-height: 6px !important; min-width: 60px; margin: 0 !important; border: 0 !important; border-radius: 999px; background: linear-gradient( 90deg, #956029 0%, #b9803c 28%, #e2ba78 50%, #b9803c 72%, #956029 100% ) !important; box-shadow: 0 1px 4px rgba(185,133,67,.30); /* * Important: * no vertical transform/translate here * because JS controls horizontal position. */ transform: none !important; translate: none !important; } @media (hover:hover) { body.cart main .cart-item .pm-color-scrollbar:hover .pm-color-scrollbar__thumb { box-shadow: 0 2px 7px rgba(185,133,67,.36), 0 0 0 1px rgba(185,133,67,.10); } } /* ========================================================= 8) ATTACHMENTS / ADD NOTE Restore + Premium Styling ========================================================= */ /* * The attachment section exists in DOM, * force only the SECTION itself to remain visible. */ body.cart main .cart-item > section.bg-storeBG { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 12px 0 0 !important; padding: 14px 16px !important; overflow: visible !important; border: 1px solid var(--pm-cart-border) !important; border-radius: 14px !important; background: var(--pm-cart-surface) !important; box-shadow: 0 4px 13px rgba(23,23,23,.035); } /* "المرفقات" */ body.cart main .cart-item > section.bg-storeBG .form-label { display: block !important; visibility: visible !important; margin: 0 0 9px !important; color: var(--pm-cart-text) !important; font-size: 13px; font-weight: 750; } /* Add note button */ body.cart main .cart-item .btn-tab.btn--collapse { display: inline-flex !important; visibility: visible !important; align-items: center; justify-content: center; gap: 5px; min-height: 39px; padding: 0 15px; border: 1px solid var(--pm-cart-border) !important; border-radius: 10px; background: var(--pm-cart-soft) !important; color: var(--pm-cart-text) !important; cursor: pointer; box-shadow: none; transition: transform .20s ease, border-color .20s ease, background .20s ease, color .20s ease, box-shadow .20s ease; } body.cart main .cart-item .btn-tab.btn--collapse i { color: inherit !important; } @media (hover:hover) { body.cart main .cart-item .btn-tab.btn--collapse:hover { transform: translateY(-1px); border-color: rgba(185,133,67,.42) !important; background: rgba(185,133,67,.08) !important; color: var(--pm-cart-gold) !important; box-shadow: 0 6px 15px rgba(185,133,67,.08); } } /* * Don't force the collapsed note textarea open. * Salla still controls open / close. */ body.cart main .cart-item textarea.form-input[name="notes"] { width: 100% !important; min-height: 68px !important; padding: 11px 12px !important; border: 1px solid var(--pm-cart-border) !important; border-radius: 11px !important; outline: 0 !important; background: var(--pm-cart-soft) !important; color: var(--pm-cart-text) !important; resize: vertical; box-shadow: none !important; transition: border-color .20s ease, background .20s ease, box-shadow .20s ease; } body.cart main .cart-item textarea.form-input[name="notes"]:focus { border-color: rgba(185,133,67,.60) !important; background: var(--pm-cart-surface) !important; box-shadow: 0 0 0 3px rgba(185,133,67,.09) !important; } /* ========================================================= 9) LEFT SIDEBAR CARDS ========================================================= */ body.cart main [data-selia="cart-root"] > .sticky { color: var(--pm-cart-text); } /* Coupon / Shipping / Gift outer cards */ body.cart main [data-selia="cart-root"] > .sticky > .shadow-default.bg-storeBG, body.cart main [data-selia="cart-root"] > .sticky > div:has(> salla-cart-coupons) { overflow: hidden; border: 1px solid var(--pm-cart-border) !important; border-radius: 18px !important; background: var(--pm-cart-surface) !important; box-shadow: var(--pm-cart-shadow) !important; } /* ========================================================= DESKTOP ORDER SUMMARY Make ONE unified white card ========================================================= */ @media (min-width: 1024px) { body.cart salla-cart-summary-card { overflow: hidden; border: 1px solid var(--pm-cart-border) !important; border-radius: 18px !important; background: var(--pm-cart-surface) !important; box-shadow: var(--pm-cart-shadow) !important; } body.cart .s-cart-summary-card-sheet-wrap, body.cart .s-cart-summary-card-sheet, body.cart .s-cart-summary-card-bar, body.cart .s-cart-summary-card-action { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cart .s-cart-summary-card-sheet { padding-bottom: 8px; } body.cart .s-cart-summary-card-bar { border-top: 1px solid var(--pm-cart-border) !important; } } /* ========================================================= 10) COUPON TRUE POINTER-ORIGIN LIQUID RIPPLE ========================================================= */ body.cart main salla-cart-coupons { display: block; width: 100%; } body.cart main .s-cart-coupons-wrapper { padding: 16px 0; } body.cart main .s-cart-coupons-coupon-label { display: block; margin: 0 0 10px !important; color: var(--pm-cart-text) !important; font-size: 14px; font-weight: 750; } /* Input group */ body.cart main .s-cart-coupons-coupon-input-container { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--pm-cart-border); border-radius: 12px; background: var(--pm-cart-surface); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } body.cart main .s-cart-coupons-coupon-input-container:focus-within { transform: translateY(-1px); border-color: rgba(185,133,67,.58); box-shadow: 0 0 0 3px rgba(185,133,67,.08), 0 6px 15px rgba(23,23,23,.04); } /* Input */ body.cart main #coupon-input { flex: 1 1 auto; min-width: 0; height: 44px !important; padding-inline: 13px !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; color: var(--pm-cart-text) !important; box-shadow: none !important; } body.cart main #coupon-input::placeholder { color: var(--pm-cart-muted); opacity: .70; } /* ========================================================= APPLY BUTTON ========================================================= */ body.cart main .s-cart-coupons-coupon-button .s-button-element { --pm-ripple-x: 50%; --pm-ripple-y: 50%; --pm-ripple-size: 200px; position: relative; isolation: isolate; min-width: 84px; height: 44px; overflow: hidden; border: 0 !important; border-radius: 0 !important; background: #171717 !important; color: #ffffff !important; box-shadow: none !important; transition: transform .20s ease, box-shadow .25s ease !important; } /* Dynamic liquid circle */ body.cart main .s-cart-coupons-coupon-button .s-button-element::before { content: ""; position: absolute; left: var(--pm-ripple-x); top: var(--pm-ripple-y); z-index: 0; width: var(--pm-ripple-size); height: var(--pm-ripple-size); border-radius: 50%; background: radial-gradient( circle at center, #e1bb79 0%, #cf9953 24%, #ba803d 52%, #9a622b 78%, #87501f 100% ); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform .42s cubic-bezier(.16,.76,.25,1), opacity .14s linear; } /* JS activates this */ body.cart main .s-cart-coupons-coupon-button .s-button-element.pm-ripple-active::before { transform: translate(-50%, -50%) scale(1); opacity: 1; } body.cart main .s-cart-coupons-coupon-button .s-button-text { position: relative; z-index: 2; color: #ffffff !important; } @media (hover:hover) { body.cart main .s-cart-coupons-coupon-button .s-button-element.pm-ripple-active { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(185,133,67,.18) !important; } } /* ========================================================= 11) CART SUMMARY COMPONENT ========================================================= */ body.cart salla-cart-summary-card { color: var(--pm-cart-text); } body.cart .s-cart-summary-card-sheet-title { color: var(--pm-cart-text) !important; font-weight: 800; } body.cart .s-cart-summary-card-line, body.cart .s-cart-summary-card-bar, body.cart .s-cart-summary-card-bar-label, body.cart .s-cart-summary-card-bar-totals { color: var(--pm-cart-text) !important; } body.cart .s-cart-summary-card-line { border-color: var(--pm-cart-border) !important; } body.cart .s-cart-summary-card-bar-total { color: var(--pm-cart-text) !important; font-weight: 850; } /* ========================================================= 12) CHECKOUT BUTTON TRUE POINTER-ORIGIN LIQUID RIPPLE ========================================================= */ body.cart #s-cart-summary-card-submit .s-button-element { --pm-ripple-x: 50%; --pm-ripple-y: 50%; --pm-ripple-size: 400px; position: relative; isolation: isolate; overflow: hidden; min-height: 46px; border: 1px solid #171717 !important; border-radius: 12px !important; background: #171717 !important; color: #ffffff !important; box-shadow: 0 7px 18px rgba(23,23,23,.13); transition: transform .20s ease, border-color .25s ease, box-shadow .25s ease !important; } /* ========================================================= DYNAMIC LIQUID SPREAD Size is calculated in JS ========================================================= */ body.cart #s-cart-summary-card-submit .s-button-element::before { content: ""; position: absolute; left: var(--pm-ripple-x); top: var(--pm-ripple-y); z-index: 0; width: var(--pm-ripple-size); height: var(--pm-ripple-size); border-radius: 50%; background: radial-gradient( circle at center, #e3bd7b 0%, #d19b54 23%, #bb803c 50%, #9e642c 76%, #87501f 100% ); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform .42s cubic-bezier(.16,.76,.25,1), opacity .14s linear; } /* Active */ body.cart #s-cart-summary-card-submit .s-button-element.pm-ripple-active::before { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Very subtle internal highlight */ body.cart #s-cart-summary-card-submit .s-button-element::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(255,255,255,.055), transparent 55% ); } body.cart #s-cart-summary-card-submit .s-button-text { position: relative; z-index: 3; color: #ffffff !important; } @media (hover:hover) { body.cart #s-cart-summary-card-submit .s-button-element.pm-ripple-active { transform: translateY(-2px); border-color: rgba(185,133,67,.72) !important; box-shadow: 0 11px 24px rgba(185,133,67,.20), 0 0 0 3px rgba(185,133,67,.055); } } /* ========================================================= 13) DARK MODE FIXES ========================================================= */ html.dark body.cart main .cart-item .s-product-options-option-container { border-color: rgba(223,189,134,.15); background: rgba(255,255,255,.025); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } html.dark body.cart main .cart-item .s-product-options-colors-item > label > span { border-color: var(--pm-cart-surface) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.19); } html.dark body.cart main .cart-item .s-product-options-colors-item > input[type="radio"]:checked + label > span { box-shadow: 0 0 0 2px var(--pm-cart-surface), 0 0 0 4px #d0a05e, 0 5px 14px rgba(185,133,67,.15); } /* Notes */ html.dark body.cart main .cart-item > section.bg-storeBG { border-color: rgba(255,255,255,.08) !important; background: var(--pm-cart-surface) !important; } /* sidebar */ html.dark body.cart main [data-selia="cart-root"] > .sticky > .shadow-default.bg-storeBG, html.dark body.cart main [data-selia="cart-root"] > .sticky > div:has(> salla-cart-coupons) { border-color: rgba(255,255,255,.08) !important; background: var(--pm-cart-surface) !important; } /* coupon */ html.dark body.cart main .s-cart-coupons-coupon-input-container { border-color: rgba(255,255,255,.09); background: var(--pm-cart-soft); } html.dark body.cart main .s-cart-coupons-coupon-button .s-button-element { background-color: #101010 !important; } /* checkout */ html.dark body.cart #s-cart-summary-card-submit .s-button-element { border-color: rgba(223,189,134,.18) !important; background-color: #101010 !important; color: #ffffff !important; } /* desktop summary */ @media (min-width: 1024px) { html.dark body.cart salla-cart-summary-card { border-color: rgba(255,255,255,.08) !important; background: var(--pm-cart-surface) !important; } } /* ========================================================= 14) TABLET / MOBILE ========================================================= */ @media (max-width: 767px) { body.cart main .cart-item { padding: 17px !important; border-radius: 18px !important; } body.cart main .cart-item a > img.w-24 { width: 82px !important; height: 72px !important; } body.cart main .cart-item .s-product-options-option-container { padding: 11px 10px 9px !important; } body.cart main .cart-item .s-product-options-colors-item { flex-basis: 75px; width: 75px; min-width: 75px; max-width: 75px; } body.cart main .cart-item .s-quantity-input-button { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } body.cart main .cart-item .s-quantity-input-input { height: 36px !important; } } /* ========================================================= 15) REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body.cart main .cart-item, body.cart main .cart-item img, body.cart main .s-quantity-input-button, body.cart main .btn--delete, body.cart main .btn-tab, body.cart main .s-cart-coupons-coupon-input-container, body.cart #s-cart-summary-card-submit .s-button-element { transition: none !important; } } /* ========================================= CART — TERMS CONSENT ========================================= */ body.cart .pm-terms-consent { margin: 10px 0 12px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.cart .pm-terms-row { display: flex; align-items: center; gap: 9px; } body.cart .pm-terms-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; line-height: 1.7; } /* Custom Checkbox */ body.cart .pm-terms-checkbox { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; min-width: 19px; margin: 0; border: 1.5px solid #b78a49; border-radius: 6px; background: transparent; cursor: pointer; position: relative; /* مهم */ display: inline-block; /* مهم */ vertical-align: middle; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } body.cart .pm-terms-checkbox::before { content: ""; position: absolute; /* مهم */ top: 50%; left: 50%; width: 5px; height: 10px; border-right: 2px solid #111; border-bottom: 2px solid #111; transform: translate(-50%, -58%) rotate(45deg) scale(0); transform-origin: center; transition: transform 0.15s ease; } body.cart .pm-terms-checkbox:hover { border-color: #d1a35d; box-shadow: 0 0 0 3px rgba(183, 138, 73, 0.10); } body.cart .pm-terms-checkbox:checked { background: #c99a52; border-color: #c99a52; } body.cart .pm-terms-checkbox:checked::before { transform: translate(-50%, -58%) rotate(45deg) scale(1); } body.cart .pm-terms-checkbox:active { transform: scale(0.92); } body.cart .pm-terms-label { cursor: pointer; } body.cart .pm-terms-link { color: #c99a52; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } body.cart .pm-terms-link:hover { opacity: 0.8; } body.cart .pm-terms-error { display: none; margin-top: 6px; font-size: 12px; color: #e05252; } body.cart .pm-terms-consent.is-error .pm-terms-error { display: block; } /* Button locked */ body.cart .pm-terms-locked { opacity: 0.5 !important; cursor: not-allowed !important; } /* ========================================= FIX "المجموع" LABEL COLOR ========================================= */ /* اللايت */ html:not(.dark) body.cart .cart-item p.text-primary > span:first-child { color: #111827 !important; } /* الدارك */ html.dark body.cart .cart-item p.text-primary > span:first-child { color: #f3f4f6 !important; } /* ========================================= PRODUCT — BUY NOW / DARK MODE Outline only — no fill ========================================= */ html.dark .sticky-product-bar salla-mini-checkout-widget.s-add-product-button-mini-checkout { background: transparent !important; background-color: transparent !important; border: 1px solid #ffffff !important; color: #ffffff !important; } /* Text + icon */ html.dark .sticky-product-bar .s-add-product-button-mini-checkout-content, html.dark .sticky-product-bar .s-add-product-button-mini-checkout-content * { background: transparent !important; color: #ffffff !important; fill: #ffffff !important; } /* ========================================= PRODUCT — ADD TO CART PRIMARY CTA ========================================= */ /* Light mode */ html:not(.dark) .sticky-product-bar .s-add-product-button-main .s-button-element { background: #171717 !important; border: 1px solid #171717 !important; color: #ffffff !important; transition: background-color .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease; } html:not(.dark) .sticky-product-bar .s-add-product-button-main .s-button-element * { color: #ffffff !important; fill: #ffffff !important; } /* Dark mode */ html.dark .sticky-product-bar .s-add-product-button-main .s-button-element { background: #c99a52 !important; border: 1px solid #c99a52 !important; color: #171717 !important; transition: background-color .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease; } html.dark .sticky-product-bar .s-add-product-button-main .s-button-element * { color: #171717 !important; fill: #171717 !important; } /* Main hover — Add to cart only */ @media (hover: hover) { html:not(.dark) .sticky-product-bar .s-add-product-button-main .s-button-element:hover { background: #c99a52 !important; border-color: #c99a52 !important; color: #171717 !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.14); } html:not(.dark) .sticky-product-bar .s-add-product-button-main .s-button-element:hover * { color: #171717 !important; fill: #171717 !important; } html.dark .sticky-product-bar .s-add-product-button-main .s-button-element:hover { background: #d7aa63 !important; border-color: #d7aa63 !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,154,82,.18); } } /* ========================================= PRODUCT — BUY NOW SUBTLE HOVER ========================================= */ .sticky-product-bar salla-mini-checkout-widget.s-add-product-button-mini-checkout { transition: background-color .2s ease, border-color .2s ease; } /* Light mode */ @media (hover: hover) { html:not(.dark) .sticky-product-bar salla-mini-checkout-widget.s-add-product-button-mini-checkout:hover { background: rgba(23, 23, 23, 0.06) !important; } /* Dark mode */ html.dark .sticky-product-bar salla-mini-checkout-widget.s-add-product-button-mini-checkout:hover { background: rgba(255, 255, 255, 0.08) !important; } } /* ========================================= HEADER CART COUNT BADGE ========================================= */ .store-header .header__cart-summary .s-cart-summary-count { min-width: 20px !important; height: 20px !important; padding: 0 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* ========================================= LIGHT MODE ========================================= */ html:not(.dark) .store-header .header__cart-summary .s-cart-summary-count { background: #171717 !important; color: #ffffff !important; border: 1px solid #c99a52 !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(201, 154, 82, 0.08); } /* ========================================= DARK MODE ========================================= */ html.dark .store-header .header__cart-summary .s-cart-summary-count { background: linear-gradient( 145deg, #d6a75e, #b9823d ) !important; color: #171717 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 10px rgba(201, 154, 82, 0.16); } /* ========================================= DESKTOP HOVER ========================================= */ @media (hover: hover) { .store-header .header__cart-summary:hover .s-cart-summary-count { transform: translateY(-1px) scale(1.05); } } /* ========================================================= PM CATEGORIES — TRANSPARENT IMAGE CARD + ALPHA-SAFE SHINE FINAL VERSION ========================================================= */ /* --------------------------------------------------------- 1) الصورة المفرغة هي الكارت نفسه --------------------------------------------------------- */ .pm-categories .square-links__item > a { position: relative !important; display: block !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; /* * نخليه visible عشان حركة رفع الكارت * في الـHover ما تتقصش. */ overflow: visible !important; } /* --------------------------------------------------------- 2) IMAGE WRAPPER --------------------------------------------------------- */ .pm-categories .square-links__image-wrap { position: relative !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* * يحبس تأثير اللمعة داخل مساحة الصورة. */ overflow: hidden !important; isolation: isolate; } /* --------------------------------------------------------- 3) الصورة الأصلية فقط --------------------------------------------------------- */ .pm-categories .square-links__image-wrap > img:not(.pm-category-shine-img) { position: relative !important; display: block !important; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; z-index: 1; } /* --------------------------------------------------------- 4) اقفل نظام اللمعة القديم تمامًا --------------------------------------------------------- */ .pm-categories .square-links__image-wrap::after { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; background: none !important; } /* --------------------------------------------------------- 5) اللمعة الجديدة نسخة من نفس الصورة، لذلك الـTransparent pixels تفضل Transparent ومش يظهر عليها Shine. --------------------------------------------------------- */ .pm-categories .pm-category-shine-img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; /* * يحول الأجزاء المرئية من الصورة للأبيض، * بينما الشفافية تظل كما هي. */ filter: brightness(0) invert(1) !important; opacity: 0; pointer-events: none !important; z-index: 3; /* * شريط اللمعة في بداية الحركة */ clip-path: polygon( -38% 0%, -16% 0%, 4% 100%, -18% 100% ); transform: none !important; will-change: clip-path, opacity; } /* --------------------------------------------------------- 6) DARK MODE امنع رجوع أي خلفية قديمة للكارت --------------------------------------------------------- */ .dark .pm-categories .square-links__item > a { background: transparent !important; border: 0 !important; border-color: transparent !important; box-shadow: none !important; } .dark .pm-categories .square-links__image-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- 7) النصوص الفاضية --------------------------------------------------------- */ .pm-categories .square-links__item-title, .pm-categories .square-links__item-subtitle { display: none !important; } /* --------------------------------------------------------- 8) HOVER --------------------------------------------------------- */ @media (hover: hover) { /* * ما نرجعش Card background وقت الـHover. * حركة رفع الكارت الموجودة سابقًا تفضل شغالة. */ .pm-categories .square-links__item > a:hover { background: transparent !important; border: 0 !important; border-color: transparent !important; box-shadow: none !important; } /* * الصورة الأصلية تفضل تستخدم الـZoom القديم. */ .pm-categories .square-links__item > a:hover .square-links__image-wrap > img:not(.pm-category-shine-img) { transform: scale(1.022) !important; filter: brightness(1.04) contrast(1.015) !important; } /* * اللمعة الجديدة */ .pm-categories .square-links__item > a:hover .pm-category-shine-img { /* * مهم: متاخدش Zoom أو Filter الصورة الأصلية. */ transform: none !important; filter: brightness(0) invert(1) !important; opacity: 0.28; animation: pm-category-real-image-shine 0.85s ease-out forwards; } } /* --------------------------------------------------------- 9) SHINE ANIMATION --------------------------------------------------------- */ @keyframes pm-category-real-image-shine { from { clip-path: polygon( -38% 0%, -16% 0%, 4% 100%, -18% 100% ); } to { clip-path: polygon( 116% 0%, 138% 0%, 158% 100%, 136% 100% ); } } /* --------------------------------------------------------- 10) MOBILE --------------------------------------------------------- */ @media (max-width: 639px) { .pm-categories .square-links__item > a { padding: 0 !important; border-radius: 0 !important; } .pm-categories .square-links__image-wrap, .pm-categories .square-links__image-wrap > img:not(.pm-category-shine-img), .pm-categories .pm-category-shine-img { border-radius: 0 !important; } } /* ========================================= CUSTOM DESIGN HERO VIDEO = SAME STYLE AS ORIGINAL IMAGE ========================================= */ .s-information-page .s-block--hero-area .media .pm-custom-hero-video { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center !important; border-radius: 24px !important; border: 1px solid rgba(166, 122, 61, 0.14); background: #171717; position: relative !important; z-index: 3 !important; box-shadow: 0 18px 44px rgba(24, 18, 12, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.5); overflow: hidden; transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .5s ease, box-shadow .4s ease; } /* Desktop hover - نفس الصورة القديمة */ @media (hover: hover) { .s-information-page .s-block--hero-area .media:hover .pm-custom-hero-video { transform: scale(1.022); filter: brightness(1.02) contrast(1.02); box-shadow: 0 24px 52px rgba(24, 18, 12, 0.16), 0 0 0 1px rgba(187, 137, 70, 0.12); } } /* Dark mode */ .dark .s-information-page .s-block--hero-area .media .pm-custom-hero-video, [data-theme="dark"] .s-information-page .s-block--hero-area .media .pm-custom-hero-video { border-color: rgba(218, 177, 112, 0.16); box-shadow: 0 20px 44px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.025); } /* Mobile */ @media (max-width: 767px) { .s-information-page .s-block--hero-area .media .pm-custom-hero-video { border-radius: 18px !important; } } /* ========================================= HERO — REMOVE RESTING DARK SHADOW ONLY Keep borders + hover effects ========================================= */ /* الفيديو */ .s-information-page .s-block--hero-area .media .pm-custom-hero-video { box-shadow: none !important; } /* زر ابدأ فكرتك الآن */ .s-information-page .pm-hero-jump-btn { box-shadow: none !important; } /* رجّع Hover للفيديو */ @media (hover: hover) { .s-information-page .s-block--hero-area .media:hover .pm-custom-hero-video { transform: scale(1.022) !important; filter: brightness(1.02) contrast(1.02) !important; box-shadow: 0 24px 52px rgba(24,18,12,.16), 0 0 0 1px rgba(187,137,70,.12) !important; } /* Hover الزر يفضل موجود */ .s-information-page .pm-hero-jump-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 30px rgba(23,23,23,.17), 0 0 0 4px rgba(191,141,70,.05) !important; } }