:root {
--loujan-featured-header-max-width: 1400px;
--loujan-featured-header-gutter: 48px;
--loujan-featured-title-size: 24px;
--loujan-featured-title-line-height: 24px;
--loujan-more-link-size: 14px;
--loujan-category-image-ratio: 400 / 423;
--loujan-category-text-color: #000000;
--loujan-category-title-size: 20px;
--loujan-category-subtitle-size: 16px;
--loujan-category-text-align: right;
--loujan-home-slider-gutter: 16px;
--loujan-home-slider-gap: 8px;
--loujan-home-slider-desktop-view: 4;
--loujan-home-slider-tablet-view: 3;
--loujan-home-slider-mobile-view: 2;
--loujan-features-background: rgba(213, 204, 214, 0.1);
--loujan-features-title-color: #000000;
--loujan-features-text-color: #18181b;
--loujan-features-title-size: 20px;
--loujan-features-heading-size: 20px;
--loujan-features-subtitle-size: 16px;
}
body.index section.s-block--best-offers.container {
box-sizing: border-box;
width: 100%;
max-width: none;
padding-right: var(--loujan-home-slider-gutter);
padding-left: var(--loujan-home-slider-gutter);
}
body.index section.s-block--best-offers.container > salla-products-slider {
display: block !important;
width: 100% !important;
max-width: none !important;
}
body.index section.s-block--best-offers.container salla-products-slider .swiper {
width: 100% !important;
margin: 0 !important;
overflow: visible !important;
}
body.index section.s-block--bundle-features-grid {
margin: 0 !important;
}
@media (min-width: 1024px) {
body:is(.index, .product-single, .product-index, .cart) .s-advertisement {
min-height: 64px;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content {
box-sizing: border-box;
min-height: 64px;
padding: 6px 56px !important;
justify-content: center !important;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content > a {
font-size: 20px;
font-weight: 700;
line-height: 20px;
letter-spacing: 0;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .inner.group {
background-color: #ffffff !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header {
box-sizing: border-box;
gap: 0;
padding-right: 56px !important;
padding-left: 56px !important;
background-color: #ffffff !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :first-child {
flex: 0 0 265px !important;
justify-content: space-between !important;
width: 265px !important;
gap: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :first-child > * {
box-sizing: border-box;
flex: 0 0 44px;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 12px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(2) {
box-sizing: border-box;
flex: 0 0 142px !important;
justify-content: center !important;
width: 142px !important;
height: 60px !important;
gap: 0 !important;
padding: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(2) .navbar-brand {
position: relative;
flex: 0 0 142px;
width: 142px !important;
height: 42px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header .navbar-brand > .relative {
width: 142px !important;
height: 42px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header .navbar-brand .logo-primary {
display: block !important;
width: 142px !important;
height: 42px !important;
max-height: 42px !important;
object-fit: cover;
object-position: center;
visibility: visible !important;
opacity: 1 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header .navbar-brand .logo-secondary {
display: none !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) {
flex: 0 0 650px !important;
justify-content: flex-start !important;
width: 650px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) > .relative,
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) ul {
width: 100% !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) ul {
justify-content: space-between !important;
gap: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) li > a {
font-size: 16px;
line-height: 20px;
}
}
@media (min-width: 1024px) {
body:is(.index, .product-single, .product-index, .cart) .s-advertisement {
min-height: 64px;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content {
box-sizing: border-box;
min-height: 64px;
padding: 6px 56px !important;
justify-content: center !important;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content-main {
display: flex;
flex: 0 0 auto !important;
align-items: center;
justify-content: center;
gap: 7px;
width: max-content !important;
max-width: calc(100% - 112px);
margin: 0 auto;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content-main a {
font-size: 20px !important;
font-weight: 700;
line-height: 20px;
letter-spacing: 0;
white-space: nowrap;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
font-size: 32px;
line-height: 32px;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-action {
display: none !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .inner.group {
background-color: #ffffff !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header {
box-sizing: border-box;
gap: 0;
padding-right: 56px !important;
padding-left: 56px !important;
background-color: #ffffff !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :first-child {
direction: ltr;
flex: 0 0 265px !important;
justify-content: flex-start !important;
width: 265px !important;
gap: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :first-child > * {
box-sizing: border-box;
flex: 0 0 44px;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 12px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(2) {
box-sizing: border-box;
flex: 0 0 142px !important;
justify-content: center !important;
width: 142px !important;
height: 60px !important;
gap: 0 !important;
padding: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(2) .navbar-brand {
position: relative;
display: block;
flex: 0 0 142px;
width: 142px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
line-height: 0;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header .navbar-brand > .relative {
width: 142px !important;
height: 42px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header .navbar-brand .logo-primary {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
opacity: 1 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header .navbar-brand .logo-secondary {
display: none !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) {
direction: rtl;
flex: 0 0 650px !important;
justify-content: flex-start !important;
width: 650px !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) > .relative,
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) ul {
width: 100% !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) ul {
justify-content: space-between !important;
gap: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) .main-nav-container .site-header > :nth-child(3) li > a {
padding: 20px 12px;
font-size: 16px;
line-height: 20px;
white-space: nowrap;
}
body.index section.Ar-products-banner-7 > .grid {
direction: ltr !important;
}
body.index section.Ar-products-banner-7 > .grid > div {
direction: rtl;
}
body.index section.AR-promo-banner-10 .text {
align-items: center;
text-align: center !important;
}
body.index section.AR-promo-banner-10 .text > h2 {
width: 100%;
max-width: 448px;
margin-right: auto;
margin-left: auto;
text-align: center !important;
}
body.index section.AR-promo-banner-10 .text > p {
width: 100%;
max-width: 708px;
margin-right: auto;
margin-left: auto;
text-align: center !important;
}
body.index section.AR-promo-banner-10 .text > a {
align-self: center;
text-align: center !important;
}
}
body.index section.Ar-products-banner-6 .loujan-hero-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.loujan-footer-logo-wrap {
width: min(210px, 100%) !important;
height: auto !important;
aspect-ratio: 903 / 343;
margin: 0 auto 16px !important;
}
.loujan-footer-logo {
width: 100% !important;
height: 100% !important;
object-fit: contain;
filter: brightness(0) invert(1);
}
@media (min-width: 768px) {
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer {
padding-bottom: 20px;
background-color: #000000;
color: #fafafa;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .store-footer__inner {
padding: 32px 0 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .store-footer__inner > .container {
box-sizing: border-box;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 481px !important;
align-items: start !important;
gap: 0 !important;
width: calc(100% - 112px) !important;
max-width: none !important;
min-height: 270px;
margin: 0 auto !important;
padding: 0 !important;
direction: ltr;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-contact,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-links,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-brand {
box-sizing: border-box;
width: 100%;
min-width: 0;
padding: 20px !important;
direction: rtl;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-contact {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-links {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-brand {
grid-column: 3;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
text-align: center !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-brand > a {
justify-content: center !important;
width: 100%;
margin: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .store-description {
width: 100%;
max-width: 441px;
margin: 0 auto 24px !important;
text-align: center !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .store-description p {
color: #d4d4d4 !important;
font-size: 16px;
line-height: 23px;
text-align: center !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-contact h2,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-contact h3,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-links h2,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-links h3 {
margin: 0;
color: #fafafa;
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: center;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-links a,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-contact a {
color: #d4d4d4;
font-size: 16px;
line-height: 24px;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-brand salla-social {
width: 100%;
margin: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-brand .s-social-list {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-brand .s-social-link a {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid #525252;
border-radius: 6px;
background: #262626;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .CA-newsletter {
display: none !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .bg-primary {
margin-top: 16px;
background: #000000 !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .bg-primary > .loujan-footer-bottom {
position: relative;
box-sizing: border-box;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: 40px 16px;
align-content: space-between;
align-items: start;
width: calc(100% - 112px) !important;
max-width: none !important;
min-height: 108px;
margin: 0 auto !important;
padding: 16px 0 !important;
background: transparent !important;
direction: ltr;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .s-payments-list-wrap {
grid-column: 1;
grid-row: 1;
justify-self: start;
order: initial !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .s-payments-list {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .s-payments-list-item {
width: 38px !important;
height: 24px !important;
margin: 0 !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .s-payments-list-item:first-child {
width: 48px !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .s-payments-list-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-tax {
grid-column: 3;
grid-row: 1;
justify-self: end;
align-self: center;
order: initial !important;
color: #d4d4d4;
text-align: right;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-tax p,
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-tax b {
color: #d4d4d4 !important;
font-size: 10px;
line-height: 12px;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer salla-apps-icons {
display: none !important;
}
body:is(.index, .product-single, .product-index, .cart) footer.store-footer.loujan-footer .loujan-footer-copyright {
grid-column: 2;
grid-row: 2;
justify-self: center;
align-self: end;
margin: 0;
color: #d4d4d4;
font-size: 12px;
line-height: 16px;
text-align: center;
white-space: nowrap;
}
}
@media (min-width: 1024px) {
body.index section.AR-promo-banner-10 .overflow-hidden {
height: 500px !important;
}
}
@media (min-width: 768px) {
body.index section.AR-hero-section-4 .banner {
height: clamp(420px, 43.386vw, 656px) !important;
min-height: 0 !important;
padding: 0 !important;
background-size: 100% auto !important;
background-position: center 26.6% !important;
}
body.index section.AR-hero-section-4 .text-wrapper {
box-sizing: border-box;
width: 100% !important;
max-width: none !important;
height: 100% !important;
padding: 0 48px !important;
align-items: flex-end !important;
justify-content: center !important;
}
body.index section.AR-hero-section-4 .position {
width: min(751px, 100%);
align-items: flex-end !important;
gap: 27px;
margin-right: 0 !important;
margin-left: auto !important;
text-align: right !important;
}
body.index section.AR-hero-section-4 .blocktitle {
width: 100%;
font-size: 40px !important;
font-weight: 700;
line-height: 40px !important;
text-align: right !important;
}
body.index section.AR-hero-section-4 .subtext {
width: 604px;
max-width: 100%;
font-size: 24px !important;
line-height: 40px !important;
margin-right: 0 !important;
margin-left: auto !important;
text-align: right !important;
}
}
@media (max-width: 767px) {
body.index section.AR-hero-section-4 .banner {
box-sizing: border-box;
width: calc(100% - 34px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 406 / 608;
margin-right: auto !important;
margin-left: auto !important;
padding: 0 !important;
background-size: cover !important;
background-position: center !important;
}
body.index section.AR-hero-section-4 .text-wrapper {
box-sizing: border-box;
width: 100% !important;
max-width: none !important;
height: 100% !important;
padding: 0 12px 63px !important;
align-items: flex-end !important;
justify-content: flex-end !important;
}
body.index section.AR-hero-section-4 .position {
width: 100%;
align-items: flex-end !important;
gap: 8px;
margin-right: 0 !important;
margin-left: auto !important;
text-align: right !important;
}
body.index section.AR-hero-section-4 .blocktitle {
width: 100%;
font-size: 20px !important;
font-weight: 700;
line-height: 20px !important;
text-align: right !important;
}
body.index section.AR-hero-section-4 .subtext {
width: 291px;
max-width: 100%;
font-size: 14px !important;
line-height: 24px !important;
margin-right: 0 !important;
margin-left: auto !important;
text-align: right !important;
}
}
/* ==========================================================================
PDP — صفحة المنتج (body.product-single)
Figma desktop 173:6054 · mobile 99:2380
========================================================================== */
:root {
--loujan-pdp-gutter: 56px;
--loujan-pdp-info-width: 425px;
--loujan-pdp-gap: 32px;
--loujan-pdp-primary: #4b225b;
}
/* عناصر مش موجودة في التصميم الجديد */
body.product-single .top-lace,
body.product-single .main-content nav.breadcrumbs,
body.product-single .main-content .product-entry__sub-title,
body.product-single .main-content > .mb-5.rounded-md.inline-flex,
body.product-single .main-content > .mb-4.flex.justify-between.sm\:grid,
body.product-single .product-form > salla-gifting,
body.product-single .product-form .sticky-product-bar > section,
body.product-single .main-content > .feature,
body.product-single .main-content > .lg\:hidden.flex-col,
body.product-single .main-content > .hidden.lg\:flex {
display: none !important;
}
/* ---------- التخطيط العام ---------- */
body.product-single #main-content {
background: #ffffff;
}
body.product-single .single > .bg-background > [id^="product-"] {
box-sizing: border-box;
flex-direction: column;
align-items: stretch;
gap: 0;
overflow: visible;
padding: 0 16px 24px;
}
@media (min-width: 1024px) {
body.product-single .single {
padding-top: 0 !important;
}
body.product-single .single > .bg-background > [id^="product-"] {
flex-direction: row;
align-items: flex-start;
gap: var(--loujan-pdp-gap);
padding: 42px var(--loujan-pdp-gutter) 30px;
}
body.product-single .single .sidebar {
order: 1;
flex: 1 1 0;
width: auto !important;
min-width: 0;
padding-bottom: 0 !important;
}
body.product-single .single .main-content {
order: 2;
position: sticky;
top: 32px;
flex: 0 0 var(--loujan-pdp-info-width);
width: var(--loujan-pdp-info-width) !important;
padding: 0 !important;
}
}
/* ---------- المعرض ---------- */
body.product-single .sidebar .img_items {
border-radius: 0 !important;
overflow: hidden;
}
body.product-single .sidebar .img_items img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 1024px) {
body.product-single .sidebar > .grid {
gap: 8px;
}
body.product-single .sidebar > .grid .img_items {
aspect-ratio: 465 / 640;
height: auto;
}
}
@media (max-width: 1023px) {
body.product-single .sidebar .thumbs-slider .img_items {
aspect-ratio: 346 / 514;
height: auto;
}
body.product-single .sidebar .thumbs-slider .swiper {
overflow: hidden;
}
}
/* ---------- عمود المعلومات ---------- */
body.product-single .main-content {
display: block;
}
body.product-single .main-content > .flex.align-center.justify-between {
flex-direction: row;
margin-bottom: 8px;
}
body.product-single .main-content h1 {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 24px;
color: #18181b;
}
body.product-single .loujan-pdp-rating {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 8px;
font-size: 12px;
line-height: 20px;
letter-spacing: 0.4px;
color: #000000;
}
body.product-single .loujan-pdp-stars {
display: inline-flex;
gap: 2px;
}
body.product-single .loujan-pdp-stars svg {
width: 16px;
height: 16px;
}
body.product-single .loujan-pdp-rating b {
font-weight: 700;
}
body.product-single .main-content > .flex.items-center.justify-between.pb-2 {
margin-bottom: 16px;
padding-bottom: 0;
border-bottom: 0;
}
body.product-single .main-content > .flex.items-center.justify-between.pb-2 h2 {
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: -0.48px;
color: #1e1e1e;
}
body.product-single .main-content salla-installment > div {
margin-bottom: 16px;
}
/* النموذج: ترتيب العناصر حسب Figma */
body.product-single .product-form {
display: flex;
flex-direction: column;
gap: 16px;
}
body.product-single .product-form > * {
order: 20;
}
body.product-single .product-form > salla-product-options { order: 1; }
body.product-single .product-form > .sticky-product-bar { order: 2; display: contents; }
body.product-single .product-form > .loujan-pdp-made { order: 3; }
body.product-single .product-form > section.bg-white { order: 4; }
body.product-single .product-form > .loujan-pdp-perks { order: 5; }
body.product-single .product-form > .loujan-pdp-buy-now { order: 7; }
/* مقاسات / خيارات */
body.product-single .s-product-options-option-label {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
color: #18181b;
}
body.product-single .s-product-options-option-label b {
font-weight: 400;
}
body.product-single .s-product-options-option-label > small {
display: none;
}
body.product-single .loujan-pdp-size-guide > span:first-child {
display: inline;
}
body.product-single .loujan-pdp-size-guide {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.4px;
text-decoration: underline;
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease;
}
body.product-single .loujan-pdp-size-guide:hover {
color: #000000;
opacity: 0.65;
text-decoration-thickness: 2px;
}
body.product-single .loujan-pdp-size-guide:focus-visible {
outline: 2px solid #18181b;
outline-offset: 2px;
}
body.product-single .loujan-pdp-size-guide-icon {
position: relative;
display: block;
width: 16px;
height: 9px;
overflow: hidden;
}
body.product-single .loujan-pdp-size-guide-icon img {
position: absolute;
top: -39.93%;
left: 0;
width: 100%;
height: 180.92%;
max-width: none;
}
body.product-single .custom-radio-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 12px;
}
body.product-single .main-content .product-form .custom-radio-options label.radio-label {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px !important;
margin: 0;
padding: 8px 12px !important;
border: 1px solid #9f9fa9 !important;
border-radius: 4px !important;
background: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
color: #27272a;
cursor: pointer;
}
body.product-single .main-content .product-form .custom-radio-options label.radio-label:has(input:checked) {
border-color: #27272a;
background: #27272a;
color: #ffffff;
}
/* الكمية */
body.product-single .product-form .sticky-product-bar > .w-full {
display: contents;
}
body.product-single .product-form .sticky-product-bar > .w-full > div:first-child {
order: 2;
}
body.product-single .product-form .sticky-product-bar > .w-full > div:first-child::before {
content: "الكمية";
display: block;
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
color: #18181b;
}
body.product-single .product-form .sticky-product-bar__quantity {
width: max-content;
}
body.product-single .product-form .s-quantity-input-container {
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
width: 100px;
height: 40px;
border: 1px solid #a1a1a1 !important;
border-radius: 4px !important;
background: #ffffff;
}
body.product-single .product-form .s-quantity-input-button {
width: 40px;
height: 100%;
padding: 0;
border: 0 !important;
background: transparent;
color: #18181b;
}
body.product-single .product-form .s-quantity-input-button svg {
width: 14px;
height: 14px;
}
body.product-single .product-form .s-quantity-input-input {
width: 20px;
height: 100%;
padding: 0;
border: 0 !important;
background: transparent;
font-size: 16px;
text-align: center;
}
/* كرت «صُنعت خصيصًا لكِ» */
body.product-single .loujan-pdp-made {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 16px;
min-height: 64px;
padding: 0 16px;
border-radius: 8px;
background: #f7edf5;
}
body.product-single .loujan-pdp-made-art {
position: relative;
flex: 0 0 39px;
align-self: flex-end;
height: 58px;
}
body.product-single .loujan-pdp-made-art::before {
content: '';
position: absolute;
left: -2px;
top: 7px;
width: 42px;
height: 42px;
border-radius: 50%;
background: radial-gradient(circle, #ba88af 0, #d2b2cb 50%, #eadce7 100%);
}
/* الدايرة (::before) خلف الصورة، والصورة (::after) شفافة الخلفية فوقها بدون blend */
body.product-single .loujan-pdp-made-art::after {
content: '';
position: absolute;
inset: 0;
background: var(--loujan-pdp-made-img, none) 50.6% 10.9% / 287.61% 188.29% no-repeat;
}
body.product-single .loujan-pdp-made p {
margin: 0;
font-size: 16px;
line-height: 20px;
color: #000000;
}
body.product-single .loujan-pdp-made p + p {
margin-top: 4px;
font-size: 14px;
line-height: 16px;
color: #404040;
}
/* المرفقات */
body.product-single .product-form > section.bg-white {
padding: 0 !important;
background: transparent;
}
body.product-single .product-form > section.bg-white .sm\:grid {
display: flex;
flex-direction: column;
gap: 10px;
}
body.product-single .product-form > section.bg-white .sm\:col-span-2 > .flex {
display: block;
}
body.product-single .product-form > section.bg-white label b {
font-size: 15px;
font-weight: 400;
line-height: 22px;
color: #000000;
}
body.product-single .product-form > section.bg-white .btn-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 35px;
padding: 8px 0;
border: 0;
border-radius: 6px;
background: #f3f4f6;
font-size: 14px;
line-height: 14px;
color: #6c7480;
}
/* مميزات: أقمشة / قصات */
body.product-single .loujan-pdp-perks {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 0;
}
body.product-single .loujan-pdp-perk {
display: flex;
flex: 1 1 0;
align-items: center;
gap: 8px;
}
body.product-single .loujan-pdp-perk b {
display: block;
font-size: 12px;
font-weight: 700;
line-height: 24px;
color: #18181b;
}
body.product-single .loujan-pdp-perk div > span {
display: block;
font-size: 10px;
line-height: 24px;
color: #18181b;
}
body.product-single .loujan-pdp-perk-art {
flex: 0 0 46px;
width: 46px;
height: 46px;
background-image: var(--loujan-pdp-sprite, none);
background-repeat: no-repeat;
background-size: 309.74% 232.31%;
}
body.product-single .loujan-pdp-perk-fabric .loujan-pdp-perk-art { background-position: 23.16% 14.59%; }
body.product-single .loujan-pdp-perk-cuts .loujan-pdp-perk-art { background-position: 77.45% 16.06%; }
/* أزرار الشراء */
body.product-single .product-form .sticky-product-bar__btn {
order: 6;
display: block;
width: 100%;
}
body.product-single .product-form .sticky-product-bar__btn .s-button-element,
body.product-single #sticky-product-bar .s-button-element {
box-sizing: border-box;
width: 100%;
height: 48px;
border: 1px solid #000000;
border-radius: 4px;
background: #000000;
font-size: 14px;
font-weight: 400;
line-height: 28px;
color: #ffffff;
}
body.product-single .product-form .sticky-product-bar__btn .s-button-text,
body.product-single #sticky-product-bar .s-button-text {
font-size: 14px;
line-height: 28px;
}
body.product-single .product-form .sticky-product-bar__btn .s-button-element .flex.sm\:hidden {
display: none;
}
body.product-single .loujan-pdp-buy-now {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 48px;
border: 1.5px solid #262626;
border-radius: 4px;
background: #ffffff;
font-size: 14px;
line-height: 28px;
color: #262626;
cursor: pointer;
}
body.product-single .loujan-pdp-buy-now img {
width: 20px;
height: 20px;
object-fit: cover;
}
body.product-single .main-content .mobile_buttons {
display: none !important;
}
/* وسائل الدفع */
/* الأيقونات 32px جوه li ارتفاعه 50px (padding من الثيم) → نعوّض 9px فوق وتحت عشان 16px/8px زي Figma */
body.product-single .main-content > .mt-5 {
margin-top: 15px;
margin-bottom: -9px;
}
body.product-single .main-content .s-payments-list {
flex-wrap: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 0 24px;
}
/* مسافات Figma: زر «اشتري الآن» ثم 16px ثم الدفع (32px) ثم 8px ثم «منتجات مشابهة»؛
البلوك الفاضي (out-of-stock) كان بيدمج margin 64px ويطلّع الفاصل 56px */
body.product-single .main-content > .s-block--bundle-out-of-stock-alternative {
margin-top: 0 !important;
}
body.product-single .main-content > salla-quick-order {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.product-single .main-content .s-payments-list-item {
margin: 0;
}
body.product-single .main-content .s-payments-list-item img {
width: 50px;
height: auto;
max-height: 32px;
object-fit: contain;
}
/* منتجات مشابهة (الشريط الجانبي) */
body.product-single .side_products {
margin-top: 9px;
padding-top: 0;
border-top: 0;
}
body.product-single .side_products h1 {
font-size: 14px;
font-weight: 700;
line-height: 28px;
color: #0d0702;
}
/* ---------- التبويبات ---------- */
body.product-single .s-tabs-header {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 24px;
border-bottom: 1px solid #e5e5e5;
}
body.product-single .s-tabs-header-item {
padding: 0 0 6px;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
font-size: 30px;
font-weight: 400;
line-height: 36px;
color: #525252;
}
body.product-single .s-tabs-header-item.s-tabs-active {
border-bottom-color: #262626;
font-weight: 700;
color: #262626;
}
body.product-single .product__description > p {
display: none;
}
body.product-single .product__description .article--main {
font-size: 18px;
font-weight: 400;
line-height: 32px;
color: #262626;
text-align: right;
}
body.product-single .product__description .article--main strong {
font-weight: 700;
}
body.product-single .product__description .article--main ul {
padding-right: 24px;
list-style: disc;
font-size: 16px;
line-height: 32px;
}
/* ---------- قد يعجبك أيضا ---------- */
body:is(.product-single, .cart) .single-product-slider {
box-sizing: border-box;
margin: 24px 0 !important;
padding: 0 var(--loujan-pdp-gutter);
overflow: visible;
}
body:is(.product-single, .cart) .single-product-slider h1 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #18181b;
}
@media (min-width: 1024px) {
body:is(.product-single, .cart) .single-product-slider h1,
body.product-single .side_products h1 {
font-size: 0;
}
body:is(.product-single, .cart) .single-product-slider h1::after {
content: "قد يعجبك أيضا";
font-size: 20px;
}
body.product-single .side_products h1::after {
content: "منتجات مشابهة";
font-size: 14px;
}
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-image,
body.product-single .side_products .s-product-card-image {
aspect-ratio: 346 / 490;
overflow: hidden;
border-radius: 0;
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-image img,
body.product-single .side_products .s-product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-content-category,
body.product-single .side_products .s-product-card-content-category {
display: none;
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-content-title {
font-size: 20px;
line-height: 24px;
color: #18181b;
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-price {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.4px;
color: #1e1e1e;
}
body:is(.product-single, .cart) .single-product-slider .salla-add-product-button,
body.product-single .side_products .salla-add-product-button {
width: 38px;
height: 38px;
border-radius: 99px;
background: var(--loujan-pdp-primary);
color: #ffffff;
}
/* ---------- الشريط الثابت (desktop) ---------- */
body.product-single #sticky-product-bar {
background: #ffffff;
}
body.product-single #sticky-product-bar h3 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
}
/* ---------- موبايل ---------- */
@media (max-width: 1023px) {
body.product-single .main-content {
padding: 16px 0 0 !important;
}
body.product-single .main-content h1 {
font-size: 20px;
line-height: 24px;
}
body.product-single .s-tabs-header {
gap: 24px;
justify-content: flex-start;
}
body.product-single .s-tabs-header-item {
font-size: 16px;
line-height: 20px;
}
body.product-single .product__description .article--main {
font-size: 14px;
line-height: 20px;
}
body:is(.product-single, .cart) .single-product-slider {
padding: 0 16px;
}
body.product-single .s-advertisement-content {
min-height: 37px;
padding: 0 16px !important;
}
body.product-single .s-advertisement-content-main a {
font-size: 12px;
font-weight: 700;
line-height: 12px;
}
body.product-single .side_products .s-products-list-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
body.product-single .side_products .s-products-list-wrapper > :nth-child(n+3) {
display: none;
}
body.product-single .product__description .article--main ul {
font-size: 14px;
line-height: 20px;
}
body.product-single .loujan-pdp-perks {
gap: 16px;
}
}
/* كروت المنتجات: مقاسات وارتفاع */
body:is(.product-single, .cart) .single-product-slider .s-products-slider-card,
body:is(.product-single, .cart) .single-product-slider custom-salla-product-card {
height: auto;
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-content {
flex-grow: 0;
gap: 16px;
padding: 24px 16px 0;
}
body:is(.product-single, .cart) .single-product-slider .s-product-card-content-sub {
margin-top: 4px !important;
}
body:is(.product-single, .cart) .single-product-slider .sizes-wrapper:not(:first-child) {
display: none;
}
body:is(.product-single, .cart) .single-product-slider .sizes-wrapper {
margin-bottom: 0;
}
body:is(.product-single, .cart) .single-product-slider .sizes {
gap: 8px;
}
body:is(.product-single, .cart) .single-product-slider .sizes > button,
body:is(.product-single, .cart) .single-product-slider .sizes > span {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 28px;
padding: 8px 12px;
border: 1px solid #a1a1a1;
border-radius: 2px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
line-height: 20px;
color: #27272a;
}
/* ==========================================================================
PLP — صفحة التصنيف (body.product-index)
Figma desktop 182:6592 · mobile 99:1706
========================================================================== */
:root {
--loujan-plp-gutter: 56px;
--loujan-plp-filters-width: 280px;
--loujan-plp-filters-gap: 66px;
--loujan-plp-columns: 3;
--loujan-plp-gap: 8px;
}
/* عناصر مش موجودة في التصميم */
body.product-index .top-lace,
body.product-index .AR-index > .container:first-child,
body.product-index .AR-index .main-content > .mb-4,
body.product-index #main-content > section.container {
display: none !important;
}
body.product-index custom-salla-product-card[hidden] {
display: none !important;
}
/* ---------- رأس الصفحة ---------- */
body.product-index .AR-index {
margin-top: 0;
}
body.product-index .loujan-plp-head {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 42px var(--loujan-plp-gutter) 0;
color: #18181b;
text-align: center;
}
body.product-index .loujan-plp-head h1 {
margin: 0;
font-size: 20px;
font-weight: 400;
line-height: 28px;
}
body.product-index .loujan-plp-head-count {
font-size: 16px;
}
body.product-index .loujan-plp-head p {
margin: 0;
font-size: 16px;
line-height: 28px;
}
body.product-index .loujan-plp-head nav {
margin-top: 8px;
font-size: 14px;
line-height: 28px;
}
body.product-index .loujan-plp-head nav a {
color: inherit;
}
/* ---------- التخطيط ---------- */
body.product-index .AR-index > .container.mb-10 {
box-sizing: border-box;
max-width: none;
margin-top: 40px;
padding: 0 var(--loujan-plp-gutter);
}
body.product-index .AR-index > .container.mb-10 > .flex {
flex-direction: row;
align-items: flex-start;
gap: var(--loujan-plp-filters-gap);
}
/* ---------- الشريط ---------- */
body.product-index .loujan-plp-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
margin-bottom: 16px;
}
body.product-index .loujan-plp-sort {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 16px;
line-height: 28px;
color: #18181b;
cursor: pointer;
}
body.product-index .loujan-plp-sort::after {
content: "";
width: 7px;
height: 7px;
margin-top: -4px;
border-right: 1.5px solid #18181b;
border-bottom: 1.5px solid #18181b;
transform: rotate(45deg);
}
body.product-index .loujan-plp-sort #product-filter {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
body.product-index .loujan-plp-views {
display: flex;
gap: 8px;
}
body.product-index .loujan-plp-view {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
width: 24px;
height: 24px;
padding: 2px;
border: 0.5px solid #999999;
background: #ffffff;
cursor: pointer;
}
body.product-index .loujan-plp-view i {
display: block;
width: 8px;
height: 20px;
background: #999999;
}
body.product-index .loujan-plp-view[data-view="large"] i {
width: 18px;
height: 18px;
}
body.product-index .loujan-plp-view.is-active {
border-color: #000000;
}
body.product-index .loujan-plp-view.is-active i {
background: #000000;
}
body.product-index .loujan-plp-filter-btn {
display: none;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: url("data:image/svg+xml;utf8,") center / 24px no-repeat;
cursor: pointer;
}
/* ---------- الفلاتر ---------- */
body.product-index .loujan-plp-filters {
flex: 0 0 var(--loujan-plp-filters-width);
width: var(--loujan-plp-filters-width);
padding-top: 56px;
color: #18181b;
}
body.product-index .loujan-plp-filters-head {
display: none;
}
body.product-index .loujan-plp-filter {
margin-bottom: 24px;
padding-bottom: 8px;
}
body.product-index .loujan-plp-filter[hidden] {
display: none;
}
body.product-index .loujan-plp-filter-title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0;
border: 0;
background: transparent;
font-size: 16px;
line-height: 24px;
color: #18181b;
cursor: pointer;
}
body.product-index .loujan-plp-filter-title::after {
content: "";
width: 8px;
height: 8px;
margin: 0 8px;
border-top: 1.5px solid #18181b;
border-left: 1.5px solid #18181b;
transform: rotate(45deg);
}
body.product-index .loujan-plp-filter.is-collapsed .loujan-plp-filter-title::after {
margin-top: -4px;
transform: rotate(225deg);
}
body.product-index .loujan-plp-filter.is-collapsed .loujan-plp-filter-body {
display: none;
}
body.product-index .loujan-plp-filter-body {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
body.product-index .loujan-plp-check {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 14px;
line-height: 24px;
color: #52525c;
cursor: pointer;
}
body.product-index .loujan-plp-check input {
appearance: none;
flex: 0 0 14px;
width: 14px;
height: 14px;
margin: 0;
border: 1px solid #52525c;
border-radius: 4px;
background: #ffffff center / 10px no-repeat;
cursor: pointer;
}
body.product-index .loujan-plp-check input:checked {
border-color: #27272a;
background-color: #27272a;
background-image: url("data:image/svg+xml;utf8,");
}
body.product-index .loujan-plp-price-boxes {
display: flex;
gap: 8px;
}
body.product-index .loujan-plp-price-box {
box-sizing: border-box;
display: flex;
flex: 1 1 0;
align-items: center;
gap: 6px;
height: 40px;
padding: 8px 12px;
border: 1px solid #e4e4e7;
border-radius: 2px;
background: #ffffff;
font-size: 16px;
color: #27272a;
}
body.product-index .loujan-plp-price-box i {
font-size: 12px;
color: #9f9fa9;
}
body.product-index .loujan-plp-price-box b {
font-weight: 400;
}
body.product-index .loujan-plp-range {
position: relative;
height: 16px;
margin-top: 4px;
direction: rtl;
}
body.product-index .loujan-plp-range::before,
body.product-index .loujan-plp-range::after {
content: "";
position: absolute;
top: 6px;
height: 4px;
border-radius: 8px;
}
body.product-index .loujan-plp-range::before {
right: 0;
left: 0;
background: #d4d7d9;
opacity: 0.5;
}
body.product-index .loujan-plp-range::after {
right: var(--loujan-plp-from, 0%);
left: calc(100% - var(--loujan-plp-to, 100%));
background: #27272a;
}
body.product-index .loujan-plp-range input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 16px;
margin: 0;
background: none;
appearance: none;
pointer-events: none;
}
body.product-index .loujan-plp-range input::-webkit-slider-thumb {
box-sizing: border-box;
width: 16px;
height: 16px;
border: 2px solid #27272a;
border-radius: 999px;
background: #ffffff;
appearance: none;
pointer-events: auto;
cursor: pointer;
}
body.product-index .loujan-plp-range input::-moz-range-thumb {
box-sizing: border-box;
width: 16px;
height: 16px;
border: 2px solid #27272a;
border-radius: 999px;
background: #ffffff;
pointer-events: auto;
cursor: pointer;
}
body.product-index .loujan-plp-range input::-webkit-slider-runnable-track {
background: transparent;
}
/* ---------- الشبكة والكروت ---------- */
body.product-index .main-content > .flex.min-h-screen {
min-height: 0;
}
body.product-index .s-products-list-wrapper {
display: grid;
grid-template-columns: repeat(var(--loujan-plp-columns), minmax(0, 1fr));
gap: 40px var(--loujan-plp-gap);
}
body.product-index .loujan-plp-large .s-products-list-wrapper {
--loujan-plp-columns: 2;
}
body.product-index .s-products-list-wrapper > * {
width: auto;
max-width: none;
}
body.product-index .s-products-list .s-product-card-image {
position: relative;
aspect-ratio: 346 / 490;
overflow: hidden;
border-radius: 0;
}
body.product-index .s-products-list .s-product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* القلب أعلى يمين الصورة، وإخفاء العين */
body.product-index .s-products-list .s-product-card-image .flex-action {
top: 11px !important;
right: 16px !important;
left: auto !important;
opacity: 1 !important;
}
body.product-index .s-products-list .s-product-card-quick-btn {
display: none;
}
body.product-index .s-products-list .s-product-card-wishlist-btn {
width: 32px;
height: 32px;
border: 0;
border-radius: 99px;
background: rgba(255, 255, 255, 0.35);
}
body.product-index .s-products-list .s-product-card-content {
flex-grow: 0;
gap: 16px;
padding: 24px 16px 0;
}
body.product-index .s-products-list .s-product-card-content-category {
display: none;
}
body.product-index .s-products-list .s-product-card-content-sub {
margin-top: 4px !important;
}
body.product-index .s-products-list .s-product-card-content-title {
font-size: 20px;
font-weight: 400;
line-height: 24px;
color: #18181b;
}
body.product-index .s-products-list .s-product-card-price {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.4px;
color: #1e1e1e;
}
body.product-index .s-products-list .salla-add-product-button {
width: 38px;
height: 38px;
border-radius: 99px;
background: var(--loujan-pdp-primary, #4b225b);
color: #ffffff;
}
body.product-index .s-products-list .sizes-wrapper:not(:first-child) {
display: none;
}
body.product-index .s-products-list .sizes-wrapper {
margin-bottom: 0;
}
body.product-index .s-products-list .sizes {
gap: 8px;
}
body.product-index .s-products-list .sizes > button,
body.product-index .s-products-list .sizes > span {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 28px;
padding: 8px 12px;
border: 1px solid #a1a1a1;
border-radius: 2px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
line-height: 20px;
color: #27272a;
}
/* ---------- موبايل ---------- */
@media (max-width: 1023px) {
:root {
--loujan-plp-gutter: 16px;
--loujan-plp-columns: 2;
}
body.product-index .loujan-plp-head {
gap: 8px;
padding-top: 24px;
}
body.product-index .loujan-plp-head h1,
body.product-index .loujan-plp-head-count {
font-size: 16px;
line-height: 19px;
}
body.product-index .loujan-plp-head p {
font-size: 14px;
line-height: 21px;
}
body.product-index .loujan-plp-head nav {
font-size: 12px;
line-height: 19px;
}
body.product-index .AR-index > .container.mb-10 {
margin-top: 24px;
}
body.product-index .loujan-plp-toolbar {
height: 24px;
margin-bottom: 16px;
}
body.product-index .AR-index > .container.mb-10 > .flex {
display: block;
}
body.product-index .loujan-plp-large .s-products-list-wrapper {
--loujan-plp-columns: 1;
}
body.product-index .loujan-plp-filter-btn {
display: block;
}
body.product-index .loujan-plp-filters {
position: fixed;
inset: 0;
z-index: 1000;
box-sizing: border-box;
display: none;
width: auto;
padding: 16px;
overflow-y: auto;
background: #ffffff;
}
body.product-index .loujan-plp-filters.is-open {
display: block;
}
body.product-index .loujan-plp-filters-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
font-size: 18px;
}
body.product-index .loujan-plp-filters-close {
position: relative;
width: 32px;
height: 32px;
border: 0;
background: transparent;
}
body.product-index .loujan-plp-filters-close::before,
body.product-index .loujan-plp-filters-close::after {
content: "";
position: absolute;
top: 15px;
left: 6px;
width: 20px;
height: 1.5px;
background: #18181b;
transform: rotate(45deg);
}
body.product-index .loujan-plp-filters-close::after {
transform: rotate(-45deg);
}
body.product-index .s-advertisement-content {
min-height: 37px;
padding: 0 16px !important;
}
body.product-index .s-advertisement-content-main a {
font-size: 12px;
font-weight: 700;
line-height: 12px;
}
}
/* ==========================================================================
Cart — صفحة السلة (body.cart)
Figma desktop 182:8778 · mobile 99:2084
========================================================================== */
/* عناصر مش موجودة في التصميم */
body.cart .top-lace,
body.cart #main-content > div.px-4 > nav.breadcrumbs,
body.cart #cart-gifting,
body.cart .loujan-cart-card > .py-5.mb-5,
body.cart #shipping-cost,
body.cart section.cart-item section.bg-white {
display: none !important;
}
body.cart #main-content > div.px-4 {
box-sizing: border-box;
padding-right: 16px;
padding-left: 16px;
background: #ffffff;
}
/* ---------- العنوان ---------- */
body.cart .loujan-cart-head {
display: flex;
align-items: center;
gap: 8px;
padding: 24px 0 16px;
}
body.cart .loujan-cart-head h1 {
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: #27272a;
}
body.cart .loujan-cart-head-count {
font-size: 12px;
line-height: 16px;
color: #71717b;
}
/* ---------- التخطيط ---------- */
body.cart .loujan-cart-page > div.flex {
padding-top: 0;
padding-bottom: 24px;
}
body.cart .loujan-cart-page .main-content {
width: 100%;
}
body.cart .loujan-cart-summary {
position: static;
width: 100%;
margin: 0 !important;
}
/* ---------- الأصناف ---------- */
body.cart .loujan-cart-page .main-content form {
display: flex;
flex-direction: column;
gap: 8px;
}
body.cart section.cart-item {
position: relative;
margin: 0;
padding: 10px;
border-radius: 4px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
}
body.cart section.cart-item > div.items-start {
display: block;
margin: 0;
}
body.cart section.cart-item > div.items-start > div {
display: flex;
flex-direction: column;
gap: 8px;
}
body.cart section.cart-item > div.items-start > div > div {
margin: 0 !important;
}
/* صورة + تفاصيل */
body.cart section.cart-item > div.items-start > div > div:first-child {
display: flex;
flex-direction: row;
gap: 16px;
width: 100%;
margin-bottom: 0 !important;
}
body.cart section.cart-item a.relative {
flex: 0 0 95px;
width: 95px;
height: 160px;
overflow: hidden;
}
body.cart section.cart-item a.relative img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.cart section.cart-item .space-y-1 {
display: flex;
flex-direction: column;
gap: 8px;
}
body.cart section.cart-item .space-y-1 > * {
margin: 0 !important;
}
body.cart section.cart-item h1 {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.4px;
color: #27272a;
}
body.cart section.cart-item h1 a {
font-size: 14px;
}
body.cart section.cart-item .s-product-options-option {
display: flex;
align-items: center;
gap: 12px;
}
body.cart section.cart-item .s-product-options-option-label {
flex: none;
margin: 0;
font-size: 12px;
line-height: 20px;
color: #18181b;
}
body.cart section.cart-item .s-product-options-option-label b {
font-weight: 400;
}
body.cart section.cart-item .s-product-options-option-label b span,
body.cart section.cart-item .s-product-options-option-label small {
display: none;
}
body.cart section.cart-item .s-product-options-option-content {
flex: 0 0 120px;
width: 120px;
max-width: 120px;
overflow: visible;
}
body.cart section.cart-item .s-product-options-option-content > div {
width: 100%;
}
body.cart section.cart-item .s-product-options-option-content select {
box-sizing: border-box;
width: 100%;
height: 28px;
padding: 0 12px;
border: 1px solid #d4d4d8;
border-radius: 0;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: left 8px center;
background-size: 16px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
color: #27272a;
}
body.cart section.cart-item .item-price {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: #1e1e1e;
}
/* السعر داخل التفاصيل (موبايل) وفي عمود الأزرار (ديسكتوب) */
body.cart section.cart-item .space-y-1 > div.md\:hidden {
display: flex !important;
}
body.cart section.cart-item div.hidden.md\:flex {
display: none !important;
}
/* الأزرار: كمية + حذف + مفضلة */
body.cart section.cart-item > div.items-start > div > div:last-child {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
width: 100%;
}
body.cart section.cart-item salla-quantity-input {
display: block;
}
body.cart section.cart-item .s-quantity-input-container {
box-sizing: border-box;
display: flex;
align-items: center;
height: 32px;
border: 1px solid #e4e4e7 !important;
border-radius: 2px !important;
background: #ffffff;
}
body.cart section.cart-item .s-quantity-input-button {
width: 28px;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: #52525c;
}
body.cart section.cart-item .s-quantity-input-button svg,
body.cart section.cart-item .s-quantity-input-button i {
width: 12px;
height: 12px;
font-size: 12px;
}
body.cart section.cart-item .s-quantity-input-input {
width: 28px;
height: 100%;
border: 0;
background: transparent;
font-size: 12px;
letter-spacing: 0.2px;
text-align: center;
color: #52525c;
}
body.cart section.cart-item span.flex {
gap: 4px;
}
body.cart section.cart-item span.flex .s-button-element {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 2px;
background: transparent;
box-shadow: none;
}
/* ---------- ملخص الطلب ---------- */
body.cart .loujan-cart-card {
box-sizing: border-box;
margin: 0 !important;
padding: 24px 0 !important;
border-radius: 4px;
background: #ffffff;
box-shadow: none;
}
body.cart .loujan-cart-card h2 {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
line-height: 28px;
color: #27272a;
}
body.cart .loujan-cart-card #free-shipping,
body.cart .loujan-cart-card #coupon-input + salla-button,
body.cart .loujan-cart-card > .border-b {
display: none;
}
body.cart .loujan-cart-card .flex.justify-between.text-sm {
margin-bottom: 12px;
font-size: 14px;
line-height: 20px;
}
body.cart .loujan-cart-card .flex.justify-between.text-sm span,
body.cart .loujan-cart-card .flex.justify-between.text-sm b {
font-weight: 400;
color: #71717b;
}
body.cart .loujan-cart-card .flex.justify-between.text-lg {
align-items: center;
margin: 0 0 16px;
padding-top: 16px;
border-top: 1px solid #e4e4e7;
font-size: 16px;
line-height: 24px;
}
body.cart .loujan-cart-card .flex.justify-between.text-lg span,
body.cart .loujan-cart-card .flex.justify-between.text-lg b {
font-weight: 500;
color: #27272a;
}
body.cart .loujan-cart-total-desktop {
display: none;
}
body.cart #cart-submit .s-button-element {
box-sizing: border-box;
width: 100%;
height: 48px;
border: 0;
border-radius: 0;
background: #000000;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.4px;
color: #ffffff;
}
body.cart .cart-submit-wrap,
body.cart .cart-submit-wrap.sticky-cart-button {
position: static !important;
inset: auto !important;
width: 100% !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.cart #cart-submit-placeholder {
display: none !important;
}
body.cart section.cart-item .s-product-options-option-content > div {
overflow: visible;
}
body.cart section.cart-item .s-product-options-option-content select {
min-width: 0;
}
body.cart .loujan-cart-installments,
body.cart .loujan-cart-trust {
display: none;
}
body.cart .loujan-cart-card .mt-5 {
margin-top: 24px;
}
/* ---------- قد يعجبك أيضا ---------- */
body.cart .single-product-slider h1 {
font-size: 0;
}
body.cart .single-product-slider h1::after {
content: "قطع مشابهة";
font-size: 20px;
}
/* ---------- ديسكتوب ---------- */
@media (min-width: 1024px) {
body.cart #main-content > div.px-4 {
padding-right: 56px;
padding-left: 56px;
}
body.cart .loujan-cart-head {
padding: 42px 0 42px;
}
body.cart .loujan-cart-page > div.flex {
flex-direction: row;
align-items: flex-start;
gap: 32px;
padding-bottom: 40px;
}
body.cart .loujan-cart-summary {
order: 1;
flex: 0 0 419px;
width: 419px;
}
body.cart .loujan-cart-page .main-content {
order: 2;
flex: 1 1 0;
width: auto;
min-width: 0;
}
body.cart .loujan-cart-page .main-content form {
gap: 0;
padding: 16px;
border-radius: 4px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
}
body.cart section.cart-item {
padding: 16px 0;
border-radius: 0;
border-bottom: 1px solid #e4e4e7;
box-shadow: none;
}
body.cart section.cart-item:first-of-type {
padding-top: 0;
}
body.cart section.cart-item:last-of-type {
padding-bottom: 0;
border-bottom: 0;
}
body.cart section.cart-item > div.items-start > div {
flex-direction: row;
align-items: stretch;
justify-content: space-between;
gap: 16px;
}
body.cart section.cart-item > div.items-start > div > div:first-child {
flex: 1 1 0;
width: auto;
}
body.cart section.cart-item a.relative {
flex: 0 0 120px;
width: 120px;
height: 161px;
}
body.cart section.cart-item > div.items-start > div > div:last-child {
flex: 0 0 auto;
flex-direction: column-reverse;
align-items: flex-start;
justify-content: space-between;
width: auto;
padding: 4px 0;
}
body.cart section.cart-item .space-y-1 > div.md\:hidden {
display: none !important;
}
body.cart section.cart-item div.hidden.md\:flex {
display: flex !important;
}
body.cart .loujan-cart-card {
padding: 16px !important;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
}
body.cart .loujan-cart-card #free-shipping {
display: block;
margin: 0 0 16px;
padding: 0 !important;
background: transparent;
box-shadow: none;
}
body.cart #free-shipping p,
body.cart #free-shipping-msg {
font-size: 12px;
line-height: 16px;
color: #71717b;
}
body.cart #free-shipping-bar {
height: 4px;
margin-top: 8px;
border-radius: 42px;
background: #e4e4e7;
}
body.cart #free-shipping-bar .progress-bg {
border-radius: 42px;
background: #4b225b;
}
body.cart .loujan-cart-card > .border-b {
display: block;
margin: 0 0 16px;
padding: 0;
border: 0;
}
body.cart .loujan-cart-card > .border-b label {
display: none;
}
body.cart .loujan-cart-card > .border-b .mt-2\.5 {
margin: 0;
}
body.cart .loujan-cart-card #coupon-input {
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 4px 12px 4px 100px;
border: 1px solid #d4d4d8;
border-radius: 4px;
background: #ffffff;
font-size: 14px;
letter-spacing: 0.4px;
}
body.cart .loujan-cart-card #coupon-input + salla-button {
display: block;
position: absolute;
top: 4px;
left: 4px;
}
body.cart #coupon-btn .s-button-element {
height: 32px;
padding: 8px 24px;
border: 0;
border-radius: 2px;
background: #000000;
font-size: 14px;
letter-spacing: 0.4px;
color: #ffffff;
}
body.cart .loujan-cart-card .flex.justify-between.text-sm {
font-size: 16px;
line-height: 24px;
}
body.cart .loujan-cart-total-desktop {
display: inline;
}
body.cart .loujan-cart-total-mobile {
display: none;
}
body.cart .loujan-cart-installments {
display: flex;
gap: 8px;
margin-top: 24px;
}
body.cart .loujan-cart-installment {
flex: 1 1 0;
min-width: 0;
}
body.cart .loujan-cart-installment img {
position: relative;
z-index: 2;
display: block;
height: 26px;
margin: 0 12px -10px auto;
}
body.cart .loujan-cart-installment p {
position: relative;
z-index: 1;
margin: 0;
padding: 16px 12px;
border: 1px solid #e4e4e7;
border-radius: 2px;
font-size: 12px;
line-height: 18px;
color: #27272a;
}
body.cart .loujan-cart-installment b {
font-weight: 700;
color: #4b225b;
}
body.cart .loujan-cart-trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
}
body.cart .loujan-cart-trust > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
body.cart .loujan-cart-trust img {
width: 35px;
height: 35px;
object-fit: contain;
}
body.cart .loujan-cart-trust span {
font-size: 14px;
font-weight: 300;
line-height: 20px;
color: #27272a;
}
body.cart .single-product-slider h1::after {
content: "قد يعجبك أيضا";
}
}
body.cart .single-product-slider:not(:has(custom-salla-product-card)) {
display: none;
}
/* أيقونتا المفضلة والمشاركة بدون إطار (PDP) */
body.product-single .main-content > .flex.align-center .s-button-element,
body.product-single .main-content > .flex.align-center .s-social-share-btn {
width: 32px;
height: 32px;
padding: 0;
border: 0 !important;
border-radius: 2px;
background: transparent !important;
box-shadow: none;
}
/* ==========================================================================
Drawer — السلة الجانبية (#sidecart-panel)
Figma desktop 193:7311 · mobile 99:1745
========================================================================== */
#sidecart-panel {
box-sizing: border-box;
width: 589px !important;
max-width: 100vw;
background: #ffffff;
box-shadow: none;
}
#sidecart-panel .side-panel__top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0;
padding: 0;
}
#sidecart-panel .menu-close {
top: 48px !important;
left: 32px !important;
right: auto !important;
width: 24px;
height: 24px;
border-radius: 0;
background: transparent !important;
color: #18181b !important;
}
#sidecart-panel .menu-close i {
font-size: 20px;
}
#sidecart-panel .side-panel__content {
padding: 48px 32px 16px;
}
#sidecart-panel .side-panel__content > h2 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
padding-bottom: 16px;
border-bottom: 1px solid #e4e4e7;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #3f3f46;
}
#sidecart-panel .sidecart-products-count {
font-size: 16px;
font-weight: 400;
line-height: 16px;
color: #71717b;
}
#sidecart-panel #free-shipping {
display: none !important;
}
/* ---------- الأصناف ---------- */
#sidecart-panel #sidecart-items form {
margin: 0;
}
#sidecart-panel section.cart-item {
position: relative;
margin: 0;
padding: 16px 0;
border-bottom: 1px solid #e4e4e7;
background: transparent;
}
#sidecart-panel #sidecart-items form:first-child section.cart-item {
padding-top: 0;
}
#sidecart-panel #sidecart-items form:last-child section.cart-item {
padding-bottom: 0;
border-bottom: 0;
}
#sidecart-panel section.cart-item > .grid {
grid-template-columns: 120px 1fr;
gap: 0 16px;
min-height: 161px;
}
#sidecart-panel section.cart-item > .grid > a {
width: 120px !important;
height: 161px !important;
overflow: hidden;
}
#sidecart-panel section.cart-item > .grid > a img {
width: 100%;
height: 100%;
object-fit: cover;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(2) {
display: block;
padding: 4px 0 0 96px;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(2) > a {
display: -webkit-box;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.4px;
color: #27272a;
}
#sidecart-panel section.cart-item .delete-btn {
position: absolute;
bottom: 20px;
left: 0;
width: 32px;
height: 32px;
padding: 0;
border-radius: 2px;
color: #18181b;
}
#sidecart-panel section.cart-item .delete-btn i {
font-size: 18px;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(3) {
position: absolute;
top: 20px;
left: 0;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
#sidecart-panel #sidecart-items form:first-child section.cart-item > .grid > .flex:nth-child(3) {
top: 4px;
}
#sidecart-panel #sidecart-items form:last-child section.cart-item .delete-btn {
bottom: 4px;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(3) span {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: #1e1e1e;
}
#sidecart-panel section.cart-item .s-quantity-input-container {
box-sizing: border-box;
display: flex;
align-items: center;
width: 80px;
height: 32px;
border: 1px solid #e4e4e7 !important;
border-radius: 2px !important;
background: #ffffff;
}
#sidecart-panel section.cart-item .s-quantity-input-button {
width: 28px;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: #52525c;
}
#sidecart-panel section.cart-item .s-quantity-input-button svg {
width: 12px;
height: 12px;
}
#sidecart-panel section.cart-item .s-quantity-input-input {
width: 24px;
height: 100%;
padding: 0;
border: 0;
background: transparent;
font-size: 12px;
letter-spacing: 0.2px;
text-align: center;
color: #52525c;
}
/* ---------- الفوتر ---------- */
#sidecart-panel .side-panel__bottom {
gap: 12px;
padding: 16px 32px 38px;
border-top: 1px solid #e4e4e7;
background: #ffffff;
}
#sidecart-panel .side-panel__bottom > .border-b,
#sidecart-panel .side-panel__bottom > .flex.justify-between.text-sm,
#sidecart-panel .close-side-panel {
display: none !important;
}
#sidecart-panel .cart-subtotal {
height: 36px;
padding: 0;
border-top: 0;
}
#sidecart-panel .cart-subtotal h5 {
margin: 0;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.4px;
color: #27272a;
}
#sidecart-panel #sidecart-total {
font-size: 16px;
font-weight: 400;
letter-spacing: -0.32px;
color: #000000;
}
#sidecart-panel .side-panel__bottom > .flex.gap-1 {
gap: 8px;
}
#sidecart-panel #sidecart-submit,
#sidecart-panel .loujan-drawer-checkout {
box-sizing: border-box;
display: flex;
flex: 1 1 0;
align-items: center;
justify-content: center;
height: 42px;
padding: 12px 0;
border: 1px solid #000000;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.4px;
line-height: 20px;
cursor: pointer;
}
#sidecart-panel #sidecart-submit {
background: #ffffff;
color: #000000;
}
#sidecart-panel .loujan-drawer-checkout {
background: #000000;
color: #ffffff;
}
#sidecart-panel .loujan-drawer-label-mobile {
display: none;
}
/* ---------- موبايل ---------- */
@media (max-width: 1023px) {
#sidecart-panel {
top: var(--loujan-drawer-top, 93px) !important;
bottom: 0;
height: auto !important;
width: 297px !important;
}
#sidecart-overlay {
top: var(--loujan-drawer-top, 93px);
}
#sidecart-panel .menu-close {
top: 16px !important;
left: 16px !important;
width: 20px;
height: 20px;
}
#sidecart-panel .side-panel__content {
padding: 16px 16px 16px;
}
#sidecart-panel .side-panel__content > h2 {
padding-bottom: 8px;
}
#sidecart-panel section.cart-item > .grid {
grid-template-columns: 90px 1fr;
min-height: 121px;
}
#sidecart-panel section.cart-item > .grid > a {
width: 90px !important;
height: 121px !important;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(2) {
padding: 0;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(3) {
position: static;
justify-content: space-between;
gap: 0;
align-self: stretch;
}
#sidecart-panel section.cart-item > .grid > .flex:nth-child(3) span {
font-size: 14px;
line-height: 19px;
}
#sidecart-panel section.cart-item .delete-btn {
bottom: 16px;
}
#sidecart-panel #sidecart-items form:last-child section.cart-item .delete-btn {
bottom: 0;
}
#sidecart-panel .side-panel__bottom {
padding: 16px 16px 24px;
}
#sidecart-panel .loujan-drawer-label-desktop {
display: none;
}
#sidecart-panel .loujan-drawer-label-mobile {
display: inline;
}
}
/* ==========================================================================
مراجعة المطابقة — كروت المنتجات (عام) + الرئيسية
========================================================================== */
@media (min-width: 1024px) {
:root {
--loujan-home-slider-gutter: 56px;
}
}
/* كرت المنتج حسب Figma (كل الصفحات) */
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-image {
position: relative;
aspect-ratio: 346 / 490;
overflow: hidden;
border-radius: 0;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-image .flex-action {
top: 11px !important;
right: 16px !important;
left: auto !important;
opacity: 1 !important;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-quick-btn {
display: none;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-wishlist-btn {
width: 32px;
height: 32px;
border: 0;
border-radius: 99px;
background: rgba(255, 255, 255, 0.35);
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content {
flex-grow: 0;
gap: 16px;
padding: 24px 16px 0;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-category {
display: none !important;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-sub {
margin-top: 4px !important;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-title {
font-size: 20px;
font-weight: 400;
line-height: 24px;
color: #18181b;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-price {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.4px;
color: #1e1e1e;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .salla-add-product-button {
width: 38px;
height: 38px;
border-radius: 99px;
background: var(--loujan-pdp-primary, #4b225b);
color: #ffffff;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes-wrapper:not(:first-child) {
display: none;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes-wrapper {
margin-bottom: 0;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes {
gap: 8px;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes > button,
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes > span {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 28px;
padding: 8px 12px;
border: 1px solid #a1a1a1;
border-radius: 2px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
line-height: 20px;
color: #27272a;
}
@media (max-width: 1023px) {
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-image {
aspect-ratio: 199 / 298;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content {
gap: 6px;
padding: 12px 0 0;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-title {
font-size: 14px;
line-height: 24px;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-price {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.32px;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes {
flex-wrap: nowrap;
gap: 4px;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes > button {
flex: 0 0 38px;
min-width: 0;
height: 24px;
padding: 0;
border-radius: 2px;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .sizes > span {
flex: 0 0 auto;
min-width: 0;
height: 24px;
padding: 0 4px;
border: 0;
background: transparent;
color: #71717b;
}
body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .salla-add-product-button {
width: 32px;
height: 32px;
background: rgba(230, 230, 230, 0.5);
color: #18181b;
}
}
/* كروت داخل بانرات الرئيسية (أصغر) */
body.index .Ar-products-banner custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-title,
body.index .Ar-products-banner custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-price {
font-size: 16px;
}
/* عنوان السلايدرات: «شاهدي المزيد» بدل «عرض الكل» + بدون أسهم */
body.index section.s-block--best-offers .s-slider-block__title {
margin-bottom: 24px;
}
body.index section.s-block--best-offers .s-slider-block__title h2 {
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: #18181b;
}
body.index section.s-block--best-offers .s-slider-block__title-nav {
display: none;
}
body.index section.s-block--best-offers .s-slider-block__display-all {
font-size: 0;
}
body.index section.s-block--best-offers .s-slider-block__display-all::after {
content: "شاهدي المزيد";
font-size: 14px;
font-weight: 700;
letter-spacing: 0.4px;
line-height: 24px;
color: #18181b;
text-decoration: underline;
}
/* هيرو الرئيسية: ارتفاع ثابت حسب Figma (1512×685) */
@media (min-width: 768px) {
body.index section.AR-hero-section-0 .banner {
height: clamp(420px, 45.3vw, 760px) !important;
}
}
/* ==========================================================================
مراجعة المطابقة — PDP موبايل (Figma 296:4467)
========================================================================== */
body.product-single .loujan-pdp-dots {
display: none;
}
@media (max-width: 1023px) {
/* مسار التنقل أعلى المعرض */
body.product-single #main-content > nav.breadcrumbs {
display: block !important;
padding: 14px 18px;
font-size: 12px;
line-height: 19px;
color: #18181b;
}
body.product-single #main-content > nav.breadcrumbs .s-breadcrumb-wrapper {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
body.product-single #main-content > nav.breadcrumbs li:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.product-single #main-content > nav.breadcrumbs a,
body.product-single #main-content > nav.breadcrumbs li {
font-size: 12px;
color: #18181b;
}
body.product-single #main-content > nav.breadcrumbs .s-breadcrumb-arrow svg {
display: none;
}
body.product-single #main-content > nav.breadcrumbs .s-breadcrumb-arrow::before {
content: "/";
}
/* مؤشرات المعرض */
body.product-single .loujan-pdp-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
}
body.product-single .loujan-pdp-play {
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: #71717b;
position: relative;
}
body.product-single .loujan-pdp-play::before {
content: "";
position: absolute;
top: 5px;
left: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #ffffff;
}
body.product-single .loujan-pdp-bar {
width: 50px;
height: 2px;
padding: 0;
border: 0;
background: #d4d4d8;
}
body.product-single .loujan-pdp-bar.is-active {
background: #18181b;
}
/* أيقونات المشاركة والمفضلة بجانب العنوان */
body.product-single .main-content > .flex.align-center > div.hidden {
display: flex !important;
align-items: center;
}
body.product-single .main-content > .flex.align-center {
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* أزرار الشراء: شريط ثابت أسفل الشاشة (الأزرار الأصلية تبقى مخفية وتستقبل الضغط) */
body.product-single .product-form .sticky-product-bar__btn,
body.product-single .product-form .loujan-pdp-buy-now {
display: none !important;
}
body.product-single .loujan-pdp-fixed-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 60;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: #ffffff;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
body.product-single .loujan-pdp-fixed-bar button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 48px;
border-radius: 4px;
font-size: 14px;
line-height: 28px;
cursor: pointer;
}
body.product-single .loujan-pdp-fixed-bar .loujan-pdp-fixed-add {
border: 1px solid #000000;
background: #000000;
color: #ffffff;
}
body.product-single .loujan-pdp-fixed-bar .loujan-pdp-fixed-buy {
border: 1.5px solid #262626;
background: #ffffff;
color: #262626;
}
body.product-single .loujan-pdp-fixed-bar img {
width: 20px;
height: 20px;
object-fit: cover;
}
body.product-single #main-content {
padding-bottom: 140px;
}
body.product-single .main-content > .flex.align-center > div.hidden {
flex-direction: row-reverse;
}
}
@media (min-width: 1024px) {
body.product-single .loujan-pdp-fixed-bar {
display: none;
}
}
.s-products-slider-card > custom-salla-product-card,
.swiper-slide > custom-salla-product-card {
width: 100% !important;
max-width: none;
}
/* عناصر خارج التصميم في كل الصفحات */
.top-lace {
display: none !important;
}
/* لوجو الموبايل: 129×49 */
@media (max-width: 1023px) {
.site-header-mobile > .flex.shrink-0 {
flex: 0 0 129px;
width: 129px !important;
height: 49px !important;
padding: 0 !important;
}
.site-header-mobile .navbar-brand {
display: block;
width: 129px;
height: 49px;
}
.site-header-mobile .navbar-brand img.loujan-mobile-logo {
width: 129px !important;
height: 49px !important;
max-width: none;
object-fit: contain;
}
}
/* هيرو الرئيسية موبايل: 440×727 */
@media (max-width: 767px) {
body.index section.AR-hero-section-0 .banner {
height: auto !important;
aspect-ratio: 440 / 727;
}
body.index section.s-block--best-offers .s-slider-block__title h2 {
font-size: 16px;
line-height: 24px;
}
body.index section.s-block--best-offers .s-slider-block__display-all::after {
font-size: 12px;
}
}
/* فراغ الهيدر حسب Figma (الإعلان 64 + 11 + الهيدر 60) */
.main-nav-container .top-navbar {
display: none !important;
}
@media (min-width: 1024px) {
.main-nav-container .inner {
margin-top: 11px;
}
}
/* ==========================================================================
بانر + سلايدر منتجات (الرئيسية موبايل): الكروت فوق أسفل صورة البانر
Figma 294:5457 / 294:5539 — الصورة 406×608، السلايدر يبدأ بعد 456px من أعلاها
========================================================================== */
@media (max-width: 1023px) {
body.index section.Ar-products-banner > .grid {
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: 0;
padding: 32px 17px;
}
/* العنوان أولاً */
body.index section.Ar-products-banner > .grid > .lg\:hidden.features-products-head {
order: 1;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 4px;
margin-bottom: 16px;
text-align: center;
}
body.index section.Ar-products-banner > .grid > .lg\:hidden.features-products-head a {
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: #18181b;
}
body.index section.Ar-products-banner > .grid > .lg\:hidden.features-products-head h2 {
font-size: 16px;
line-height: 24px;
color: #18181b;
}
/* صورة البانر */
body.index section.Ar-products-banner > .grid > .overflow-hidden {
order: 2;
height: auto !important;
aspect-ratio: 406 / 608;
width: 100%;
}
/* السلايدر يتداخل مع أسفل الصورة */
body.index section.Ar-products-banner > .grid > .lg\:col-span-2 {
order: 3;
position: relative;
z-index: 2;
box-sizing: border-box;
width: 100%;
margin: -152px 0 0 !important;
padding: 0 20px;
}
body.index section.Ar-products-banner > .grid > .lg\:col-span-2 > .relative {
margin: 0 !important;
}
body.index section.Ar-products-banner salla-products-slider {
margin-top: 0 !important;
max-width: none !important;
}
body.index section.Ar-products-banner .swiper {
background: transparent;
}
body.index section.Ar-products-banner .s-products-slider-card {
background: #ffffff;
}
}
/* ===== Loujan — كوبون "LJ" على شكل تذكرة (كود مستقل) ===== */
.lj-coupon { font-family: inherit; color: #18181b; --lj-green: #1f5c2e; --lj-notch: #fff; }
.lj-coupon .sicon-sar { font-size: .85em; }
/* ---------- التذكرة (زرار واحد — الضغط في أي مكان بينسخ) ---------- */
.lj-ticket {
display: inline-flex;
align-items: stretch;
padding: 0;
border: 0;
border-radius: 10px;
overflow: hidden;
background: #fff;
font: inherit;
line-height: 1;
cursor: pointer;
position: relative;
box-shadow: 0 0 0 1.5px var(--lj-green), 0 4px 12px rgba(31, 92, 46, .18);
transition: transform .15s, box-shadow .15s;
}
.lj-ticket:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--lj-green), 0 6px 16px rgba(31, 92, 46, .28); }
.lj-ticket:active { transform: scale(.97); }
/* الجزء الأخضر: قيمة الخصم + لمعة متحركة */
.lj-ticket__off {
display: flex;
align-items: center;
gap: 4px;
padding: 0 12px;
min-height: 40px;
background: var(--lj-green);
color: #fff;
font-weight: 800;
font-size: 15px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.lj-ticket__off::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 40%;
inset-inline-start: -60%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
animation: lj-shine 3.2s ease-in-out infinite;
}
@keyframes lj-shine {
0%, 55% { inset-inline-start: -60%; }
100% { inset-inline-start: 130%; }
}
/* جزء الكود: حد متقطع + قصّتين دائريتين عند الفاصل */
.lj-ticket__code {
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
color: var(--lj-green);
border-inline-start: 2px dashed var(--lj-green);
position: relative;
white-space: nowrap;
}
.lj-ticket__code::before,
.lj-ticket__code::after {
content: "";
position: absolute;
inset-inline-start: -7px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--lj-notch);
box-shadow: 0 0 0 1.5px var(--lj-green);
}
.lj-ticket__code::before { top: -7px; }
.lj-ticket__code::after { bottom: -7px; }
.lj-ticket__code small { font-size: 11px; font-weight: 500; opacity: .75; }
.lj-ticket__code b { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.lj-ticket.is-copied .lj-ticket__code { background: var(--lj-green); color: #fff; }
.lj-ticket.is-copied .lj-ticket__code small,
.lj-ticket.is-copied .lj-ticket__code svg { display: none; }
@media (prefers-reduced-motion: reduce) {
.lj-ticket__off::after { animation: none; display: none; }
.lj-ticket { transition: none; }
}
/* ---------- صفحة المنتج: جنب السعر ---------- */
.lj-coupon--product {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-size: 13px;
}
.lj-coupon--product .lj-coupon__after { font-size: 13px; color: #555; }
.lj-coupon--product .lj-coupon__after b { color: var(--lj-green); font-size: 15px; }
/* ---------- الشريط تحت الهيدر ---------- */
.lj-coupon--strip {
--lj-notch: #f4efe7;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 12px;
min-height: 56px;
padding: 8px 16px;
background: #f4efe7;
border-bottom: 1px solid #e6dfd3;
text-align: center;
}
.lj-coupon__lead { font-size: 14px; font-weight: 700; color: #18181b; }
/* الرئيسية: الشريط بياخد مسافته من تحت الهيدر بنفسه (الـ JS بيحدّث المتغير) */
body.index .lj-coupon--home { margin-top: var(--lj-strip-top, 60px) !important; }
/* ==========================================================================
Header — داخل الـ flow، أبيض ثابت، ملازق لحافة الشاشة (كل الصفحات)
الثيم بيخلّي الهيدر absolute فوق الهيرو ويحرّكه بـ style.top حسب الإعلان؛
هنا بنرجّعه في مكانه الطبيعي: [إعلان] → [هيدر] → [شريط الكوبون] → [المحتوى]
========================================================================== */
header.store-header {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
z-index: 50;
}
header.store-header {
min-height: 56px; /* يحجز مكان الهيدر لما .inner يتحول fixed مع السكرول */
}
@media (min-width: 1024px) {
header.store-header {
min-height: 60px;
}
.main-nav-container .inner {
margin-top: 0 !important;
}
}
/* ألوان الهيدر ثابتة: خلفية بيضا + كتابة وأيقونات غامقة (مفيش تحويل لأبيض) */
header.store-header .inner,
header.store-header .site-header-mobile {
background-color: #fff !important;
color: #18181b !important;
}
header.store-header .inner :is(a, button, span, i, svg, li),
header.store-header .site-header-mobile :is(a, button, span, i, svg) {
color: #18181b !important;
}
body.index .lj-coupon--home,
.lj-coupon--home {
margin-top: 0 !important;
}
/* ==========================================================================
كروت المنتجات — حالة المقاس المختار (الثيم بيضيف bg-primary للزر المختار
لكن ستايل المقاسات فوق كان بيمسحها)
========================================================================== */
body .sizes > button.bg-primary,
body .sizes > button.bg-primary:hover {
background: #18181b !important;
border-color: #18181b !important;
color: #ffffff !important;
}
/* صور الكروت المربعة (باندلز/مجموعات): تظهر كاملة بدون قص */
custom-salla-product-card.lj-card-wide-img .s-product-card-image {
background: #e2dfdc;
}
custom-salla-product-card.lj-card-wide-img .s-product-card-image img {
object-fit: contain !important;
object-position: center;
}
/* ==========================================================================
الرئيسية — مسافات السكشنز حسب Figma: 72px ديسكتوب / 32px موبايل
(الـ features و hero-4 ليهم padding داخلي فسيبناهم)
========================================================================== */
body.index .s-block--bundle-categories-grid-slider,
body.index .s-block--best-offers,
body.index .Ar-products-banner-6,
body.index .s-block--bundle-loujan-imprint,
body.index .AR-promo-banner-10 {
margin-top: 32px !important;
}
@media (min-width: 1024px) {
body.index .s-block--bundle-categories-grid-slider,
body.index .s-block--best-offers,
body.index .Ar-products-banner-6,
body.index .s-block--bundle-loujan-imprint,
body.index .AR-promo-banner-10 {
margin-top: 72px !important;
}
/* «بصمة لوجان»: الـ component كان واخد padding 80px فوق وتحت (Figma: العنوان ملازق للسكشن) */
body.index .s-block--bundle-loujan-imprint > * {
padding-top: 0 !important;
padding-bottom: 40px !important;
}
}
@media (max-width: 1023px) {
body.index .s-block--bundle-loujan-imprint > * {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* بانر الأساسيات (ديسكتوب): اسم القسم أولاً ثم «تسوقي الان» تحته صغير (Figma) */
@media (min-width: 1024px) {
body.index section.Ar-products-banner .features-products-head:not(.lg\:hidden) {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 4px;
text-align: center;
}
body.index section.Ar-products-banner .features-products-head:not(.lg\:hidden) a {
font-size: 24px;
font-weight: 700;
line-height: 28px;
color: #18181b;
}
body.index section.Ar-products-banner .features-products-head:not(.lg\:hidden) h2 {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #18181b;
}
}
/* شريط الإعلان (موبايل): Figma ارتفاع 37px، سطر واحد، خط 12px، أيقونة 24px */
@media (max-width: 1023px) {
body:is(.index, .product-single, .product-index, .cart) .s-advertisement {
min-height: 37px;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content {
box-sizing: border-box;
min-height: 37px;
padding: 6px 16px !important;
justify-content: center !important;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content-main {
display: flex;
flex: 0 0 auto !important;
align-items: center;
justify-content: center;
gap: 6px;
width: max-content !important;
max-width: 100%;
margin: 0 auto;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content-main a,
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content > a {
font-size: 12px !important;
font-weight: 700;
line-height: 12px;
white-space: nowrap;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-content-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
}
body:is(.index, .product-single, .product-index, .cart) .s-advertisement-action {
display: none !important;
}
}
/* عناوين سكشنز الرئيسية (موبايل): Figma عنوان 16px سطر واحد، padding جانبي 16px، «شاهدي المزيد» 12px */
@media (max-width: 767px) {
:root {
--loujan-featured-header-gutter: 32px;
--loujan-featured-title-size: 16px;
--loujan-featured-title-line-height: 24px;
--loujan-more-link-size: 12px;
--loujan-category-title-size: 16px;
--loujan-category-subtitle-size: 14px;
}
}
/* «لوجان ليست مجرد اسم» (موبايل): Figma — صورة تقريبًا مربعة، عنوان 20px، وصف 14px بعرض كامل */
@media (max-width: 1023px) {
body.index section.AR-promo-banner-10 > div {
padding: 0 !important;
gap: 16px;
}
body.index section.AR-promo-banner-10 .overflow-hidden {
width: calc(100% - 32px) !important;
height: auto !important;
aspect-ratio: 364 / 398;
margin: 0 auto;
}
body.index section.AR-promo-banner-10 .overflow-hidden img {
height: 100% !important;
object-fit: cover;
}
body.index section.AR-promo-banner-10 .text {
box-sizing: border-box;
padding: 0 16px !important;
}
body.index section.AR-promo-banner-10 .text > h2 {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 28px !important;
margin-bottom: 8px !important;
}
body.index section.AR-promo-banner-10 .text > p {
max-width: none !important;
margin: 0 0 12px !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 24px !important;
}
body.index section.AR-promo-banner-10 .text > a {
font-size: 14px;
font-weight: 700;
}
}
/* نافذة جدول المقاسات (صورة): تظهر كاملة داخل الشاشة بدون سكرول */
.loujan-size-chart {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.6);
}
.loujan-size-chart.is-open {
display: flex;
}
.loujan-size-chart__box {
position: relative;
display: flex;
max-width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 8px;
background: #ffffff;
}
.loujan-size-chart__img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 48px);
object-fit: contain;
}
.loujan-size-chart__close {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
font-size: 24px;
line-height: 36px;
cursor: pointer;
}
html.loujan-size-chart-open {
overflow: hidden;
}
/* ترتيب ثابت فوق الهيرو: الهيدر (z 50) ← الشريط ← الهيرو، والشريط داخل الـ flow ومش فوق الهيرو */
body.index .lj-coupon--strip {
position: relative;
z-index: 1;
flex: 0 0 auto;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.index section.AR-hero-section-0 {
position: relative;
z-index: 0;
margin-top: 0 !important;
}
/* هيرو الرئيسية: الصورة تتعرض من فوق (top) بدل النص */
body.index section.AR-hero-section-0 .banner {
background-position: center top !important;
}
/* ==========================================================================
الرئيسية — صفوف سلايدرات المنتجات حسب Figma (ديسكتوب):
العنوان على حافة 56، والكروت صف أعرض بـ 4px من كل ناحية (حافة 52)،
كارت 346 وفاصل 8. كان الثيم بيحط max-width 1280 على صف العنوان و320 على السلايد.
========================================================================== */
@media (min-width: 1024px) {
html body.index section.s-block--best-offers .s-slider-block__title {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
html body.index section.s-block--best-offers.container salla-products-slider .swiper {
width: calc(100% + 8px) !important;
margin: 0 -4px !important;
}
}
html body.index .s-products-slider-card {
max-width: none !important;
}
/* قسم التصنيفات (الرئيسية): Figma — العنوان على حافة 56، كارت 400 بفاصل 8، ومسافة 48 تحت العنوان */
@media (min-width: 1024px) {
:root {
--loujan-featured-header-max-width: none;
--loujan-featured-header-gutter: 112px;
--loujan-featured-header-gap: 48px;
--loujan-category-card-width: 400px;
--loujan-category-gap: 8px;
}
}
@media (max-width: 767px) {
:root {
--loujan-featured-header-gap: 20px;
--loujan-category-card-width: 280px;
--loujan-category-gap: 8px;
}
}
/* ==========================================================================
بانرات الأساسيات 6 / 7 (ديسكتوب) — Figma 402:5300
قسم بارتفاع 730: صورة 487×730 عند حافة 148 (92 من الكونتينر) + سلايدر 710 عند حافة 56
(الصورة يسار/السلايدر يمين في 6، والعكس في 7 — اتجاه الـ grid محفوظ)
========================================================================== */
@media (min-width: 1024px) {
html body.index section.Ar-products-banner-6 > .grid,
html body.index section.Ar-products-banner-7 > .grid {
display: grid !important;
grid-template-columns: 710px 487px !important;
align-items: center;
justify-content: space-between;
gap: 0 !important;
box-sizing: border-box;
padding: 56px 56px 56px 148px !important;
}
html body.index section.Ar-products-banner-6 > .grid > .lg\:col-span-2,
html body.index section.Ar-products-banner-7 > .grid > .lg\:col-span-2 {
grid-column: 1 !important;
grid-row: 1 !important;
width: 710px !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body.index section.Ar-products-banner-6 > .grid > .overflow-hidden,
html body.index section.Ar-products-banner-7 > .grid > .overflow-hidden {
grid-column: 2 !important;
grid-row: 1 !important;
width: 487px !important;
max-width: none !important;
height: 730px !important;
margin: -56px 0 !important;
}
html body.index section.Ar-products-banner-6 > .grid > .lg\:col-span-2 > .relative,
html body.index section.Ar-products-banner-7 > .grid > .lg\:col-span-2 > .relative {
margin-right: 0 !important;
margin-left: 0 !important;
}
/* الـ wrapper بتاع سلة كان عليه max-width 97% + padding 28 → السلايدر 596 (كارتين 286 + فاصل 24) بأسهم 57 */
html body.index section.Ar-products-banner salla-products-slider {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body.index section.Ar-products-banner salla-slider {
margin: 0 !important;
padding: 0 !important;
}
html body.index section.Ar-products-banner .s-products-slider-slider .swiper {
margin: 0 57px !important;
padding: 0 !important;
}
/* عنوان البانر: اسم القسم 20px bold + «تسوقي الان» 16px */
body.index section.Ar-products-banner .features-products-head:not(.lg\:hidden) a {
font-size: 20px;
line-height: 24px;
}
body.index section.Ar-products-banner .features-products-head:not(.lg\:hidden) h2 {
font-size: 16px;
line-height: 24px;
}
}
/* «كل ما تحتاجينه»: Figma ارتفاع 200 (عنوان على 38، صف أيقونات 64، 38 تحت) — بدون padding الـ component الخارجي */
body.index .s-block--bundle-features-grid > * {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* hero الإطلالات + سلايدر الترندات بلوك واحد في Figma (فاصل 33 مش 72) */
body.index .AR-hero-section-4 + .s-block--best-offers {
margin-top: 32px !important;
}
/* «لوجان ليست مجرد اسم» (ديسكتوب) — Figma 402:5381: قسم 550، صورة 501×550 عند حافة 56، والنص متمركز في باقي العرض */
@media (min-width: 1024px) {
html body.index section.AR-promo-banner-10 > div {
align-items: center;
gap: 0 !important;
padding: 0 !important;
}
html body.index section.AR-promo-banner-10 .text {
flex: 1 1 0;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 24px;
}
html body.index section.AR-promo-banner-10 .overflow-hidden {
flex: 0 0 501px;
width: 501px !important;
max-width: none !important;
height: 550px !important;
margin: 0 56px 0 0 !important;
}
html body.index section.AR-promo-banner-10 .text > h2 {
font-size: 28px !important;
font-weight: 700 !important;
line-height: 32px !important;
margin: 0 !important;
}
html body.index section.AR-promo-banner-10 .text > a {
margin-top: 16px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.loujan-promo-eyebrow {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: #18181b;
text-align: center;
}
/* ==========================================================================
كارت المنتج — Figma 402:5248 (ديسكتوب): صورة 346×490، 24 تحتها، صف المقاسات 28،
16، الاسم سطرين (48)، 4، السعر 24 → معلومات 120. زر السلة دايرة 38 على الشمال (22 / تحت 4)
الثيم كان مثبّت الصورة على 480px (min/max-height) وعلى padding 4/8 فبيتجاهل نسبة التصميم.
========================================================================== */
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-image {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 346 / 490;
}
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-image .product-flip-wrapper {
position: absolute !important;
inset: 0 !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
}
@media (min-width: 1024px) {
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content {
position: relative;
box-sizing: border-box;
gap: 0 !important;
min-height: 144px;
padding: 24px 16px 0 !important;
}
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-options {
margin-bottom: 16px !important;
}
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-title {
min-height: 48px;
margin: 0 !important;
}
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-sub {
height: 24px;
min-height: 0;
margin-top: 4px !important;
}
html body custom-salla-product-card.s-product-card-entry.s-product-card-vertical .s-product-card-content-sub .salla-add-product-button {
position: absolute;
bottom: 4px;
left: 22px;
}
}
/* ==========================================================================
صفحة المنتج (ديسكتوب) — Figma 173:6054
المعرض: صور 465×640 (نسبة 465/640) وفاصل 8 (كان 16 وبنسبة الصورة الأصلية 2:3)
«قد يعجبك أيضا»: صف العنوان على حافة 56 وكروت 346 بفاصل 8 زي الرئيسية
========================================================================== */
@media (min-width: 1024px) {
html body.product-single .sidebar .grid-cols-2 {
gap: 8px !important;
}
html body.product-single .sidebar .grid-cols-2 .img_items {
height: auto !important;
overflow: hidden;
aspect-ratio: 465 / 640;
}
html body.product-single .sidebar .grid-cols-2 .img_items img {
height: 100% !important;
object-fit: cover;
}
html body.product-single .single-product-slider .s-slider-block__title {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
html body.product-single .single-product-slider salla-products-slider .swiper {
width: calc(100% + 8px) !important;
margin: 0 -4px !important;
}
}
html body.product-single .s-products-slider-card {
max-width: none !important;
}
/* فلاتر المقاس واللون (PLP) — Figma: مقاسات مربعات 55×44، ألوان 28×28 بعنوان تحتها */
body.product-index .loujan-plp-filter-body.loujan-plp-sizes,
body.product-index .loujan-plp-filter-body.loujan-plp-colors {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
body.product-index .loujan-plp-size {
box-sizing: border-box;
min-width: 55px;
height: 44px;
padding: 0 12px;
border: 1px solid #e4e4e7;
border-radius: 2px;
background: #ffffff;
color: #18181b;
font-size: 16px;
line-height: 24px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.product-index .loujan-plp-size:hover {
border-color: #18181b;
}
body.product-index .loujan-plp-size.is-active {
border-color: #18181b;
background: #18181b;
color: #ffffff;
}
body.product-index .loujan-plp-colors {
gap: 16px 24px;
}
body.product-index .loujan-plp-color {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 40px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
body.product-index .loujan-plp-color-swatch {
box-sizing: border-box;
display: block;
width: 28px;
height: 28px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 2px;
background: #d4d4d8;
outline: 2px solid transparent;
outline-offset: 2px;
transition: outline-color 0.2s ease;
}
body.product-index .loujan-plp-color.is-active .loujan-plp-color-swatch {
outline-color: #18181b;
}
body.product-index .loujan-plp-color small {
font-size: 12px;
line-height: 16px;
color: #52525c;
}
/* ==========================================================================
إيقاع المسافات (موبايل) — Figma: 32px بين كل سكشنين في الرئيسية، بدون padding رأسي داخلي
========================================================================== */
@media (max-width: 1023px) {
body.index .s-block--bundle-categories-grid-slider,
body.index .s-block--best-offers,
body.index .s-block--bundle-features-grid,
body.index .AR-hero-section-4,
body.index .Ar-products-banner-6,
body.index .Ar-products-banner-7,
body.index .s-block--bundle-loujan-imprint,
body.index .AR-promo-banner-10 {
margin-top: 32px !important;
margin-bottom: 0 !important;
}
body.index .AR-hero-section-4 + .s-block--best-offers {
margin-top: 32px !important;
}
body.index section.Ar-products-banner > .grid {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.index .s-block--bundle-features-grid > * {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.index section.AR-promo-banner-10 > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* مكوّنات الـ bundle (تصنيفات / مميزات / بصمة لوجان): الـ host بتاعها عليه margin-top 48 بيتدمج مع margin السكشن
ويطلّع الفاصل 48 بدل 32 على الموبايل (و72 فاضل 72 على الديسكتوب) — بنصفّره والفاصل بييجي من السكشن بس */
body.index section[class*="s-block--bundle-"] > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* mini checkout الأصلي من سلة: يبقى موجود للـ JS (زر «اشتري الآن» عندنا يضغط عليه) لكن مخفي بصريًا */
body.product-single .s-add-product-button-mini-checkout,
body.product-single salla-add-product-button salla-quick-buy {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* مع quick-buy الزر يصير داخل صف flex مع الودجت المخفي، فنرجّعه بعرض كامل */
body.product-single .product-form .s-add-product-button-main {
width: 100%;
}
body.product-single .product-form .s-add-product-button-main > salla-button {
flex: 1 1 100%;
width: 100%;
}