/* Add custom CSS styles below */ 

/* Add custom CSS styles below */

section.s-block.s-block--animated-brands.bigger_logos,

.s-block--animated-brands--marquee{

margin-top: 0;

}

img.aspect-\[14\/13\].w-full.lazy.object-cover.group-hover\:scale-110.duration-400.loaded {

width: 45px;

object-fit: contain;

}

h3.mt-6.text-base.font-semibold.leading-7.tracking-tight.text-store-text-primary {

color: #666666;

font-weight: 500;

margin-top: 10px;

}


section.s-block.s-block--square-links.square-links-2.force-center {

margin-top: 0rem;

}

.single-faq.w-full.rounded-lg.border.border-store-text-secondary.bg-store-bg-secondary.py-3.px-5.open {

background-color: #E6EFFA;

}

i.sicon-quote.-scale-y-100.-scale-x-100.absolute.top-4.end-4.text-3xl.opacity-10.text-store-text-secondary {

color: #005ACC;

opacity: 1;

}

p.leading-6.text-sm.mb-2.mt-2\.5.md\:mt-4.text-store-text-primary {

margin-top: 1.6rem;

}

img.object-cover.mx-2.rounded-full.w-14.h-14 {

display: none;

}

section.s-block.s-block--fixed-banner.s-block--dynamic-banner.wide-placeholder.dynamic-banner--4 {

margin-top: 4rem;

}

p.mt-2.text-lg.leading-8.text-store-text-secondary {

margin-bottom: 15px;

}

.s-block--enhanced-features__item.group.overflow-hidden {

flex-direction: row;

align-items: center;

}

.s-block--enhanced-features__item .feature-icon i{

font-size: 1.7rem;

}

.s-block--enhanced-features__item .feature-icon{

margin-bottom: 0;

}

.s-block--enhanced-features__item,

.s-block--enhanced-features__item:hover{

border: none;

box-shadow: none;

background-color: transparent;

}

.grid.grid-cols-\[repeat\(2\,minmax\(0\,1fr\)\)\].md\:grid-cols-\[repeat\(4\,minmax\(0\,1fr\)\)\].gap-4.sm\:gap-6.xl\:gap-8 {

border: 1px solid #E6EFFA;

border-radius: 32px;

}

.absolute.bottom-0.left-0.w-full.h-px.duration-300.origin-left.transform.scale-x-0.bg-primary.group-hover\:scale-x-100,

.absolute.bottom-0.left-0.w-px.h-full.duration-300.origin-bottom.transform.scale-y-0.bg-primary.group-hover\:scale-y-100,

.absolute.top-0.left-0.w-full.h-px.duration-300.origin-right.transform.scale-x-0.bg-primary.group-hover\:scale-x-100,

.absolute.bottom-0.right-0.w-px.h-full.duration-300.origin-top.transform.scale-y-0.bg-primary.group-hover\:scale-y-100{

display: none;

}

@media(max-width: 768px){

.grid.grid-cols-\[repeat\(2\,minmax\(0\,1fr\)\)\].md\:grid-cols-\[repeat\(4\,minmax\(0\,1fr\)\)\].gap-4.sm\:gap-6.xl\:gap-8 {

padding: 10px;

}

}

section.s-block.s-block--fixed-banner.s-block--dynamic-banner.wide-placeholder.dynamic-banner--5 {

margin-top: 4rem;

}




/* --- 1. Global Container Fixes --- */

.special-product--3 .container {

max-width: 1200px !important;

padding-left: 15px !important;

padding-right: 15px !important;

width: 100% !important;

/* FIXED: This ensures padding fits INSIDE the 100% width */

box-sizing: border-box !important;

overflow-x: hidden !important;

}


/* --- 2. Main Layout Box --- */

.custom-product-layout {

display: flex;

gap: 40px;

direction: rtl; /* Force RTL */

background: #fff;

padding: 20px;

align-items: center;

border-radius: 8px;

width: 100%;

/* FIXED: Ensures the white box padding doesn't break the layout */

box-sizing: border-box;

}


/* --- 3. Right Side: Images --- */

.cp-gallery {

flex: 1;

min-width: 300px;

order: 1; /* Desktop: Right Side */

display: flex;

flex-direction: column;

gap: 15px;

}


