/* Add custom CSS styles below */

/* ****************************************** */

/* -------------- SCREEN WIDTH -------------- */

/* ****************************************** */

/* fixed width for all conatiners*/

.container {

width: 100;

margin-left: auto;

margin-right: auto;

padding-left: 10px;

padding-right: 10px;

}


section.s-block.s-block--fixed-banner.wide-placeholder.fixed-banner--0 {

margin-top: 0px;

margin-bottom: 0;


}


@media only screen and (min-width: 640px) {


/* fixed width for all conatiners*/

.container {

max-width: 1280px;


}


.s-block--fixed-banner:nth-of-type(2) {

margin-top: 1.5rem;

}



section.s-block.s-block--fixed-banner.wide-placeholder:not(:first-of-type),

section.s-block.s-block--banners {

margin-top: 60px;

}




.s-slider-block__title {

margin-bottom: 12px !important;

}

}



@media only screen and (max-width: 768px) {


section.s-block.s-block--fixed-banner.wide-placeholder:not(:first-of-type),

section.s-block.s-block--banners {

margin-top: 0.75rem;

}



}




/* ******************************************* */

/* ----------------- GENERAL ----------------- */

/* ******************************************* */


:root {

--main-text-color: #000;

--font-main: rb-font;

--color-primary: #000;

--color-primary-reverse: #fff;

}


.text-red-400,

.text-red-500 {

color: #d0021b;

}


.s-button-danger {

background-color: #d0021b;

}


/* ******************************************* */

/* -------------- NAVBAR LINKS --------------- */

/* ******************************************* */


/*

foundation day

li#\31 83137316,

li#\"183137316\"

*/

li#\31 031159866,

li#\"1031159866\",

li#\31 724055266,

li#\31 398282742,

li#\"1724055266\",

li#\"1398282742\" {

display: none !important;

}


@media only screen and (min-width: 769px) {

li#\31 256746459,

li#\31 031159866 {

display: none;

}

}


li#\31 83137316 a[href="https://arkaan.sa/ramadanoffer/c183137316"],

li#\35 90612393 a[href="https://arkaan.sa/1-2-مجـاناً/c590612393"],

li#\31 889640202,

li#\31 031159866,

li#\31 636853348 a[aria-label="عروض اليوم الوطني"],

li#\31 031159866 a[href="https://arkaan.sa/salesoffer/c1031159866"]

{

color: #d0021b;

}

li#\"1031159866\",

li#\"1636853348\" {

color: #d0021b;

}

/*offers corner subcategories*/

li#\31 031159866 a[href="https://arkaan.sa/offer65/c501159649"],

li#\31 031159866 a[href="https://arkaan.sa/offer19/c1873032674"]

{

color:#000

}


/* ------------ END NAVBAR LINKS ----------- */


/* ******************************************* */

/* ------------------ FONT ------------------- */

/* ******************************************* */

/* rb font */

