/* ------------------------------------------------------------------ */
/* ملف مخصّص لمتجر عساف – custom.css */
/* ------------------------------------------------------------------ */
/* === الأكواد الأصلية كما أرسلتها === */
.s-block--about p, .s-block--about h2{
color: #fff;
}
salla-installment {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
margin-bottom: 40px;
margin-left: -15px;
margin-right: -15px;
}
#tabbyPromo > [class*='styles__tabby'],
.tamara-product-widget {
border: 0 !important;
}
@media (max-width: 991px) {
.product-single .product-single-top-description video{
height: 400px;
width: 100%;
object-fit: cover;
}
.tamara-product-widget span {
font-size: 12px;
}
.app-inner .promotion-banner ul{
padding: 0 0
}
.app-inner .promotion-banner{
font-size: 13px;
padding: 3px 0;
}
.header-btn__icon, .sicon-menu.text-2xl{
font-size: 1.1rem;
}
}
[dir=rtl] .new-lang-btn svg{
margin-right: 9px;
margin-left: 0;
margin-left: initial;
}
[dir=ltr] .new-lang-btn svg{
margin-left: 9px;
margin-right: 0;
margin-right: initial;
}
body:not(.index) .new-lang-btn svg path{
stroke: #0e4532
}
salla-installment {
display: none;
}
.tamara-product-widget {
position: relative !important;
background-color: #fff !important;
font-family: var(--store-font) !important;
line-height: 1.6 !important;
border-radius: 6px !important;
color: #000 !important;
margin: 0 5px !important;
min-width: 45% !important;
max-width: 45% !important;
border: 1px solid #de9681 !important;
padding: 0 10px !important;
padding-bottom: 10px !important;
padding-top: 25px !important;
font-size: 11px !important;
font-weight: 400 !important;
min-height: 80px !important;
max-height: 110px !important;
display: block !important;
text-align: start !important;
}
#tabbyPromoWrapper {
background-color: #fff !important;
font-family: var(--store-font) !important;
line-height: 1.6 !important;
border-radius: 6px !important;
font-weight: 400 !important;
position: relative !important;
padding: 0 10px !important;
margin: 0 5px !important;
min-width: 45% !important;
max-width: 45% !important;
font-size: 11px !important;
border: 1px solid #3bffc4 !important;
min-height: 80px !important;
max-height: 110px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-bottom: 15px !important;
padding-top: 20px !important;
text-align: start !important;
}
.group-banner,.index .main-nav-container.fixed-header .new-lang-btn{
display: none !important;
}
#product-form > section.sticky-product-bar.bg-storeBG.p-5.md.rounded-md.rounded-b-none > salla-add-product-button > div > salla-button > button{
background-color: #011A30 !important;
}
.special-categories .single-banner {
flex: 0 0 100% !important;
max-width: 100% !important;
}.s-block--about h2, .s-block--about p{
text-align: center;
}
.s-block--about a{
margin: 0 auto;
display: flex;
width: 150px;
align-items: center;
justify-content: center;
}
/*.product-single .s-add-product-button-main:not(.w-full)>salla-button{
width: 100% !important;
}
.product-single .s-add-product-button-main{
width: 100%;
}
.product-single salla-mini-checkout-widget{
display: none;
}*/
.enhanced-title-border, .s-block:not(.fixed-products--1, .fixed-products--2, .fixed-products--3, .fixed-products--4, .fixed-products--5, .fixed-products--6, .fixed-products--7, .s-block--best-offers, .fixed-products--17) .mb-8{
display: none !important;
}
/*.index h2.text-2xl{
font-size: 1.2rem;
}*/
.product-card__normal-cart__btn salla-button button,.product-card__mini-cart salla-button button{
justify-content: start;
background: #dde8da;
border-color: #dde8da;
padding-bottom: .25rem;
padding-top: 0.5rem;
border-radius: 0;
color: #0e4532;
}
.product-single .tabs.hide-scroll,.product-single .comment .flex .sicon-check, .product-single .comment .flex .sicon-check + span, .product-single .comment .flex .sicon-check + span + span{
display:none !important;
}
@media (min-width: 991px){
.product-card__mini-cart {
display: none;
}}
.product-single .comment .sicon-star2 {
color: black;
}
.product-single .s-rating-stars-btn-star svg {
fill:black
}
.footer-logo img{
width: 150px;
}
.product-card__normal-cart__btn button i, .product-card__mini-cart__btn button i{
display:none;
}
.product-card__mini-cart__btn button{
font-size: 12px;
}
.product-card__mini-cart__btn button i{
position: relative;
top: 3px;
}
.top-navbar .hidden.whitespace-nowrap{
display:none !important;
}
.border-4{
display:none}
.product-single .offer-slider .s-slider-block__title h2{
color: #f87171;
}
.product-single .offer-slider .s-slider-block__title p{
color: #111111;
opacity: 1;
}
.product-single .offer-slider .s-slider-block__title:before{
color: #eb5c5c;
}
.product-single .offer-slider .swiper-slide{
align-items: stretch;
display: flex;
align-self: stretch;
height: auto;
}
body.trans_header .store-header{
top: 40px;
}
@media (max-width: 991px) {
.s-block--about {
padding-top: 0
}
.s-block--about .container{
padding-right: 0px;
padding-left: 0px;
}
body.trans_header .store-header{
top: 55px;
}
}
.main-nav-container .sicon-cart:before{
opacity:0;
}
.main-nav-container .sicon-cart{
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 5px;
}
body.trans_header.slider_has_overlay .main-nav-container:not(.fixed-header) .sicon-cart{
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 5px;
}
.s-button-disabled{
opacity: 1
}
}
/* 2) ضمان ظهور زر الهامبرغر في كل المقاسات */
.header-btn--menu,
.navbar-toggler,
.sicon-menu.text-2xl {
display: flex !important;
align-items: center;
gap: 4px;
}
/* … (باقي الأكواد الأصلية حتى النهاية كما هي) … */
/* ------------------------------------------------------------------ */
/* HEADER MENU TOGGLE – LAVERNE STYLE */
/* ------------------------------------------------------------------ */
/* 1) إخفاء جميع روابط وأيقونات الهيدر (ما عدا زر القائمة) */
}
/* 4) تحسين حجم الأيقونة */
.header-btn--menu svg,
.navbar-toggler svg,
.sicon-menu.text-2xl {
width: 20px !important;
height: 20px !important;
}
/* 5) محاذاة العنصر لليمين في RTL أو لليسار في LTR */
[dir="rtl"] .header-btn--menu { margin-right: 0; margin-left: auto; }
[dir="ltr"] .header-btn--menu { margin-left: 0; margin-right: auto; }
/* ------------------------------------------------------------------ */
/* نهاية تعديل الهيدر */
/* ------------------------------------------------------------------ */
/* Wrapper to contain the products and title */
#checkout-products-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
border-radius: 16px;
margin: 30px auto;
width: 90%;
max-width: 1200px;
}
#checkout-products-section .product-card {
width: 180px;
font-size: 14px;
text-align: center;
background: #fff;
padding: 10px;
}
@media (max-width: 768px) {
#checkout-products-section {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
padding: 5px 2px;
background: #fff;
border: 1px solid #ccc;
border-radius: 12px;
margin: 20px auto;
width: 95vw;
overflow-x: hidden !important;
scrollbar-width: none;
}
#checkout-products-section .s-products-list-wrapper {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.5rem;
}
#checkout-products-section .product-card {
flex: 0 0 auto;
width: 130px !important;
font-size: 12px;
text-align: center;
background: #fff;
border-radius: 8px;
}
#checkout-products-section .product-card *:not(img) {
margin-top: 0 !important; /* يمنع أي مسافة زائدة من العناصر بعد الصورة */
}
#checkout-products-section .product-card {
flex: 0 0 auto;
width: 120px !important;
font-size: 12px;
text-align: center;
background: #fff;
padding: 0px;
border-radius: 8px;
}
#checkout-products-section button,
#checkout-products-section .s-button-wrap button {
font-size: 11px !important;
padding: 15px 2px !important;
}
#checkout-products-section .s-block__title {
margin-bottom: 0; /* Remove extra bottom margin */
padding-bottom: 0; /* Remove extra bottom padding if any */
}
#checkout-products-section .product-card__subtitle {
display: none !important;
}
}
.product-card__image {
margin-bottom: 2px !important;
}
.product-card__title {
margin-top: 0 !important;
margin-bottom: 4px !important;
font-size: 13px;
line-height: 1.2;
}
.product-card__button {
display: block !important;
margin-top: 6px;
font-size: 13px;
background-color: black !important;
color: white !important;
padding: 5px;
border-radius: 6px;
}
.s-products-list-wrapper:empty {
display: none !important;
}
.s-block__title h2 {
font-size: 1.5rem; /* adjust size as needed */
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.s-products-list-wrapper .product-card__image {
height: 300px;
overflow: hidden;
}
.s-products-list-wrapper .product-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Styling for the product container */
.product-container {
display: flex;
max-width: 1000px; /* Adjust width to make it smaller */
margin: 20px 0;
padding: 10px;
background-color: #fff;
border-radius: 8px;
}
.product-right {
display: flex;
flex-direction: column;
height: 200px;
width: 200px;
padding: 10px;
box-sizing: border-box;
}
.text-info {
margin-top:10px;
margin-bottom: 15px;
}
.addToCart {
margin-top: auto;
margin-left: 7px !important; /* Increase left margin */
}
.product-title {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 0;
}
.price {
font-size: 18px;
color: #e74c3c;
margin-top: 0;
}
.original-price {
font-size: 14px;
color: #999;
text-decoration: line-through;
}
.product-left img {
width: 100%;
height: auto;
display: block;
}
.product-left {
width: 300px; /* smaller width */
}
salla-add-product-button button {
background: #dde7dd !important;
color: #294a39 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
.addToCart__btn button.s-button-element {
border: none !important; /* Remove all borders/lines */
outline: none !important; /* Remove outlines */
background-color: #dde7dd !important; /* Set background color to green */
color: #294a39 !important; /* Set text color to white for contrast */
box-shadow: none !important; /* Remove any shadow that may look like a line */
padding: 4px 22px !important; /* Less top and bottom padding, more horizontal for width */
line-height: 1.2 !important; /* Make text vertically tighter */
}
/* نضيف حواف مستديرة للصور داخل الـ div اللي يحتويهم */
.overflow-hidden img {
border-radius: 10px; /* درجة الاستدارة */
}
#btn-show-more {
color: red !important;
}
ul.mx-auto.grid {
gap: 9px 9px; /* تقليل المسافات الأفقية والعمودية */
max-width: none; /* إزالة الحد الأقصى للعرض ليكون أوسع قليلاً */
}
ul.mx-auto.grid li div.overflow-hidden img {
transform-origin: center center; /* لضمان أن التكبير يتم من المنتصف */
transition: transform 0.4s ease;
width: 105%; /* زيادة عرض الصورة قليلاً */
height: auto;
}
ul.mx-auto.grid li div.overflow-hidden {
overflow: visible; /* لإظهار الصور المكبرة عند التمرير */
}
ul.mx-auto.grid li {
padding: 2px; /* تقليل الحشو داخل العناصر قليلاً */
}
/* تعديل عام للصور والنص داخل container.mt-6 */
.container.mt-6 .rounded-full {
border-radius: 16px !important; /* حواف مستديرة مربعة */
width: 6rem !important; /* حجم 96px */
height: 6rem !important;
max-width: none !important;
max-height: none !important;
}
@media (max-width: 768px) {
/* مسافات بين كل عنصر سلايدر */
.container.mt-6 .swiper-slide {
padding: 0 10px; /* مسافة جانبية لكل عنصر */
box-sizing: border-box;
}
/* تعديل عرض الصور وحوافها */
.container.mt-6 .rounded-full {
width: 100px !important;
height: 100px !important;
border-radius: 15px !important;
object-fit: cover;
}
/* نص العنوان تحت الصورة */
.container.mt-6 .swiper-slide span.text-sm {
margin-top: 5px;
font-size: 14px;
max-width: 110px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
/* تباعد أفقي بين العناصر */
.container.mt-6 .swiper-wrapper {
gap: 35px;
display: flex;
}
}
.s-block.fixed-products .home-block-title {
display: block !important;
visibility: visible !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
opacity: 1 !important;
}
.s-block.s-block--fixed-banner.fixed-banner--16 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* تغيير لون نص زر الشراء إلى أبيض مع خلفية تمتد كامل العرض */
.s-add-product-button-with-sticky-bar .s-button-text {
color: #ffffff !important;
}
.s-modal-body .product-card__normal-cart button .s-button-text,
.s-modal-body .product-card__mini-cart button .s-button-text {
font-size: 0; /* نخفي النص */
}
.s-modal-body .product-card__normal-cart button .s-button-text::after,
.s-modal-body .product-card__mini-cart button .s-button-text::after {
content: " قبول ";
font-size: 15px;
}
/* وسط الكارد في مود الجوال */
@media (max-width: 767px) {
.swiper .swiper-wrapper {
justify-content: center !important;
}
.swiper .swiper-slide {
margin: 0 auto !important;
}
}
.s-block--square-links img {
object-fit: contain !important; /* يخلي الصورة كاملة */
aspect-ratio: auto !important; /* يلغي القَص */
width: 100% !important;
height: auto !important;
}
.home-block-title {
margin-bottom: 10px !important; /* غيّر الرقم حسب المسافة اللي تبغاها */
}