.main-image-stage {

background-color: transparent !important;

padding: 0;

display: flex;

align-items: center;

justify-content: center;

height: 400px;

overflow: hidden;

}


.main-image-stage img {

max-height: 100%;

max-width: 100%;

object-fit: contain;

mix-blend-mode: normal !important;

}


.thumbs-wrapper {

display: flex;

align-items: center;

gap: 10px;

justify-content: center;

}


.thumbs-list {

display: flex;

gap: 10px;

overflow-x: auto;

padding: 5px;

scrollbar-width: none;

}


.thumb-item {

width: 60px;

height: 60px;

border-radius: 10px;

overflow: hidden;

cursor: pointer;

border: 1px solid #eee;

opacity: 0.6;

transition: 0.3s;

flex-shrink: 0;

}


.thumb-item.active {

border-color: #000;

opacity: 1;

}


.thumb-item img {

width: 100%;

height: 100%;

object-fit: cover;

}


/* --- 4. Left Side: Content --- */

.cp-details {

flex: 1;

min-width: 300px;

display: flex;

flex-direction: column;

justify-content: center;

order: 2; /* Desktop: Left Side */

text-align: right;

}


.cp-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 15px;

flex-direction: row-reverse;

}


.cp-title {

font-size: 24px;

font-weight: 800;

color: #000;

margin: 0;

line-height: 1.4;

}


.cp-rating {

display: flex;

align-items: center;

gap: 5px;

font-size: 14px;

color: #555;

flex-direction: row-reverse;

}