@font-face {

font-family: rb-font;

src: url(https://sanint.sirv.com/zyros_natinonal_day_font/RB%20Font.ttf);

font-weight: normal;

}


/* -------------- END FONT ------------------- */

/* ------------- START RADIUS ------------- */



.rounded-lg,

.rounded-md,

salla-products-slider .s-slider-block__display-all,

.s-block--square-links ul li a div img,

s-block s-block--square-links,

.s-block--fixed-banner .banner--fixed img,

.s-block--animated-brands .s-block--animated-brands--brand,

.product-single__inner .btn-tab,

.product-single__inner .s-button-btn,

.product-single__inner .s-quantity-input-container,

.product-single__inner .s-quick-order-container,

.product-single__inner .s-form-control,

.product-single__inner .s-product-options-thumbnails-wrapper label,

.product-single__inner .s-button-icon,

.product-single__inner .s-social-share-list,

.product-single__inner .s-comment-form-input,

.s-block.s-block--fixed-banner .banner.banner--fixed img {

border-radius: 0 !important;



}



/* ------------- END RADIUS ------------- */


/* ------------- START BLOCKS ------------- */

/* Margins */

@media only screen and (max-width: 768px) {

.s-block {

margin-top: 1.5rem;

}


/* titles */

.s-block s-slider-block__title {

margin-bottom: 0.75rem;

}



.s-block s-slider-block__title h2 {

font-size: 1rem;

}

}


@media only screen and (min-width: 640px) {

.s-block {

margin-top: 1rem;

}


.s-block--fixed-banner.s-block--fixed-banner {

margin-top: 1.25rem;

}



/* titles */

.s-block s-slider-block__title {

margin-bottom: 0.75rem;

}




}


/*

/* ------------- END BLOCKS ------------- */


/* ******************************************* */

/* ----------------- HEADER ----------------- */

/* ******************************************* */


/* icons */

.store-header .sicon-cart:before {

content: "\ef36";

}


/* cart items counter */

.store-header .s-cart-summary-count {

background-color: #d0021b;

right: -0.5rem;

top: 0.125rem;

}


/* icons container */

.store-header .header-btn__icon {

width: 1.75rem;

}


/* cart items */

.store-header salla-cart-summary {

margin-right: 10px !important;

}


/* user icon */

.store-header .sicon-user:before {

content: "\f072";


}


@media only screen and (min-width: 640px) {


/* Header container */

.main-nav-container .inner {

padding-top: 20px;

padding-bottom: 12px;


}


.store-header #mainnav .inner .container {

max-width: 1500px;



}


.store-header .main-nav-container .main-menu {

padding-top: 1rem;

justify-content: center;

color: #000;

background-color: #fff;

}


/* categories */

.store-header .main-nav-container .navbar-brand+.mobile-menu {

/*display: none;*/

width: 100%;

}


.store-header .main-nav-container div:has(> .navbar-brand) {

flex-grow: 1;


}


.store-header .main-nav-container li.root-level>a {

padding-top: 0;

}


.index .store-header .main-nav-container:not(.fixed-header) .main-menu>li {

color: #fff;

background-color: #000;

/* Applies color to first-level li elements */

}


.index .store-header .main-nav-container:not(.fixed-header) .main-menu>li>*:not(.sub-menu) {

color: inherit;

/* Ensures that any direct children except for submenus inherit color */

}


.index .store-header .main-nav-container:not(.fixed-header) .main-menu .sub-menu {

color: initial;

/* Resets the color of the submenu so it's not affected */

}


.index .store-header .main-nav-container:not(.fixed-header) .container div div+div salla-cart-summary,

.index .store-header .main-nav-container:not(.fixed-header) .container div div+div button {

color: #000;

}

}


/* Header container */

.store-header .main-nav-container {

min-height: 57px;

}


.store-header .main-nav-container .inner {

padding-top: 6px;

padding-bottom: 6px;

}


/* burger menu */

.store-header .mburger .sicon-menu {

margin-left: 0;

font-size: 1.75rem;

}


/* logo */

.store-header .main-nav-container .navbar-brand img {

height: 24px !important;

}


/* user icon */

.store-header .s-user-menu-trigger {

padding-top: 0;

padding-bottom: 0;

}


/* main category text */

.mobile-menu .main-menu .mm-spn--open li:first-child a {

font-size: 0;

}


.mobile-menu .main-menu .mm-spn--open li:first-child a:after {

content: ' عرض الكل';

font-size: 1rem;

}



.index .store-header .main-nav-container:not(.fixed-header) .inner .container div div {

color: #000;

}


/*main nav bar styling as original Arkaan style*/

.store-header .main-nav-container .main-menu {

background-color: #000;

}


.store-header .main-nav-container li.root-level>a {

color: #fff;

}



/************ END HEADER *****************/


/* ******************************************* */

/* ------------------ FOOTER ----------------- */

/* ******************************************* */

.store-footer {

/*margin-top: 5rem;*/

}


