/* ========================================== VELARA | UNIFIED DESIGN SYSTEM ========================================== */ :root { --velara-primary: #27425D; --velara-secondary: #2D4354; --velara-light: #F7EFE7; --velara-white: #FFFFFF; --velara-border: rgba(39, 66, 93, 0.14); --velara-border-light: rgba(247, 239, 231, 0.18); --velara-shadow: 0 10px 28px rgba(39, 66, 93, 0.12); --velara-transition: 0.3s ease; } /* ========================================== GLOBAL FONT ========================================== */ @font-face { font-family: 'DIN Next LT W23'; src: local('DIN Next LT W23'); font-weight: 100 900; font-style: normal; } body, button, input, textarea, select, h1, h2, h3, h4, h5, h6, p, a, span, div { font-family: 'DIN Next LT W23', sans-serif !important; } /* ========================================== FULL-WIDTH BANNER | DESKTOP + MOBILE ========================================== */ section[data-testid="store-home-fixed-banner"] { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-inline: calc(50% - 50vw) !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } section[data-testid="store-home-fixed-banner"] .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } section[data-testid="store-home-fixed-banner"] .banner--fixed { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } section[data-testid="store-home-fixed-banner"] picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } section[data-testid="store-home-fixed-banner"] img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; } /* ========================================== DESKTOP | MAIN NAVIGATION ========================================== */ @media (min-width: 1024px) { #mainnav { width: 100%; display: flex !important; justify-content: center !important; } #mainnav .main-menu { display: flex !important; flex-wrap: wrap; justify-content: center !important; align-items: center !important; margin-inline: auto !important; gap: 5px; } .store-header #mainnav .main-menu > li.root-level > a { display: flex; align-items: center; gap: 7px; background: var(--velara-secondary) !important; color: var(--velara-white) !important; border: 1px solid transparent; border-radius: 9px; padding: 9px 16px; margin: 0 2px; transition: background-color var(--velara-transition), color var(--velara-transition), transform var(--velara-transition), box-shadow var(--velara-transition); } /* Navigation hover */ .store-header #mainnav .main-menu > li.root-level > a:hover { background: var(--velara-primary) !important; color: var(--velara-light) !important; transform: translateY(-2px); box-shadow: 0 5px 14px rgba(39, 66, 93, 0.18); } .store-header #mainnav .main-menu > li.root-level > a::after { display: none !important; } /* Dropdown arrow */ .store-header #mainnav .main-menu > li.root-level.has-children > a i, .store-header #mainnav .main-menu > li.root-level.has-children > a svg { color: var(--velara-light) !important; fill: var(--velara-light) !important; transition: transform var(--velara-transition); } .store-header #mainnav .main-menu > li.root-level.has-children:hover > a i, .store-header #mainnav .main-menu > li.root-level.has-children:hover > a svg { transform: rotate(180deg); } /* Desktop dropdown */ .store-header #mainnav .sub-menu { background: var(--velara-light) !important; border: 1px solid var(--velara-border); border-radius: 12px; padding: 8px; box-shadow: var(--velara-shadow); } .store-header #mainnav .sub-menu li a { position: relative; display: block; overflow: hidden; isolation: isolate; background: transparent !important; color: var(--velara-primary) !important; border-radius: 7px; padding: 12px 14px; transition: color var(--velara-transition); } /* Animated dark background */ .store-header #mainnav .sub-menu li a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--velara-secondary); border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform 0.32s ease; } .store-header #mainnav .sub-menu li a:hover::before, .store-header #mainnav .sub-menu li a:focus-visible::before { transform: scaleX(1); } .store-header #mainnav .sub-menu li a:hover, .store-header #mainnav .sub-menu li a:focus-visible { color: var(--velara-light) !important; } } /* ========================================== MOBILE | DARK NAVIGATION MENU ========================================== */ @media (max-width: 1023px) { #mobile-menu { background: var(--velara-primary) !important; color: var(--velara-white) !important; } #mobile-menu .main-menu, #mobile-menu .main-menu ul { background: var(--velara-primary) !important; } /* Main items and submenu links */ #mobile-menu .main-menu li > a, #mobile-menu .main-menu li > span { color: var(--velara-white) !important; transition: background-color var(--velara-transition), color var(--velara-transition); } #mobile-menu .main-menu li ul li > a { color: var(--velara-light) !important; background: transparent !important; } /* Touch / hover state */ #mobile-menu .main-menu li > a:hover, #mobile-menu .main-menu li ul li > a:hover { background: var(--velara-secondary) !important; color: var(--velara-white) !important; } /* Separators */ #mobile-menu .main-menu li { border-color: var(--velara-border-light) !important; } /* Close button */ #mobile-menu .btn--close { color: var(--velara-white) !important; } /* Current mobile submenu links */ #mobile-menu .main-menu li a.text-gray-500 { color: var(--velara-light) !important; } } /* ========================================== USER LOGIN BUTTON ========================================== */ .s-user-menu-login-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--velara-secondary) !important; color: var(--velara-white) !important; border: 1px solid rgba(247, 239, 231, 0.22); border-radius: 50%; outline: 2px solid transparent; outline-offset: 2px; transition: background-color var(--velara-transition), transform var(--velara-transition); } .s-user-menu-login-btn:hover { background: var(--velara-primary) !important; transform: translateY(-1px); } .s-user-menu-login-btn svg { width: 1.25rem; height: 1.25rem; fill: var(--velara-white); } /* ========================================== HEADER ICONS ========================================== */ .header-btn__icon.icon:where([dir=rtl],[dir=rtl] *) { margin-left: 9px; margin-right: 0; background: var(--velara-secondary); color: var(--velara-white); } /* ========================================== HEADER ELEMENTS ========================================== */ custom-main-menu { justify-content: center; } .bg-inherit { margin: 0 72px; padding: 0; border-radius: 13px; background: var(--velara-secondary) !important; color: var(--velara-white); } /* ========================================== PINNED NAVIGATION ========================================== */ .main-nav-container.fixed-pinned .inner { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); left: 0; right: 0; top: 0; position: absolute; width: 100%; transform: translate3d(0, -100%, 0); z-index: 29; } /* ========================================== RESPONSIVE ADJUSTMENTS ========================================== */ @media (max-width: 767px) { .bg-inherit { margin-inline: 12px; } } /* Prevent horizontal overflow */ html, body { overflow-x: clip; } /* VELARA | LIGHT HOVER ONLY */ @media (min-width: 1024px) { .store-header #mainnav .main-menu > li.root-level > a { background: #2D4354 !important; color: #FFFFFF !important; transition: all 0.3s ease; } .store-header #mainnav .main-menu > li.root-level > a:hover { background: #F7EFE7 !important; color: #27425D !important; border-color: rgba(39, 66, 93, 0.12) !important; box-shadow: 0 5px 14px rgba(39, 66, 93, 0.12); transform: translateY(-2px); } /* Arrow color on hover */ .store-header #mainnav .main-menu > li.root-level.has-children > a i, .store-header #mainnav .main-menu > li.root-level.has-children > a svg { color: #FFFFFF !important; fill: #FFFFFF !important; transition: color 0.3s ease, fill 0.3s ease; } .store-header #mainnav .main-menu > li.root-level.has-children:hover > a i, .store-header #mainnav .main-menu > li.root-level.has-children:hover > a svg { color: #27425D !important; fill: #27425D !important; } } .top-navbar .s-search-input { border-radius: 12px !important; margin-bottom: 4px !important; } .top-navbar .s-search-input { background-color: rgb(207 207 207 / 50%); border-style: none; } /* ========================================= VELARA | Latest Abayas Section Banner + Products Slider ========================================= */ :root { --velara-primary: #27425D; --velara-secondary: #2D4354; --velara-light: #F7EFE7; --velara-white: #FFFFFF; } /* Section background */ section[component-id="967859946"] { position: relative; padding-bottom: 35px; overflow: visible !important; background: #F3F4F6; } /* ===== Banner ===== */ section[component-id="967859946"] .slider-bg { position: relative; width: 100%; min-height: 390px; background-color: var(--velara-primary); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; border-radius: 0; } /* Soft overlay over banner */ section[component-id="967859946"] .slider-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(39, 66, 93, 0.12) 0%, rgba(39, 66, 93, 0.24) 55%, rgba(39, 66, 93, 0.42) 100% ); pointer-events: none; } /* Banner content */ section[component-id="967859946"] .slider-bg .container { position: relative; z-index: 1; padding-top: 48px !important; padding-bottom: 45px; min-height: 390px; } /* Banner title */ section[component-id="967859946"] .slider-bg h3 { color: var(--velara-white) !important; font-size: clamp(24px, 3vw, 38px) !important; font-weight: 700; line-height: 1.5 !important; margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); } /* Hide empty description */ section[component-id="967859946"] .slider-bg p:empty { display: none; } /* ===== Products: BELOW the banner ===== */ section[component-id="967859946"] > .container { margin-top: 0 !important; padding-top: 28px; padding-bottom: 10px; position: relative; overflow: visible !important; } /* Slider outer wrappers */ section[component-id="967859946"] salla-products-slider, section[component-id="967859946"] salla-slider { display: block; width: 100%; overflow: visible; } /* Remove unnecessary slider heading space */ section[component-id="967859946"] .s-slider-block__title { margin-bottom: 18px; } /* Product card spacing */ section[component-id="967859946"] .s-products-slider-card { height: auto; padding: 0 7px 8px; box-sizing: border-box; } /* Product card */ section[component-id="967859946"] .s-product-card-entry { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--velara-white) !important; border: 1px solid rgba(39, 66, 93, 0.07); border-radius: 15px !important; box-shadow: 0 5px 18px rgba(24, 42, 60, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } section[component-id="967859946"] .s-product-card-entry:hover { transform: translateY(-4px); border-color: rgba(39, 66, 93, 0.18); box-shadow: 0 12px 28px rgba(24, 42, 60, 0.12); } /* Product image */ section[component-id="967859946"] .s-product-card-image { position: relative; overflow: hidden; background: #F7F7F7; border-radius: 14px 14px 0 0; } section[component-id="967859946"] .s-product-card-image a { display: block; overflow: hidden; } section[component-id="967859946"] .s-product-card-image-cover { display: block; width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; transition: transform 0.5s ease; } section[component-id="967859946"] .s-product-card-entry:hover .s-product-card-image-cover { transform: scale(1.035); } /* Product information */ section[component-id="967859946"] .s-product-card-content { flex: 1; display: flex; flex-direction: column; padding: 14px !important; gap: 10px; } section[component-id="967859946"] .s-product-card-content-main { flex: 1; } /* Product name */ section[component-id="967859946"] .s-product-card-content-title { margin: 0; line-height: 1.8; font-size: 14px; font-weight: 600; text-align: right; } section[component-id="967859946"] .s-product-card-content-title a { color: var(--velara-primary) !important; text-decoration: none; transition: color 0.25s ease; } section[component-id="967859946"] .s-product-card-content-title a:hover { color: #8A7159 !important; } /* Price */ section[component-id="967859946"] .s-product-card-price { color: var(--velara-primary) !important; font-size: 15px; font-weight: 700; margin: 0; text-align: right; } /* Add to cart button */ section[component-id="967859946"] .s-product-card-content-footer { margin-top: auto; } section[component-id="967859946"] .s-product-card-content-footer .s-button-element { min-height: 42px; width: 100%; border: 1px solid var(--velara-primary) !important; border-radius: 10px !important; background: var(--velara-primary) !important; color: var(--velara-white) !important; font-size: 13px; font-weight: 600; transition: all 0.3s ease; } section[component-id="967859946"] .s-product-card-content-footer .s-button-element .s-button-text, section[component-id="967859946"] .s-product-card-content-footer .s-button-element i { color: var(--velara-white) !important; } section[component-id="967859946"] .s-product-card-content-footer .s-button-element:hover { background: var(--velara-light) !important; color: var(--velara-primary) !important; border-color: var(--velara-primary) !important; } section[component-id="967859946"] .s-product-card-content-footer .s-button-element:hover .s-button-text, section[component-id="967859946"] .s-product-card-content-footer .s-button-element:hover i { color: var(--velara-primary) !important; } /* Wishlist button */ section[component-id="967859946"] .s-product-card-wishlist-btn { border: 1px solid rgba(39, 66, 93, 0.12) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.94) !important; color: var(--velara-primary) !important; transition: all 0.3s ease; } section[component-id="967859946"] .s-product-card-wishlist-btn:hover { background: var(--velara-primary) !important; color: var(--velara-white) !important; } section[component-id="967859946"] .s-product-card-wishlist-btn .s-button-element { color: inherit !important; } /* Slider navigation */ section[component-id="967859946"] .s-slider-nav-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(39, 66, 93, 0.15); background: var(--velara-white) !important; color: var(--velara-primary) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07); transition: all 0.25s ease; } section[component-id="967859946"] .s-slider-nav-arrow:hover:not(:disabled) { background: var(--velara-primary) !important; color: var(--velara-white) !important; } /* ===== Tablet ===== */ @media (max-width: 1023px) { section[component-id="967859946"] .slider-bg, section[component-id="967859946"] .slider-bg .container { min-height: 320px; } section[component-id="967859946"] .slider-bg .container { padding-top: 35px !important; } section[component-id="967859946"] > .container { padding-top: 22px; } } /* ===== Mobile ===== */ @media (max-width: 767px) { section[component-id="967859946"] { padding-bottom: 20px; } section[component-id="967859946"] .slider-bg { min-height: 230px; background-position: center; } section[component-id="967859946"] .slider-bg .container { min-height: 230px; padding: 28px 18px !important; } section[component-id="967859946"] .slider-bg h3 { font-size: 23px !important; } section[component-id="967859946"] > .container { padding: 18px 10px 5px; } section[component-id="967859946"] .s-products-slider-card { padding: 0 5px 8px; } section[component-id="967859946"] .s-product-card-entry { border-radius: 12px !important; } section[component-id="967859946"] .s-product-card-content { padding: 10px !important; gap: 8px; } section[component-id="967859946"] .s-product-card-content-title { font-size: 12px; } section[component-id="967859946"] .s-product-card-price { font-size: 13px; } section[component-id="967859946"] .s-product-card-content-footer .s-button-element { min-height: 38px; font-size: 11px; padding: 0 6px; } } /* VELARA | Full Width Banner */ section[component-id="967859946"] { width: 100% !important; max-width: 100% !important; } /* Banner fills the entire screen width */ section[component-id="967859946"] .slider-bg { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: clamp(380px, 42vw, 650px) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Container fills the banner height */ section[component-id="967859946"] .slider-bg > .container { width: 100% !important; max-width: 100% !important; min-height: 100% !important; height: 100% !important; box-sizing: border-box; padding: 50px 5% !important; } /* Products stay below the banner */ section[component-id="967859946"] > .container { margin-top: 0 !important; } @media (max-width: 767px) { section[component-id="967859946"] .slider-bg { height: 300px !important; } section[component-id="967859946"] .slider-bg > .container { padding: 28px 18px !important; } } section[component-id="967859946"] .slider-bg { width: 100% !important; max-width: 100% !important; display: none; min-height: 0 !important; height: clamp(380px, 42vw, 650px) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* VELARA | Remove Empty Space in Product Cards */ /* Let the card fit its content */ section[component-id="967859946"] .s-products-slider-card, section[component-id="967859946"] .s-product-card-entry { height: auto !important; min-height: 0 !important; } /* Remove forced stretching */ section[component-id="967859946"] .s-product-card-entry { display: flex !important; flex-direction: column; } /* Product content */ section[component-id="967859946"] .s-product-card-content { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; padding: 12px !important; gap: 8px !important; } /* Remove extra height from content sections */ section[component-id="967859946"] .s-product-card-content-main, section[component-id="967859946"] .s-product-card-content-sub, section[component-id="967859946"] .s-product-card-content-footer { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; } /* Keep button close to the price */ section[component-id="967859946"] .s-product-card-content-footer { margin-top: 8px !important; padding-top: 0 !important; } /* Remove any fixed minimum height on product cards */ section[component-id="967859946"] custom-salla-product-card { height: auto !important; min-height: 0 !important; } /* ========================================= VELARA | Second Banner Products Section Component: 1251120364 ========================================= */ section[component-id="1251120364"] { width: 100% !important; max-width: 100% !important; padding-bottom: 24px !important; overflow: visible !important; } /* Full-width banner */ section[component-id="1251120364"] .slider-bg { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: clamp(380px, 42vw, 650px) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } section[component-id="1251120364"] .slider-bg > .container { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; box-sizing: border-box; padding: 50px 5% !important; } /* Products below the banner */ section[component-id="1251120364"] > .container { margin-top: 0 !important; padding-top: 24px !important; padding-bottom: 0 !important; overflow: visible !important; } /* Remove excessive card height */ section[component-id="1251120364"] .s-products-slider-card, section[component-id="1251120364"] custom-salla-product-card, section[component-id="1251120364"] .s-product-card-entry { height: auto !important; min-height: 0 !important; } section[component-id="1251120364"] .s-product-card-entry { display: flex !important; flex-direction: column; overflow: hidden; background: #FFFFFF !important; border: 1px solid rgba(39, 66, 93, 0.08); border-radius: 14px !important; box-shadow: 0 5px 18px rgba(24, 42, 60, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } section[component-id="1251120364"] .s-product-card-entry:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24, 42, 60, 0.11); } /* Product image */ section[component-id="1251120364"] .s-product-card-image { flex: 0 0 auto; overflow: hidden; background: #F7F7F7; } section[component-id="1251120364"] .s-product-card-image-cover { display: block; width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; } /* Product details: fit content */ section[component-id="1251120364"] .s-product-card-content { display: flex !important; flex: 0 0 auto !important; flex-direction: column; gap: 8px !important; height: auto !important; min-height: 0 !important; padding: 12px !important; } section[component-id="1251120364"] .s-product-card-content-main, section[component-id="1251120364"] .s-product-card-content-sub, section[component-id="1251120364"] .s-product-card-content-footer { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; } section[component-id="1251120364"] .s-product-card-content-title { margin: 0 !important; font-size: 14px; line-height: 1.8; } section[component-id="1251120364"] .s-product-card-content-title a, section[component-id="1251120364"] .s-product-card-price { color: #27425D !important; } section[component-id="1251120364"] .s-product-card-price { margin: 0 !important; font-size: 15px; font-weight: 700; } /* Add-to-cart button */ section[component-id="1251120364"] .s-product-card-content-footer { margin-top: 6px !important; padding: 0 !important; } section[component-id="1251120364"] .s-product-card-content-footer .s-button-element { width: 100%; min-height: 40px; border-radius: 10px !important; background: #27425D !important; border: 1px solid #27425D !important; color: #FFFFFF !important; transition: all 0.25s ease; } section[component-id="1251120364"] .s-product-card-content-footer .s-button-element .s-button-text, section[component-id="1251120364"] .s-product-card-content-footer .s-button-element i { color: #FFFFFF !important; } section[component-id="1251120364"] .s-product-card-content-footer .s-button-element:hover { background: #F7EFE7 !important; color: #27425D !important; } section[component-id="1251120364"] .s-product-card-content-footer .s-button-element:hover .s-button-text, section[component-id="1251120364"] .s-product-card-content-footer .s-button-element:hover i { color: #27425D !important; } /* Mobile */ @media (max-width: 767px) { section[component-id="1251120364"] .slider-bg { height: 300px !important; } section[component-id="1251120364"] .slider-bg > .container { padding: 28px 18px !important; } section[component-id="1251120364"] > .container { padding: 18px 10px 0 !important; } section[component-id="1251120364"] .s-product-card-content { padding: 10px !important; } section[component-id="1251120364"] .s-product-card-content-title { font-size: 12px; } section[component-id="1251120364"] .s-product-card-price { font-size: 13px; } } /* Hide banner only */ section[component-id="1251120364"] .slider-bg { display: none !important; } /* Remove the space above products */ section[component-id="1251120364"] > .container { margin-top: 0 !important; padding-top: 0 !important; } /* ================================= VELARA | Light Store Background ================================= */ :root { --velara-primary: #27425D; --velara-secondary: #2D4354; --velara-light: #F7EFE7; --velara-white: #FFFFFF; } /* Main store background */ body, body.salla-theme_6, #app, .app-inner, .store-home, main, #main-content { background-color: var(--velara-light) !important; } /* Sections background */ .s-block, section.s-block { background-color: transparent; } /* Product sections */ .s-block--products, .s-block--slider-with-bg:not(:has(.slider-bg:not([style*="display: none"]))) { background-color: var(--velara-light); } /* Product cards remain white */ .s-product-card-entry, .s-product-card-content { background-color: var(--velara-white) !important; } /* Keep banner backgrounds unchanged */ .slider-bg { background-color: transparent; } /* Avoid horizontal overflow */ html, body { overflow-x: hidden; } @media (min-width: 1024px) { #mainnav { width: 100%; background: #F7EFE7 !important; display: flex !important; justify-content: center !important; } } /* ========================================= VELARA | Premium Footer ========================================= */ :root { --velara-primary: #27425D; --velara-secondary: #2D4354; --velara-light: #F7EFE7; --velara-white: #FFFFFF; } /* Main footer */ .store-footer { position: relative; background: var(--velara-primary) !important; color: var(--velara-white) !important; overflow: hidden; } /* Subtle top border */ .store-footer::before { content: ""; display: block; height: 3px; background: linear-gradient( 90deg, transparent, #F7EFE7, rgba(247, 239, 231, 0.3), transparent ); } /* Footer content */ .store-footer .store-footer__inner { background: transparent !important; padding-top: 45px; padding-bottom: 35px; } .store-footer .container { position: relative; z-index: 1; } /* Store name */ .store-footer .store-footer__inner > .container > div:first-child > a h3 { color: var(--velara-white) !important; font-size: 30px; font-weight: 700; letter-spacing: 2px; margin-bottom: 22px; } /* Section headings */ .store-footer h3, .store-footer .s-contacts-title { color: var(--velara-light) !important; font-size: 16px; font-weight: 700; margin-bottom: 18px; } /* Footer links */ .store-footer .s-menu-footer-list a, .store-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 0.25s ease, opacity 0.25s ease; } .store-footer .s-menu-footer-list a:hover, .store-footer a:hover { color: var(--velara-light) !important; } /* Links spacing */ .store-footer .s-menu-footer-list { display: flex; flex-direction: column; gap: 12px; } .store-footer .s-menu-footer-list a { display: inline-block; line-height: 1.9; font-size: 14px; } /* Contact details */ .store-footer .s-contacts-list { gap: 12px; } .store-footer .s-contacts-item { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; direction: ltr; } .store-footer .s-contacts-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid rgba(247, 239, 231, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.07); transition: all 0.25s ease; } .store-footer .s-contacts-icon svg { width: 17px; height: 17px; fill: var(--velara-light) !important; } .store-footer .s-contacts-item:hover .s-contacts-icon { background: var(--velara-light); border-color: var(--velara-light); } .store-footer .s-contacts-item:hover .s-contacts-icon svg { fill: var(--velara-primary) !important; } /* Social icons */ .store-footer .s-social-list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0; margin-top: 20px; } .store-footer .s-social-list a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(247, 239, 231, 0.24); border-radius: 11px; background: rgba(255, 255, 255, 0.06); transition: all 0.3s ease; } .store-footer .s-social-list a:hover { background: var(--velara-light); border-color: var(--velara-light); color: var(--velara-primary) !important; transform: translateY(-3px); } .store-footer .s-social-list svg { fill: currentColor; } /* Trust badges and apps */ .store-footer salla-trust-badges, .store-footer salla-apps-icons { color: var(--velara-white); } /* Bottom footer bar */ .store-footer > .md\:flex { border-top: 1px solid rgba(247, 239, 231, 0.16); padding-top: 20px !important; padding-bottom: 20px !important; gap: 18px; } .store-footer .copyright-text, .store-footer .copyright-text p { color: rgba(255, 255, 255, 0.65) !important; font-size: 12px; line-height: 1.8; } .store-footer .copyright-text a { color: var(--velara-light) !important; font-weight: 600; } /* Payment icons */ .store-footer .s-payments-list { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; } .store-footer .s-payments-list-item { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 34px; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.95); } .store-footer .s-payments-list-item img { width: auto; max-width: 48px; height: 24px; object-fit: contain; } /* Responsive */ @media (max-width: 1023px) { .store-footer .store-footer__inner { padding-top: 32px; padding-bottom: 25px; } .store-footer .store-footer__inner > .container { row-gap: 28px; } } @media (max-width: 767px) { .store-footer .store-footer__inner { padding-top: 28px; padding-bottom: 22px; } .store-footer .store-footer__inner > .container { gap: 24px !important; } .store-footer .store-footer__inner > .container > div:first-child > a h3 { font-size: 26px; margin-bottom: 14px; } .store-footer h3, .store-footer .s-contacts-title { font-size: 15px; margin-bottom: 12px; } .store-footer .s-menu-footer-list { gap: 8px; } .store-footer .s-menu-footer-list a { font-size: 13px; } .store-footer .contact-social { margin-top: 18px; } .store-footer > .md\:flex { justify-content: center; text-align: center; padding-top: 16px !important; padding-bottom: 16px !important; } } /* ========================================== VELARA | LATEST PRODUCTS SECTION Slider: slider-with-bg-2 ========================================== */ #slider-with-bg-2 { width: 100%; direction: rtl; } /* Section heading */ #slider-with-bg-2 .s-slider-block__title { margin-bottom: 18px; align-items: center; } #slider-with-bg-2 .s-slider-block__title h2 { color: #27425D !important; font-size: 23px; font-weight: 700; } #slider-with-bg-2 .s-slider-block__display-all { color: #27425D !important; font-weight: 600; } /* Cards */ #slider-with-bg-2 .s-products-slider-card { height: auto !important; min-height: 0 !important; padding: 0 6px 10px; box-sizing: border-box; } #slider-with-bg-2 .s-product-card-entry { display: flex !important; flex-direction: column; height: auto !important; min-height: 0 !important; overflow: hidden; background: #FFFFFF !important; border: 1px solid rgba(39, 66, 93, 0.08); border-radius: 14px !important; box-shadow: 0 5px 18px rgba(24, 42, 60, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } #slider-with-bg-2 .s-product-card-entry:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24, 42, 60, 0.11); } /* Product images */ #slider-with-bg-2 .s-product-card-image { flex: 0 0 auto; overflow: hidden; background: #F7F7F7; } #slider-with-bg-2 .s-product-card-image-cover { display: block; width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; transition: transform 0.4s ease; } #slider-with-bg-2 .s-product-card-entry:hover .s-product-card-image-cover { transform: scale(1.035); } /* Content without extra empty space */ #slider-with-bg-2 .s-product-card-content { display: flex !important; flex: 0 0 auto !important; flex-direction: column; gap: 8px !important; height: auto !important; min-height: 0 !important; padding: 12px !important; background: #FFFFFF !important; } #slider-with-bg-2 .s-product-card-content-main, #slider-with-bg-2 .s-product-card-content-sub, #slider-with-bg-2 .s-product-card-content-footer { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; } /* Product name */ #slider-with-bg-2 .s-product-card-content-title { margin: 0 !important; font-size: 14px; font-weight: 600; line-height: 1.8; text-align: right; } #slider-with-bg-2 .s-product-card-content-title a { color: #27425D !important; text-decoration: none; } /* Price */ #slider-with-bg-2 .s-product-card-price { margin: 0 !important; color: #27425D !important; font-size: 15px; font-weight: 700; text-align: right; } /* Add to cart */ #slider-with-bg-2 .s-product-card-content-footer { margin-top: 6px !important; padding: 0 !important; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element { width: 100%; min-height: 40px; border: 1px solid #27425D !important; border-radius: 10px !important; background: #27425D !important; color: #FFFFFF !important; transition: all 0.25s ease; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element i, #slider-with-bg-2 .s-product-card-content-footer .s-button-element span { color: #FFFFFF !important; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover { background: #F7EFE7 !important; border-color: #27425D !important; color: #27425D !important; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover i, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover span { color: #27425D !important; } /* Wishlist */ #slider-with-bg-2 .s-product-card-wishlist-btn { border-radius: 50% !important; color: #27425D !important; } /* Slider arrows */ #slider-with-bg-2 .s-slider-nav-arrow { border-radius: 50%; background: #FFFFFF !important; color: #27425D !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-2 .s-slider-block__title h2 { font-size: 19px; } #slider-with-bg-2 .s-products-slider-card { padding: 0 5px 8px; } #slider-with-bg-2 .s-product-card-content { padding: 10px !important; gap: 8px !important; } #slider-with-bg-2 .s-product-card-content-title { font-size: 12px; } #slider-with-bg-2 .s-product-card-price { font-size: 13px; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element { min-height: 38px; font-size: 11px; } } /* VELARA | Wishlist Heart Hover */ #slider-with-bg-2 .s-product-card-wishlist-btn.s-button-element { background: #FFFFFF !important; color: #27425D !important; border: 1px solid rgba(39, 66, 93, 0.15) !important; border-radius: 50% !important; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important; } /* Heart default */ #slider-with-bg-2 .s-product-card-wishlist-btn .sicon-heart { color: #27425D !important; transition: color 0.3s ease, transform 0.3s ease !important; } /* Hover */ #slider-with-bg-2 .s-product-card-wishlist-btn.s-button-element:hover { background: #27425D !important; color: #FFFFFF !important; transform: scale(1.08); } /* Heart on hover */ #slider-with-bg-2 .s-product-card-wishlist-btn:hover .sicon-heart { color: #FFFFFF !important; transform: scale(1.12); } /* Selected wishlist state */ #slider-with-bg-2 .s-product-card-wishlist-btn.added, #slider-with-bg-2 .s-product-card-wishlist-btn.favorited { background: #27425D !important; color: #FFFFFF !important; } #slider-with-bg-2 .s-product-card-wishlist-btn.added .sicon-heart, #slider-with-bg-2 .s-product-card-wishlist-btn.favorited .sicon-heart { color: #FFFFFF !important; } /* ========================================== VELARA | WHITE STORE BACKGROUND ========================================== */ :root { --velara-light: #FFFFFF; --velara-white: #FFFFFF; } /* Main store background */ html, body, body.salla-theme_6, #app, .app-inner, .store-home, main, #main-content { background: #FFFFFF !important; } /* All store sections */ .s-block, section.s-block, .s-block--products, .s-block--slider-with-bg { background-color: #FFFFFF !important; } /* Products sections */ section[component-id="967859946"], section[component-id="1251120364"] { background: #FFFFFF !important; } /* Product cards */ .s-product-card-entry, .s-product-card-content { background-color: #FFFFFF !important; } /* Main navigation */ @media (min-width: 1024px) { #mainnav { background: #FFFFFF !important; } } /* Footer stays navy */ .store-footer { background: #27425D !important; } .swiper:where([dir="rtl"], [dir="rtl"] *) { padding-left: 5px; background: #27425D; padding: 22px; } #slider-with-bg-2 .s-products-slider-card { height: auto !important; min-height: 0 !important; padding: 3px 17px 3px 17px; box-sizing: border-box; } /* ========================================== VELARA | PREMIUM PRODUCTS BLOCK TARGET: Latest / slider-with-bg-2 ========================================== */ /* السكشن كله */ #slider-with-bg-2 { display: block; background: linear-gradient(180deg, #2d4a68 0%, #27425D 100%) !important; border-radius: 28px !important; padding: 26px 22px 24px !important; box-shadow: 0 18px 45px rgba(22, 38, 54, 0.14); overflow: hidden; position: relative; } /* لمسة خفيفة فوق الخلفية */ #slider-with-bg-2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,0.10), transparent 28%), radial-gradient(circle at bottom left, rgba(255,255,255,0.07), transparent 24%); pointer-events: none; } /* العنوان واللينك والأسهم */ #slider-with-bg-2 .s-slider-block__title { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px !important; padding-inline: 4px; } #slider-with-bg-2 .s-slider-block__title h2 { color: #FFFFFF !important; font-size: 28px; font-weight: 700; margin: 0 !important; } #slider-with-bg-2 .s-slider-block__display-all { color: rgba(255,255,255,0.92) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; transition: opacity 0.3s ease; } #slider-with-bg-2 .s-slider-block__display-all:hover { opacity: 0.8; } /* الأسهم */ #slider-with-bg-2 .s-slider-nav-arrow { width: 42px; height: 42px; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.22) !important; background: rgba(255,255,255,0.14) !important; color: #FFFFFF !important; box-shadow: none !important; transition: all 0.3s ease; } #slider-with-bg-2 .s-slider-nav-arrow:hover:not(:disabled) { background: #FFFFFF !important; color: #27425D !important; transform: translateY(-2px); } #slider-with-bg-2 .s-slider-nav-arrow:disabled { opacity: 0.45; } /* كونتينر السلايدر */ #slider-with-bg-2 .s-slider-container, #slider-with-bg-2 .swiper { position: relative; z-index: 2; overflow: hidden; border-radius: 22px; } /* الكارت الخارجي */ #slider-with-bg-2 .s-products-slider-card { padding: 10px 8px 12px !important; height: auto !important; box-sizing: border-box; } /* الكارت نفسه */ #slider-with-bg-2 .s-product-card-entry { background: #FFFFFF !important; border: 1px solid rgba(39, 66, 93, 0.08) !important; border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 10px 24px rgba(18, 31, 45, 0.10); transition: transform 0.3s ease, box-shadow 0.3s ease; } #slider-with-bg-2 .s-product-card-entry:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(18, 31, 45, 0.15); } /* الصورة */ #slider-with-bg-2 .s-product-card-image { padding: 12px 12px 0 !important; background: transparent !important; } #slider-with-bg-2 .s-product-card-image a { display: block; border-radius: 18px; overflow: hidden; background: #f7f7f7; } #slider-with-bg-2 .s-product-card-image-cover { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; display: block; transition: transform 0.45s ease; } #slider-with-bg-2 .s-product-card-entry:hover .s-product-card-image-cover { transform: scale(1.035); } /* المحتوى */ #slider-with-bg-2 .s-product-card-content { background: #FFFFFF !important; padding: 14px 14px 16px !important; gap: 8px !important; display: flex !important; flex-direction: column; } #slider-with-bg-2 .s-product-card-content-main, #slider-with-bg-2 .s-product-card-content-sub, #slider-with-bg-2 .s-product-card-content-footer { margin: 0 !important; min-height: 0 !important; } /* الاسم */ #slider-with-bg-2 .s-product-card-content-title { margin: 0 !important; font-size: 14px !important; line-height: 1.8 !important; font-weight: 600 !important; text-align: right; } #slider-with-bg-2 .s-product-card-content-title a { color: #27425D !important; text-decoration: none !important; } /* السعر */ #slider-with-bg-2 .s-product-card-price { margin: 0 !important; color: #27425D !important; font-size: 16px !important; font-weight: 700 !important; text-align: right; } /* زر السلة */ #slider-with-bg-2 .s-product-card-content-footer { margin-top: 6px !important; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element { width: 100%; min-height: 44px; border-radius: 14px !important; border: 1px solid #27425D !important; background: #27425D !important; color: #FFFFFF !important; font-weight: 600; transition: all 0.3s ease; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element span, #slider-with-bg-2 .s-product-card-content-footer .s-button-element i { color: #FFFFFF !important; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover { background: #1f3448 !important; border-color: #1f3448 !important; transform: translateY(-1px); } /* زر المفضلة */ #slider-with-bg-2 .s-product-card-wishlist-btn.s-button-element { width: 38px; height: 38px; border-radius: 50% !important; background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(39,66,93,0.10) !important; color: #27425D !important; box-shadow: 0 6px 18px rgba(0,0,0,0.08); transition: all 0.3s ease !important; } #slider-with-bg-2 .s-product-card-wishlist-btn .sicon-heart { color: #27425D !important; transition: all 0.3s ease !important; } #slider-with-bg-2 .s-product-card-wishlist-btn.s-button-element:hover { background: #27425D !important; transform: scale(1.06); } #slider-with-bg-2 .s-product-card-wishlist-btn:hover .sicon-heart { color: #FFFFFF !important; } /* لو عدد المنتجات قليل */ #slider-with-bg-2 .swiper-wrapper { align-items: stretch; } /* موبايل */ @media (max-width: 767px) { #slider-with-bg-2 { border-radius: 20px !important; padding: 18px 12px 16px !important; } #slider-with-bg-2 .s-slider-block__title { margin-bottom: 12px !important; } #slider-with-bg-2 .s-slider-block__title h2 { font-size: 21px !important; } #slider-with-bg-2 .s-products-slider-card { padding: 6px 4px 10px !important; } #slider-with-bg-2 .s-product-card-entry { border-radius: 18px !important; } #slider-with-bg-2 .s-product-card-image { padding: 10px 10px 0 !important; } #slider-with-bg-2 .s-product-card-image a { border-radius: 14px; } #slider-with-bg-2 .s-product-card-content { padding: 12px !important; } #slider-with-bg-2 .s-product-card-content-title { font-size: 12px !important; } #slider-with-bg-2 .s-product-card-price { font-size: 14px !important; } #slider-with-bg-2 .s-product-card-content-footer .s-button-element { min-height: 40px; border-radius: 12px !important; font-size: 12px; } } /* VELARA | Same Linear Gradient For Both Sections */ #slider-with-bg-2, section[component-id="1251120364"] > .container { background: linear-gradient( 180deg, #2D4A68 0%, #27425D 100% ) !important; border-radius: 28px !important; } /* ========================================== VELARA | UNIFIED PRODUCTS BACKGROUND ========================================== */ /* Main section - one gradient */ #slider-with-bg-2 { background: linear-gradient( 135deg, #2D4A68 0%, #27425D 100% ) !important; border-radius: 28px !important; overflow: hidden !important; box-shadow: 0 12px 35px rgba(39, 66, 93, 0.12); } /* Remove the second background */ #slider-with-bg-2 .s-slider-container, #slider-with-bg-2 .s-slider-swiper-wrapper, #slider-with-bg-2 .swiper-wrapper { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* Remove inner overlay */ #slider-with-bg-2::before, #slider-with-bg-2::after { content: none !important; } /* Keep slider clean */ #slider-with-bg-2 .s-slider-container { border-radius: 0 !important; } /* Transparent slides */ #slider-with-bg-2 .s-products-slider-card { background: transparent !important; } /* White product cards */ #slider-with-bg-2 .s-product-card-entry { background: #FFFFFF !important; border-radius: 20px !important; } /* Remove unnecessary dark layers */ #slider-with-bg-2 .swiper { background: transparent !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-2 { border-radius: 20px !important; } } /* ========================================== VELARA | WIDER PRODUCTS SECTION ========================================== */ /* Expand latest products section */ section:has(> .container #slider-with-bg-2) > .container { width: 95% !important; max-width: 1800px !important; margin-inline: auto !important; padding-inline: 0 !important; } /* Main slider */ #slider-with-bg-2 { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; box-sizing: border-box !important; padding: 28px 24px !important; border-radius: 28px !important; background: linear-gradient( 135deg, #2D4A68 0%, #27425D 100% ) !important; } /* Prevent cards from being cut off */ #slider-with-bg-2 .s-slider-container { width: 100% !important; max-width: 100% !important; overflow: hidden !important; border-radius: 0 !important; } /* Consistent product spacing */ #slider-with-bg-2 .s-products-slider-card { box-sizing: border-box !important; padding: 8px 7px 12px !important; } /* Tablet */ @media (max-width: 1023px) { section:has(> .container #slider-with-bg-2) > .container { width: 96% !important; } #slider-with-bg-2 { padding: 22px 16px !important; border-radius: 22px !important; } } /* Mobile */ @media (max-width: 767px) { section:has(> .container #slider-with-bg-2) > .container { width: 96% !important; } #slider-with-bg-2 { padding: 18px 10px !important; border-radius: 18px !important; } } /* ========================================== VELARA | PREMIUM SLIDER ARROWS ========================================== */ /* Arrows container */ #slider-with-bg-2 .s-slider-block__title-nav { display: flex !important; align-items: center; justify-content: center; gap: 10px !important; direction: rtl; } /* Arrow buttons */ #slider-with-bg-2 .s-slider-nav-arrow { display: flex !important; align-items: center; justify-content: center; width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.28) !important; color: #FFFFFF !important; box-shadow: none !important; backdrop-filter: blur(8px); cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; } /* SVG icon */ #slider-with-bg-2 .s-slider-nav-arrow svg { width: 19px !important; height: 19px !important; fill: currentColor !important; transition: transform 0.3s ease; } #slider-with-bg-2 .s-slider-nav-arrow .s-slider-button-icon { display: flex; align-items: center; justify-content: center; color: inherit !important; } /* Hover */ #slider-with-bg-2 .s-slider-nav-arrow:hover:not(:disabled) { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #27425D !important; transform: translateY(-2px); } /* Keyboard focus */ #slider-with-bg-2 .s-slider-nav-arrow:focus-visible { outline: 2px solid #FFFFFF !important; outline-offset: 3px; } /* Disabled arrows */ #slider-with-bg-2 .s-slider-nav-arrow:disabled, #slider-with-bg-2 .s-slider-nav-arrow.swiper-button-disabled { opacity: 0.35 !important; cursor: not-allowed !important; transform: none !important; background: rgba(255,255,255,0.08) !important; color: #FFFFFF !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-2 .s-slider-block__title-nav { gap: 7px !important; } #slider-with-bg-2 .s-slider-nav-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; } #slider-with-bg-2 .s-slider-nav-arrow svg { width: 17px !important; height: 17px !important; } } /* ========================================== VELARA | PREMIUM ADD TO CART HOVER ========================================== */ /* Default button */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element { background: #27425D !important; border: 1px solid #27425D !important; color: #FFFFFF !important; border-radius: 12px !important; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; } /* Default text and icon */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-2 .s-product-card-content-footer .s-button-element .sicon-shopping-bag { color: #FFFFFF !important; transition: color 0.3s ease !important; } /* Hover effect */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover:not(:disabled) { background: #FFFFFF !important; border-color: #27425D !important; color: #27425D !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(39, 66, 93, 0.15); } /* Hover text and icon */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover .sicon-shopping-bag { color: #27425D !important; } /* Keyboard focus */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:focus-visible { outline: 2px solid #27425D !important; outline-offset: 3px; } /* Disabled button */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; } /* ========================================== VELARA | ULTRA SMOOTH DUAL SIDE HOVER ========================================== */ /* Main Button */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate; overflow: hidden !important; background: #27425D !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #FFFFFF !important; transform: translateZ(0); transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important; } /* Two animated layers */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-2 .s-product-card-content-footer .s-button-element::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background: #FFFFFF; z-index: -1; transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important; pointer-events: none; } /* Right side */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element::before { right: 0; transform: translateX(102%); } /* Left side */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element::after { left: 0; transform: translateX(-102%); } /* Both sides meet in center */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover::before, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover::after { transform: translateX(0); } /* Text and icon */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-2 .s-product-card-content-footer .s-button-element i { position: relative; z-index: 2; color: #FFFFFF !important; transition: color 0.55s ease 0.12s !important; } /* Text changes smoothly */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover i { color: #27425D !important; } /* Soft hover movement */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element:hover:not(:disabled) { background: #27425D !important; border-color: #27425D !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(39,66,93,0.12); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-2 .s-product-card-content-footer .s-button-element, #slider-with-bg-2 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-2 .s-product-card-content-footer .s-button-element::after { transition-duration: 0.01ms !important; } } /* ========================================== VELARA | SMOOTH IMAGE HOVER Right To Left Animation ========================================== */ /* Product image container */ #slider-with-bg-2 .s-product-card-image { position: relative !important; overflow: hidden !important; } /* Image wrapper */ #slider-with-bg-2 .s-product-card-image > a { display: block; overflow: hidden !important; border-radius: 18px !important; } /* Default image */ #slider-with-bg-2 .s-product-card-image-cover { display: block; width: 100%; height: auto; transform: translateX(0) scale(1) !important; transform-origin: center center; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: transform; } /* Hover - image moves smoothly RTL */ #slider-with-bg-2 .s-product-card-image > a:hover .s-product-card-image-cover { transform: translateX(-14px) scale(1.08) !important; } /* Smooth return */ #slider-with-bg-2 .s-product-card-image > a:not(:hover) .s-product-card-image-cover { transform: translateX(0) scale(1) !important; } /* Mobile accessibility */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-2 .s-product-card-image-cover { transition: none !important; will-change: auto; } } #slider-with-bg-2 .s-product-card-image { padding: 9px 9px 0 !important; background: transparent !important; } /* ========================================== VELARA | FULL WIDTH PRODUCTS SECTION Remove White Spaces On Both Sides ========================================== */ /* Expand the entire section */ section#best-offers-2-slider { width: calc(100% - 40px) !important; max-width: none !important; margin-inline: 20px !important; padding: 20px !important; box-sizing: border-box !important; background: linear-gradient( 135deg, #2D4A68 0%, #27425D 100% ) !important; border-radius: 28px !important; overflow: hidden !important; } /* Remove the inner background */ section#best-offers-2-slider #slider-with-bg-2 { width: 100% !important; max-width: 100% !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Remove any extra internal layers */ section#best-offers-2-slider salla-products-slider, section#best-offers-2-slider .s-slider-container, section#best-offers-2-slider .swiper-wrapper { background: transparent !important; } /* Keep cards white */ section#best-offers-2-slider .s-product-card-entry, section#best-offers-2-slider .s-product-card-content { background: #FFFFFF !important; } /* Tablet */ @media (max-width: 1023px) { section#best-offers-2-slider { width: calc(100% - 24px) !important; margin-inline: 12px !important; padding: 16px !important; border-radius: 22px !important; } } /* Mobile */ @media (max-width: 767px) { section#best-offers-2-slider { width: calc(100% - 16px) !important; margin-inline: 8px !important; padding: 12px !important; border-radius: 18px !important; } } /* ========================================== VELARA | REPEATING SCROLL ANIMATION ========================================== */ #best-offers-2-slider .s-products-slider-card { opacity: 0; translate: 45px 30px; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important; } /* Reveal products */ #best-offers-2-slider.is-visible .s-products-slider-card { opacity: 1; translate: 0 0; } /* Staggered animation */ #best-offers-2-slider .s-products-slider-card:nth-child(1) { transition-delay: 0.1s !important; } #best-offers-2-slider .s-products-slider-card:nth-child(2) { transition-delay: 0.25s !important; } #best-offers-2-slider .s-products-slider-card:nth-child(3) { transition-delay: 0.4s !important; } #best-offers-2-slider .s-products-slider-card:nth-child(4) { transition-delay: 0.55s !important; } /* Reset immediately after leaving */ #best-offers-2-slider:not(.is-visible) .s-products-slider-card { transition-delay: 0s !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #best-offers-2-slider .s-products-slider-card { opacity: 1 !important; translate: none !important; transition: none !important; } } /* ========================================== VELARA | PREMIUM SLIDER HEADER ========================================== */ /* Title row */ #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 52px; padding: 0 8px !important; margin: 0 0 22px !important; background: transparent !important; box-sizing: border-box; } /* Latest products title container */ #best-offers-2-slider .s-slider-block__title-right { display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 14px !important; padding: 10px 22px !important; margin: 0 !important; box-shadow: none !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Heading */ #best-offers-2-slider .s-slider-block__title-right h2 { color: #FFFFFF !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.5 !important; margin: 0 !important; white-space: nowrap; } /* View all + arrows */ #best-offers-2-slider .s-slider-block__title-left { display: flex !important; align-items: center !important; justify-content: center; gap: 16px !important; margin: 0 !important; } /* View all link */ #best-offers-2-slider .s-slider-block__display-all { display: inline-flex !important; align-items: center; color: #FFFFFF !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap; margin: 0 !important; transition: opacity 0.3s ease !important; } #best-offers-2-slider .s-slider-block__display-all:hover { opacity: 0.75; } /* Navigation */ #best-offers-2-slider .s-slider-block__title-nav { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } /* Mobile */ @media (max-width: 767px) { #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title { gap: 10px !important; padding: 0 !important; margin-bottom: 16px !important; flex-wrap: wrap; } #best-offers-2-slider .s-slider-block__title-right { padding: 8px 12px !important; border-radius: 10px !important; } #best-offers-2-slider .s-slider-block__title-right h2 { font-size: 17px !important; } #best-offers-2-slider .s-slider-block__title-left { gap: 8px !important; } #best-offers-2-slider .s-slider-block__display-all { font-size: 12px !important; } } /* ========================================== VELARA | FIX HEADER ALIGNMENT Latest Products ========================================== */ /* Header layout */ #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; margin: 0 0 24px !important; padding: 0 8px !important; box-sizing: border-box !important; direction: rtl !important; } /* Title on the right */ #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title-right { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } /* View all and arrows on the left */ #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title-left { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; gap: 14px !important; margin: 0 !important; margin-inline-start: auto !important; padding: 0 !important; } /* View all */ #best-offers-2-slider #slider-with-bg-2 .s-slider-block__display-all { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 14px !important; white-space: nowrap !important; } /* Arrow group */ #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title-nav { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: auto !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* Fix button sizing */ #best-offers-2-slider #slider-with-bg-2 .s-slider-nav-arrow { flex: 0 0 38px !important; width: 38px !important; height: 38px !important; min-width: 38px !important; margin: 0 !important; } /* Mobile */ @media (max-width: 767px) { #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title { gap: 8px !important; padding: 0 !important; margin-bottom: 18px !important; } #best-offers-2-slider #slider-with-bg-2 .s-slider-block__title-left { gap: 7px !important; } #best-offers-2-slider #slider-with-bg-2 .s-slider-block__display-all { font-size: 12px !important; } #best-offers-2-slider #slider-with-bg-2 .s-slider-nav-arrow { flex-basis: 30px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; } } /* ========================================== VELARA | ROYAL GOLD TITLE ========================================== */ #best-offers-2-slider .s-slider-block__title-right { position: relative !important; isolation: isolate; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px; padding: 13px 28px !important; margin: 0 !important; background: linear-gradient( 135deg, rgba(212,175,112,0.14), rgba(255,255,255,0.04) ) !important; border: 1px solid rgba(212,175,112,0.55) !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 0.7s cubic-bezier(.22,1,.36,1), border-color 0.5s ease, box-shadow 0.5s ease !important; } /* Golden sparkle */ #best-offers-2-slider .s-slider-block__title-right::before { content: "✦"; position: relative; z-index: 2; color: #D4AF70; font-size: 23px; line-height: 1; text-shadow: 0 0 15px rgba(212,175,112,0.4); transition: transform 0.7s ease, color 0.5s ease; } /* Animated golden shine */ #best-offers-2-slider .s-slider-block__title-right::after { content: ""; position: absolute; z-index: 1; top: -50%; left: -80%; width: 45%; height: 200%; background: linear-gradient( 90deg, transparent, rgba(255,225,160,0.25), transparent ); transform: rotate(25deg); pointer-events: none; } /* Heading */ #best-offers-2-slider .s-slider-block__title-right h2 { position: relative; z-index: 2; margin: 0 !important; padding: 0 !important; color: #F0D29A !important; font-size: 25px !important; font-weight: 700 !important; line-height: 1.5 !important; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,0.10); } /* Smooth hover */ #best-offers-2-slider .s-slider-block__title-right:hover { transform: translateY(-3px); border-color: #D4AF70 !important; box-shadow: 0 12px 30px rgba(0,0,0,0.16), 0 0 20px rgba(212,175,112,0.12); } /* Shine moves across the title */ #best-offers-2-slider .s-slider-block__title-right:hover::after { animation: velara-gold-shine 1.2s ease forwards; } /* Sparkle effect */ #best-offers-2-slider .s-slider-block__title-right:hover::before { transform: rotate(90deg) scale(1.15); color: #F0D29A; } @keyframes velara-gold-shine { from { left: -80%; } to { left: 140%; } } /* Mobile */ @media (max-width: 767px) { #best-offers-2-slider .s-slider-block__title-right { padding: 9px 14px !important; gap: 7px; border-radius: 12px !important; } #best-offers-2-slider .s-slider-block__title-right h2 { font-size: 18px !important; } #best-offers-2-slider .s-slider-block__title-right::before { font-size: 18px; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { #best-offers-2-slider .s-slider-block__title-right, #best-offers-2-slider .s-slider-block__title-right::before, #best-offers-2-slider .s-slider-block__title-right::after { animation: none !important; transition: none !important; } } /* ========================================== VELARA | EDITORIAL LUXURY COLLECTION SECTION: 967859946 SLIDER: slider-with-bg-4 ========================================== */ section[component-id="967859946"] { --editorial-navy: #182D40; --editorial-gold: #D4AF70; --editorial-cream: #F7F3EC; position: relative !important; width: calc(100% - 36px) !important; max-width: none !important; margin: 55px auto !important; padding: 55px 32px 50px !important; background: linear-gradient( 145deg, #142738 0%, #223C53 55%, #142738 100% ) !important; border-radius: 30px !important; overflow: hidden !important; isolation: isolate; } /* Decorative golden glow */ section[component-id="967859946"]::before { content: ""; position: absolute; width: 480px; height: 480px; top: -250px; left: -170px; border-radius: 50%; background: radial-gradient( circle, rgba(212,175,112,.17), transparent 70% ); pointer-events: none; z-index: 0; } /* Thin golden decorative border */ section[component-id="967859946"]::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(212,175,112,.2); border-radius: 23px; pointer-events: none; z-index: 0; } /* Remove old banner and its reserved space */ section[component-id="967859946"] .slider-bg { display: none !important; } /* Full width content */ section[component-id="967859946"] > .container { position: relative; z-index: 1; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Slider */ #slider-with-bg-4 { display: block; width: 100%; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* ========================================== EDITORIAL HEADING ========================================== */ #slider-with-bg-4 .s-slider-block__title { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 20px !important; margin: 0 0 40px !important; padding: 35px 15px 0 !important; background: transparent !important; text-align: center; } /* Collection label */ #slider-with-bg-4 .s-slider-block__title::before { content: "VELARA / EXCLUSIVE COLLECTION"; display: block; color: #D4AF70; font-size: 12px; font-weight: 600; letter-spacing: 3px; } /* Main heading container */ #slider-with-bg-4 .s-slider-block__title-right { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; backdrop-filter: none !important; } /* Remove inherited ornaments */ #slider-with-bg-4 .s-slider-block__title-right::before, #slider-with-bg-4 .s-slider-block__title-right::after { content: none !important; } /* Replace empty HTML heading visually */ #slider-with-bg-4 .s-slider-block__title-right h2 { display: none !important; } /* New editorial title */ #slider-with-bg-4 .s-slider-block__title-right::before { content: "أحدث العبايات" !important; display: block !important; color: #FFFFFF; font-size: clamp(30px, 4vw, 50px); font-weight: 700; line-height: 1.5; text-align: center; text-shadow: 0 5px 25px rgba(0,0,0,.12); } /* Gold line */ #slider-with-bg-4 .s-slider-block__title-right::after { content: "" !important; display: block !important; width: 90px; height: 2px; margin: 14px auto 0; background: linear-gradient( 90deg, transparent, #D4AF70, transparent ); } /* Navigation group */ #slider-with-bg-4 .s-slider-block__title-left { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; margin: 0 !important; } /* Navigation arrows */ #slider-with-bg-4 .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; } #slider-with-bg-4 .s-slider-nav-arrow { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; background: transparent !important; border: 1px solid rgba(212,175,112,.6) !important; border-radius: 50% !important; color: #D4AF70 !important; transition: all .45s cubic-bezier(.22,1,.36,1) !important; } #slider-with-bg-4 .s-slider-nav-arrow svg, #slider-with-bg-4 .s-slider-nav-arrow svg path { width: 19px; height: 19px; fill: currentColor !important; } #slider-with-bg-4 .s-slider-nav-arrow:hover:not(:disabled) { background: #D4AF70 !important; border-color: #D4AF70 !important; color: #182D40 !important; transform: scale(1.08); } #slider-with-bg-4 .s-slider-nav-arrow:disabled { opacity: .35 !important; cursor: not-allowed; } /* ========================================== PRODUCT CARDS ========================================== */ #slider-with-bg-4 .s-slider-container { background: transparent !important; border-radius: 0 !important; overflow: hidden !important; } #slider-with-bg-4 .swiper-wrapper { align-items: stretch; } #slider-with-bg-4 .s-products-slider-card { height: auto !important; padding: 12px 8px 20px !important; background: transparent !important; box-sizing: border-box; } #slider-with-bg-4 .s-product-card-entry { position: relative; display: flex !important; flex-direction: column; height: 100% !important; min-height: 0 !important; background: #F7F3EC !important; border: 1px solid rgba(212,175,112,.22) !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 12px 30px rgba(0,0,0,.14); transition: transform .85s cubic-bezier(.22,1,.36,1), box-shadow .85s cubic-bezier(.22,1,.36,1), border-color .6s ease !important; } #slider-with-bg-4 .s-product-card-entry:hover { transform: translateY(-9px); border-color: #D4AF70 !important; box-shadow: 0 24px 45px rgba(0,0,0,.25); } /* Product image */ #slider-with-bg-4 .s-product-card-image { position: relative; flex: 0 0 auto; padding: 0 !important; background: #EAE6E0 !important; overflow: hidden; } #slider-with-bg-4 .s-product-card-image a { display: block; overflow: hidden; border-radius: 0 !important; } #slider-with-bg-4 .s-product-card-image-cover { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transform: scale(1) !important; transition: transform 1.25s cubic-bezier(.22,1,.36,1), filter 1.25s ease !important; } #slider-with-bg-4 .s-product-card-image a:hover .s-product-card-image-cover { transform: scale(1.10) !important; filter: contrast(1.04); } /* Soft image gradient */ #slider-with-bg-4 .s-product-card-image::after { content: ""; position: absolute; inset: 65% 0 0; background: linear-gradient( to top, rgba(24,45,64,.12), transparent ); pointer-events: none; } /* Wishlist */ #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element { background: rgba(247,243,236,.94) !important; border: 1px solid rgba(212,175,112,.45) !important; border-radius: 50% !important; color: #182D40 !important; transition: all .4s ease !important; } #slider-with-bg-4 .s-product-card-wishlist-btn .sicon-heart { color: #182D40 !important; transition: color .4s ease !important; } #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element:hover { background: #D4AF70 !important; transform: scale(1.12); } /* Product content */ #slider-with-bg-4 .s-product-card-content { display: flex !important; flex: 1 1 auto !important; flex-direction: column; padding: 18px 15px !important; gap: 10px !important; background: #F7F3EC !important; min-height: 0 !important; } #slider-with-bg-4 .s-product-card-content-main { flex: 1 1 auto !important; min-height: 0 !important; } #slider-with-bg-4 .s-product-card-content-title { font-size: 14px !important; line-height: 1.8 !important; font-weight: 600 !important; text-align: right; margin: 0 !important; } #slider-with-bg-4 .s-product-card-content-title a { color: #182D40 !important; } /* Gold prices */ #slider-with-bg-4 .s-product-card-price { color: #A47A38 !important; font-size: 18px !important; font-weight: 700 !important; text-align: right; margin: 0 !important; } /* ========================================== ADD TO CART - GOLD SWEEP ========================================== */ #slider-with-bg-4 .s-product-card-content-footer { flex: 0 0 auto !important; margin-top: 8px !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 45px; background: #182D40 !important; border: 1px solid #182D40 !important; border-radius: 6px !important; color: #FFFFFF !important; transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease !important; } /* Gold enters from bottom */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #D4AF70; transform: translateY(102%); transition: transform .7s cubic-bezier(.22,1,.36,1); pointer-events: none; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover::before { transform: translateY(0); } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover { background: #182D40 !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(24,45,64,.14); } #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element i { position: relative; z-index: 2; color: #FFFFFF !important; transition: color .45s ease; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover i { color: #182D40 !important; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 767px) { section[component-id="967859946"] { width: calc(100% - 16px) !important; margin: 25px auto !important; padding: 25px 10px 20px !important; border-radius: 20px !important; } #slider-with-bg-4 .s-slider-block__title { padding-top: 20px !important; margin-bottom: 20px !important; gap: 14px !important; } #slider-with-bg-4 .s-slider-block__title::before { font-size: 9px; letter-spacing: 1.5px; } #slider-with-bg-4 .s-slider-block__title-right::before { font-size: 27px; } #slider-with-bg-4 .s-products-slider-card { padding: 8px 5px 15px !important; } #slider-with-bg-4 .s-product-card-content { padding: 12px 10px !important; gap: 7px !important; } #slider-with-bg-4 .s-product-card-content-title { font-size: 12px !important; } #slider-with-bg-4 .s-product-card-price { font-size: 15px !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element { min-height: 40px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { #slider-with-bg-4 *, #slider-with-bg-4 *::before, #slider-with-bg-4 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================== VELARA | GLASS NAME + PRICE ON IMAGE SECTION: 967859946 SLIDER: slider-with-bg-4 ========================================== */ /* الكارت */ #slider-with-bg-4 .s-product-card-entry { position: relative !important; overflow: hidden !important; background: #F7F3EC !important; border-radius: 16px !important; } /* الصورة */ #slider-with-bg-4 .s-product-card-image { position: relative !important; overflow: hidden !important; background: #EAE6E0 !important; } #slider-with-bg-4 .s-product-card-image a { display: block !important; overflow: hidden !important; } #slider-with-bg-4 .s-product-card-image-cover { display: block; width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important; } #slider-with-bg-4 .s-product-card-entry:hover .s-product-card-image-cover { transform: scale(1.07) !important; } /* محتوى الكارت يسحب لفوق فوق الصورة */ #slider-with-bg-4 .s-product-card-content { position: relative !important; z-index: 3 !important; margin: -88px 14px 14px !important; padding: 12px !important; background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 18px !important; backdrop-filter: blur(16px) saturate(145%); -webkit-backdrop-filter: blur(16px) saturate(145%); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255,255,255,0.22) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } /* الاسم */ #slider-with-bg-4 .s-product-card-content-main { margin: 0 !important; min-height: 0 !important; } #slider-with-bg-4 .s-product-card-content-title { margin: 0 !important; font-size: 14px !important; line-height: 1.8 !important; font-weight: 700 !important; text-align: right !important; } #slider-with-bg-4 .s-product-card-content-title a { color: #FFFFFF !important; text-decoration: none !important; text-shadow: 0 2px 10px rgba(0,0,0,0.18); } /* السعر */ #slider-with-bg-4 .s-product-card-content-sub { margin: 0 !important; } #slider-with-bg-4 .s-product-card-price { margin: 0 !important; color: #F3D7A3 !important; font-size: 18px !important; font-weight: 700 !important; text-align: right !important; text-shadow: 0 2px 10px rgba(0,0,0,0.18); } #slider-with-bg-4 .s-product-card-price i { color: #F3D7A3 !important; } /* زر السلة */ #slider-with-bg-4 .s-product-card-content-footer { margin-top: 4px !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element { width: 100%; min-height: 42px; border-radius: 12px !important; background: rgba(24, 45, 64, 0.92) !important; border: 1px solid rgba(24, 45, 64, 0.92) !important; color: #FFFFFF !important; transition: transform .45s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element i { color: #FFFFFF !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover { background: #D4AF70 !important; border-color: #D4AF70 !important; transform: translateY(-2px); } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover i { color: #182D40 !important; } /* الهارت */ #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element { background: rgba(255,255,255,0.78) !important; border: 1px solid rgba(255,255,255,0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* موبايل */ @media (max-width: 767px) { #slider-with-bg-4 .s-product-card-content { margin: -74px 10px 10px !important; padding: 10px !important; border-radius: 14px !important; gap: 8px !important; } #slider-with-bg-4 .s-product-card-content-title { font-size: 12px !important; } #slider-with-bg-4 .s-product-card-price { font-size: 15px !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element { min-height: 38px; font-size: 11px !important; } } /* ========================================== VELARA | GLASS NAME + PRICE ON IMAGE SECTION: 967859946 SLIDER: slider-with-bg-4 ========================================== */ /* الكارت */ #slider-with-bg-4 .s-product-card-entry { position: relative !important; overflow: hidden !important; background: #F7F3EC !important; border-radius: 16px !important; } /* الصورة */ #slider-with-bg-4 .s-product-card-image { position: relative !important; overflow: hidden !important; background: #EAE6E0 !important; } #slider-with-bg-4 .s-product-card-image a { display: block !important; overflow: hidden !important; } #slider-with-bg-4 .s-product-card-image-cover { display: block; width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important; } #slider-with-bg-4 .s-product-card-entry:hover .s-product-card-image-cover { transform: scale(1.07) !important; } /* محتوى الكارت يسحب لفوق فوق الصورة */ #slider-with-bg-4 .s-product-card-content { position: relative !important; z-index: 3 !important; margin: -88px 14px 14px !important; padding: 12px !important; background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 18px !important; backdrop-filter: blur(16px) saturate(145%); -webkit-backdrop-filter: blur(16px) saturate(145%); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255,255,255,0.22) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } /* الاسم */ #slider-with-bg-4 .s-product-card-content-main { margin: 0 !important; min-height: 0 !important; } #slider-with-bg-4 .s-product-card-content-title { margin: 0 !important; font-size: 14px !important; line-height: 1.8 !important; font-weight: 700 !important; text-align: right !important; } #slider-with-bg-4 .s-product-card-content-title a { color: #FFFFFF !important; text-decoration: none !important; text-shadow: 0 2px 10px rgba(0,0,0,0.18); } /* السعر */ #slider-with-bg-4 .s-product-card-content-sub { margin: 0 !important; } #slider-with-bg-4 .s-product-card-price { margin: 0 !important; color: #F3D7A3 !important; font-size: 18px !important; font-weight: 700 !important; text-align: right !important; text-shadow: 0 2px 10px rgba(0,0,0,0.18); } #slider-with-bg-4 .s-product-card-price i { color: #F3D7A3 !important; } /* زر السلة */ #slider-with-bg-4 .s-product-card-content-footer { margin-top: 4px !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element { width: 100%; min-height: 42px; border-radius: 12px !important; background: rgba(24, 45, 64, 0.92) !important; border: 1px solid rgba(24, 45, 64, 0.92) !important; color: #FFFFFF !important; transition: transform .45s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element i { color: #FFFFFF !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover { background: #D4AF70 !important; border-color: #D4AF70 !important; transform: translateY(-2px); } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover i { color: #182D40 !important; } /* الهارت */ #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element { background: rgba(255,255,255,0.78) !important; border: 1px solid rgba(255,255,255,0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* موبايل */ @media (max-width: 767px) { #slider-with-bg-4 .s-product-card-content { margin: -74px 10px 10px !important; padding: 10px !important; border-radius: 14px !important; gap: 8px !important; } #slider-with-bg-4 .s-product-card-content-title { font-size: 12px !important; } #slider-with-bg-4 .s-product-card-price { font-size: 15px !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element { min-height: 38px; font-size: 11px !important; } } /* ========================================== VELARA | LIGHT FROSTED GLASS Original Glass Style - Refined ========================================== */ /* Light transparent glass */ #slider-with-bg-4 .s-product-card-content { position: relative !important; z-index: 5 !important; margin: -110px 12px 12px !important; padding: 14px !important; gap: 8px !important; background: rgba(255, 255, 255, 0.22) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; border-radius: 18px !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease !important; } /* Glass hover */ #slider-with-bg-4 .s-product-card-entry:hover .s-product-card-content { background: rgba(255, 255, 255, 0.32) !important; transform: translateY(-3px); } /* Product title */ #slider-with-bg-4 .s-product-card-content-title a { color: #FFFFFF !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } /* Gold price */ #slider-with-bg-4 .s-product-card-price, #slider-with-bg-4 .s-product-card-price i { color: #F3D7A3 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } /* Navy cart button */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element { background: #182D40 !important; border: 1px solid #182D40 !important; color: #FFFFFF !important; border-radius: 11px !important; } /* White button text */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element i { color: #FFFFFF !important; } /* Button hover */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover { background: #D4AF70 !important; border-color: #D4AF70 !important; } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover i { color: #182D40 !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-4 .s-product-card-content { margin: -105px 8px 8px !important; padding: 10px !important; border-radius: 14px !important; gap: 7px !important; } } /* ========================================== VELARA | GLASS CARD FINAL REFINEMENTS Section: Latest Abayas ========================================== */ /* 1. Space between title and price */ #slider-with-bg-4 .s-product-card-content-main { margin-bottom: 0 !important; } #slider-with-bg-4 .s-product-card-content-sub { padding-top: 10px !important; margin-top: 2px !important; } /* 2. Navy price */ #slider-with-bg-4 .s-product-card-price, #slider-with-bg-4 .s-product-card-price i { color: #27425D !important; font-size: 17px !important; font-weight: 800 !important; text-shadow: 0 1px 8px rgba(255,255,255,0.65) !important; } /* Keep original frosted glass */ #slider-with-bg-4 .s-product-card-content { background: rgba(255,255,255,0.28) !important; border: 1px solid rgba(255,255,255,0.42) !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; } /* 3. Add to cart - dual-side navy animation */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #27425D !important; border-radius: 11px !important; color: #27425D !important; transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease !important; } /* Two navy layers */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-4 .s-product-card-content-footer .s-button-element::after { content: "" !important; position: absolute; top: 0; bottom: 0; width: 50%; background: #27425D; z-index: -1; pointer-events: none; transition: transform .9s cubic-bezier(.22,1,.36,1) !important; } /* Right layer */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element::before { right: 0; left: auto; inset: auto; top: 0; bottom: 0; height: 100%; transform: translateX(102%); } /* Left layer */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element::after { left: 0; right: auto; top: 0; bottom: 0; height: 100%; transform: translateX(-102%); } /* Both sides meet */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover::before, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover::after { transform: translateX(0); } /* Button text and icon */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element i { position: relative; z-index: 2; color: #27425D !important; transition: color .5s ease .12s !important; } /* Hover */ #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover:not(:disabled) { background: #FFFFFF !important; border-color: #27425D !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(39,66,93,0.18); } #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-4 .s-product-card-content-footer .s-button-element:hover i { color: #FFFFFF !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-4 .s-product-card-content-sub { padding-top: 7px !important; } #slider-with-bg-4 .s-product-card-price, #slider-with-bg-4 .s-product-card-price i { font-size: 14px !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-4 .s-product-card-content-footer .s-button-element, #slider-with-bg-4 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-4 .s-product-card-content-footer .s-button-element::after { transition: none !important; } } /* ========================================== VELARA | LUXURY SLIDER HEADER Navy Theme - No Gold ========================================== */ /* Main heading container */ #slider-with-bg-4 .s-slider-block__title { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 10px 0 0 !important; margin: 0 0 26px !important; background: transparent !important; text-align: center !important; } /* Remove previous English label */ #slider-with-bg-4 .s-slider-block__title::before, #slider-with-bg-4 .s-slider-block__title::after { content: none !important; display: none !important; } /* Navy glass title box */ #slider-with-bg-4 .s-slider-block__title-right { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; padding: 10px 28px !important; margin: 0 !important; background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 14px !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; transform: none !important; } /* Hide empty HTML title */ #slider-with-bg-4 .s-slider-block__title-right h2 { display: none !important; } /* Custom heading */ #slider-with-bg-4 .s-slider-block__title-right::before { content: "أحدث العبايات" !important; display: block !important; color: #FFFFFF !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.6 !important; text-align: center !important; white-space: nowrap; } /* Remove decorative line */ #slider-with-bg-4 .s-slider-block__title-right::after { content: none !important; display: none !important; } /* Arrow group wrapper */ #slider-with-bg-4 .s-slider-block__title-left { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* Arrow navigation */ #slider-with-bg-4 .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } /* Arrow buttons */ #slider-with-bg-4 .s-slider-nav-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; margin: 0 !important; background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.35) !important; border-radius: 50% !important; color: #FFFFFF !important; box-shadow: none !important; transition: background-color .35s ease, color .35s ease !important; } /* SVG alignment */ #slider-with-bg-4 .s-slider-button-icon { display: flex !important; align-items: center !important; justify-content: center !important; color: inherit !important; } #slider-with-bg-4 .s-slider-nav-arrow svg { width: 19px !important; height: 19px !important; fill: currentColor !important; } #slider-with-bg-4 .s-slider-nav-arrow svg path { fill: currentColor !important; } /* Hover */ #slider-with-bg-4 .s-slider-nav-arrow:hover:not(:disabled) { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #27425D !important; } /* Disabled arrows */ #slider-with-bg-4 .s-slider-nav-arrow:disabled { opacity: .35 !important; cursor: not-allowed !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-4 .s-slider-block__title { gap: 10px !important; margin-bottom: 18px !important; } #slider-with-bg-4 .s-slider-block__title-right { padding: 8px 18px !important; border-radius: 12px !important; } #slider-with-bg-4 .s-slider-block__title-right::before { font-size: 19px !important; } #slider-with-bg-4 .s-slider-nav-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; } } /* ========================================== HEADER INLINE | TITLE + ARROWS SIDE BY SIDE ========================================== */ #slider-with-bg-4 .s-slider-block__title { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-direction: row !important; gap: 20px !important; width: 100% !important; margin: 0 0 25px !important; padding: 0 8px !important; background: transparent !important; } /* العنوان */ #slider-with-bg-4 .s-slider-block__title-right { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; padding: 10px 24px !important; margin: 0 !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.20) !important; border-radius: 14px !important; } /* نخفي الـ h2 الفاضي */ #slider-with-bg-4 .s-slider-block__title-right h2 { display: none !important; } /* العنوان الظاهر */ #slider-with-bg-4 .s-slider-block__title-right::before { content: "أحدث العبايات" !important; color: #FFFFFF !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.4 !important; white-space: nowrap !important; } /* الجزء الشمال */ #slider-with-bg-4 .s-slider-block__title-left { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* الأسهم */ #slider-with-bg-4 .s-slider-block__title-nav { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } /* شكل الأسهم */ #slider-with-bg-4 .s-slider-nav-arrow { width: 38px !important; height: 38px !important; min-width: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.30) !important; border-radius: 50% !important; color: #FFFFFF !important; margin: 0 !important; } /* لو فيه عرض الكل */ #slider-with-bg-4 .s-slider-block__display-all, #slider-with-bg-4 .s-slider-block__title-left a { color: #FFFFFF !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; } /* موبايل */ @media (max-width: 767px) { #slider-with-bg-4 .s-slider-block__title { flex-wrap: wrap !important; justify-content: space-between !important; gap: 12px !important; } #slider-with-bg-4 .s-slider-block__title-right { padding: 8px 16px !important; } #slider-with-bg-4 .s-slider-block__title-right::before { font-size: 18px !important; } #slider-with-bg-4 .s-slider-nav-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; } } /* ========================================== VELARA | FINAL HEADER POSITION FIX TITLE RIGHT - ARROWS FAR LEFT ========================================== */ /* Main header */ section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: center !important; direction: rtl !important; width: 100% !important; max-width: none !important; padding: 0 18px !important; margin: 0 0 28px !important; gap: 15px !important; box-sizing: border-box !important; } /* Title - far right */ section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title-right { grid-column: 1 !important; grid-row: 1 !important; justify-self: end !important; width: max-content !important; max-width: 100% !important; margin: 0 !important; transform: none !important; } /* Arrows - far left */ section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title-left { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: max-content !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; } /* Navigation */ section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; } /* Arrow sizing */ section[component-id="967859946"] #slider-with-bg-4 .s-slider-nav-arrow { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; margin: 0 !important; } /* Mobile */ @media (max-width: 767px) { section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title { grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; padding: 0 5px !important; } section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title-right { justify-self: end !important; } section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title-left { justify-self: start !important; } section[component-id="967859946"] #slider-with-bg-4 .s-slider-nav-arrow { width: 32px !important; height: 32px !important; min-width: 32px !important; flex-basis: 32px !important; } } section[component-id="967859946"] #slider-with-bg-4 .s-slider-block__title { display: flex !important; grid-template-columns: 1fr 1fr !important; align-items: center !important; direction: rtl !important; width: 100% !important; max-width: none !important; padding: 0 18px !important; margin: 0 0 28px !important; gap: 15px !important; box-sizing: border-box !important; } /* VELARA | Wishlist Heart Hover */ #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element:hover { background: #27425D !important; background-color: #27425D !important; border-color: #27425D !important; color: #FFFFFF !important; } /* White heart on hover */ #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element:hover .sicon-heart { color: #FFFFFF !important; } /* Keep the inner icon white */ #slider-with-bg-4 .s-product-card-wishlist-btn.s-button-element:hover .s-button-text { color: #FFFFFF !important; } /* ========================================== VELARA | BORDERLESS CARDS + SMOOTH ZOOM Section: Latest Abayas Slider: slider-with-bg-4 ========================================== */ /* Remove product card borders */ #slider-with-bg-4 .s-product-card-entry, #slider-with-bg-4 .s-product-card-entry:hover { border: none !important; outline: none !important; border-radius: 18px !important; overflow: hidden !important; transform: none !important; translate: none !important; box-shadow: none !important; } /* Remove slide borders */ #slider-with-bg-4 .s-products-slider-card { border: none !important; outline: none !important; } /* Image container */ #slider-with-bg-4 .s-product-card-image { position: relative !important; overflow: hidden !important; border: none !important; } /* Image link */ #slider-with-bg-4 .s-product-card-image > a { display: block !important; overflow: hidden !important; border: none !important; } /* Default image */ #slider-with-bg-4 .s-product-card-image-cover { display: block !important; width: 100% !important; transform: scale(1) !important; transform-origin: center center !important; transition: transform 1.15s cubic-bezier( 0.22, 1, 0.36, 1 ) !important; backface-visibility: hidden; } /* Smooth zoom when hovering image */ #slider-with-bg-4 .s-product-card-image > a:hover .s-product-card-image-cover { transform: scale(1.50) !important; } /* Return smoothly */ #slider-with-bg-4 .s-product-card-image > a:not(:hover) .s-product-card-image-cover { transform: scale(1) !important; } /* Keep glass layer unchanged */ #slider-with-bg-4 .s-product-card-content { border: 1px solid rgba(255,255,255,0.42) !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-4 .s-product-card-image-cover { transition: none !important; transform: none !important; } } /* ========================================== VELARA | NIQAB COLLECTION SAME DESIGN AS LATEST ABAYAS Section: 1251120364 Slider: slider-with-bg-6 ========================================== */ /* MAIN SECTION */ section[component-id="1251120364"] { position: relative !important; width: calc(100% - 36px) !important; max-width: none !important; margin: 45px auto !important; padding: 35px 30px 32px !important; background: linear-gradient( 135deg, #1B3248 0%, #27425D 55%, #1B3248 100% ) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 28px !important; overflow: hidden !important; box-sizing: border-box !important; } /* Remove old decorations */ section[component-id="1251120364"]::before, section[component-id="1251120364"]::after { content: none !important; display: none !important; } /* Hide old banner */ section[component-id="1251120364"] .slider-bg { display: none !important; } /* Main container */ section[component-id="1251120364"] > .container { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Slider */ #slider-with-bg-6 { display: block !important; width: 100% !important; background: transparent !important; box-shadow: none !important; } /* ========================================== HEADER | TITLE RIGHT + ARROWS LEFT ========================================== */ #slider-with-bg-6 .s-slider-block__title { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; direction: rtl !important; width: 100% !important; gap: 15px !important; padding: 0 10px !important; margin: 0 0 28px !important; background: transparent !important; box-sizing: border-box !important; } #slider-with-bg-6 .s-slider-block__title::before, #slider-with-bg-6 .s-slider-block__title::after { content: none !important; display: none !important; } /* Title glass container */ #slider-with-bg-6 .s-slider-block__title-right { grid-column: 1 !important; grid-row: 1 !important; justify-self: end !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; max-width: 100% !important; padding: 10px 24px !important; margin: 0 !important; background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 14px !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; } /* Hide empty title */ #slider-with-bg-6 .s-slider-block__title-right h2 { display: none !important; } /* Custom section heading */ #slider-with-bg-6 .s-slider-block__title-right::before { content: "تشكيلة النقابات" !important; display: block !important; color: #FFFFFF !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.5 !important; white-space: nowrap; } #slider-with-bg-6 .s-slider-block__title-right::after { content: none !important; display: none !important; } /* Navigation on far left */ #slider-with-bg-6 .s-slider-block__title-left { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; display: flex !important; align-items: center !important; width: max-content !important; margin: 0 !important; padding: 0 !important; } #slider-with-bg-6 .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; } /* Arrow buttons */ #slider-with-bg-6 .s-slider-nav-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; padding: 0 !important; margin: 0 !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.30) !important; border-radius: 50% !important; color: #FFFFFF !important; box-shadow: none !important; transition: background-color .3s ease, color .3s ease !important; } #slider-with-bg-6 .s-slider-button-icon { display: flex !important; align-items: center !important; justify-content: center !important; color: inherit !important; } #slider-with-bg-6 .s-slider-nav-arrow svg { width: 19px !important; height: 19px !important; } #slider-with-bg-6 .s-slider-nav-arrow svg path { fill: currentColor !important; } #slider-with-bg-6 .s-slider-nav-arrow:hover:not(:disabled) { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #27425D !important; } #slider-with-bg-6 .s-slider-nav-arrow:disabled { opacity: .35 !important; cursor: not-allowed !important; } /* ========================================== PRODUCT SLIDER ========================================== */ #slider-with-bg-6 .s-slider-container { width: 100% !important; background: transparent !important; overflow: hidden !important; } #slider-with-bg-6 .swiper-wrapper { align-items: stretch !important; } #slider-with-bg-6 .s-products-slider-card { height: auto !important; padding: 8px 8px 14px !important; background: transparent !important; border: none !important; box-sizing: border-box !important; } /* ========================================== BORDERLESS PRODUCT CARD ========================================== */ #slider-with-bg-6 .s-product-card-entry { position: relative !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; background: #FFFFFF !important; border: none !important; outline: none !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: none !important; transform: none !important; } #slider-with-bg-6 .s-product-card-entry:hover { border: none !important; box-shadow: none !important; transform: none !important; } /* ========================================== PRODUCT IMAGE | SMOOTH ZOOM ========================================== */ #slider-with-bg-6 .s-product-card-image { position: relative !important; width: 100%; overflow: hidden !important; padding: 0 !important; border: none !important; background: #F2F2F2 !important; } #slider-with-bg-6 .s-product-card-image > a { display: block !important; overflow: hidden !important; border: none !important; } #slider-with-bg-6 .s-product-card-image-cover { display: block !important; width: 100% !important; aspect-ratio: 3 / 4.2; object-fit: cover !important; transform: scale(1) !important; transform-origin: center center !important; transition: transform 1.15s cubic-bezier(.22,1,.36,1) !important; backface-visibility: hidden; } #slider-with-bg-6 .s-product-card-image > a:hover .s-product-card-image-cover { transform: scale(1.09) !important; } /* ========================================== LIGHT FROSTED GLASS NAME + PRICE OVER IMAGE ========================================== */ #slider-with-bg-6 .s-product-card-content { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: -110px 12px 12px !important; padding: 14px !important; gap: 8px !important; background: rgba(255,255,255,.28) !important; background-image: none !important; border: 1px solid rgba(255,255,255,.42) !important; border-radius: 18px !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35) !important; } /* Content sections */ #slider-with-bg-6 .s-product-card-content-main, #slider-with-bg-6 .s-product-card-content-sub, #slider-with-bg-6 .s-product-card-content-footer { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } /* Product name */ #slider-with-bg-6 .s-product-card-content-title { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.7 !important; text-align: right !important; } #slider-with-bg-6 .s-product-card-content-title a { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #FFFFFF !important; text-decoration: none !important; text-shadow: 0 2px 8px rgba(0,0,0,.55); } /* Price spacing */ #slider-with-bg-6 .s-product-card-content-sub { padding-top: 10px !important; } /* Navy price */ #slider-with-bg-6 .s-product-card-price, #slider-with-bg-6 .s-product-card-price i { color: #27425D !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.4 !important; text-align: right !important; text-shadow: 0 1px 8px rgba(255,255,255,.65) !important; } /* ========================================== FIXED NAVY ADD TO CART NO ANIMATION ========================================== */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:focus { width: 100% !important; min-height: 42px; background: #27425D !important; background-image: none !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #FFFFFF !important; transform: none !important; translate: none !important; animation: none !important; transition: none !important; box-shadow: none !important; } /* Remove old animation layers */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { content: none !important; display: none !important; } /* Button text and icon */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text, #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text span, #slider-with-bg-6 .s-product-card-content-footer .s-button-element i, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover .s-button-text, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover .s-button-text span, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover i { color: #FFFFFF !important; transition: none !important; } /* ========================================== WISHLIST HEART ========================================== */ #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element { background: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.45) !important; border-radius: 50% !important; color: #27425D !important; } #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element .sicon-heart { color: #27425D !important; } #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element:hover { background: #27425D !important; border-color: #27425D !important; color: #FFFFFF !important; } #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element:hover .sicon-heart { color: #FFFFFF !important; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { section[component-id="1251120364"] { width: calc(100% - 16px) !important; margin: 25px auto !important; padding: 22px 10px 20px !important; border-radius: 20px !important; } #slider-with-bg-6 .s-slider-block__title { grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; padding: 0 5px !important; margin-bottom: 20px !important; } #slider-with-bg-6 .s-slider-block__title-right { padding: 8px 12px !important; border-radius: 11px !important; } #slider-with-bg-6 .s-slider-block__title-right::before { font-size: 17px !important; } #slider-with-bg-6 .s-slider-nav-arrow { width: 32px !important; height: 32px !important; min-width: 32px !important; flex-basis: 32px !important; } #slider-with-bg-6 .s-products-slider-card { padding: 6px 5px 12px !important; } #slider-with-bg-6 .s-product-card-content { margin: -105px 8px 8px !important; padding: 10px !important; gap: 7px !important; border-radius: 14px !important; } #slider-with-bg-6 .s-product-card-content-title { font-size: 11px !important; } #slider-with-bg-6 .s-product-card-content-sub { padding-top: 7px !important; } #slider-with-bg-6 .s-product-card-price, #slider-with-bg-6 .s-product-card-price i { font-size: 14px !important; } #slider-with-bg-6 .s-product-card-content-footer .s-button-element { min-height: 36px !important; font-size: 11px !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-6 .s-product-card-image-cover { transition: none !important; transform: none !important; } } /* ========================================== VELARA | NIQAB COLLECTION SAME DESIGN AS LATEST ABAYAS Section: 1251120364 Slider: slider-with-bg-6 ========================================== */ /* Main section */ section[component-id="1251120364"] { position: relative !important; isolation: isolate; width: calc(100% - 32px) !important; max-width: none !important; margin: 40px auto !important; padding: 16px 16px 65px !important; box-sizing: border-box !important; background: linear-gradient( 135deg, #18324A 0%, #24435F 55%, #18324A 100% ) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 30px !important; overflow: hidden !important; } /* Thin decorative inner frame */ section[component-id="1251120364"]::before { content: "" !important; display: block !important; position: absolute !important; inset: 10px !important; z-index: 0; border: 1px solid rgba(255,255,255,.10); border-radius: 24px; pointer-events: none; } section[component-id="1251120364"]::after { content: none !important; display: none !important; } /* Remove original banner */ section[component-id="1251120364"] .slider-bg { display: none !important; } /* Full width container */ section[component-id="1251120364"] > .container { position: relative !important; z-index: 1; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } /* Slider wrapper */ #slider-with-bg-6 { display: block !important; width: 100% !important; background: transparent !important; box-shadow: none !important; } /* ========================================== HEADER | TITLE RIGHT, ARROWS LEFT ========================================== */ #slider-with-bg-6 .s-slider-block__title { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; direction: rtl !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; padding: 26px 18px 10px !important; margin: 0 0 22px !important; background: transparent !important; box-sizing: border-box !important; } #slider-with-bg-6 .s-slider-block__title::before, #slider-with-bg-6 .s-slider-block__title::after { content: none !important; display: none !important; } /* Title container */ #slider-with-bg-6 .s-slider-block__title-right { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; max-width: 100% !important; margin: 0 !important; padding: 10px 22px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 16px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none !important; transform: none !important; } /* Original heading is empty */ #slider-with-bg-6 .s-slider-block__title-right h2 { display: none !important; } /* Visible title */ #slider-with-bg-6 .s-slider-block__title-right::before { content: "تشكيلة النقابات" !important; display: block !important; color: #FFFFFF !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; white-space: nowrap; } #slider-with-bg-6 .s-slider-block__title-right::after { content: none !important; display: none !important; } /* Arrows on far left */ #slider-with-bg-6 .s-slider-block__title-left { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; display: flex !important; align-items: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; } #slider-with-bg-6 .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* Navigation buttons */ #slider-with-bg-6 .s-slider-nav-arrow { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; padding: 0 !important; margin: 0 !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 50% !important; color: #FFFFFF !important; box-shadow: none !important; transition: background-color .3s ease, border-color .3s ease, color .3s ease !important; } #slider-with-bg-6 .s-slider-button-icon { display: flex !important; align-items: center !important; justify-content: center !important; color: inherit !important; } #slider-with-bg-6 .s-slider-nav-arrow svg { width: 18px !important; height: 18px !important; } #slider-with-bg-6 .s-slider-nav-arrow svg path { fill: currentColor !important; } #slider-with-bg-6 .s-slider-nav-arrow:hover:not(:disabled) { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.35) !important; color: #FFFFFF !important; } #slider-with-bg-6 .s-slider-nav-arrow:disabled { opacity: .4 !important; cursor: not-allowed !important; } /* ========================================== PRODUCTS SLIDER ========================================== */ #slider-with-bg-6 .s-slider-container, #slider-with-bg-6 .swiper { width: 100% !important; max-width: 100% !important; background: transparent !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } #slider-with-bg-6 .swiper-wrapper { align-items: stretch !important; background: transparent !important; } /* Product slide */ #slider-with-bg-6 .s-products-slider-card { height: auto !important; padding: 8px 6px 16px !important; background: transparent !important; border: none !important; box-sizing: border-box !important; } /* ========================================== BORDERLESS PRODUCT CARDS ========================================== */ #slider-with-bg-6 .s-product-card-entry { position: relative !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; background: transparent !important; border: none !important; outline: none !important; border-radius: 18px !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } #slider-with-bg-6 .s-product-card-entry:hover { border: none !important; box-shadow: none !important; transform: none !important; } /* ========================================== PRODUCT IMAGE | SMOOTH ZOOM ========================================== */ #slider-with-bg-6 .s-product-card-image { position: relative !important; overflow: hidden !important; width: 100% !important; padding: 0 !important; background: #F4F4F4 !important; border: none !important; border-radius: 18px !important; } #slider-with-bg-6 .s-product-card-image > a { display: block !important; overflow: hidden !important; border-radius: 18px !important; } #slider-with-bg-6 .s-product-card-image-cover { display: block !important; width: 100% !important; aspect-ratio: 3 / 4.45 !important; object-fit: cover !important; transform: scale(1) !important; transform-origin: center center !important; transition: transform 1s cubic-bezier(.22,1,.36,1) !important; backface-visibility: hidden; } #slider-with-bg-6 .s-product-card-image:hover .s-product-card-image-cover, #slider-with-bg-6 .s-product-card-image > a:hover .s-product-card-image-cover { transform: scale(1.06) !important; } /* ========================================== FROSTED GLASS | PRODUCT DETAILS ========================================== */ #slider-with-bg-6 .s-product-card-content { position: relative !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: -92px 10px 0 !important; padding: 12px 12px 10px !important; gap: 8px !important; background: linear-gradient( 180deg, rgba(255,255,255,.34) 0%, rgba(220,220,220,.46) 100% ) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 16px !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 10px 25px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45) !important; } /* Reset spacing */ #slider-with-bg-6 .s-product-card-content-main, #slider-with-bg-6 .s-product-card-content-sub, #slider-with-bg-6 .s-product-card-content-footer { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Product name */ #slider-with-bg-6 .s-product-card-content-title { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.65 !important; text-align: right !important; } #slider-with-bg-6 .s-product-card-content-title a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; color: #FFFFFF !important; text-decoration: none !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } /* Price spacing */ #slider-with-bg-6 .s-product-card-content-sub { padding-top: 8px !important; } /* Navy price */ #slider-with-bg-6 .s-product-card-price, #slider-with-bg-6 .s-product-card-price i { color: #27425D !important; font-size: 16px !important; font-weight: 800 !important; text-shadow: 0 1px 6px rgba(255,255,255,.45) !important; } /* ========================================== ADD TO CART | SPLIT NAVY BUTTON ========================================== */ #slider-with-bg-6 .s-product-card-content-footer { margin-top: 10px !important; } /* Button default & hover */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:focus { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 38px !important; padding: 0 52px 0 8px !important; background: #FFFFFF !important; background-image: none !important; border: 1.4px solid #27425D !important; border-radius: 12px !important; color: #27425D !important; transform: none !important; animation: none !important; transition: none !important; box-shadow: none !important; overflow: hidden !important; } /* Remove old layers */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::before { content: none !important; display: none !important; } /* Navy section on right */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 46px !important; height: 100% !important; background: #27425D !important; border-radius: 0 10px 10px 0 !important; z-index: 1 !important; pointer-events: none; } /* Text inside button */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; color: #27425D !important; } #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text > span { color: #27425D !important; font-weight: 600 !important; white-space: nowrap; } /* Shopping bag icon */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .sicon-shopping-bag { position: absolute !important; z-index: 3 !important; right: -38px !important; top: 50% !important; transform: translateY(-50%) !important; color: #FFFFFF !important; } /* ========================================== WISHLIST HEART ========================================== */ #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element { background: rgba(255,255,255,.72) !important; border: 1px solid rgba(255,255,255,.48) !important; border-radius: 50% !important; color: #27425D !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #slider-with-bg-6 .s-product-card-wishlist-btn .sicon-heart { color: #27425D !important; } #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element:hover { background: #27425D !important; border-color: #27425D !important; color: #FFFFFF !important; } #slider-with-bg-6 .s-product-card-wishlist-btn.s-button-element:hover .sicon-heart { color: #FFFFFF !important; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { section[component-id="1251120364"] { width: calc(100% - 14px) !important; margin: 25px auto !important; padding: 10px 8px 35px !important; border-radius: 22px !important; } section[component-id="1251120364"]::before { inset: 6px !important; border-radius: 18px !important; } #slider-with-bg-6 .s-slider-block__title { padding: 16px 8px 6px !important; margin-bottom: 14px !important; gap: 10px !important; } #slider-with-bg-6 .s-slider-block__title-right { padding: 8px 14px !important; border-radius: 12px !important; } #slider-with-bg-6 .s-slider-block__title-right::before { font-size: 16px !important; } #slider-with-bg-6 .s-slider-nav-arrow { width: 32px !important; height: 32px !important; min-width: 32px !important; flex-basis: 32px !important; } #slider-with-bg-6 .s-products-slider-card { padding: 6px 5px 12px !important; } #slider-with-bg-6 .s-product-card-content { margin: -84px 8px 0 !important; padding: 10px !important; gap: 7px !important; border-radius: 14px !important; } #slider-with-bg-6 .s-product-card-content-title { font-size: 11px !important; } #slider-with-bg-6 .s-product-card-content-sub { padding-top: 7px !important; } #slider-with-bg-6 .s-product-card-price, #slider-with-bg-6 .s-product-card-price i { font-size: 14px !important; } #slider-with-bg-6 .s-product-card-content-footer .s-button-element { min-height: 34px !important; padding-right: 42px !important; } #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { width: 38px !important; } #slider-with-bg-6 .s-product-card-content-footer .sicon-shopping-bag { right: -34px !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-6 .s-product-card-image-cover { transition: none !important; transform: none !important; } } #slider-with-bg-6 { display: block !important; width: 100% !important; background: linear-gradient(145deg, #142738 0%, #223C53 55%, #142738 100%) !important; box-shadow: none !important; } /* ========================================== VELARA | MATCH SECTION BACKGROUND NIQAB = LATEST ABAYAS ========================================== */ /* Same navy background */ section[component-id="1251120364"] { background: linear-gradient( 135deg, #1B303C 0%, #20394D 45%, #27425D 100% ) !important; background-color: #20394D !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 30px !important; } /* Subtle champagne-gold inner border */ section[component-id="1251120364"]::before { content: "" !important; display: block !important; position: absolute !important; inset: 11px !important; width: auto !important; height: auto !important; background: none !important; border: 1px solid rgba(212,175,112,0.17) !important; border-radius: 24px !important; box-shadow: none !important; pointer-events: none !important; } /* Remove other decorative layers */ section[component-id="1251120364"]::after { content: none !important; display: none !important; } /* Prevent a second background */ section[component-id="1251120364"] > .container, section[component-id="1251120364"] salla-products-slider, section[component-id="1251120364"] #slider-with-bg-6, #slider-with-bg-6 .s-slider-container, #slider-with-bg-6 .swiper-wrapper { background: transparent !important; background-image: none !important; } /* Mobile */ @media (max-width: 767px) { section[component-id="1251120364"] { border-radius: 22px !important; } section[component-id="1251120364"]::before { inset: 7px !important; border-radius: 17px !important; } } /* ========================================== VELARA | CLEAN PRICE - NIQAB SECTION No Background / No Border / No Shadow ========================================== */ /* Price wrapper */ #slider-with-bg-6 .s-product-card-content-sub { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 0 0 !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } /* Price itself */ #slider-with-bg-6 .s-product-card-price { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #27425D !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.5 !important; text-align: right !important; text-shadow: none !important; } /* SAR icon */ #slider-with-bg-6 .s-product-card-price i { display: inline-block !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #27425D !important; font-size: 15px !important; text-shadow: none !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-6 .s-product-card-price { font-size: 14px !important; } #slider-with-bg-6 .s-product-card-price i { font-size: 13px !important; } } /* ========================================== VELARA | NIQAB CART BUTTON HOVER FIX Remove old hover effects completely ========================================== */ /* Button - all states */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:focus, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:active { position: relative !important; isolation: isolate !important; overflow: hidden !important; width: 100% !important; min-height: 38px !important; padding: 0 46px 0 8px !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #27425D !important; transform: none !important; translate: none !important; scale: none !important; transition: none !important; animation: none !important; box-shadow: none !important; filter: none !important; } /* Remove old animation overlay */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::before { content: none !important; display: none !important; } /* Fixed navy right side */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 46px !important; height: 100% !important; background: #27425D !important; border-radius: 0 10px 10px 0 !important; transform: none !important; transition: none !important; animation: none !important; pointer-events: none !important; z-index: 1 !important; } /* Text wrapper */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; color: #27425D !important; transform: none !important; transition: none !important; } /* Text - always navy */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text > span, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover .s-button-text > span { color: #27425D !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; animation: none !important; } /* Shopping bag icon */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .sicon-shopping-bag, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover .sicon-shopping-bag { position: absolute !important; z-index: 3 !important; right: -36px !important; top: 50% !important; transform: translateY(-50%) !important; color: #FFFFFF !important; opacity: 1 !important; visibility: visible !important; transition: none !important; animation: none !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-6 .s-product-card-content-footer .s-button-element { min-height: 34px !important; padding-right: 38px !important; } #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { width: 38px !important; } #slider-with-bg-6 .s-product-card-content-footer .sicon-shopping-bag { right: -31px !important; } } /* ========================================== VELARA | NIQAB DUAL SIDE BUTTON HOVER Same animation as slider-with-bg-4 ========================================== */ /* Main button */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 38px !important; padding: 0 10px !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #27425D !important; transform: none !important; animation: none !important; box-shadow: none !important; transition: box-shadow .6s cubic-bezier(.22,1,.36,1) !important; } /* Two animated navy layers */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 50.5% !important; height: 100% !important; background: #27425D !important; border: none !important; border-radius: 0 !important; z-index: 0 !important; pointer-events: none !important; transition: transform .9s cubic-bezier(.22,1,.36,1) !important; } /* Right layer */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::before { right: 0 !important; left: auto !important; transform: translateX(102%) !important; } /* Left layer */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { left: 0 !important; right: auto !important; transform: translateX(-102%) !important; } /* Both sides meet in center */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover:not(:disabled)::before, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover:not(:disabled)::after { transform: translateX(0) !important; } /* Button hover */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover:not(:disabled) { background: #FFFFFF !important; border-color: #27425D !important; color: #FFFFFF !important; transform: none !important; animation: none !important; box-shadow: 0 8px 20px rgba(39,66,93,.16) !important; } /* Text wrapper */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; color: #27425D !important; transform: none !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } /* Button text */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .s-button-text > span { position: relative !important; z-index: 2 !important; color: #27425D !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } /* Shopping bag icon */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element .sicon-shopping-bag { position: static !important; display: inline-block !important; color: #27425D !important; transform: none !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } /* Text and icon become white */ #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > span, #slider-with-bg-6 .s-product-card-content-footer .s-button-element:hover:not(:disabled) .sicon-shopping-bag { color: #FFFFFF !important; } /* Mobile */ @media (max-width: 767px) { #slider-with-bg-6 .s-product-card-content-footer .s-button-element { min-height: 34px !important; padding: 0 6px !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { #slider-with-bg-6 .s-product-card-content-footer .s-button-element, #slider-with-bg-6 .s-product-card-content-footer .s-button-element::before, #slider-with-bg-6 .s-product-card-content-footer .s-button-element::after { transition: none !important; } } /* VELARA | WISHLIST HEART SMOOTH HOVER */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element { background: rgba(255,255,255,.75) !important; border: 1px solid rgba(255,255,255,.5) !important; border-radius: 50% !important; color: #27425D !important; transition: background-color .5s ease, border-color .5s ease, transform .5s cubic-bezier(.22,1,.36,1) !important; } /* Default heart */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn .sicon-heart { color: #27425D !important; transition: color .5s ease !important; } /* Hover */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element:hover { background: #27425D !important; border-color: #27425D !important; color: #FFFFFF !important; transform: scale(1.08) !important; } /* White heart */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element:hover .sicon-heart { color: #FFFFFF !important; } /* Selected wishlist */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element.added, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element.favorited { background: #27425D !important; color: #FFFFFF !important; } /* Selected icon */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element.added .sicon-heart, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element.favorited .sicon-heart { color: #FFFFFF !important; } @media (prefers-reduced-motion: reduce) { :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn.s-button-element, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-wishlist-btn .sicon-heart { transition: none !important; } } /* ========================================== VELARA | UNIFIED GLASS PRODUCT CARDS Latest Abayas + Niqab Collection #slider-with-bg-4 + #slider-with-bg-6 ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) { --card-navy: #27425D; } /* ========================================== GLASS CONTAINER ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: -92px 10px 0 !important; padding: 12px 12px 10px !important; gap: 8px !important; background: linear-gradient( 180deg, rgba(255,255,255,.34) 0%, rgba(220,220,220,.46) 100% ) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 16px !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 10px 25px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45) !important; transform: none !important; } /* ========================================== RESET INTERNAL SPACING ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-main, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer { display: block !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================== PRODUCT NAME ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-title { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.65 !important; text-align: right !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-title a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; color: #FFFFFF !important; text-decoration: none !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } /* ========================================== PRICE - CLEAN NAVY ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub { padding-top: 8px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-price { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #27425D !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.5 !important; text-align: right !important; text-shadow: none !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-price i { display: inline-block !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #27425D !important; font-size: 15px !important; text-shadow: none !important; } /* ========================================== ADD TO CART CONTAINER ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer { margin-top: 10px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-add-product-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .w-full { display: block !important; width: 100% !important; } /* ========================================== CART BUTTON - NORMAL STATE ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 38px !important; padding: 0 10px !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #27425D !important; overflow: hidden !important; transform: none !important; box-shadow: none !important; animation: none !important; transition: box-shadow .6s ease !important; } /* ========================================== SMOOTH DUAL-SIDE NAVY HOVER ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element::before, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 50.5% !important; height: 100% !important; background: #27425D !important; border: none !important; border-radius: 0 !important; z-index: 0 !important; pointer-events: none !important; transition: transform .9s cubic-bezier(.22,1,.36,1) !important; } /* Right navy layer */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element::before { right: 0 !important; left: auto !important; transform: translateX(102%) !important; } /* Left navy layer */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element::after { left: 0 !important; right: auto !important; transform: translateX(-102%) !important; } /* Both layers meet in the center */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element:hover:not(:disabled)::before, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element:hover:not(:disabled)::after { transform: translateX(0) !important; } /* Button hover */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element:hover:not(:disabled) { background: #FFFFFF !important; border-color: #27425D !important; transform: none !important; animation: none !important; box-shadow: 0 8px 20px rgba(39,66,93,.16) !important; } /* ========================================== BUTTON TEXT + ICON ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element .s-button-text { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; color: #27425D !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element .s-button-text > span { position: relative !important; z-index: 2 !important; color: #27425D !important; font-weight: 600 !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } /* Shopping bag */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element .sicon-shopping-bag { position: static !important; display: inline-block !important; color: #27425D !important; transform: none !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } /* White text and icon on hover */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > span, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element:hover:not(:disabled) .sicon-shopping-bag { color: #FFFFFF !important; } /* ========================================== MOBILE - SAME DESIGN ========================================== */ @media (max-width: 767px) { :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { margin: -84px 8px 0 !important; padding: 10px !important; gap: 7px !important; border-radius: 14px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-title { font-size: 11px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub { padding-top: 7px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-price { font-size: 14px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-price i { font-size: 13px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element { min-height: 34px !important; padding: 0 6px !important; } } /* ========================================== ACCESSIBILITY ========================================== */ @media (prefers-reduced-motion: reduce) { :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element::before, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element::after { transition: none !important; } } /* ========================================== VELARA | FIX GLASS + CART VISIBILITY Latest Abayas + Niqab Collection ========================================== */ /* Card structure */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; overflow: visible !important; border: none !important; box-shadow: none !important; } /* Keep image clipped for zoom */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-image { flex: 0 0 auto !important; overflow: hidden !important; border-radius: 18px !important; } /* Glass content */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: -92px 10px 0 !important; padding: 12px !important; gap: 8px !important; overflow: visible !important; } /* Reset inner content heights */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-main, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; } /* Ensure footer stays visible */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer { display: block !important; position: relative !important; z-index: 6 !important; width: 100% !important; margin-top: 8px !important; overflow: visible !important; } /* Salla button wrappers */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-add-product-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .w-full { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } /* Cart button */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element { display: flex !important; width: 100% !important; min-height: 38px !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* Restore button visibility */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-text, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-text > span, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .sicon-shopping-bag { opacity: 1 !important; visibility: visible !important; } /* Prevent slide clipping vertically */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-products-slider-card { height: auto !important; padding-bottom: 20px !important; } /* Mobile */ @media (max-width: 767px) { :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { margin: -84px 8px 0 !important; padding: 10px !important; } } /* ========================================== REMOVE WHITE PART UNDER GLASS CARD ========================================== */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { padding-bottom: 10px !important; /* كان بيعمل مساحة زيادة تحت */ overflow: hidden !important; /* يخفي أي جزء أبيض خارج الجلاس */ border-radius: 16px !important; } /* footer نفسه من غير أي خلفية */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer { margin-top: 8px !important; margin-bottom: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* wrappers الداخلية من غير خلفية */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .w-full, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-add-product-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-button { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* الزر نفسه */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element { margin: 0 !important; } /* لو فيه أي pseudo element عاملة الحتة البيضا */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content::before, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content::after { box-shadow: none !important; background: linear-gradient(145deg, #142738 0%, #223C53 55%, #142738 100%) !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; background: linear-gradient(145deg, #142738 0%, #223C53 55%, #142738 100%) !important; overflow: visible !important; border: none !important; box-shadow: none !important; } /* ========================================== VELARA | FULL CARD NAVY BACKGROUND Latest Abayas + Niqab Collection ========================================== */ /* Unified navy gradient */ :is(#slider-with-bg-4, #slider-with-bg-6) { --card-background: linear-gradient( 145deg, #142738 0%, #223C53 55%, #142738 100% ); } /* Entire product card */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; background: var(--card-background) !important; background-color: #142738 !important; border: none !important; border-radius: 18px !important; box-shadow: none !important; overflow: visible !important; } /* Remove white backgrounds from card wrappers */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-main, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .w-full, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-add-product-button { background: transparent !important; background-image: none !important; } /* Keep glass panel transparent */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { background: linear-gradient( 180deg, rgba(255,255,255,.34) 0%, rgba(220,220,220,.46) 100% ) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 16px !important; } /* Make image fill the card */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-image { background: transparent !important; } /* Remove unwanted lower white strip */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry::before, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry::after { content: none !important; display: none !important; } /* ========================================== VELARA | REMOVE WHITE CARD BACKGROUND Latest Abayas + Niqab ========================================== */ /* 1. Card background */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry { position: relative !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: none !important; border-radius: 18px !important; overflow: visible !important; } /* 2. Remove old white background layers */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry::before, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry::after { content: none !important; display: none !important; } /* 3. Image container */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-image { background: transparent !important; border-radius: 18px !important; overflow: hidden !important; } /* 4. Keep glass appearance */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { position: relative !important; z-index: 5 !important; margin: -92px 10px 0 !important; padding: 12px !important; background: linear-gradient( 180deg, rgba(255,255,255,.34), rgba(220,220,220,.46) ) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 16px !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 10px 25px rgba(0,0,0,.10) !important; } /* 5. Transparent internal wrappers */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-main, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .w-full, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-button, :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer salla-add-product-button { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* 6. No white slide background */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-products-slider-card { background: transparent !important; } /* 7. Mobile */ @media (max-width: 767px) { :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { margin: -84px 8px 0 !important; padding: 10px !important; } } /* ========================================== VELARA | MOBILE EQUAL PRODUCT CARDS Latest Abayas + Niqab Collection ========================================== */ @media (max-width: 767px) { /* Make slider items equal height */ :is(#slider-with-bg-4, #slider-with-bg-6) .swiper-wrapper { align-items: stretch !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-products-slider-card { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; padding: 6px 5px 14px !important; box-sizing: border-box !important; } /* Same card height */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-entry { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; } /* Identical image ratio */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-image { width: 100% !important; flex: 0 0 auto !important; aspect-ratio: 3 / 4.45 !important; height: auto !important; overflow: hidden !important; border-radius: 16px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-image > a { display: block !important; width: 100% !important; height: 100% !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-image-cover { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; } /* Glass occupies consistent space */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; flex: 1 0 auto !important; width: auto !important; height: auto !important; min-height: 112px !important; margin: -84px 8px 0 !important; padding: 10px !important; gap: 6px !important; border-radius: 14px !important; box-sizing: border-box !important; } /* Fixed title space for two lines */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-main { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-title { margin: 0 !important; font-size: 11px !important; line-height: 17px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-title a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; max-height: 34px !important; overflow: hidden !important; } /* Price always aligned */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-sub { flex: 0 0 auto !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-price { margin: 0 !important; font-size: 13px !important; line-height: 20px !important; } /* Button at the same bottom position */ :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer { flex: 0 0 auto !important; width: 100% !important; margin-top: auto !important; padding-top: 6px !important; } :is(#slider-with-bg-4, #slider-with-bg-6) .s-product-card-content-footer .s-button-element { width: 100% !important; min-height: 34px !important; height: 34px !important; font-size: 11px !important; border-radius: 10px !important; } } /* ========================================== VELARA | LATEST PRODUCTS EQUAL HEIGHT MOBILE CARDS Slider: slider-with-bg-2 ========================================== */ @media (max-width: 767px) { /* Slider layout */ #slider-with-bg-2 .swiper-wrapper { align-items: stretch !important; } /* Equal-height slides */ #slider-with-bg-2 .s-products-slider-card { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; padding: 6px 5px 12px !important; box-sizing: border-box !important; } /* Product card */ #slider-with-bg-2 .s-product-card-entry { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; border-radius: 16px !important; } /* Image container */ #slider-with-bg-2 .s-product-card-image { flex: 0 0 auto !important; width: 100% !important; aspect-ratio: 3 / 4.45 !important; height: auto !important; overflow: hidden !important; } /* Image link */ #slider-with-bg-2 .s-product-card-image > a { display: block !important; width: 100% !important; height: 100% !important; } /* Product image */ #slider-with-bg-2 .s-product-card-image-cover { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; } /* Product content */ #slider-with-bg-2 .s-product-card-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 10px !important; gap: 6px !important; background: #FFFFFF !important; box-sizing: border-box !important; } /* Fixed title area */ #slider-with-bg-2 .s-product-card-content-main { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; } /* Product title */ #slider-with-bg-2 .s-product-card-content-title { margin: 0 !important; font-size: 11px !important; line-height: 17px !important; } #slider-with-bg-2 .s-product-card-content-title a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; max-height: 34px !important; overflow: hidden !important; } /* Price section */ #slider-with-bg-2 .s-product-card-content-sub { flex: 0 0 auto !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; } #slider-with-bg-2 .s-product-card-price { margin: 0 !important; font-size: 13px !important; line-height: 20px !important; } /* Cart footer */ #slider-with-bg-2 .s-product-card-content-footer { flex: 0 0 auto !important; width: 100% !important; margin-top: auto !important; padding-top: 6px !important; } /* Cart button */ #slider-with-bg-2 .s-product-card-content-footer .s-button-element { width: 100% !important; min-height: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 11px !important; } } /* ========================================== VELARA | REMOVE CATEGORIES SECTION Component ID: 786105772 ========================================== */ section[component-id="786105772"] { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================== VELARA | LUXURY SCROLL REVEAL Latest Abayas + Niqab Collection ========================================== */ /* Only animate after JS initializes */ .velara-scroll-ready { opacity: 0; transform: translateY(45px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1) !important; } /* Section appears */ .velara-scroll-ready.velara-in-view { opacity: 1; transform: translateY(0); } /* Title & navigation initial state */ .velara-scroll-ready .s-slider-block__title { opacity: 0; translate: 0 20px; transition: opacity .8s ease, translate .9s cubic-bezier(.22,1,.36,1) !important; } /* Reveal title */ .velara-scroll-ready.velara-in-view .s-slider-block__title { opacity: 1; translate: 0 0; transition-delay: .15s !important; } /* Cards before appearing */ .velara-scroll-ready .s-products-slider-card { opacity: 0; translate: 0 35px; transition: opacity .85s ease, translate 1s cubic-bezier(.22,1,.36,1) !important; transition-delay: 0s; } /* Cards appear in sequence */ .velara-scroll-ready.velara-in-view .s-products-slider-card { opacity: 1; translate: 0 0; } /* Stagger effect */ .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(1) { transition-delay: .25s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(2) { transition-delay: .38s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(3) { transition-delay: .51s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(4) { transition-delay: .64s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(5) { transition-delay: .77s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(6) { transition-delay: .9s !important; } /* Mobile */ @media (max-width: 767px) { .velara-scroll-ready { transform: translateY(25px); } .velara-scroll-ready .s-products-slider-card { translate: 0 18px; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .velara-scroll-ready, .velara-scroll-ready .s-slider-block__title, .velara-scroll-ready .s-products-slider-card { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; } } /* ========================================== VELARA | 3 SECTIONS SCROLL REVEAL FIX ========================================== */ /* Smooth section entrance */ .velara-scroll-ready { opacity: 0; transform: translateY(35px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1) !important; } .velara-scroll-ready.velara-in-view { opacity: 1; transform: translateY(0); } /* Header entrance */ .velara-scroll-ready .s-slider-block__title { opacity: 0; translate: 0 18px; transition: opacity .8s ease, translate .9s cubic-bezier(.22,1,.36,1) !important; } .velara-scroll-ready.velara-in-view .s-slider-block__title { opacity: 1; translate: 0 0; transition-delay: .15s !important; } /* Product stagger */ .velara-scroll-ready .s-products-slider-card { opacity: 0; translate: 0 25px; transition: opacity .85s ease, translate 1s cubic-bezier(.22,1,.36,1) !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card { opacity: 1; translate: 0 0; } /* Stagger each card */ .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(1) { transition-delay: .2s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(2) { transition-delay: .32s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(3) { transition-delay: .44s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(4) { transition-delay: .56s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(5) { transition-delay: .68s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(6) { transition-delay: .8s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(7) { transition-delay: .92s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(8) { transition-delay: 1.04s !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .velara-scroll-ready, .velara-scroll-ready .s-slider-block__title, .velara-scroll-ready .s-products-slider-card { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; } } /* ========================================== VELARA | 3 SECTIONS SCROLL REVEAL FIX ========================================== */ /* Smooth section entrance */ .velara-scroll-ready { opacity: 0; transform: translateY(35px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1) !important; } .velara-scroll-ready.velara-in-view { opacity: 1; transform: translateY(0); } /* Header entrance */ .velara-scroll-ready .s-slider-block__title { opacity: 0; translate: 0 18px; transition: opacity .8s ease, translate .9s cubic-bezier(.22,1,.36,1) !important; } .velara-scroll-ready.velara-in-view .s-slider-block__title { opacity: 1; translate: 0 0; transition-delay: .15s !important; } /* Product stagger */ .velara-scroll-ready .s-products-slider-card { opacity: 0; translate: 0 25px; transition: opacity .85s ease, translate 1s cubic-bezier(.22,1,.36,1) !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card { opacity: 1; translate: 0 0; } /* Stagger each card */ .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(1) { transition-delay: .2s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(2) { transition-delay: .32s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(3) { transition-delay: .44s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(4) { transition-delay: .56s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(5) { transition-delay: .68s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(6) { transition-delay: .8s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(7) { transition-delay: .92s !important; } .velara-scroll-ready.velara-in-view .s-products-slider-card:nth-child(8) { transition-delay: 1.04s !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .velara-scroll-ready, .velara-scroll-ready .s-slider-block__title, .velara-scroll-ready .s-products-slider-card { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; } } /* ========================================== VELARA | SAFE SCROLL REVEAL ANIMATION All 3 Product Sections ========================================== */ /* Products remain visible by default */ :is( #slider-with-bg-2, #slider-with-bg-4, #slider-with-bg-6 ) .s-products-slider-card { opacity: 1; visibility: visible; } /* Animate only after section enters viewport */ .velara-reveal-active .s-slider-block__title { animation: velaraTitleReveal .8s cubic-bezier(.22,1,.36,1) both; } .velara-reveal-active .s-products-slider-card { animation: velaraCardReveal .85s cubic-bezier(.22,1,.36,1) both; } /* Stagger cards */ .velara-reveal-active .s-products-slider-card:nth-child(1) { animation-delay: .12s; } .velara-reveal-active .s-products-slider-card:nth-child(2) { animation-delay: .22s; } .velara-reveal-active .s-products-slider-card:nth-child(3) { animation-delay: .32s; } .velara-reveal-active .s-products-slider-card:nth-child(4) { animation-delay: .42s; } .velara-reveal-active .s-products-slider-card:nth-child(5) { animation-delay: .52s; } .velara-reveal-active .s-products-slider-card:nth-child(6) { animation-delay: .62s; } .velara-reveal-active .s-products-slider-card:nth-child(7) { animation-delay: .72s; } .velara-reveal-active .s-products-slider-card:nth-child(8) { animation-delay: .82s; } /* Section title animation */ @keyframes velaraTitleReveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } } /* Product card animation */ @keyframes velaraCardReveal { from { opacity: 0; translate: 0 35px; } to { opacity: 1; translate: 0 0; } } /* Mobile */ @media (max-width: 767px) { @keyframes velaraCardReveal { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .velara-reveal-active .s-slider-block__title, .velara-reveal-active .s-products-slider-card { animation: none !important; opacity: 1 !important; translate: none !important; } } .bg-inherit { margin: 0 72px; padding: 0; border-radius: 13px; background: linear-gradient(135deg, #1B303C 0%, #20394D 45%, #27425D 100%) !important; color: var(--velara-white); } @media (min-width: 1024px) { .store-header #mainnav .main-menu > li.root-level > a { background: #74721300 !important; color: #FFFFFF !important; transition: all 0.3s ease; } } /* ========================================== VELARA | PREMIUM HEADER DESIGN ========================================== */ :root { --velara-navy: #27425D; --velara-dark: #142738; --velara-gold: #D4AF70; --velara-white: #FFFFFF; } /* Main header */ header .inner.bg-inherit { background: linear-gradient( 135deg, #142738 0%, #223C53 55%, #142738 100% ) !important; border-bottom: 1px solid rgba(212,175,112,.25); box-shadow: 0 6px 25px rgba(0,0,0,.12); } /* Header layout */ header .inner.bg-inherit > .container > .flex.items-stretch { min-height: 82px; align-items: center !important; gap: 22px; } /* Logo */ header .navbar-brand { display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; padding: 5px 0; transition: transform .4s ease; } header .navbar-brand:hover { transform: scale(1.04); } header .navbar-brand img { display: block; width: auto !important; max-width: 135px !important; max-height: 65px !important; height: auto !important; object-fit: contain; } /* Navigation */ @media (min-width: 1024px) { header custom-main-menu .main-menu { display: flex; align-items: center; gap: 28px; } header custom-main-menu .main-menu > li.root-level > a { position: relative; display: inline-flex; align-items: center; padding: 15px 3px; color: #fff !important; font-size: 14px; font-weight: 600; transition: color .3s ease; } header custom-main-menu .main-menu > li.root-level > a::after { content: ""; position: absolute; bottom: 7px; right: 0; width: 0; height: 2px; background: var(--velara-gold); transition: width .35s ease; } header custom-main-menu .main-menu > li.root-level:hover > a { color: var(--velara-gold) !important; } header custom-main-menu .main-menu > li.root-level:hover > a::after { width: 100%; } /* Dropdown */ header custom-main-menu .sub-menu { background: #fff !important; border: 1px solid rgba(39,66,93,.1); border-radius: 14px; padding: 8px; box-shadow: 0 15px 35px rgba(0,0,0,.15); } header custom-main-menu .sub-menu li a { display: block; padding: 11px 13px; border-radius: 8px; color: var(--velara-navy) !important; font-size: 13px; transition: color .3s ease, background .3s ease; } header custom-main-menu .sub-menu li a:hover { background: rgba(39,66,93,.08); color: #142738 !important; } } /* User and cart icons */ header .s-user-menu-login-btn, header .s-cart-summary-wrapper { color: #fff !important; } header .s-user-menu-login-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.09); transition: background .3s ease, transform .3s ease; } header .s-user-menu-login-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); } header .s-user-menu-login-btn svg { width: 23px; height: 23px; fill: currentColor; } /* Cart */ header .s-cart-summary-wrapper { display: flex; align-items: center; gap: 6px; } header .s-cart-summary-wrapper .s-cart-summary-icon, header .s-cart-summary-wrapper .header-btn__icon { color: #fff !important; font-size: 23px; } header .s-cart-summary-count { background: var(--velara-gold) !important; color: var(--velara-dark) !important; border-radius: 50%; font-size: 10px; font-weight: 700; } /* Cart total */ header .s-cart-summary-total { color: #fff !important; } /* ========================================== MOBILE HEADER ========================================== */ @media (max-width: 1023px) { header .inner.bg-inherit > .container > .flex.items-stretch { min-height: 66px; gap: 10px; } header .navbar-brand img { max-width: 100px !important; max-height: 48px !important; } /* Mobile menu icon */ header [data-testid="store-header-mobile-toggle"] { display: inline-flex; align-items: center; justify-content: center; color: #fff !important; margin-inline-end: 10px; transition: transform .3s ease; } header [data-testid="store-header-mobile-toggle"] i { color: #fff !important; font-size: 23px; } header .s-user-menu-login-btn { width: 35px; height: 35px; } header .s-user-menu-login-btn svg { width: 21px; height: 21px; } header .s-cart-summary-wrapper .header-btn__icon { font-size: 21px; } header .s-cart-summary-content { display: none; } /* Mobile menu panel */ header #mobile-menu { background: #fff; color: var(--velara-navy); } header #mobile-menu .main-menu li a { color: var(--velara-navy) !important; } } /* Very small phones */ @media (max-width: 375px) { header .navbar-brand img { max-width: 82px !important; } header .inner.bg-inherit > .container { padding-inline: 10px; } header .s-cart-summary-wrapper { gap: 3px; } } /* ============================================ VELARA | PREMIUM LUXURY FOOTER Navy Glass + Smooth Motion ============================================ */ .store-footer__inner { --vf-dark: #142738; --vf-navy: #223C53; --vf-gold: #D4AF70; --vf-white: #FFFFFF; position: relative !important; isolation: isolate; overflow: hidden; background: linear-gradient( 145deg, #142738 0%, #223C53 52%, #142738 100% ) !important; color: rgba(255,255,255,.82) !important; padding: 75px 0 65px !important; border-top: 1px solid rgba(212,175,112,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 -12px 35px rgba(0,0,0,.06); } /* Soft decorative lighting */ .store-footer__inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 420px; height: 420px; top: -220px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(212,175,112,.09), transparent 70% ); animation: vfGlow 12s ease-in-out infinite alternate; } .store-footer__inner::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 460px; height: 460px; bottom: -280px; left: -180px; border-radius: 50%; background: radial-gradient( circle, rgba(255,255,255,.065), transparent 72% ); animation: vfGlow 15s ease-in-out infinite alternate-reverse; } @keyframes vfGlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(35px,-20px,0) scale(1.1); } } /* Layout */ .store-footer__inner > .container { position: relative; z-index: 1; align-items: start; row-gap: 38px !important; } /* ============================================ BRAND NAME ============================================ */ .store-footer__inner a:has(> h3) { display: inline-flex !important; align-items: center; width: fit-content; text-decoration: none !important; margin-bottom: 18px !important; } .store-footer__inner a:has(> h3) > h3 { position: relative; display: inline-block; margin: 0 !important; font-size: clamp(30px, 3vw, 43px) !important; font-weight: 700 !important; letter-spacing: 4px; line-height: 1.35; color: #FFFFFF !important; text-transform: uppercase; transition: color .4s ease, letter-spacing .5s ease; } /* Elegant underline */ .store-footer__inner a:has(> h3) > h3::after { content: ""; position: absolute; right: 0; bottom: -7px; width: 48%; height: 2px; background: linear-gradient( 90deg, transparent, #D4AF70 ); transition: width .55s ease; } .store-footer__inner a:has(> h3):hover > h3 { color: #F1E8D8 !important; letter-spacing: 5px; } .store-footer__inner a:has(> h3):hover > h3::after { width: 100%; } /* Description */ .store-footer__inner .max-w-sm.leading-6 { max-width: 400px !important; margin-top: 12px; margin-bottom: 24px !important; } .store-footer__inner .max-w-sm.leading-6 p { margin: 0 !important; font-size: 13.5px; font-weight: 400; line-height: 2.15 !important; color: rgba(255,255,255,.75) !important; } .store-footer__inner .max-w-sm.leading-6 strong { color: #FFFFFF !important; font-weight: 700; } /* ============================================ SECTION HEADINGS ============================================ */ .store-footer__inner > .container > div > h3, .store-footer__inner .s-contacts-title { position: relative; display: inline-block; width: fit-content; margin: 0 0 27px !important; padding-bottom: 12px; color: #FFFFFF !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .2px; } /* Gold title underline */ .store-footer__inner > .container > div > h3::after, .store-footer__inner .s-contacts-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 2px; border-radius: 8px; background: var(--vf-gold); transition: width .45s cubic-bezier(.22,1,.36,1); } .store-footer__inner > .container > div:hover > h3::after, .store-footer__inner salla-contacts:hover .s-contacts-title::after { width: 65px; } /* ============================================ FOOTER LINKS ============================================ */ .store-footer__inner .s-menu-footer-list { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 5px !important; } .store-footer__inner .s-menu-footer-item { position: relative; display: inline-flex !important; align-items: center; max-width: 100%; padding: 9px 0 !important; color: rgba(255,255,255,.74) !important; text-decoration: none !important; font-size: 13px !important; line-height: 1.7; transition: color .35s ease, padding .4s cubic-bezier(.22,1,.36,1); } .store-footer__inner .s-menu-footer-item::before { content: "←"; display: inline-block; width: 0; opacity: 0; color: var(--vf-gold); font-size: 17px; line-height: 1; overflow: hidden; transition: width .35s ease, opacity .35s ease; } .store-footer__inner .s-menu-footer-item:hover { color: #FFFFFF !important; padding-right: 10px !important; } .store-footer__inner .s-menu-footer-item:hover::before { width: 21px; opacity: 1; } /* ============================================ CONTACT CARD ============================================ */ .store-footer__inner .s-contacts-list { display: flex !important; flex-direction: column !important; gap: 12px !important; } .store-footer__inner .s-contacts-item { position: relative; display: flex !important; align-items: center; width: fit-content; max-width: 100%; gap: 12px; padding: 12px 16px !important; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.045); color: #FFFFFF !important; text-decoration: none !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .4s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease, box-shadow .35s ease; } .store-footer__inner .s-contacts-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(212,175,112,.45); box-shadow: 0 12px 25px rgba(0,0,0,.14); } .store-footer__inner .s-contacts-icon { width: 35px; height: 35px; flex: 0 0 35px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(212,175,112,.13); color: #E9D2A8 !important; } .store-footer__inner .s-contacts-icon svg { width: 19px !important; height: 19px !important; fill: currentColor; } .store-footer__inner .s-contacts-item .unicode { color: #FFFFFF !important; font-size: 13px !important; font-weight: 600; direction: ltr; unicode-bidi: isolate; } /* ============================================ TRUST BADGE GLASS CARD ============================================ */ .store-footer__inner .s-trust-badges-wrapper { display: flex !important; align-items: center; max-width: 100%; gap: 12px; padding: 12px 16px !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease; } .store-footer__inner .s-trust-badges-wrapper:hover { transform: translateY(-4px); border-color: rgba(212,175,112,.45); box-shadow: 0 14px 30px rgba(0,0,0,.16); } .store-footer__inner .s-trust-badges-image { width: 52px !important; height: 52px !important; object-fit: contain; flex-shrink: 0; } .store-footer__inner .s-trust-badges-content { min-width: 0; } .store-footer__inner .s-trust-badges-label { margin-bottom: 4px !important; color: rgba(255,255,255,.75) !important; font-size: 12px !important; } .store-footer__inner .s-trust-badges-number { display: block; color: #FFFFFF !important; font-size: 12px !important; font-weight: 600; overflow-wrap: anywhere; } /* ============================================ SOCIAL ICONS ============================================ */ .store-footer__inner .s-social-list { display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px !important; } .store-footer__inner .s-social-list a { display: flex !important; align-items: center; justify-content: center; width: 39px !important; height: 39px !important; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: rgba(255,255,255,.07); color: #FFFFFF !important; transition: transform .35s ease, background .35s ease, border-color .35s ease; } .store-footer__inner .s-social-list a:hover { transform: translateY(-4px) rotate(5deg); background: rgba(212,175,112,.2); border-color: rgba(212,175,112,.6); } /* ============================================ OPTIONAL APP ICON AREA ============================================ */ .store-footer__inner salla-apps-icons { min-width: 0; } .store-footer__inner salla-apps-icons img { max-width: 100%; height: auto; } /* ============================================ SCROLL ENTRANCE ANIMATION Safe: content never permanently hidden ============================================ */ @keyframes vfFooterReveal { from { opacity: .15; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .store-footer__inner.vf-in-view > .container > div, .store-footer__inner.vf-in-view > .container > salla-apps-icons { animation: vfFooterReveal .85s cubic-bezier(.22,1,.36,1) both; } .store-footer__inner.vf-in-view > .container > :nth-child(1) { animation-delay: .08s; } .store-footer__inner.vf-in-view > .container > :nth-child(2) { animation-delay: .2s; } .store-footer__inner.vf-in-view > .container > :nth-child(3) { animation-delay: .32s; } .store-footer__inner.vf-in-view > .container > :nth-child(4) { animation-delay: .44s; } /* ============================================ MOBILE ============================================ */ @media (max-width: 767px) { .store-footer__inner { padding: 48px 0 42px !important; } .store-footer__inner > .container { row-gap: 26px !important; } .store-footer__inner a:has(> h3) > h3 { font-size: 32px !important; letter-spacing: 3px; } .store-footer__inner .max-w-sm.leading-6 p { font-size: 12.5px; line-height: 2 !important; } .store-footer__inner > .container > div > h3, .store-footer__inner .s-contacts-title { font-size: 15px !important; margin-bottom: 18px !important; } .store-footer__inner .s-menu-footer-item { font-size: 12.5px !important; padding: 7px 0 !important; } .store-footer__inner .s-contacts-item { width: 100%; padding: 11px 13px !important; } .store-footer__inner .s-trust-badges-wrapper { width: 100%; } .store-footer__inner .s-trust-badges-number { font-size: 11px !important; } } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { .store-footer__inner::before, .store-footer__inner::after { animation: none !important; } .store-footer__inner.vf-in-view > .container > div, .store-footer__inner.vf-in-view > .container > salla-apps-icons { animation: none !important; } .store-footer__inner * { scroll-behavior: auto !important; } } /* ========================================== VELARA | PREMIUM PRODUCT DETAILS ========================================== */ .container--product-details { --vp-navy: #27425D; --vp-dark: #142738; --vp-gold: #D4AF70; --vp-glass: rgba(255,255,255,.78); padding-top: 35px !important; padding-bottom: 55px !important; } /* Product gallery */ .container--product-details .sidebar { border-radius: 22px; } .container--product-details .details-slider { overflow: hidden; border-radius: 20px !important; background: #f4f5f6; } .container--product-details .details-slider .homeslider__slide { overflow: hidden; border-radius: 18px; } .container--product-details .details-slider .homeslider__slide img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); } @media (hover: hover) { .container--product-details .details-slider .homeslider__slide:hover img { transform: scale(1.035); } } /* Gallery thumbnails */ .container--product-details .s-slider-thumbs { margin-top: 14px; } .container--product-details .s-slider-thumbs .swiper-slide { overflow: hidden; border-radius: 12px !important; border: 2px solid transparent; opacity: .68; cursor: pointer; transition: opacity .35s ease, border-color .35s ease, transform .35s ease; } .container--product-details .s-slider-thumbs .swiper-slide:hover { opacity: 1; transform: translateY(-3px); } .container--product-details .s-slider-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--vp-navy); } /* Main information */ .container--product-details .main-content { min-width: 0; } /* Product title */ .container--product-details [data-testid="store-product-title"] { color: var(--vp-dark) !important; font-size: clamp(23px,2.2vw,31px) !important; font-weight: 800 !important; line-height: 1.7 !important; margin-bottom: 16px !important; } /* Main price */ .container--product-details [data-testid="store-product-price"] { margin-bottom: 22px; padding: 14px 18px; background: linear-gradient( 135deg, rgba(39,66,93,.07), rgba(39,66,93,.025) ); border: 1px solid rgba(39,66,93,.1); border-radius: 14px; } .container--product-details [data-testid="store-product-price"] p { color: var(--vp-navy) !important; font-size: 25px !important; font-weight: 800 !important; } /* Product description */ .container--product-details .product__description { color: #425366 !important; padding: 8px 0 !important; line-height: 2 !important; } /* Share and wishlist */ .container--product-details .s-social-share-btn .s-button-element, .container--product-details .btn--wishlist.s-button-element { border-radius: 12px !important; border: 1px solid rgba(39,66,93,.16) !important; background: #fff !important; color: var(--vp-navy) !important; transition: background .35s ease, color .35s ease, transform .35s ease !important; } .container--product-details .s-social-share-btn .s-button-element:hover, .container--product-details .btn--wishlist.s-button-element:hover { background: var(--vp-navy) !important; color: #fff !important; transform: translateY(-3px); } /* ========================================== PRODUCT OPTIONS ========================================== */ .container--product-details .s-product-options-option-container { margin-bottom: 17px; } .container--product-details .s-product-options-option-label { display: flex; align-items: center; gap: 7px; margin-bottom: 10px !important; color: var(--vp-dark) !important; font-weight: 700 !important; } .container--product-details .s-product-options-option-label small { color: #7c8b9b; } .container--product-details .s-product-options-option-content select, .container--product-details .s-product-options-option-content .s-form-control { width: 100%; min-height: 50px; padding: 10px 15px; border: 1px solid rgba(39,66,93,.19) !important; border-radius: 12px !important; background-color: #fff !important; color: var(--vp-navy) !important; font-weight: 600; transition: border-color .3s ease, box-shadow .3s ease; } .container--product-details .s-product-options-option-content .s-form-control:focus { outline: none !important; border-color: var(--vp-navy) !important; box-shadow: 0 0 0 3px rgba(39,66,93,.09) !important; } /* ========================================== PRICE + QUANTITY PANELS ========================================== */ .container--product-details .product-form > section { border-radius: 14px !important; } .container--product-details .product-form > section.flex.bg-white, .container--product-details .sticky-product-bar { background: #f8fafb !important; border: 1px solid rgba(39,66,93,.09); } /* Join price and cart sections visually */ .container--product-details .product-form > section.flex.bg-white { border-radius: 15px 15px 0 0 !important; border-bottom: 0; } .container--product-details .sticky-product-bar { border-radius: 0 0 15px 15px !important; border-top: 0; } /* Price label */ .container--product-details .form-label { color: var(--vp-dark) !important; font-weight: 700 !important; } .container--product-details .total-price { color: var(--vp-navy) !important; font-weight: 800 !important; } /* Quantity */ .container--product-details .s-quantity-input-container { display: flex; align-items: center; border: 1px solid rgba(39,66,93,.17) !important; border-radius: 12px !important; overflow: hidden; background: #fff; } .container--product-details .s-quantity-input-button { background: #edf1f5 !important; color: var(--vp-navy) !important; transition: background .3s ease; } .container--product-details .s-quantity-input-button:hover { background: #dce5ec !important; } .container--product-details .s-quantity-input-input { color: var(--vp-dark) !important; font-weight: 800 !important; text-align: center; } /* ========================================== ADD TO CART BUTTON ========================================== */ .container--product-details [data-testid="store-product-add-to-cart"] .s-button-element.s-button-solid { position: relative; min-height: 51px; background: var(--vp-navy) !important; color: #fff !important; border: 1px solid var(--vp-navy) !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 15px !important; box-shadow: 0 7px 18px rgba(39,66,93,.14); transition: background .35s ease, box-shadow .35s ease, transform .35s ease !important; } @media (hover: hover) { .container--product-details [data-testid="store-product-add-to-cart"] .s-button-element.s-button-solid:hover { background: var(--vp-dark) !important; box-shadow: 0 11px 24px rgba(39,66,93,.23); transform: translateY(-2px); } } /* Keep fast-checkout and Apple Pay untouched */ .container--product-details .s-add-product-button-mini-checkout, .container--product-details salla-quick-buy { max-width: 100%; } /* ========================================== SAFE PAGE ENTRY ANIMATION ========================================== */ @keyframes velaraProductEnter { from { opacity: .35; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .container--product-details .sidebar { animation: velaraProductEnter .85s cubic-bezier(.22,1,.36,1) both; } .container--product-details .main-content { animation: velaraProductEnter .9s cubic-bezier(.22,1,.36,1) .12s both; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .container--product-details { padding-top: 15px !important; padding-bottom: 30px !important; } .container--product-details .sidebar { margin-bottom: 25px !important; border-radius: 15px; } .container--product-details .details-slider { border-radius: 15px !important; } .container--product-details [data-testid="store-product-title"] { font-size: 21px !important; line-height: 1.65 !important; margin-bottom: 12px !important; } .container--product-details [data-testid="store-product-price"] { padding: 11px 13px; margin-bottom: 15px; } .container--product-details [data-testid="store-product-price"] p { font-size: 21px !important; } .container--product-details .product-form > section.flex.bg-white, .container--product-details .sticky-product-bar { padding: 15px !important; } .container--product-details .s-slider-thumbs .swiper-slide { border-radius: 9px !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .container--product-details .sidebar, .container--product-details .main-content { animation: none !important; } } /* ============================================ VELARA | SIGNATURE PRODUCT PAGE Premium Navy Luxury Design ============================================ */ .container--product-details { --v-navy: #27425D; --v-dark: #142738; --v-blue: #223C53; --v-gold: #D4AF70; position: relative; isolation: isolate; max-width: 1400px !important; padding: 38px 24px 65px !important; } /* Soft page atmosphere */ .container--product-details::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0; background: radial-gradient( circle at 90% 5%, rgba(39,66,93,.09), transparent 38% ), radial-gradient( circle at 5% 85%, rgba(212,175,112,.07), transparent 40% ); border-radius: 28px; } /* Main 2-column layout */ .container--product-details > .flex.flex-col.items-start { align-items: flex-start !important; gap: 35px; } /* ============================================ IMAGE GALLERY ============================================ */ .container--product-details .sidebar { margin: 0 !important; min-width: 0; padding: 14px; background: #FFFFFF; border: 1px solid rgba(39,66,93,.1); border-radius: 24px; box-shadow: 0 18px 55px rgba(20,39,56,.09), inset 0 1px 0 rgba(255,255,255,.9); } /* Large product image */ .container--product-details .details-slider { overflow: hidden; border-radius: 17px !important; background: #F5F6F7; } /* Image corners */ .container--product-details .details-slider .homeslider__slide { overflow: hidden; border-radius: 15px; } /* Smooth image interaction */ .container--product-details .details-slider .homeslider__slide img { display: block; width: 100% !important; height: auto; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); } @media (hover: hover) { .container--product-details .details-slider .homeslider__slide:hover img { transform: scale(1.035); } } /* Wishlist floating button */ .container--product-details .details-slider .btn--wishlist.s-button-element { background: rgba(255,255,255,.88) !important; color: var(--v-navy) !important; border: 1px solid rgba(255,255,255,.75) !important; border-radius: 50% !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Thumbnails */ .container--product-details .s-slider-thumbs { margin-top: 15px; } .container--product-details .s-slider-thumbs .swiper-slide { border: 2px solid transparent; border-radius: 12px !important; overflow: hidden; opacity: .75; cursor: pointer; transition: border-color .3s ease, opacity .3s ease, transform .3s ease; } .container--product-details .s-slider-thumbs .swiper-slide:hover { opacity: 1; transform: translateY(-3px); } .container--product-details .s-slider-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--v-navy); } /* ============================================ PRODUCT INFORMATION PANEL ============================================ */ .container--product-details .main-content { position: relative; min-width: 0; padding: 30px 28px 35px !important; background: linear-gradient( 155deg, #FFFFFF 0%, #F8FAFC 100% ); border: 1px solid rgba(39,66,93,.12); border-radius: 24px; box-shadow: 0 18px 55px rgba(20,39,56,.065); } /* Luxury top detail */ .container--product-details .main-content::before { content: ""; position: absolute; top: 0; right: 32px; width: 85px; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient( 90deg, transparent, var(--v-gold), transparent ); } /* Product name */ .container--product-details [data-testid="store-product-title"] { color: var(--v-dark) !important; font-size: clamp(23px,2.1vw,30px) !important; font-weight: 800 !important; line-height: 1.65 !important; margin-bottom: 22px !important; } /* ============================================ PREMIUM PRICE STRIP ============================================ */ .container--product-details [data-testid="store-product-price"] { position: relative; display: flex !important; align-items: center; min-height: 76px; padding: 16px 22px !important; margin-bottom: 24px; background: linear-gradient( 135deg, #142738 0%, #27425D 100% ) !important; border-radius: 16px; border: 1px solid rgba(212,175,112,.2); box-shadow: 0 10px 22px rgba(20,39,56,.14), inset 0 1px 0 rgba(255,255,255,.08); } /* Price text */ .container--product-details [data-testid="store-product-price"] p, .container--product-details [data-testid="store-product-price"] i { color: #FFFFFF !important; font-size: 27px !important; font-weight: 800 !important; } /* Decorative vertical gold line */ .container--product-details [data-testid="store-product-price"]::before { content: ""; position: absolute; right: 0; top: 20%; width: 3px; height: 60%; background: var(--v-gold); border-radius: 3px; } /* ============================================ DESCRIPTION + SHARE ============================================ */ .container--product-details .product__description { padding: 8px 0 !important; color: #4F6070 !important; line-height: 2 !important; } /* Social / wishlist controls */ .container--product-details .main-content .s-social-share-btn.s-button-element, .container--product-details .main-content .btn--wishlist.s-button-element { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; background: #FFFFFF !important; color: var(--v-navy) !important; border: 1px solid rgba(39,66,93,.17) !important; border-radius: 12px !important; transition: background .35s ease, color .35s ease, transform .35s ease; } .container--product-details .main-content .s-social-share-btn.s-button-element:hover, .container--product-details .main-content .btn--wishlist.s-button-element:hover { background: var(--v-navy) !important; color: #FFFFFF !important; transform: translateY(-3px); } /* ============================================ PRODUCT OPTIONS ============================================ */ .container--product-details .s-product-options-option-container { padding: 15px 17px; margin-bottom: 18px; background: #FFFFFF; border: 1px solid rgba(39,66,93,.1); border-radius: 15px; } .container--product-details .s-product-options-option-label { margin-bottom: 12px !important; color: var(--v-dark) !important; font-weight: 700 !important; } .container--product-details .s-product-options-option-content .s-form-control { min-height: 50px; background: #F8FAFC !important; color: var(--v-navy) !important; border: 1px solid rgba(39,66,93,.17) !important; border-radius: 11px !important; padding: 11px 15px !important; transition: border-color .3s ease, box-shadow .3s ease; } .container--product-details .s-product-options-option-content .s-form-control:focus { border-color: var(--v-navy) !important; box-shadow: 0 0 0 3px rgba(39,66,93,.09) !important; outline: none !important; } /* ============================================ PURCHASE PANEL ============================================ */ /* Main purchase box */ .container--product-details .product-form > section.flex.bg-white, .container--product-details .sticky-product-bar { background: #F3F6F9 !important; border-left: 1px solid rgba(39,66,93,.12); border-right: 1px solid rgba(39,66,93,.12); } /* Top part */ .container--product-details .product-form > section.flex.bg-white { border-top: 1px solid rgba(39,66,93,.12); border-radius: 16px 16px 0 0 !important; padding: 20px 22px !important; } /* Bottom part */ .container--product-details .sticky-product-bar { border-bottom: 1px solid rgba(39,66,93,.12); border-radius: 0 0 16px 16px !important; padding: 0 22px 22px !important; } /* Labels */ .container--product-details .form-label { color: var(--v-dark) !important; font-weight: 700 !important; } /* Total */ .container--product-details .total-price { color: var(--v-navy) !important; font-size: 22px !important; font-weight: 800 !important; } /* Quantity control */ .container--product-details .s-quantity-input-container { display: flex; align-items: center; border: 1px solid rgba(39,66,93,.2) !important; border-radius: 11px !important; background: #FFFFFF; overflow: hidden; } .container--product-details .s-quantity-input-button { background: #E7EDF3 !important; color: var(--v-navy) !important; transition: background .3s ease; } .container--product-details .s-quantity-input-button:hover { background: #D9E4ED !important; } .container--product-details .s-quantity-input-input { color: var(--v-dark) !important; font-weight: 800 !important; text-align: center; } /* ============================================ ADD TO CART BUTTON ============================================ */ .container--product-details .sticky-product-bar .s-button-element.s-button-solid { min-height: 52px; background: linear-gradient( 135deg, #27425D, #142738 ) !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: 0 8px 18px rgba(39,66,93,.18); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease !important; } @media (hover: hover) { .container--product-details .sticky-product-bar .s-button-element.s-button-solid:hover { transform: translateY(-3px); filter: brightness(1.15); box-shadow: 0 13px 25px rgba(39,66,93,.25); } } /* Keep payment widgets functional */ .container--product-details salla-mini-checkout-widget, .container--product-details salla-quick-buy { max-width: 100%; } /* ============================================ SMOOTH PAGE ANIMATION ============================================ */ @keyframes velaraDetailsReveal { from { opacity: .25; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } .container--product-details .sidebar { animation: velaraDetailsReveal .9s cubic-bezier(.22,1,.36,1) both; } .container--product-details .main-content { animation: velaraDetailsReveal 1s cubic-bezier(.22,1,.36,1) .12s both; } /* ============================================ MOBILE RESPONSIVE ============================================ */ @media (max-width: 767px) { .container--product-details { padding: 14px 12px 35px !important; } .container--product-details > .flex.flex-col.items-start { gap: 18px; } .container--product-details .sidebar { padding: 9px; border-radius: 16px; } .container--product-details .details-slider { border-radius: 12px !important; } .container--product-details .main-content { padding: 22px 17px 25px !important; border-radius: 17px; } .container--product-details [data-testid="store-product-title"] { font-size: 21px !important; margin-bottom: 16px !important; } .container--product-details [data-testid="store-product-price"] { min-height: 65px; padding: 13px 17px !important; margin-bottom: 17px; } .container--product-details [data-testid="store-product-price"] p { font-size: 22px !important; } .container--product-details .product-form > section.flex.bg-white { padding: 16px !important; } .container--product-details .sticky-product-bar { padding: 0 16px 16px !important; } .container--product-details .s-product-options-option-container { padding: 13px; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .container--product-details .sidebar, .container--product-details .main-content { animation: none !important; } } /* ========================================== VELARA | GLOBAL LUXURY PRODUCT CARDS All Product Lists, Categories and Sliders ========================================== */ :root { --vg-navy: #27425D; --vg-dark: #142738; --vg-blue: #223C53; --vg-white: #FFFFFF; --vg-ease: cubic-bezier(.22, 1, .36, 1); } /* ========================================== 1. PRODUCT CARD ========================================== */ custom-salla-product-card.s-product-card-entry { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; outline: none !important; border-radius: 18px !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } /* Remove old decorative layers */ custom-salla-product-card.s-product-card-entry::before, custom-salla-product-card.s-product-card-entry::after { content: none !important; display: none !important; } /* ========================================== 2. PRODUCT IMAGE ========================================== */ custom-salla-product-card .s-product-card-image { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 100% !important; aspect-ratio: 3 / 4.45 !important; height: auto !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 18px !important; overflow: hidden !important; } custom-salla-product-card .s-product-card-image > a { display: block !important; width: 100% !important; height: 100% !important; overflow: hidden !important; border-radius: inherit !important; } custom-salla-product-card .s-product-card-image-cover { display: block !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: center !important; transform: scale(1) !important; transform-origin: center !important; transition: transform 1.1s var(--vg-ease) !important; backface-visibility: hidden; } @media (hover: hover) { custom-salla-product-card .s-product-card-image:hover .s-product-card-image-cover { transform: scale(1.08) !important; } } /* ========================================== 3. FROSTED GLASS CONTENT ========================================== */ custom-salla-product-card .s-product-card-content { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: -92px 10px 0 !important; padding: 12px !important; gap: 8px !important; background: linear-gradient( 180deg, rgba(255,255,255,.34) 0%, rgba(220,220,220,.46) 100% ) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 16px !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 10px 25px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45) !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; } /* Remove unwanted inner backgrounds */ custom-salla-product-card .s-product-card-content-main, custom-salla-product-card .s-product-card-content-sub, custom-salla-product-card .s-product-card-content-footer { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* ========================================== 4. PRODUCT NAME ========================================== */ custom-salla-product-card .s-product-card-content-main { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 43px !important; } custom-salla-product-card .s-product-card-content-title { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.65 !important; text-align: right !important; } custom-salla-product-card .s-product-card-content-title a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; color: #FFFFFF !important; text-decoration: none !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } /* ========================================== 5. CLEAN NAVY PRICE ========================================== */ custom-salla-product-card .s-product-card-content-sub { flex: 0 0 auto !important; min-height: 24px !important; padding-top: 8px !important; } custom-salla-product-card .s-product-card-price, custom-salla-product-card .s-product-card-price i, custom-salla-product-card .s-product-card-price span { background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--vg-navy) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.5 !important; text-align: right !important; text-shadow: none !important; } custom-salla-product-card .s-product-card-price { margin: 0 !important; padding: 0 !important; } /* ========================================== 6. CART FOOTER ========================================== */ custom-salla-product-card .s-product-card-content-footer { position: relative !important; z-index: 6 !important; display: block !important; flex: 0 0 auto !important; width: 100% !important; margin-top: 10px !important; background: transparent !important; } custom-salla-product-card .s-product-card-content-footer salla-add-product-button, custom-salla-product-card .s-product-card-content-footer salla-button, custom-salla-product-card .s-product-card-content-footer .w-full { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ========================================== 7. PREMIUM ADD TO CART BUTTON ========================================== */ custom-salla-product-card .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 38px !important; padding: 0 10px !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid var(--vg-navy) !important; border-radius: 12px !important; color: var(--vg-navy) !important; font-weight: 600 !important; overflow: hidden !important; cursor: pointer; transform: none !important; box-shadow: none !important; animation: none !important; transition: box-shadow .6s ease !important; } /* Animated navy layers */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before, custom-salla-product-card .s-product-card-content-footer .s-button-element::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 50.5% !important; height: 100% !important; background: var(--vg-navy) !important; border: none !important; border-radius: 0 !important; z-index: 0 !important; pointer-events: none !important; transition: transform .9s var(--vg-ease) !important; } /* Right layer */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before { right: 0 !important; left: auto !important; transform: translateX(102%) !important; } /* Left layer */ custom-salla-product-card .s-product-card-content-footer .s-button-element::after { left: 0 !important; right: auto !important; transform: translateX(-102%) !important; } /* Dual-side hover */ @media (hover: hover) { custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled)::before, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled)::after { transform: translateX(0) !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) { background: #FFFFFF !important; box-shadow: 0 8px 20px rgba(39,66,93,.16) !important; } } /* Text and icon */ custom-salla-product-card .s-product-card-content-footer .s-button-element .s-button-text { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; color: var(--vg-navy) !important; opacity: 1 !important; visibility: visible !important; transition: color .55s ease .12s !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element .sicon-shopping-bag { position: static !important; z-index: 2 !important; color: var(--vg-navy) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: color .55s ease .12s !important; } /* White text on hover */ @media (hover: hover) { custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .sicon-shopping-bag { color: #FFFFFF !important; } } /* ========================================== 8. WISHLIST HEART ========================================== */ custom-salla-product-card .s-product-card-wishlist-btn.s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,.75) !important; border: 1px solid rgba(255,255,255,.5) !important; border-radius: 50% !important; color: var(--vg-navy) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .5s ease, border-color .5s ease, transform .5s var(--vg-ease) !important; } custom-salla-product-card .s-product-card-wishlist-btn .sicon-heart { color: var(--vg-navy) !important; transition: color .5s ease !important; } custom-salla-product-card .s-product-card-wishlist-btn.s-button-element:hover, custom-salla-product-card .s-product-card-wishlist-btn.s-button-element.added, custom-salla-product-card .s-product-card-wishlist-btn.s-button-element.favorited { background: var(--vg-navy) !important; border-color: var(--vg-navy) !important; color: #FFFFFF !important; } custom-salla-product-card .s-product-card-wishlist-btn.s-button-element:hover .sicon-heart, custom-salla-product-card .s-product-card-wishlist-btn.s-button-element.added .sicon-heart, custom-salla-product-card .s-product-card-wishlist-btn.s-button-element.favorited .sicon-heart { color: #FFFFFF !important; } @media (hover: hover) { custom-salla-product-card .s-product-card-wishlist-btn.s-button-element:hover { transform: scale(1.08) !important; } } /* ========================================== 9. GLOBAL PRODUCT GRID ========================================== */ .s-products-list-wrapper.s-products-list-vertical-cards { align-items: stretch !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card { align-self: stretch !important; min-width: 0 !important; } /* Slider equal heights */ .s-products-slider-card { box-sizing: border-box !important; } .s-products-slider-card custom-salla-product-card { height: 100% !important; } /* ========================================== 10. MOBILE ========================================== */ @media (max-width: 767px) { custom-salla-product-card .s-product-card-image { aspect-ratio: 3 / 4.45 !important; border-radius: 16px !important; } custom-salla-product-card .s-product-card-content { margin: -84px 8px 0 !important; padding: 10px !important; gap: 7px !important; border-radius: 14px !important; } custom-salla-product-card .s-product-card-content-main { min-height: 34px !important; } custom-salla-product-card .s-product-card-content-title { font-size: 11px !important; line-height: 17px !important; } custom-salla-product-card .s-product-card-content-title a { max-height: 34px !important; } custom-salla-product-card .s-product-card-content-sub { min-height: 20px !important; padding-top: 7px !important; } custom-salla-product-card .s-product-card-price, custom-salla-product-card .s-product-card-price i { font-size: 13px !important; } custom-salla-product-card .s-product-card-content-footer { margin-top: auto !important; padding-top: 6px !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element { min-height: 34px !important; font-size: 11px !important; border-radius: 10px !important; padding: 0 5px !important; } } /* ========================================== 11. ACCESSIBILITY ========================================== */ @media (prefers-reduced-motion: reduce) { custom-salla-product-card *, custom-salla-product-card *::before, custom-salla-product-card *::after { animation: none !important; transition: none !important; } custom-salla-product-card .s-product-card-image-cover { transform: none !important; } } .s-products-list-wrapper.s-products-list-vertical-cards { align-items: stretch !important; padding: 20px; border-radius: 13px; margin: 10px; background: linear-gradient(145deg, #142738 0%, #223C53 52%, #142738 100%) !important; } .s-products-list-wrapper.s-products-list-vertical-cards { align-items: stretch !important; padding: 20px; border-radius: 13px; border-color: #D4AF70; border-width: 2px; margin: 10px; background: linear-gradient(145deg, #142738 0%, #223C53 52%, #142738 100%) !important; } .s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *) { padding-left: 2rem; display: none; } @media (min-width: 768px) { .s-comments-product { padding-bottom: 3.5rem; padding-top: 3.5rem; display: none; } } @media (min-width: 1024px) { salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *), salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *), .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) { padding-left: 0px; border-radius: 13px !important; } } /* ========================================== VELARA | HIDE RELATED PRODUCTS ONLY Products You May Like ========================================== */ salla-products-slider[data-testid="store-product-related"] { display: none !important; } /* ========================================== VELARA | GLOBAL LUXURY SLIDER ARROWS ========================================== */ /* Arrows container */ .s-slider-block__title-nav { align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 10px !important; direction: rtl !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Arrow buttons */ .s-slider-block__title-nav .s-slider-nav-arrow { position: relative !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important; background: rgba(255, 255, 255, 0.88) !important; border: 1px solid rgba(39, 66, 93, 0.16) !important; border-radius: 50% !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 4px 14px rgba(20, 39, 56, 0.08) !important; color: #27425D !important; cursor: pointer !important; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important; } /* Icon alignment */ .s-slider-block__title-nav .s-slider-button-icon { align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; color: inherit !important; line-height: 1 !important; } /* SVG */ .s-slider-block__title-nav svg { width: 18px !important; height: 18px !important; fill: currentColor !important; color: inherit !important; transition: transform 0.35s ease !important; } /* Hover */ @media (hover: hover) { .s-slider-block__title-nav .s-slider-nav-arrow:not(:disabled):hover { background: #27425D !important; border-color: #27425D !important; color: #FFFFFF !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(39, 66, 93, 0.22) !important; } .s-slider-block__title-nav .s-slider-prev:not(:disabled):hover svg { transform: translateX(2px) !important; } .s-slider-block__title-nav .s-slider-next:not(:disabled):hover svg { transform: translateX(-2px) !important; } } /* Disabled arrows */ .s-slider-block__title-nav .s-slider-nav-arrow:disabled, .s-slider-block__title-nav .s-slider-nav-arrow.swiper-button-disabled { opacity: 0.35 !important; background: rgba(255, 255, 255, 0.55) !important; color: #27425D !important; cursor: default !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; } /* Mobile */ @media (max-width: 767px) { .s-slider-block__title-nav { gap: 7px !important; } .s-slider-block__title-nav .s-slider-nav-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } .s-slider-block__title-nav svg { width: 15px !important; height: 15px !important; } } /* ========================================== VELARA | PRODUCT IMAGE SLIDER ARROWS Separate arrows to both sides ========================================== */ salla-slider.details-slider { position: relative !important; } /* Full-width navigation layer */ salla-slider.details-slider .s-slider-block__title { position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 18px !important; transform: translateY(-50%) !important; z-index: 20 !important; pointer-events: none !important; } /* Expand navigation across image */ salla-slider.details-slider .s-slider-block__title-left, salla-slider.details-slider .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } /* Arrow buttons */ salla-slider.details-slider .s-slider-block__title-nav .s-slider-nav-arrow { position: relative !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; pointer-events: auto !important; } /* Mobile */ @media (max-width: 767px) { salla-slider.details-slider .s-slider-block__title { padding: 0 12px !important; } salla-slider.details-slider .s-slider-block__title-nav .s-slider-nav-arrow { flex-basis: 34px !important; width: 34px !important; height: 34px !important; } } /* ========================================== VELARA | SIMILAR PRODUCTS ARROWS FIX ========================================== */ /* Slider reference */ .s-block--bundle-similar-products .s-products-slider-slider { position: relative !important; } /* Navigation overlay */ .s-block--bundle-similar-products .s-products-slider-slider .s-slider-block__title { position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 10px !important; transform: translateY(-50%) !important; z-index: 30 !important; pointer-events: none !important; } /* Full width arrow container */ .s-block--bundle-similar-products .s-slider-block__title-left, .s-block--bundle-similar-products .s-slider-block__title-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } /* Buttons remain clickable */ .s-block--bundle-similar-products .s-slider-block__title-nav .s-slider-nav-arrow { position: relative !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; pointer-events: auto !important; } /* Mobile */ @media (max-width: 767px) { .s-block--bundle-similar-products .s-products-slider-slider .s-slider-block__title { padding: 0 6px !important; } .s-block--bundle-similar-products .s-slider-block__title-nav .s-slider-nav-arrow { flex-basis: 34px !important; width: 34px !important; height: 34px !important; } } /* ========================================== VELARA | FIX LATEST PRODUCTS TITLE ========================================== */ /* Header layout */ .s-products-slider-wrapper:has( .s-slider-block__title-right h2 ) .s-slider-block__title { align-items: center !important; justify-content: space-between !important; width: 100% !important; height: auto !important; min-height: 55px !important; padding: 10px 15px !important; margin: 0 0 18px !important; transform: none !important; overflow: visible !important; pointer-events: auto !important; z-index: 5 !important; } /* Title right */ .s-products-slider-wrapper .s-slider-block__title-right { align-items: center !important; width: auto !important; flex: 0 1 auto !important; opacity: 1 !important; visibility: visible !important; } /* Latest products heading */ .s-products-slider-wrapper .s-slider-block__title-right h2 { display: block !important; color: #27425D !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.5 !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; text-shadow: none !important; } /* View all and arrows */ .s-products-slider-wrapper .s-slider-block__title-left { align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: none !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; position: relative !important; } /* View all */ .s-products-slider-wrapper .s-slider-block__display-all { align-items: center !important; width: auto !important; color: #27425D !important; font-size: 13px !important; font-weight: 700 !important; opacity: 1 !important; visibility: visible !important; text-decoration: none !important; } /* Keep arrows next to View All */ .s-products-slider-wrapper .s-slider-block__title-nav { position: relative !important; display: flex !important; align-items: center !important; width: auto !important; gap: 8px !important; } /* Mobile */ @media (max-width: 767px) { .s-products-slider-wrapper .s-slider-block__title-right h2 { font-size: 17px !important; } .s-products-slider-wrapper .s-slider-block__title { padding: 8px 5px !important; gap: 10px !important; } .s-products-slider-wrapper .s-slider-block__title-left { gap: 7px !important; } .s-products-slider-wrapper .s-slider-block__display-all { font-size: 11px !important; } } /* ========================================== VELARA | FIX SIMILAR PRODUCTS ARROW POSITION ========================================== */ .s-block--bundle-similar-products .s-products-slider-slider { position: relative !important; } /* Make navigation cover the whole slider */ .s-block--bundle-similar-products .s-products-slider-slider > .s-slider-block__title { position: absolute !important; inset: 50% 0 auto 0 !important; display: block !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 10px !important; transform: translateY(-50%) !important; z-index: 50 !important; pointer-events: none !important; } /* Override narrow left container */ .s-block--bundle-similar-products .s-products-slider-slider > .s-slider-block__title .s-slider-block__title-left { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; padding: 0 !important; } /* Full-width arrows */ .s-block--bundle-similar-products .s-products-slider-slider > .s-slider-block__title .s-slider-block__title-nav { position: static !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; direction: rtl !important; } /* Keep both buttons clickable */ .s-block--bundle-similar-products .s-slider-block__title-nav .s-slider-nav-arrow { position: relative !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; pointer-events: auto !important; } /* Mobile */ @media (max-width: 767px) { .s-block--bundle-similar-products .s-products-slider-slider > .s-slider-block__title { padding: 0 6px !important; } .s-block--bundle-similar-products .s-slider-block__title-nav .s-slider-nav-arrow { flex-basis: 34px !important; width: 34px !important; height: 34px !important; } } /* ========================================== VELARA | SIMILAR PRODUCTS ARROWS FIXED RIGHT & LEFT POSITION ========================================== */ /* Slider container */ .s-block--bundle-similar-products .similar-products__list salla-slider.s-products-slider-slider { position: relative !important; } /* Navigation overlay */ .s-block--bundle-similar-products .similar-products__list salla-slider.s-products-slider-slider > .s-slider-block__title { position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; z-index: 50 !important; pointer-events: none !important; } /* Reset intermediate wrappers */ .s-block--bundle-similar-products .similar-products__list .s-slider-block__title-left, .s-block--bundle-similar-products .similar-products__list .s-slider-block__title-nav { position: static !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; pointer-events: none !important; } /* Both arrows */ .s-block--bundle-similar-products .similar-products__list .s-slider-nav-arrow { position: absolute !important; top: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; transform: translateY(-50%) !important; pointer-events: auto !important; z-index: 60 !important; } /* Previous arrow - right */ .s-block--bundle-similar-products .similar-products__list .s-slider-prev { right: 12px !important; left: auto !important; } /* Next arrow - left */ .s-block--bundle-similar-products .similar-products__list .s-slider-next { left: 12px !important; right: auto !important; } /* Hover without changing alignment */ @media (hover: hover) { .s-block--bundle-similar-products .similar-products__list .s-slider-nav-arrow:not(:disabled):hover { transform: translateY(-50%) scale(1.06) !important; } } /* Mobile */ @media (max-width: 767px) { .s-block--bundle-similar-products .similar-products__list .s-slider-nav-arrow { width: 34px !important; height: 34px !important; } .s-block--bundle-similar-products .similar-products__list .s-slider-prev { right: 6px !important; } .s-block--bundle-similar-products .similar-products__list .s-slider-next { left: 6px !important; } } /* ========================================== VELARA | FIX ADD TO CART HOVER Keep text and icon visible ========================================== */ /* Cart button only */ custom-salla-product-card .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #27425D !important; color: #27425D !important; } /* Navy animated background */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before, custom-salla-product-card .s-product-card-content-footer .s-button-element::after { z-index: 0 !important; pointer-events: none !important; } /* Text container above animated background */ custom-salla-product-card .s-product-card-content-footer .s-button-element > .s-button-text { position: relative !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; color: #27425D !important; -webkit-text-fill-color: #27425D !important; transform: none !important; transition: color .35s ease, -webkit-text-fill-color .35s ease !important; } /* Text and shopping icon */ custom-salla-product-card .s-product-card-content-footer .s-button-element .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element .sicon-shopping-bag { position: relative !important; z-index: 11 !important; display: inline-flex !important; align-items: center !important; opacity: 1 !important; visibility: visible !important; color: #27425D !important; -webkit-text-fill-color: #27425D !important; transform: none !important; filter: none !important; } /* Hover: always visible in white */ @media (hover: hover) { custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) > .s-button-text, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .sicon-shopping-bag { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; filter: none !important; } } /* Also support keyboard focus */ custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible > .s-button-text, custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible .sicon-shopping-bag { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================== VELARA | FIX ADD TO CART HOVER Keep text and icon visible ========================================== */ /* Cart button only */ custom-salla-product-card .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #27425D !important; color: #27425D !important; } /* Navy animated background */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before, custom-salla-product-card .s-product-card-content-footer .s-button-element::after { z-index: 0 !important; pointer-events: none !important; } /* Text container above animated background */ custom-salla-product-card .s-product-card-content-footer .s-button-element > .s-button-text { position: relative !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; color: #27425D !important; -webkit-text-fill-color: #27425D !important; transform: none !important; transition: color .35s ease, -webkit-text-fill-color .35s ease !important; } /* Text and shopping icon */ custom-salla-product-card .s-product-card-content-footer .s-button-element .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element .sicon-shopping-bag { position: relative !important; z-index: 11 !important; display: inline-flex !important; align-items: center !important; opacity: 1 !important; visibility: visible !important; color: #27425D !important; -webkit-text-fill-color: #27425D !important; transform: none !important; filter: none !important; } /* Hover: always visible in white */ @media (hover: hover) { custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) > .s-button-text, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .sicon-shopping-bag { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; filter: none !important; } } /* Also support keyboard focus */ custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible > .s-button-text, custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible .sicon-shopping-bag { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================== VELARA | PREMIUM ADD TO CART HOVER Clean animation + visible text ========================================== */ /* 1. Main button */ custom-salla-product-card .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 1px solid #27425D !important; border-radius: 12px !important; color: #27425D !important; overflow: hidden !important; cursor: pointer !important; transition: box-shadow .45s ease !important; } /* 2. Two animated navy layers */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before, custom-salla-product-card .s-product-card-content-footer .s-button-element::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 51% !important; height: 100% !important; background: #27425D !important; border: 0 !important; border-radius: 0 !important; z-index: 0 !important; pointer-events: none !important; transition: transform .65s cubic-bezier(.22, 1, .36, 1) !important; } /* Right half */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before { left: auto !important; right: 0 !important; transform: translateX(105%) !important; } /* Left half */ custom-salla-product-card .s-product-card-content-footer .s-button-element::after { right: auto !important; left: 0 !important; transform: translateX(-105%) !important; } /* 3. Keep content ABOVE background */ custom-salla-product-card .s-product-card-content-footer .s-button-element > .s-button-text { position: relative !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 7px !important; width: 100% !important; color: #27425D !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: color .3s ease !important; } /* 4. Text and icon inherit parent color */ custom-salla-product-card .s-product-card-content-footer .s-button-element .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element .s-button-text > i { position: relative !important; z-index: 21 !important; display: inline-block !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; } /* 5. Hover animation */ @media (hover: hover) { custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled)::before, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled)::after { transform: translateX(0) !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) > .s-button-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > span, custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) .s-button-text > i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(39,66,93,.18) !important; } } /* Keyboard focus */ custom-salla-product-card .s-product-card-content-footer .s-button-element:focus-visible { outline: 2px solid #27425D !important; outline-offset: 2px !important; } /* VELARA - TESTIMONIALS LUXURY DESIGN */ .s-block-trust-testimonials { background: linear-gradient( 145deg, #142738 0%, #223C53 50%, #142738 100% ) !important; border-radius: 26px !important; padding: 45px 24px !important; overflow: hidden !important; } /* Slider */ .s-block-trust-testimonials .s-slider-container { padding: 14px 4px 35px !important; } /* Testimonial card */ .s-block-trust-testimonials__slide--inner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 280px !important; padding: 28px 24px !important; gap: 15px !important; background: linear-gradient( 145deg, rgba(255,255,255,.20), rgba(255,255,255,.07) ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-radius: 20px !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.10) !important; text-align: center !important; transition: transform .4s ease !important; } .s-block-trust-testimonials__slide--inner:hover { transform: translateY(-4px) !important; } /* Customer image */ .s-block-trust-testimonials__image-wrapper { width: 72px !important; height: 72px !important; min-width: 72px !important; margin: 0 auto 15px !important; padding: 4px !important; background: rgba(255,255,255,.13) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 50% !important; overflow: hidden !important; } .s-block-trust-testimonials__image { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } /* Content */ .s-block-trust-testimonials__content { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; text-align: center !important; } /* Customer name */ .s-block-trust-testimonials__name { color: #FFFFFF !important; font-size: 17px !important; font-weight: 800 !important; margin: 0 !important; text-align: center !important; } /* Feedback */ .s-block-trust-testimonials__feedback { color: rgba(255,255,255,.9) !important; font-size: 14px !important; line-height: 2 !important; font-weight: 400 !important; margin: 0 !important; text-align: center !important; } /* Quote icons */ .s-block-trust-testimonials__quote-icon { color: rgba(255,255,255,.45) !important; font-size: 22px !important; display: none; } /* Pagination bullets */ .s-block-trust-testimonials .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: rgba(255,255,255,.45) !important; opacity: 1 !important; } .s-block-trust-testimonials .swiper-pagination-bullet-active { width: 24px !important; border-radius: 20px !important; background: #FFFFFF !important; } /* Mobile */ @media (max-width: 767px) { .s-block-trust-testimonials { padding: 30px 12px !important; border-radius: 18px !important; } .s-block-trust-testimonials__slide--inner { min-height: 245px !important; padding: 22px 16px !important; } .s-block-trust-testimonials__image-wrapper { width: 60px !important; height: 60px !important; min-width: 60px !important; } .s-block-trust-testimonials__name { font-size: 15px !important; } .s-block-trust-testimonials__feedback { font-size: 12px !important; line-height: 1.9 !important; } } /* ========================================== VELARA | EDITORIAL CUSTOMER STORIES Premium Ivory / Navy / Champagne ========================================== */ section[component-id="1909732035"] { --vr-navy: #142738; --vr-ivory: #F4F0E9; --vr-champagne: #B99E7D; --vr-line: #E7DED3; position: relative !important; width: calc(100% - 28px) !important; max-width: 1280px !important; margin: 55px auto !important; padding: 56px 50px 48px !important; background: var(--vr-ivory) !important; border: 1px solid var(--vr-line) !important; border-radius: 30px !important; overflow: hidden !important; } /* Decorative brand accent */ section[component-id="1909732035"]::before { content: "✦" !important; position: absolute !important; top: 15px !important; left: 36px !important; color: rgba(185,158,125,.23) !important; font-size: 95px !important; line-height: 1 !important; pointer-events: none !important; } /* Main container */ section[component-id="1909732035"] .s-reviews-container { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 940px !important; margin: 0 auto !important; } /* Section heading */ section[component-id="1909732035"] .s-reviews-header-wrapper { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin: 0 0 35px !important; padding: 0 !important; } section[component-id="1909732035"] .s-reviews-header { display: block !important; position: relative !important; margin: 0 !important; padding: 0 0 20px !important; color: var(--vr-navy) !important; font-size: clamp(27px, 4vw, 43px) !important; font-weight: 800 !important; line-height: 1.5 !important; text-align: center !important; } section[component-id="1909732035"] .s-reviews-header::after { content: "" !important; position: absolute !important; bottom: 5px !important; right: 50% !important; width: 52px !important; height: 2px !important; background: var(--vr-champagne) !important; transform: translateX(50%) !important; } /* Slider: preserve Swiper functionality */ section[component-id="1909732035"] .testimonials-slider { position: relative !important; display: block !important; width: 100% !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-container { width: 100% !important; padding: 12px 4px 20px !important; overflow: hidden !important; } section[component-id="1909732035"] .s-reviews-swiper-slide { height: auto !important; box-sizing: border-box !important; } /* Review card */ section[component-id="1909732035"] .s-reviews-testimonial { position: relative !important; width: 100% !important; height: 100% !important; min-height: 255px !important; padding: 0 !important; margin: 0 !important; background: #FFFFFF !important; border: 1px solid var(--vr-line) !important; border-radius: 4px 30px 4px 30px !important; box-shadow: 0 15px 40px rgba(20,39,56,.06) !important; overflow: hidden !important; transition: box-shadow .4s ease, transform .4s ease !important; } section[component-id="1909732035"] .s-reviews-testimonial:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 45px rgba(20,39,56,.10) !important; } /* Inner structure */ section[component-id="1909732035"] .s-reviews-testimonial__inner { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; min-height: 255px !important; height: 100% !important; padding: 38px 38px 32px !important; gap: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; text-align: right !important; } /* Decorative quotation */ section[component-id="1909732035"] .s-reviews-testimonial__icon { position: absolute !important; top: 19px !important; left: 25px !important; right: auto !important; width: 60px !important; height: 60px !important; color: #D8C9B7 !important; opacity: .7 !important; pointer-events: none !important; } section[component-id="1909732035"] .s-reviews-testimonial__icon svg { width: 60px !important; height: 60px !important; fill: currentColor !important; } /* Content layout */ section[component-id="1909732035"] .s-reviews-testimonial__text { display: flex !important; flex-direction: column !important; width: 100% !important; background: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; order: 1 !important; } /* The review itself */ section[component-id="1909732035"] .s-reviews-testimonial__text > p { display: block !important; position: relative !important; margin: 0 0 24px !important; padding: 0 0 22px !important; color: var(--vr-navy) !important; font-size: clamp(15px, 1.7vw, 19px) !important; font-weight: 500 !important; line-height: 2 !important; text-align: right !important; border-bottom: 1px solid var(--vr-line) !important; opacity: 1 !important; } /* Reviewer row */ section[component-id="1909732035"] .s-reviews-testimonial__name_wrapper { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } section[component-id="1909732035"] .s-reviews-testimonial__info h2 { margin: 0 !important; padding: 0 !important; color: var(--vr-navy) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.6 !important; } /* Avatar */ section[component-id="1909732035"] .s-reviews-testimonial__avatar { position: absolute !important; bottom: 25px !important; right: 38px !important; width: 46px !important; height: 46px !important; margin: 0 !important; padding: 3px !important; border: 1px solid var(--vr-champagne) !important; border-radius: 50% !important; overflow: hidden !important; } section[component-id="1909732035"] .s-reviews-testimonial__avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } /* Space for avatar */ section[component-id="1909732035"] .s-reviews-testimonial__name_wrapper { padding-right: 55px !important; } /* Rating */ section[component-id="1909732035"] .s-reviews-testimonial__rating { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } section[component-id="1909732035"] .s-reviews-testimonial__rating .s-rating-stars-wrapper { display: flex !important; align-items: center !important; gap: 3px !important; } section[component-id="1909732035"] .s-reviews-testimonial__rating svg { width: 14px !important; height: 14px !important; fill: var(--vr-champagne) !important; color: var(--vr-champagne) !important; } /* Arrows: outside card, at opposite ends */ section[component-id="1909732035"] .testimonials-slider > .s-slider-block__title { position: absolute !important; top: 50% !important; inset-inline: -28px !important; width: auto !important; height: 0 !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; z-index: 20 !important; pointer-events: none !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-block__title-left, section[component-id="1909732035"] .testimonials-slider .s-slider-block__title-nav { position: static !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-nav-arrow { position: absolute !important; top: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; border: 1px solid var(--vr-line) !important; border-radius: 50% !important; color: var(--vr-navy) !important; box-shadow: 0 5px 20px rgba(20,39,56,.1) !important; transform: translateY(-50%) !important; pointer-events: auto !important; transition: background .3s, color .3s !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-prev { right: 0 !important; left: auto !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-next { left: 0 !important; right: auto !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-nav-arrow:not(:disabled):hover { background: var(--vr-navy) !important; color: #FFFFFF !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-nav-arrow:disabled { opacity: .3 !important; pointer-events: none !important; } /* Mobile */ @media (max-width: 767px) { section[component-id="1909732035"] { width: calc(100% - 20px) !important; margin: 35px auto !important; padding: 35px 16px 42px !important; border-radius: 20px !important; } section[component-id="1909732035"] .s-reviews-header { font-size: 27px !important; } section[component-id="1909732035"] .s-reviews-testimonial, section[component-id="1909732035"] .s-reviews-testimonial__inner { min-height: 280px !important; } section[component-id="1909732035"] .s-reviews-testimonial__inner { padding: 32px 20px 28px !important; } section[component-id="1909732035"] .s-reviews-testimonial__text > p { font-size: 14px !important; line-height: 1.9 !important; } section[component-id="1909732035"] .s-reviews-testimonial__avatar { right: 20px !important; bottom: 25px !important; } section[component-id="1909732035"] .testimonials-slider > .s-slider-block__title { inset-inline: -8px !important; } section[component-id="1909732035"] .testimonials-slider .s-slider-nav-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; } } .swiper:where([dir="rtl"], [dir="rtl"] *) { padding-left: 5px; background: transparent !important; padding: 22px; } section[component-id="1909732035"] { --vr-navy: #142738; --vr-ivory: #F4F0E9; --vr-champagne: #B99E7D; --vr-line: #E7DED3; position: relative !important; width: calc(100% - 28px) !important; max-width: 1280px !important; margin: 55px auto !important; padding: 56px 50px 48px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 30px !important; overflow: hidden !important; } section[component-id="1909732035"] .s-reviews-testimonial__inner { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; min-height: 255px !important; height: 100% !important; padding: 38px 38px 32px !important; gap: 0 !important; background: linear-gradient(135deg, #1B303C 0%, #20394D 45%, #27425D 100%) !important; border: none !important; box-shadow: none !important; text-align: right !important; } section[component-id="1909732035"] .s-reviews-testimonial__text > p { display: block !important; position: relative !important; margin: 0 0 24px !important; padding: 0 0 22px !important; color: #ffffff !important; font-size: clamp(15px, 1.7vw, 19px) !important; font-weight: 500 !important; line-height: 2 !important; text-align: right !important; border-bottom: 1px solid var(--vr-line) !important; opacity: 1 !important; } section[component-id="1909732035"] .s-reviews-testimonial__info h2 { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.6 !important; } section[component-id="1909732035"] .s-reviews-testimonial__inner { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; min-height: 284px !important; height: 100% !important; padding: 38px 38px 32px !important; gap: 0 !important; background: linear-gradient(135deg, #1B303C 0%, #20394D 45%, #27425D 100%) !important; border: none !important; box-shadow: none !important; text-align: right !important; } /* ================================ VELARA | REMOVE EXTRA ELEMENTS ================================ */ /* 1) إخفاء أسهم السلايدر */ section[component-id="1148515362"] .s-slider-nav-arrow, section[component-id="1148515362"] .swiper-button-next, section[component-id="1148515362"] .swiper-button-prev { display: none !important; } /* 2) إخفاء علامات الاقتباس */ section[component-id="1148515362"] .s-block-trust-testimonials__quote-icon { display: none !important; } /* 3) إخفاء النجمة/الزخرفة */ section[component-id="1148515362"]::before, section[component-id="1148515362"]::after, section[component-id="1148515362"] .testimonial-star, section[component-id="1148515362"] .decor-star, section[component-id="1148515362"] .sparkle { display: none !important; content: none !important; } section[component-id="1148515362"] .s-slider-container { overflow: hidden !important; } section[component-id="1148515362"] .swiper-wrapper { align-items: center !important; } section[component-id="1148515362"] *::before, section[component-id="1148515362"] *::after { background-image: none !important; } section[component-id="1909732035"] .testimonials-slider > .s-slider-block__title { position: absolute !important; top: 50% !important; inset-inline: -28px !important; width: auto !important; height: 0 !important; display: none; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; z-index: 20 !important; pointer-events: none !important; } @media (min-width: 1024px) { salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *), salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *), .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) { padding-left: 0px; border-radius: 13px !important; background: linear-gradient(135deg, #1B303C 0%, #20394D 45%, #27425D 100%) !important; } } /* ========================================== VELARA | TAYEEF FOOTER SIGNATURE ========================================== */ .store-footer { position: relative !important; } /* Signature container */ .store-footer::after { content: "صُمّم وطُوّر بعناية من طيف" !important; display: table !important; width: fit-content !important; max-width: calc(100% - 24px) !important; box-sizing: border-box !important; margin: 0 auto 22px !important; padding: 12px 30px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 12px !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.7 !important; text-align: center !important; box-shadow: 0 5px 20px rgba(0,0,0,.06) !important; transition: background .3s ease, border-color .3s ease, transform .3s ease !important; } /* Mobile */ @media (max-width: 767px) { .store-footer::after { margin-bottom: 16px !important; padding: 10px 20px !important; font-size: 12px !important; border-radius: 10px !important; } } .store-footer::after { content: "صُمّم وطُوّر بعناية من طيف" !important; display: table !important; width: fit-content !important; max-width: calc(100% - 24px) !important; box-sizing: border-box !important; margin: 0 auto 22px !important; padding: 15px 34px !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .20) !important; border-radius: 12px !important; color: #FFFFFF !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.7 !important; text-align: center !important; box-shadow: 0 5px 20px rgba(0, 0, 0, .06) !important; transition: background .3s ease, border-color .3s ease, transform .3s ease !important; } /* إخفاء علامة الاقتباس في آراء العملاء */ .s-block-trust-testimonials__quote-icon, .sicon-quote-open, .sicon-quote-close { display: none !important; } .s-block-trust-testimonials__content { padding-top: 20px !important; } .s-block-trust-testimonials__quote-icon.sicon-quote-open { display: none !important; } section[component-id="1909732035"]::before { content: "" !important; position: absolute !important; top: 15px !important; left: 36px !important; color: rgba(185, 158, 125, .23) !important; font-size: 95px !important; line-height: 1 !important; pointer-events: none !important; } /* ========================================== VELARA | MOBILE HEADER FIX Clean, Compact & Responsive ========================================== */ @media (max-width: 1023px) { /* Main navbar */ #mainnav { position: relative !important; width: 100% !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 3px 12px rgba(20,39,56,.06) !important; } /* Inner */ #mainnav > .inner, #mainnav > .inner > .container { width: 100% !important; height: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin: 0 !important; } #mainnav > .inner { padding: 0 !important; } /* Main row */ #mainnav > .inner > .container > .flex.items-stretch.justify-between { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 100% !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* Logo and menu */ #mainnav > .inner > .container > .flex.items-stretch.justify-between > .flex.items-center:first-child { display: flex !important; align-items: center !important; flex: 0 1 auto !important; min-width: 0 !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* Mobile menu icon */ #mainnav [data-testid="store-header-mobile-toggle"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; color: #142738 !important; } /* Logo */ #mainnav .navbar-brand { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 1 auto !important; width: auto !important; max-width: 105px !important; min-width: 0 !important; height: 48px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } #mainnav .navbar-brand img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 45px !important; object-fit: contain !important; } /* Account and cart group */ #mainnav > .inner > .container > .flex.items-stretch.justify-between > .flex.items-center:last-child { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* Remove extra margin from cart */ #mainnav salla-cart-summary { margin: 0 !important; } /* Account and cart buttons */ #mainnav .s-user-menu-login-btn, #mainnav .s-cart-summary-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; color: #142738 !important; box-shadow: none !important; } /* Icons */ #mainnav .s-user-menu-login-btn svg, #mainnav .s-cart-summary-icon svg { width: 22px !important; height: 22px !important; } #mainnav .header-btn__icon { font-size: 21px !important; color: #142738 !important; } /* Hide cart total on mobile */ #mainnav .s-cart-summary-content { display: none !important; } /* Cart badge */ #mainnav .s-cart-summary-count { border-radius: 50% !important; font-size: 10px !important; } } /* Very small mobile screens */ @media (max-width: 380px) { #mainnav > .inner > .container { padding-left: 10px !important; padding-right: 10px !important; } #mainnav .navbar-brand { max-width: 85px !important; } #mainnav > .inner > .container > .flex.items-stretch.justify-between { gap: 5px !important; } } header .s-user-menu-login-btn svg { width: 23px; height: 23px; fill: rgb(255 255 255); } @media (max-width: 1023px) { #mainnav > .inner, #mainnav > .inner > .container { width: 100% !important; height: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin: 9px !important; } } /* VELARA | Space Between Cart & Account */ @media (max-width: 1023px) { #mainnav salla-cart-summary { margin-inline-end: 12px !important; } #mainnav salla-user-menu, #mainnav salla-cart-summary { flex-shrink: 0 !important; } } @media (max-width: 1023px) { #mainnav > .inner > .container > .flex.items-stretch.justify-between > .flex.items-center:last-child { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; gap: 20px !important; margin: 0 !important; padding: -6px !important; } } /* ========================================== VELARA | NAVY GLASS CART DESKTOP + MOBILE ========================================== */ /* CART PAGE */ #main-content:has(.cart-item) { --cart-navy: #142738; --cart-blue: #223C53; --cart-accent: #27425D; background: #FFFFFF !important; padding-bottom: 35px !important; } /* Product card */ #main-content .cart-item { position: relative !important; background: linear-gradient( 145deg, #142738, #223C53, #142738 ) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 22px !important; padding: 25px !important; margin-bottom: 20px !important; box-shadow: 0 12px 30px rgba(20,39,56,.12) !important; } /* Product image */ #main-content .cart-item a:has(> img.object-cover) { display: block !important; flex: 0 0 105px !important; width: 105px !important; height: 145px !important; border-radius: 15px !important; overflow: hidden !important; } #main-content .cart-item img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 15px !important; border: none !important; } /* Product title */ #main-content .cart-item h1, #main-content .cart-item h1 a { color: #FFFFFF !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.8 !important; } /* Product price */ #main-content .cart-item .item-price, #main-content .cart-item .item-total, #main-content .cart-item .item-price i, #main-content .cart-item .item-total i { color: #FFFFFF !important; font-weight: 800 !important; font-size: 16px !important; } /* Total label */ #main-content .cart-item p:has(.item-total) { color: #FFFFFF !important; } /* Quantity container */ #main-content .cart-item .s-quantity-input-container { display: flex !important; align-items: center !important; background: rgba(255,255,255,.95) !important; border: 1px solid rgba(255,255,255,.6) !important; border-radius: 12px !important; overflow: hidden !important; } /* Quantity buttons */ #main-content .cart-item .s-quantity-input-button { background: transparent !important; color: #142738 !important; width: 38px !important; height: 40px !important; } #main-content .cart-item .s-quantity-input-button svg { width: 15px !important; height: 15px !important; fill: #142738 !important; } /* Quantity value */ #main-content .cart-item .s-quantity-input-input { width: 40px !important; height: 40px !important; background: transparent !important; color: #142738 !important; font-weight: 700 !important; text-align: center !important; } /* Product options */ #main-content .cart-item .s-product-options-wrapper { margin-top: 20px !important; padding-top: 18px !important; border-top: 1px solid rgba(255,255,255,.18) !important; } /* Option label */ #main-content .cart-item .s-product-options-option-label, #main-content .cart-item .s-product-options-option-label b, #main-content .cart-item .s-product-options-option-label small { color: #FFFFFF !important; } /* Select */ #main-content .cart-item .s-product-options-option-content select { width: 100% !important; max-width: 320px !important; min-height: 44px !important; background: #FFFFFF !important; color: #142738 !important; border: 1px solid rgba(255,255,255,.5) !important; border-radius: 12px !important; padding: 8px 12px !important; } /* Delete button */ #main-content .cart-item [data-testid="store-cart-delete-item"].s-button-element { width: 32px !important; height: 32px !important; background: rgba(255,255,255,.13) !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 50% !important; color: #FFFFFF !important; } /* ========================================== ORDER SUMMARY - DESKTOP ========================================== */ #main-content:has(.cart-item) salla-cart-summary-card { --cart-summary-primary-color: #142738; color: #142738 !important; } /* Summary sheet */ #main-content:has(.cart-item) .s-cart-summary-card-sheet { background: #F3F5F7 !important; border: 1px solid #DEE5EB !important; border-radius: 18px 18px 0 0 !important; padding: 22px !important; } #main-content:has(.cart-item) .s-cart-summary-card-sheet-title { color: #142738 !important; font-size: 19px !important; font-weight: 800 !important; } /* Total bar */ #main-content:has(.cart-item) .s-cart-summary-card-bar { background: #223C53 !important; padding: 18px !important; } #main-content:has(.cart-item) .s-cart-summary-card-bar, #main-content:has(.cart-item) .s-cart-summary-card-bar * { color: #FFFFFF !important; } /* Checkout area */ #main-content:has(.cart-item) .s-cart-summary-card-action { background: #223C53 !important; padding: 0 18px 20px !important; } /* Checkout button */ #main-content:has(.cart-item) .s-cart-summary-card-action .s-button-element { min-height: 48px !important; background: #FFFFFF !important; border: 1px solid #FFFFFF !important; border-radius: 12px !important; color: #142738 !important; } #main-content:has(.cart-item) .s-cart-summary-card-action .s-button-text { color: #142738 !important; font-weight: 800 !important; opacity: 1 !important; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { #main-content:has(.cart-item) { padding-bottom: 120px !important; } #main-content .cart-item { padding: 15px !important; border-radius: 18px !important; margin-bottom: 14px !important; } /* Product info fits small screens */ #main-content .cart-item .flex.flex-1 { min-width: 0 !important; gap: 12px !important; } #main-content .cart-item a:has(> img.object-cover) { width: 76px !important; height: 110px !important; flex-basis: 76px !important; } #main-content .cart-item h1, #main-content .cart-item h1 a { font-size: 13px !important; line-height: 1.6 !important; } #main-content .cart-item .item-price, #main-content .cart-item .item-total { font-size: 14px !important; } /* Quantity row */ #main-content .cart-item .s-quantity-input-container { max-width: 140px !important; } /* Remove oversized spacing */ #main-content .cart-item .md\:flex { margin-bottom: 12px !important; } /* Mobile select */ #main-content .cart-item .s-product-options-option-content select { max-width: 100% !important; width: 100% !important; } /* Mobile order summary */ #main-content salla-cart-summary-card.s-cart-summary-card--mobile, #main-content salla-cart-summary-card.s-cart-summary-card--desktop { max-width: 100% !important; } /* Keep mobile checkout bar usable */ #main-content .s-cart-summary-card-bar { background: #223C53 !important; } #main-content .s-cart-summary-card-action .s-button-element { min-height: 46px !important; background: #FFFFFF !important; color: #142738 !important; } } #main-content .cart-item .s-product-options-wrapper { margin-top: 20px !important; padding-top: 18px !important; background: border-box; border-top: 1px solid rgba(255, 255, 255, .18) !important; } header .inner.bg-inherit { background: TRANSPARENT !IMPORTANT; border-bottom: 1px solid rgba(212, 175, 112, .25); box-shadow: 0 0px 0px rgba(0, 0, 0, .12); } @media (min-width: 1024px) { .top-navbar { padding-bottom: .375rem; padding-top: .375rem; border: aquamarine; BACKGROUND: linear-gradient(135deg, #2D4A68 0%, #27425D 100%) !important; } } @media (min-width: 1024px) { #mainnav { background: linear-gradient(135deg, #2D4A68 0%, #27425D 100%) !important; } } @media (min-width: 1024px) { .top-navbar { padding-bottom: 0.575rem; padding-top: 1.375rem; border: aquamarine; BACKGROUND: linear-gradient(135deg, #2D4A68 0%, #27425D 100%) !important; } }