.cp-rating .stars { color: #fecb00; font-size: 18px; }


.cp-meta {

margin-bottom: 20px;

display: flex;

justify-content: flex-start;

padding-bottom: 12px; /* Space above the border */

border-bottom: 1px solid #e5e5e5; /* The Thin Border */

width: 100%;

}


/* Meta & Tags */

.cp-meta, .cp-tags {

margin-bottom: 20px;

display: flex;

justify-content: flex-start; /* Align Right in RTL */

}


.cp-tags { flex-wrap: wrap; gap: 10px; }


.cp-sold {

display: inline-flex;

align-items: center;

gap: 5px;

font-size: 14px;

color: #555;

background: #f9f9f9;

padding: 5px 10px;

border-radius: 15px;

}


.custom-tag {

background-color: #0055b8;

color: #fff;

padding: 6px 15px;

border-radius: 20px;

font-size: 13px;

font-weight: bold;

}


.cp-description {

text-align: right;

color: #666;

line-height: 1.7;

font-size: 15px;

margin-bottom: 25px;

}


/* Prices */

.cp-price-box {

display: flex;

align-items: center;

justify-content: flex-start;

gap: 15px;

margin-bottom: 25px;

flex-wrap: wrap;

}


.cp-prices {

display: flex;

flex-direction: row;

align-items: center;

gap: 10px;

}


.current-price { font-size: 28px; font-weight: bold; color: #000; }

.old-price { text-decoration: line-through; color: #999; font-size: 18px; margin-top: 5px; }


.cp-save-badge {

background: #d6001c;

color: #fff;

padding: 5px 12px;

border-radius: 20px;

font-weight: bold;

font-size: 13px;

white-space: nowrap;

}


/* --- 5. Actions: 2 Rows Layout --- */

.cp-actions {

display: flex;

flex-wrap: wrap; /* Allows wrapping */

gap: 15px;

width: 100%;

}


/* "Unwrap" the button group so children behave as direct flex items of cp-actions */

.btn-group {

display: contents;

}


/* Row 1, Item 1: Quantity */

.qty-control {

display: flex;

border: 1px solid #ddd;

border-radius: 30px;

overflow: hidden;

height: 48px;

width: 110px;

flex-shrink: 0;

}

.qty-control button { width: 35px; background: #fff; border: none; font-size: 18px; cursor: pointer; color: #555; }

.qty-control input { width: 40px; border: none; text-align: center; font-weight: bold; font-size: 16px; outline: none; }


/* Row 1, Item 2: Add to Cart (Fills Row 1) */

#original-cart-btn-wrapper {

flex: 1;

min-width: 150px;

}

#original-cart-btn-wrapper salla-button,

#original-cart-btn-wrapper salla-add-product-button,

#original-cart-btn-wrapper button {

width: 100% !important;

display: block !important;

height: 48px !important;

border-radius: 30px !important;

background: #fff !important;

color: #0055b8 !important;

border: 1px solid #0055b8 !important;

font-weight: bold !important;

}

#original-cart-btn-wrapper button span.s-button-text::after {

content: " اضف الي العربة";

margin-right: 5px;

}


/* Row 2: Buy Now (Full Width) */

.buy-now-btn {

width: 100%; /* Force full width on new line */

background: #0055b8;

color: #fff;

border: none;

border-radius: 30px;

height: 48px;

font-weight: bold;

cursor: pointer;

margin-top: 5px;

}


/* --- NEW: Golden Warranty Styling --- */

.cp-warranty {

width: 100%;

margin-top: 5px;

}


.golden-link {

display: flex;

align-items: center;

justify-content: flex-start;

gap: 8px;

text-decoration: none;

color: #0055b8;

font-weight: bold;

font-size: 15px;

padding: 10px 0;

transition: all 0.3s ease;

width: fit-content;

}


.golden-link .icon {

font-size: 18px;

}


.golden-link .arrow {

transition: transform 0.3s ease;

font-size: 18px;

}


.golden-link:hover {

color: #9e8240; /* Darker Gold on hover */

}


.golden-link:hover .arrow {

transform: translateX(-5px); /* Move arrow slightly on hover */

}


.nav-arrow { background: none; border: none; font-size: 20px; cursor: pointer; color: #0055b8; }


/* --- Mobile Responsiveness --- */

@media (max-width: 768px) {

.custom-product-layout {

flex-direction: column;

padding: 15px !important;

gap: 20px;

width: 78% !important;

margin: 0 auto !important;

}


/* FIXED: Prevent content from forcing width */

.cp-details, .cp-gallery {

min-width: 0 !important; /* Allow shrinking */

width: 100% !important;

max-width: 100% !important;

order: unset;

}


.cp-details { order: 2; text-align: center; }

.cp-gallery { order: 1; }


.cp-header {

flex-direction: column-reverse;

gap: 10px;

align-items: flex-start;

}

.cp-title { text-align: right; font-size: 20px; }


.cp-meta, .cp-tags, .cp-price-box, .cp-prices {

justify-content: flex-start;

}


.main-image-stage { height: 280px; }


.cp-actions {

justify-content: center;

}

}





/* Container for the injected content */

.custom-product-meta {

margin-top: 10px;

margin-bottom: 20px;

font-family: inherit; /* Inherit font from Salla theme */

}


/* 1. Sold Count Styles */

.c-sold-count {

display: flex;

align-items: center;

font-weight: bold;

font-size: 14px;

margin-bottom: 15px;

color: #333;

border-bottom: 1px solid #ededed;

padding-bottom: 15px;

}


.c-fire-icon {

color: #e73030; /* This makes the SVG red */

margin-left: 8px;

display: flex;

align-items: center;

}


/* 2. Blue Tags Styles */

.c-tags-container {

display: flex;

flex-wrap: wrap;

gap: 8px;

margin-bottom: 15px;

}


.c-tag {

background-color: #0056b3; /* Salla Blue */

color: #fff;

padding: 6px 16px;

border-radius: 50px;

font-size: 12px;

font-weight: bold;

}


/* 3. Description Styles */

.c-description {

color: #666;

font-size: 14px;

line-height: 1.6;

margin-bottom: 15px;

}


/* 4. List Styles */

.c-features-list {

list-style: none;

padding: 0;

margin: 0;

}


.c-features-list li {

display: flex;

align-items: center;

margin-bottom: 10px;

color: #777;

font-size: 14px;

}


.c-check-icon {

margin-left: 10px; /* Space between check and text (RTL) */

min-width: 20px;

display: flex;

align-items: center;

}


.selia-discount-code-section .flex.items-center.flex-col.gap-5 {

flex-direction: row;

justify-content: space-around;

align-items: center;

}

.selia-discount-code-section .flex.items-center.flex-col.gap-5 .flex-1{

flex: none;

}

.selia-discount-popup-content img.w-full.h-48.md\:h-full.object-cover{

height: 17rem;

}

section#featured-products-style2-3 {
    margin: 0;
    padding-top: 2rem;
    padding-bottom: 0;
}