.store-footer .container .img-fluid {

/*height: 44px !important;*/

}


.footer-bottom .footer-rights p {

color: white !important;

}


.footer-bottom ul li {

border-radius: 4px;

}


.store-footer__contacts-row .social-link {

border: 1px rgb(229, 231, 235, 0.9) solid !important;


}


.store-footer .store-footer__curve,

.store-footer .store-footer__curve path {

background: #fff;

color: #fff;

}


.store-footer .store-footer__inner {

margin-top: 2rem;

}


/************ END FOOTER **********************/


/* ******************************************* */

/* -------------- FIXED BANNER --------------- */

/* ******************************************* */

.s-block--fixed-banner:first-of-type {

margin: 0;

}


.s-block--fixed-banner:first-of-type .container {

margin: 0 auto;

max-width: 100%;

padding-right: 0px;

padding-left: 0px;

}


@media only screen and (max-width: 768px) {

.s-block--fixed-banner:not(:first-of-type) {

margin-top: 0.75em !important;

}

}


/* ******************************************* */

/* ---------- SQUARE LINKS BLOCK ------------- */

/* ******************************************* */


.s-block--square-links ul li a div img {

object-fit: contain;

aspect-ratio: unset;

transform: none !important;

transition: opacity 0.3s ease;


}


.s-block--square-links ul li a div img:hover {

opacity: 0.9 !important;

}


@media only screen and (max-width: 768px) {


.s-block--square-links ul {

margin-top: 0;

grid-template-columns: repeat(3, 1fr);

column-gap: 0.5rem;

}


.s-block--square-links div:has(> ul) {

padding-left: 10px;

padding-right: 10px;

}



}


@media only screen and (min-width: 769px) {


.s-block--square-links div:has(> ul) {

max-width: 1280px;

padding-left: 10px;

padding-right: 10px;

}


.s-block--square-links {

margin: 0;

}




}


/******************************************** */


/* ******************************************* */

/* --------------- PRODUCT CARD -------------- */

/* ******************************************* */

/* stop zoom-in on hover*/

.product-card:hover {

transform: none !important;

}

/*unify product card margin*/

.product-card {

margin-bottom: 10px;

}

/* product image */

.product-card {

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}



/* promo title */

.product-card .product-card__image .product-card__promotion {

background-color: rgba(207, 20, 43, 0.11) !important;


color: rgb(207, 20, 43);


font-weight: 900;


font-size: 12px;


padding: 3px 8px;


border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

position: absolute;

top: 1rem;

right: auto;

z-index: 1;

display: inline-block;

}


.product-card .product-card__content {


padding: 0 !important;

}


/* title */


.product-card .product-card__content .product-card__title a {


font-weight: 500;

color: #1f2937;

font-size: 16px;


}


.product-card .product-card__image .product-card__promotion::before {


display: none;


}


/* like and quick view buttons */

.product-card .product-card__buttons {

display: none;

}


.product-card .product-card__content .product-card__title {


order: 1;


margin-bottom: 0.25rem;



}


/* text contents*/

.product-card .product-card__content .product-card__content-wrapper {

text-align: right;

display: flex;

justify-content: flex-start;

align-items: flex-start;

flex-direction: column;

padding-top: 12px;

padding-right: 5px;

padding-bottom: 0;

}


/* subtitle */


.product-card .product-card__content .product-card__subtitle {


color: #000;


/*font-weight: 900;*/


line-height: 0.875rem;



order: 2;


margin-bottom: auto;


display: none;

/*for arkaan test now**/


}



/* Prices */


/* prices container */

.product-card .product-card__content .product-card__price {

display: flex;

justify-content: flex-start;

align-items: flex-start;

flex-direction: column;

order: 3;

}


/* price before */


.product-card .product-card__content .product-card__price span {


margin-right: 0 !important;


font-size: 14px;


color: #9ca3af;



}



/* price after */


.product-card .product-card__content h4.product-card__price,

