/* Add custom CSS styles below */

/* turned off: this made product names and prices white on white cards
.s-product-card-content {
  color: white !important;
}
*/

/* hide the empty brands item (shows as null / blank row in the menu) */
#brands,
.main-menu li#brands,
a.brands-link,
a.swiper-slide[href$="/brands"] {
  display: none !important;
}

/* footer: WhatsApp under "خدمة العملاء" styled like the original contact; original box at the top hidden */
.store-footer div:has(> salla-contacts) {
  display: none !important;
}
.store-footer li.s-menu-footer-item > a[href*="wa.me"] {
  display: inline-flex; align-items: center; gap: 8px;
  direction: ltr; unicode-bidi: isolate; font-size: 17px;
}
.store-footer li.s-menu-footer-item > a[href*="wa.me"]::after {
  content: ""; flex: none; width: 17px; height: 17px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M27.281%204.65c-2.994-3-6.975-4.65-11.219-4.65-8.738%200-15.85%207.112-15.85%2015.856%200%202.794%200.731%205.525%202.119%207.925l-2.25%208.219%208.406-2.206c2.319%201.262%204.925%201.931%207.575%201.931h0.006c0%200%200%200%200%200%208.738%200%2015.856-7.113%2015.856-15.856%200-4.238-1.65-8.219-4.644-11.219zM16.069%2029.050v0c-2.369%200-4.688-0.637-6.713-1.837l-0.481-0.288-4.987%201.306%201.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012%200-7.269%205.912-13.181%2013.188-13.181%203.519%200%206.831%201.375%209.319%203.862%202.488%202.494%203.856%205.8%203.856%209.325-0.006%207.275-5.919%2013.188-13.181%2013.188zM23.294%2019.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894%200.2c-0.262%200.394-1.025%201.288-1.256%201.556-0.231%200.262-0.462%200.3-0.856%200.1s-1.675-0.619-3.188-1.969c-1.175-1.050-1.975-2.35-2.206-2.744s-0.025-0.613%200.175-0.806c0.181-0.175%200.394-0.463%200.594-0.694s0.262-0.394%200.394-0.662c0.131-0.262%200.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694%200.1-1.056%200.494c-0.363%200.394-1.387%201.356-1.387%203.306s1.419%203.831%201.619%204.1c0.2%200.262%202.794%204.269%206.769%205.981%200.944%200.406%201.681%200.65%202.256%200.837%200.95%200.3%201.813%200.256%202.494%200.156%200.762-0.113%202.344-0.956%202.675-1.881s0.331-1.719%200.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M27.281%204.65c-2.994-3-6.975-4.65-11.219-4.65-8.738%200-15.85%207.112-15.85%2015.856%200%202.794%200.731%205.525%202.119%207.925l-2.25%208.219%208.406-2.206c2.319%201.262%204.925%201.931%207.575%201.931h0.006c0%200%200%200%200%200%208.738%200%2015.856-7.113%2015.856-15.856%200-4.238-1.65-8.219-4.644-11.219zM16.069%2029.050v0c-2.369%200-4.688-0.637-6.713-1.837l-0.481-0.288-4.987%201.306%201.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012%200-7.269%205.912-13.181%2013.188-13.181%203.519%200%206.831%201.375%209.319%203.862%202.488%202.494%203.856%205.8%203.856%209.325-0.006%207.275-5.919%2013.188-13.181%2013.188zM23.294%2019.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894%200.2c-0.262%200.394-1.025%201.288-1.256%201.556-0.231%200.262-0.462%200.3-0.856%200.1s-1.675-0.619-3.188-1.969c-1.175-1.050-1.975-2.35-2.206-2.744s-0.025-0.613%200.175-0.806c0.181-0.175%200.394-0.463%200.594-0.694s0.262-0.394%200.394-0.662c0.131-0.262%200.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694%200.1-1.056%200.494c-0.363%200.394-1.387%201.356-1.387%203.306s1.419%203.831%201.619%204.1c0.2%200.262%202.794%204.269%206.769%205.981%200.944%200.406%201.681%200.65%202.256%200.837%200.95%200.3%201.813%200.256%202.494%200.156%200.762-0.113%202.344-0.956%202.675-1.881s0.331-1.719%200.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* footer: "روابط مهمة" uses one column so links don't wrap (all screen widths) */
.store-footer .grid.grid-cols-2:has(> salla-menu) {
  grid-template-columns: 1fr;
  gap: 0;
}

/* phones: top bar shows 2 features at a readable size */
@media (max-width: 480px) {
  .top-navbar .container > .flex-1.flex.justify-center > div:nth-child(n+3) { display: none; }
  .top-navbar .container > .flex-1.flex.justify-center > div:nth-child(2) > p:last-child { display: none; }
  .top-navbar .container > .flex-1.flex.justify-center p:first-of-type { font-size: 12px; }
}

/* footer corner image: keep it inside the screen */
.store-footer img[class*="rotate-[66px]"] { right: 8px !important; }

/* offers banner: hide the countdown only after it has ended */
.s-count-down-wrapper.s-count-down-ended { display: none !important; }

/* phones: product option buttons wrap instead of scrolling sideways */
@media (max-width: 767px) {
  .s-product-options-option .custom-radio-options { flex-wrap: wrap !important; row-gap: 8px; justify-content: flex-start; max-width: 100% !important; }
}
/* desktop + tablet: show the two category-tile sections side by side, 4 tiles in one row */
@media (min-width: 700px) {
  main:has(> .TU-categories-3 + .TU-categories-4) { display: grid; grid-template-columns: 1fr 1fr; }
  main:has(> .TU-categories-3 + .TU-categories-4) > * { grid-column: 1 / -1; }
  main:has(> .TU-categories-3 + .TU-categories-4) > :is(.TU-categories-3, .TU-categories-4) { grid-column: auto; min-width: 0; }
  .TU-categories-3 > .container { padding-inline-end: 10px; }
  .TU-categories-4 > .container { padding-inline-start: 10px; }
  .TU-categories-3 .swiper-slide, .TU-categories-4 .swiper-slide { width: calc(50% - 10px) !important; }
  .TU-categories-3 .swiper-slide:last-child, .TU-categories-4 .swiper-slide:last-child { margin-left: 0 !important; margin-right: 0 !important; }
}

/* footer: space between "روابط مهمة" and "خدمة العملاء" (desktop side by side, phones stacked) */
.store-footer .bg-base-text.p-4.flex:has(> div > h3.important-links) {
  column-gap: 64px;
}
@media (max-width: 767px) {
  .store-footer .bg-base-text.p-4.flex:has(> div > h3.important-links) {
    flex-direction: column;
    row-gap: 28px;
  }
}

/* bundle pages: make "choose options" and its save button easy to see and tap */
.s-multiple-bundle-product-button{display:flex!important;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:8px;padding:10px 12px!important;border-radius:10px;background:#000!important;color:#fff!important;font-size:14px!important;font-weight:700!important;line-height:1.3;border:0}
.s-multiple-bundle-product-button .s-multiple-bundle-product-button-icon svg{width:16px;height:16px;fill:currentColor}
.s-multiple-bundle-product-button:focus-visible{outline:3px solid #16a34a;outline-offset:2px}
.s-multiple-bundle-product-options-modal-footer salla-button{display:block;width:100%}
.s-multiple-bundle-product-options-modal-footer .s-button-element{width:100%;min-height:48px;background:#000!important;color:#fff!important;border-color:#000!important;font-size:15px!important;font-weight:700!important;border-radius:10px}

/* bundle options popup: no product picture, only name and colour/size (all screen sizes) */
.s-multiple-bundle-product-options-modal-slider { display: none !important; }
/* bundle pages: show every product section open and ticked, so the customer only picks colour/size */
salla-accordion:has(salla-multiple-bundle-product-slider) salla-accordion-body { max-height: none !important; opacity: 1 !important; visibility: visible !important; }
salla-accordion:has(salla-multiple-bundle-product-slider) salla-multiple-bundle-product-slider { visibility: visible !important; }
salla-accordion:has(salla-multiple-bundle-product-slider) .s-accordion-head-wrapper-toggle { display: none !important; }
/* bundle pages: small product cards, no big photo - just tick, name, price and the choose-options button */
.s-multiple-bundle-product-card img.s-multiple-bundle-product-image { display: none !important; }
.s-multiple-bundle-product-card .s-multiple-bundle-product-image-wrapper { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; }
.s-multiple-bundle-product-card .s-multiple-bundle-product-checkbox { top: 14px !important; width: 20px !important; height: 20px !important; }
.s-multiple-bundle-product-card .s-multiple-bundle-product-content-wrapper { padding-inline-start: 40px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.s-multiple-bundle-product-card .s-multiple-bundle-product-title { font-size: 14px !important; line-height: 1.4 !important; white-space: normal !important; }
.s-multiple-bundle-product-card .s-multiple-bundle-product-price { font-size: 14px !important; font-weight: 700; }
.s-multiple-bundle-product-wrapper-slider .s-multiple-bundle-product-slide-one-third { width: 100% !important; max-width: 420px; }
/* dropdowns: keep a visible black border while one is selected (the theme made it white) */
.s-form-control:focus { border-color: #000 !important; box-shadow: 0 0 0 2px rgba(0,0,0,.15) !important; outline: none !important; background-color: #fff !important; }/* popups: light see-through backdrop so the page stays visible behind (was solid grey with dark mode extensions) */
.s-modal-overlay { background-color: rgba(0,0,0,.45) !important; }
/* cart bundles: the store colour is white, so the open/close arrow and the
   "حذف" button inside a bundle were white on white */
salla-multiple-bundle-product-cart .s-accordion-head-wrapper-toggle,
salla-multiple-bundle-product-cart .s-accordion-head-wrapper-toggle.active { background:#000 !important; color:#fff !important; border-radius:9999px; }
salla-multiple-bundle-product-cart .s-accordion-head-wrapper-toggle svg,
salla-multiple-bundle-product-cart .s-accordion-head-wrapper-toggle path { fill:#fff !important; }
.s-multiple-bundle-product-cart-body-remove-button .s-button-element { border-color:#dc2626 !important; color:#dc2626 !important; }
.s-multiple-bundle-product-cart-body-remove-button .s-button-text { color:#dc2626 !important; }