.product-card .product-card__content .product-card__price h4 {


font-size: 18px;


line-height: 1.5rem;


order: 3;



}



.product-card .product-card__content .product-card__price h4 {


color: #d0021b;


}



/* add to cart */

.product-card .sicon-shopping {

display: none;

}





.product-card .btn--add-to-cart button:hover {


opacity: unset;


}



.product-entry .btn--add-to-cart:not(.deal) button:not(:hover) {


color: #000;


}



.product-card .btn--add-to-cart button span {


color: #000;


}





/* rating */

.product-card .product-card__content .s-product-card-rating {

order: 4 !important;



}


/* ******************************************* */

/* ---------- PRODUCT CARD DESKTOP ----------- */

/* ******************************************* */


@media only screen and (min-width: 640px) {

.product-card__content .product-card__content-wrapper{

margin-right: 14px;

}

/* rating*/

.product-card .product-card__content .s-product-card-rating {

margin-left: 0.25rem;

align-self: flex-end;


}




/* add to cart*/


.product-card .product-card__normal-cart button {


font-size: 1rem !important;


}



}


/* ******************************************* */

/* ----------- PRODUCT CARD MOBILE ----------- */

/* ******************************************* */


@media only screen and (max-width: 768px) {



/* promo title */

.product-card .product-card__image .product-card__promotion {

bottom: initial !important;

top: 10px !important;

right: initial !important;

left: 10px !important;

}


/* title */


.product-card .product-card__content .product-card__title a,

.product-card .product-card__content .product-card__title {


font-size: 10px;

padding-bottom: 0.23rem;


}


/* sale price */

.product-card .product-card__content h4.product-card__price,

.product-card .product-card__content .product-card__price h4 {

font-size: 14px;

line-height: 0.5rem;

font-weight: 700 !important;


}


/* price before*/

.product-card .product-card__content .product-card__price span {

font-size: 10px;

margin-bottom: 0.25rem

}


/* add to cart */


.product-card .product-card__enhnaced-mini-cart__btn button {


font-size: 14px;

height: 35px;


}


.product-card__enhanced-mini-cart button.s-button-element {

border: 1px #000 solid !important;

border-radius: 4px

}


.product-card__enhanced-mini-cart button.s-button-element:hover {

background-color: #000 !important;

color: #fff !important;

}


.product-card__enhanced-mini-cart__btn--inner .sicon-add:before {

display: none !important;

}



}


/* ******************************************* */

/* ------------ CATEGORIES PAGE -------------- */

/* ******************************************* */


/* navigation path*/

/* background */

.products-index .breadcrumbs {

background-color: #1b1b1b;

margin: 0;

height: 6rem;

max-width: unset;

justify-content: center;

display: flex;

box-sizing: border-box;

}


/* text colors */

.products-index .breadcrumbs li span,

.products-index .breadcrumbs li i,

.products-index .breadcrumbs li a {

color: #fff;

}


.products-index .breadcrumbs li span:last-child {

color: #eee;

opacity: 0.7;

}


/* sub-category images */

.products-index [id*=sub-cats-slider-] .swiper-slide div:has(i) {

display: none;

}


/* sub-category text */

.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide a {

border: 1px #000 solid;

border-radius: 0;

}


.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide a:hover {

background-color: #000;

}


.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide a:hover span {

color: #fff;

}




@media only screen and (min-width: 769px) {


/* sub-category text */

.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper {

justify-content: center;

font-weight: 900;

margin: auto 32px;

margin-top: 1.75rem;

}


.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide {

margin: auto 10px;

}


.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide a span {

margin-bottom: 0.5rem;

}


}


@media only screen and (max-width: 768px) {


/* sub-category text */

.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper {

/*justify-content: center;

font-weight: 900;

margin: auto 32px;*/

margin-top: 0.5rem;

}


.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide {

margin: auto 4px;

}


.products-index [id*=sub-cats-slider-] .s-slider-swiper-wrapper .swiper-slide a span {

margin-bottom: 0.5rem;


}


}



/* -------------- BLOCK PRODUCTS ------------- */


/* ******************************************* */


/* title container */

.s-block--best-offers .s-slider-block__title,

salla-products-slider .s-slider-block__title {

border-bottom: unset;

margin-bottom: 0;

}


/* title */

.s-block--best-offers .s-slider-block__title-right,

salla-products-slider .s-slider-block__title-right {

border-bottom: unset;

}


/* title */

.s-block--best-offers .s-slider-block__title-right h2,

salla-products-slider .s-slider-block__title-right h2 {

font-size: 1.5rem;

}



/************ DISPLAY ALL*********************/


/* display all */

.s-slider-block__title-left .s-slider-block__display-all {

color: #4b5563;

font-size: 1rem;

border: none !important;

}



.s-slider-block__title .s-slider-block__title-right {

border: none;

padding-bottom: 0 !important;

}


/* product slider block title*/

.s-slider-block__title .s-slider-block__title-right h2 {

font-size: 1rem;

line-height: 1.2rem;

}



@media only screen and (min-width: 640px) {



/* display all arrows */

.s-block--best-offers .s-slider-block__title-left .s-slider-prev span,

.s-block--best-offers .s-slider-block__title-left .s-slider-next span {


border: 1px rgb(229, 231, 235) solid !important;

padding-top: 0.3rem;

padding-right: 0.3rem;

height: 2rem;

width: 2rem;

border-radius: 9999px;


}


/* product slider block title*/

.s-slider-block__title .s-slider-block__title-right h2 {

font-size: 1.5rem;

line-height: 3.2rem;

}

}


/* ******************************************* */

/* -------------- PRODUCT PAGE --------------- */

/* ******************************************* */


/* hide promotitle*/

.product-single__slider__inner .promotion-title {

display: none;

}


/*subtitle*/

.product-single__info .product-entry__sub-title {

color: rgb(107, 114, 128);

}


/* prices for Arkaan original theme copy

switch to dispaly for Zyros copy

*/


.product-single__info .flex.whitespace-nowrap.gap-4.items-center .total-price,

.product-single__info .flex.whitespace-nowrap.gap-4.items-center .before-price {

display: none;

}


.product-single__info .bg-storeBG .total-price,

.product-single__info .bg-storeBG .before-price {

display: inline-block !important;

}


.product-single__info .bg-storeBG .total-price {

color: rgb(153, 27, 27);

}


.product-single__info .bg-storeBG .before-price {

color: rgb(156, 163, 175);

}


/*hide inventory*/

.product-single__info .flex-col {

display: none;

}


/* SKU border*/

.product-single__inner .form.product-form .bg-storeBG.p-5.rounded-md.mb-5 {

border-radius: 4px;

border: 1px #eee solid;

}


/* brand logo */

.app-inner .product-single .product-single__info .product-brand .brand-logo {

display: none;

}


/* ******************************************* */

/* ---------------- CART PAGE ---------------- */


/*coupon input */

.cart div:has(> input#coupon-input)::after {

content: '* الأكواد لا تشمل عرض 2+1 مجاناً';

font-size: 10px;

color: grey;

font-weight: 400;

}


/* ******************************************* */

/* ----------------- 1+2 alert --------------- */

/* ******************************************* */

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

display: flex;

justify-content: center;

align-items: center;

z-index: 1000;

}


.modal-content {

background-color: white;

padding: 20px;

border-radius: 5px;

text-align: center;

position: relative;

}


.close-icon {

position: absolute;

top: 10px;

left: 10px;

color: darkred;

font-size: 20px;

cursor: pointer;

}


.message-text {

margin-top: 30px;

}


.close-button {

margin-top: 10px;

color: white;

background-color: #000;

padding: 5px 10px;

cursor: pointer;

width: 100%;

border: none;

border-radius: 4px;

}


/* ################################################# */