/* =========================================================
   DESIGNER PRO / المصمم المحترف — Salla Raed Theme — V9
   Identity: Snapchat Yellow / Black / White
   Namespace: dp-
   IMPORTANT: Product card/image dimensions are intentionally untouched.
   ========================================================= */

:root{
  --dp-yellow:#FFFC00;
  --dp-yellow-soft:#FFFEE7;
  --dp-yellow-pale:#FFFFF4;
  --dp-black:#111111;
  --dp-ink:#1A1A1A;
  --dp-white:#FFFFFF;
  --dp-soft:#F8F8F5;
  --dp-muted:#6F6F68;
  --dp-line:rgba(17,17,17,.10);
  --dp-line-strong:rgba(17,17,17,.18);
  --dp-shadow:0 14px 38px rgba(17,17,17,.08);
  --dp-shadow-soft:0 5px 18px rgba(17,17,17,.05);
  --dp-radius:18px;
  --dp-radius-sm:12px;
}

html{scroll-behavior:smooth}

body{
  color:var(--dp-ink);
  background:var(--dp-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.dp-menu-open,
body.dp-search-open{overflow:hidden !important}

::selection{
  background:var(--dp-yellow);
  color:var(--dp-black);
}

/* =========================================================
   NATIVE SALLA HEADER — keep its functionality, hide duplicates
   ========================================================= */

.dp-native-header-hidden,
.dp-native-footer-hidden{
  display:none !important;
}

.dp-native-search-offscreen{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  max-width:1px !important;
  max-height:1px !important;
  inset-inline-start:-10000px !important;
  top:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  opacity:.001 !important;
  pointer-events:none !important;
  border:0 !important;
}

/* Extra native Raed rows that can survive hydration */
body.dp-header-ready header.store-header .top-navbar,
body.dp-header-ready header.store-header .top-nav,
body.dp-header-ready header.store-header .header-top,
body.dp-header-ready header.store-header [class*="top-navbar"],
body.dp-header-ready header.store-header [class*="top-nav"],
body.dp-header-ready header.store-header [class*="header-top"]{
  display:none !important;
}

body.dp-header-ready #mainnav,
body.dp-header-ready .main-nav-container{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}

body.dp-header-ready #mainnav > .inner,
body.dp-header-ready .main-nav-container > .inner{
  display:none !important;
}

body.dp-header-ready header.store-header{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   HEADER — no announcement strip
   ========================================================= */

.dp-header{
  position:relative;
  width:100%;
  background:var(--dp-white);
  border-bottom:1px solid var(--dp-line);
  box-shadow:0 3px 16px rgba(17,17,17,.035);
  z-index:80;
}

.dp-header-main{
  position:relative;
  min-height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:8px 20px;
  background:var(--dp-white);
}

.dp-header-side{
  display:flex;
  align-items:center;
  gap:8px;
}

.dp-header-side-start{
  justify-self:start;
  direction:ltr;
}

.dp-header-side-end{
  justify-self:end;
}

.dp-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:78px;
  height:66px;
  padding:4px;
  background:var(--dp-yellow);
  border:1px solid rgba(17,17,17,.08);
  border-radius:16px;
  box-shadow:0 5px 14px rgba(17,17,17,.05);
  text-decoration:none !important;
  overflow:hidden;
}

.dp-logo img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transform:none !important;
  clip-path:none !important;
}

.dp-action{
  position:relative;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid var(--dp-line) !important;
  border-radius:50% !important;
  background:var(--dp-white) !important;
  color:var(--dp-black) !important;
  text-decoration:none !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.dp-action:hover{
  background:var(--dp-yellow) !important;
  border-color:var(--dp-yellow) !important;
  transform:translateY(-1px);
}

.dp-action svg{
  width:18px;
  height:18px;
  display:block;
}

.dp-cart-count{
  position:absolute;
  top:-5px;
  inset-inline-end:-5px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--dp-black);
  color:var(--dp-yellow);
  border:2px solid var(--dp-white);
  font-size:8px;
  font-weight:800;
  line-height:1;
}

.dp-cart-count:empty{display:none}
.dp-menu-button{display:none}

/* Desktop categories */
.dp-nav{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  background:var(--dp-yellow);
  border-top:1px solid rgba(17,17,17,.06);
  border-bottom:1px solid rgba(17,17,17,.10);
}

.dp-nav-inner{
  width:min(1260px,100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  overflow:hidden;
}

.dp-nav a{
  min-height:44px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  color:var(--dp-black) !important;
  font-size:12.5px;
  font-weight:700;
  text-decoration:none !important;
  white-space:nowrap;
  position:relative;
  transition:.18s ease;
}

.dp-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background:var(--dp-black);
  transition:left .2s ease,right .2s ease;
}

.dp-nav a:hover{
  background:rgba(255,255,255,.36);
}

.dp-nav a:hover::after{
  left:15px;
  right:15px;
}

/* =========================================================
   SEARCH PANEL
   ========================================================= */

.dp-search-backdrop{
  position:fixed;
  inset:0;
  z-index:120000;
  background:rgba(17,17,17,.50);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.2s ease;
}

.dp-search-panel{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:120001;
  background:var(--dp-white);
  border-bottom:5px solid var(--dp-yellow);
  box-shadow:0 22px 54px rgba(0,0,0,.14);
  transform:translateY(-110%);
  visibility:hidden;
  transition:transform .25s ease,visibility .25s ease;
}

.dp-search-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.dp-search-panel.is-open{
  transform:translateY(0);
  visibility:visible;
}

.dp-search-panel-inner{
  width:min(900px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 30px;
}

.dp-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.dp-search-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--dp-black);
}

.dp-search-close{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:var(--dp-black);
  color:var(--dp-yellow);
  font-size:23px;
  line-height:1;
  cursor:pointer;
}

.dp-search-form{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid var(--dp-line-strong);
  border-radius:999px;
  background:var(--dp-soft);
}

.dp-search-input{
  flex:1;
  min-width:0;
  height:44px;
  padding:0 18px;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:var(--dp-black) !important;
  font-size:14px !important;
  box-shadow:none !important;
}

.dp-search-submit{
  height:44px;
  padding:0 22px;
  border:0;
  border-radius:999px;
  background:var(--dp-yellow);
  color:var(--dp-black);
  font-weight:800;
  cursor:pointer;
}

.dp-search-note{
  margin:9px 12px 0;
  color:var(--dp-muted);
  font-size:11px;
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

.dp-menu-backdrop,
.dp-mobile-drawer{
  display:none;
}

@media (max-width:991px){
  .dp-nav{display:none !important}
  .dp-menu-button{display:inline-flex !important}

  .dp-menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:110000;
    background:rgba(17,17,17,.54);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.2s ease;
  }

  .dp-menu-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .dp-mobile-drawer{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:110001;
    width:min(86vw,360px);
    background:var(--dp-white);
    box-shadow:-20px 0 48px rgba(0,0,0,.18);
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .26s ease,visibility .26s ease;
    direction:rtl;
  }

  .dp-mobile-drawer.is-open{
    transform:translateX(0);
    visibility:visible;
  }

  .dp-mobile-head{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 16px;
    background:var(--dp-yellow);
    border-bottom:1px solid rgba(17,17,17,.12);
  }

  .dp-mobile-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--dp-black);
    font-weight:800;
    font-size:13px;
  }

  .dp-mobile-brand img{
    width:46px;
    height:46px;
    padding:2px;
    object-fit:contain;
    background:var(--dp-yellow);
    border-radius:10px;
  }

  .dp-mobile-close{
    width:36px;
    height:36px;
    border:1px solid rgba(17,17,17,.15);
    border-radius:50%;
    background:var(--dp-black);
    color:var(--dp-yellow);
    font-size:22px;
    cursor:pointer;
  }

  .dp-mobile-body{
    flex:1;
    overflow:auto;
    padding:14px 14px 26px;
    -webkit-overflow-scrolling:touch;
  }

  .dp-mobile-label{
    margin:2px 4px 12px;
    color:var(--dp-muted);
    font-size:11px;
    font-weight:700;
  }

  .dp-mobile-links{
    list-style:none;
    margin:0;
    padding:0;
  }

  .dp-mobile-links li+li{margin-top:7px}

  .dp-mobile-links a{
    min-height:48px;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 13px;
    border:1px solid var(--dp-line);
    border-radius:13px;
    background:var(--dp-soft);
    color:var(--dp-black) !important;
    text-decoration:none !important;
    font-size:13px;
    font-weight:650;
  }

  .dp-mobile-links a::after{
    content:"‹";
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--dp-yellow);
    color:var(--dp-black);
    font-size:15px;
    flex:0 0 auto;
  }

  .dp-mobile-special{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--dp-line);
  }

  .dp-mobile-special a{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:9px 12px;
    border-radius:13px;
    background:var(--dp-black);
    color:var(--dp-yellow) !important;
    text-decoration:none !important;
    font-weight:800;
    font-size:12.5px;
  }
}

/* =========================================================
   HOME / GENERAL
   ========================================================= */

body.index #main-content,
body.index main#main-content{
  margin-top:0 !important;
  padding-top:0 !important;
}

body.index salla-slider,
body.index .swiper{
  overflow:hidden;
}

body.index salla-slider img,
body.index .swiper img{
  transition:transform .45s ease;
}

body.index .s-block,
body.index section{
  scroll-margin-top:100px;
}

.s-block__title,
.section-title,
[class*="section-title"],
[class*="block-title"]{
  position:relative;
}

.s-block__title h2,
.section-title h2,
[class*="section-title"] h2,
[class*="block-title"] h2{
  color:var(--dp-black) !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

.s-block__title h2::after,
.section-title h2::after{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-top:7px;
  border-radius:999px;
  background:var(--dp-yellow);
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

body:not(.index) .container--breadcrumbs{
  margin-top:10px !important;
  margin-bottom:10px !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
}

body:not(.index) .s-breadcrumb-wrapper{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:3px 5px !important;
}

body:not(.index) .s-breadcrumb-item,
body:not(.index) .s-breadcrumb-arrow{
  color:var(--dp-muted) !important;
  font-size:11px !important;
}

body:not(.index) .s-breadcrumb-item:last-child{
  color:var(--dp-black) !important;
  font-weight:700 !important;
}

/* =========================================================
   PRODUCT AREA
   =========================================================
   Intentionally NO card width, image width/height, grid sizing,
   flex-basis, aspect-ratio, object-fit, or product container sizing.
   Salla/Raed keeps the original product geometry exactly as configured.
   ========================================================= */

/* Accent only — does not alter product/card/image dimensions. */
.s-product-card-price,
.product-entry__price{
  color:var(--dp-black) !important;
  font-weight:800 !important;
}

.s-product-card-sale-price,
[class*="sale-price"]{
  color:#D12A2A !important;
}

/* Generic buttons only */
salla-button button,
.s-button-btn,
button[class*="add-to-cart"],
a[class*="add-to-cart"]{
  border-radius:999px !important;
}

salla-button[fill="solid"] button,
.s-button-primary,
button[class*="add-to-cart"]{
  background:var(--dp-black) !important;
  color:var(--dp-yellow) !important;
  border-color:var(--dp-black) !important;
}

salla-button[fill="solid"] button:hover,
.s-button-primary:hover,
button[class*="add-to-cart"]:hover{
  background:var(--dp-yellow) !important;
  color:var(--dp-black) !important;
  border-color:var(--dp-yellow) !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(17,17,17,.35) !important;
  box-shadow:0 0 0 3px rgba(255,252,0,.22) !important;
}

/* =========================================================
   FOOTER — White + Snapchat Yellow
   ========================================================= */

footer.store-footer,
footer[data-testid="store-footer"],
footer.dp-footer-host{
  margin-top:54px !important;
  background:var(--dp-white) !important;
  color:var(--dp-black) !important;
  border-top:6px solid var(--dp-yellow) !important;
}

.dp-footer{
  max-width:1280px;
  margin:0 auto;
  padding:34px 22px 18px;
  direction:rtl;
}

.dp-footer-brand{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:26px;
  align-items:center;
  padding:22px;
  border:1px solid var(--dp-line);
  border-radius:22px;
  background:
    linear-gradient(135deg,var(--dp-yellow-soft) 0%,var(--dp-white) 62%);
  box-shadow:var(--dp-shadow-soft);
}

.dp-footer-logo{
  min-height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline-end:22px;
  border-inline-end:3px solid var(--dp-yellow);
}

.dp-footer-logo a{
  width:112px;
  height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  background:var(--dp-yellow);
  border:1px solid rgba(17,17,17,.08);
  border-radius:24px;
  overflow:hidden;
}

.dp-footer-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.dp-footer-brand h2{
  margin:0 0 9px !important;
  color:var(--dp-black) !important;
  font-size:19px !important;
  font-weight:850 !important;
}

.dp-footer-brand h2::after{
  content:"";
  display:block;
  width:48px;
  height:4px;
  margin-top:8px;
  border-radius:999px;
  background:var(--dp-yellow);
}

.dp-footer-brand p{
  margin:0 !important;
  max-width:820px;
  color:#55554F !important;
  font-size:13px !important;
  line-height:2 !important;
}

.dp-trust-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
  padding:22px 0;
}

.dp-trust-card{
  min-height:96px;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid var(--dp-line);
  border-radius:16px;
  background:var(--dp-white);
  box-shadow:0 4px 16px rgba(17,17,17,.035);
}

.dp-trust-card:hover{
  border-color:rgba(17,17,17,.17);
  box-shadow:var(--dp-shadow-soft);
}

.dp-trust-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:var(--dp-yellow-soft);
  border:1px solid rgba(17,17,17,.07);
  overflow:hidden;
}

.dp-trust-icon a{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dp-trust-icon img{
  width:41px;
  height:41px;
  object-fit:contain;
}

.dp-trust-card strong{
  display:block;
  color:var(--dp-black);
  font-size:12.5px;
  line-height:1.6;
  margin-bottom:3px;
}

.dp-trust-card span{
  display:block;
  color:var(--dp-muted);
  font-size:11px;
  line-height:1.55;
  word-break:break-word;
}

.dp-footer-columns{
  display:grid;
  grid-template-columns:1.55fr .8fr 1fr;
  gap:28px;
  padding:24px;
  border:1px solid var(--dp-line);
  border-radius:22px;
  background:var(--dp-yellow-pale);
}

.dp-footer-heading{
  position:relative;
  margin:0 0 14px !important;
  padding-bottom:9px;
  color:var(--dp-black) !important;
  font-size:14px !important;
  font-weight:850 !important;
}

.dp-footer-heading::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:34px;
  height:3px;
  border-radius:999px;
  background:var(--dp-yellow);
}

.dp-important-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.dp-important-links a{
  min-height:42px;
  display:flex !important;
  align-items:center;
  padding:8px 11px;
  border:1px solid var(--dp-line);
  border-radius:11px;
  background:var(--dp-white);
  color:#333 !important;
  text-decoration:none !important;
  font-size:11.5px !important;
  line-height:1.5 !important;
  transition:.18s ease;
}

.dp-important-links a:hover{
  color:var(--dp-black) !important;
  background:var(--dp-yellow);
  border-color:var(--dp-yellow);
  transform:translateY(-1px);
}

.dp-social-icons{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.dp-social-icons a{
  width:42px;
  height:42px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50%;
  background:var(--dp-yellow);
  border:1px solid rgba(17,17,17,.10);
  text-decoration:none !important;
  box-shadow:0 3px 10px rgba(17,17,17,.04);
  transition:.18s ease;
}

.dp-social-icons a:hover{
  background:var(--dp-black);
  border-color:var(--dp-black);
  transform:translateY(-2px);
}

.dp-social-icons img{
  width:19px;
  height:19px;
  object-fit:contain;
  filter:grayscale(1) contrast(1.35);
}

.dp-social-icons svg{
  width:20px;
  height:20px;
  fill:var(--dp-black);
}

.dp-social-icons a:hover svg{
  fill:var(--dp-yellow);
}

.dp-social-icons a:hover img{
  filter:invert(1);
}

.dp-payment-icons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}

.dp-payment-icon{
  width:56px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--dp-white);
  border:1px solid var(--dp-line);
  box-shadow:0 2px 8px rgba(17,17,17,.025);
}

.dp-payment-icon img{
  max-width:48px;
  max-height:29px;
  object-fit:contain;
}

.dp-footer-copy{
  margin-top:18px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:12px 16px;
  border-radius:14px;
  background:var(--dp-yellow);
  color:var(--dp-black);
  font-size:11.5px;
  line-height:1.7;
  text-align:center;
}

.dp-footer-copy strong{
  color:var(--dp-black);
  font-weight:900;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width:992px){
  .dp-header-main{
    min-height:90px;
    padding-inline:30px;
  }

  .dp-logo{
    width:88px;
    height:72px;
  }

  .dp-action{
    width:40px;
    height:40px;
  }
}

@media (max-width:767px){
  .dp-header{
    width:100vw !important;
    max-width:100vw !important;
    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  .dp-header-main{
    min-height:70px;
    padding:7px 12px;
    gap:8px;
  }

  .dp-logo{
    width:67px;
    height:56px;
    border-radius:13px;
  }

  .dp-header-side{gap:5px}

  .dp-action{
    width:34px;
    height:34px;
  }

  .dp-action svg{
    width:16px;
    height:16px;
  }

  /* Keep ONE account icon: our custom one.
     The duplicated native Salla/Raed account row is removed by JS. */
  .dp-account-button{display:inline-flex !important}

  .dp-search-panel-inner{
    width:calc(100% - 24px);
    padding:20px 0 22px;
  }

  .dp-search-title{font-size:16px}

  footer.store-footer,
  footer[data-testid="store-footer"],
  footer.dp-footer-host{
    margin-top:40px !important;
  }

  .dp-footer{
    padding:26px 14px 14px;
  }

  .dp-footer-brand{
    grid-template-columns:1fr;
    text-align:center;
    gap:12px;
    padding:18px 14px;
    border-radius:18px;
  }

  .dp-footer-logo{
    min-height:auto;
    padding-inline-end:0;
    border-inline-end:0;
  }

  .dp-footer-logo a{
    width:98px;
    height:98px;
    margin:auto;
    border-radius:20px;
  }

  .dp-footer-brand h2{
    font-size:16.5px !important;
  }

  .dp-footer-brand h2::after{
    margin-inline:auto;
  }

  .dp-footer-brand p{
    font-size:12.2px !important;
    line-height:1.9 !important;
  }

  .dp-trust-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:18px 0;
  }

  .dp-trust-card{
    min-height:80px;
    grid-template-columns:48px minmax(0,1fr);
    padding:10px;
  }

  .dp-trust-icon{
    width:44px;
    height:44px;
  }

  .dp-trust-icon img{
    width:35px;
    height:35px;
  }

  .dp-footer-columns{
    grid-template-columns:1fr;
    gap:22px;
    padding:18px 14px;
    border-radius:18px;
  }

  .dp-footer-heading{text-align:center}

  .dp-footer-heading::after{
    right:50%;
    transform:translateX(50%);
  }

  .dp-important-links{
    grid-template-columns:1fr 1fr;
  }

  .dp-social-icons,
  .dp-payment-icons{
    justify-content:center;
  }

  .dp-footer-copy{
    margin-top:14px;
    min-height:44px;
    padding:10px 12px;
    font-size:10.8px;
  }
}

@media (max-width:420px){
  .dp-important-links{grid-template-columns:1fr}
}

@media (max-width:360px){
  .dp-header-main{padding-inline:9px}

  .dp-logo{
    width:62px;
    height:52px;
  }

  .dp-action{
    width:32px;
    height:32px;
  }
}


/* =========================================================
   V3 — HOMEPAGE HEADER IDENTITY
   Full Snapchat-yellow header on the homepage.
   The logo itself is no longer displayed as a separate yellow tile.
   ========================================================= */

body.index .dp-header-main{
  background:var(--dp-yellow) !important;
  border-bottom:1px solid rgba(17,17,17,.10);
}

body.index .dp-logo{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}

body.index .dp-action{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(17,17,17,.12) !important;
}

body.index .dp-action:hover{
  background:var(--dp-black) !important;
  color:var(--dp-yellow) !important;
  border-color:var(--dp-black) !important;
}

/* Keep the categories row visually separate from the full yellow header. */
body.index .dp-nav{
  background:var(--dp-white) !important;
  border-top:1px solid rgba(17,17,17,.08);
  border-bottom:1px solid var(--dp-line);
}

body.index .dp-nav a::after{
  background:var(--dp-yellow) !important;
}


/* =========================================================
   V3 — PRODUCT PAGE ONLY
   This intentionally affects the main product gallery ONLY.
   Product cards, homepage grids and similar-product cards remain untouched.
   ========================================================= */

body.product-single .product-slider{
  width:min(100%,520px) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:9 / 16 !important;
  margin-inline:auto !important;
  background:#fff !important;
  overflow:hidden !important;
}

body.product-single .product-slider > *,
body.product-single .product-slider salla-slider,
body.product-single .product-slider .swiper,
body.product-single .product-slider .swiper-wrapper,
body.product-single .product-slider .swiper-slide{
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
}

body.product-single .product-slider img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
  background:#fff !important;
}

/* Favorite + share: icon only, no visible text labels. */
body.product-single .share-rate-area .dp-icon-only{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:0 3px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  font-size:0 !important;
  line-height:1 !important;
  text-indent:0 !important;
  overflow:hidden !important;
}

body.product-single .share-rate-area .dp-icon-only .dp-action-text-hidden{
  display:none !important;
}

body.product-single .share-rate-area .dp-icon-only > span:not([class*="icon"]):not([class*="heart"]):not([class*="share"]),
body.product-single .share-rate-area .dp-icon-only > strong{
  font-size:0 !important;
}

body.product-single .share-rate-area .dp-icon-only svg{
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  min-height:19px !important;
}

body.product-single .share-rate-area .dp-icon-only i,
body.product-single .share-rate-area .dp-icon-only [class*="icon"]{
  font-size:19px !important;
  line-height:1 !important;
}

@media (max-width:767px){
  body.product-single .product-slider{
    width:100% !important;
    aspect-ratio:9 / 16 !important;
  }
}


/* =========================================================
   V4 — PRODUCT PAGE RELATED SECTIONS
   Remove "حملات مشابهة" because a similar-products section already exists.
   Product/image sizes are NOT changed here.
   ========================================================= */
body.product-single salla-products-slider[block-title="حملات مشابهة"],
body.product-single [block-title="حملات مشابهة"]{
  display:none !important;
}


/* =========================================================
   V5 — PRODUCT ACTIONS
   Favorite + share are icons only, directly under the product title.
   ========================================================= */

body.product-single .share-rate-area{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin-top:10px !important;
  margin-bottom:6px !important;
}

/* Hide the text labels that Raed renders beside the actual icon controls. */
body.product-single .share-rate-area > .heart-icon > span,
body.product-single .share-rate-area > .share-area > span,
body.product-single .share-rate-area .heart-icon > .text-gray-500,
body.product-single .share-rate-area .share-area > .text-gray-500{
  display:none !important;
}

/* Keep the two action wrappers compact — icon only. */
body.product-single .share-rate-area > .heart-icon,
body.product-single .share-rate-area > .share-area{
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}

/* Favorite icon */
body.product-single .share-rate-area .heart-icon salla-button,
body.product-single .share-rate-area .heart-icon .btn--wishlist{
  margin:0 !important;
}

/* Share icon */
body.product-single .share-rate-area .share-area salla-social-share{
  margin:0 !important;
}

/* If Salla places a visible label inside an action component, hide only that label. */
body.product-single .share-rate-area .dp-action-text-hidden{
  display:none !important;
}

/* =========================================================
   V5 — COMPACT PRODUCT DETAILS
   Zero-height/empty hydrated blocks are hidden by JS so Tailwind's
   flex gap does not create a large blank white region.
   ========================================================= */

body.product-single .main-content > .dp-zero-space-hidden{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  min-height:0 !important;
  height:0 !important;
}


/* =========================================================
   V6 — YELLOW HEADER ON ALL STORE PAGES
   Same identity on home, categories, product pages and content pages.
   ========================================================= */

.dp-header-main{
  background:var(--dp-yellow) !important;
  border-bottom:1px solid rgba(17,17,17,.10) !important;
}

.dp-logo{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}

.dp-action{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(17,17,17,.12) !important;
}

.dp-action:hover{
  background:var(--dp-black) !important;
  color:var(--dp-yellow) !important;
  border-color:var(--dp-black) !important;
}

/* Keep desktop category navigation clean beneath the yellow header. */
.dp-nav{
  background:var(--dp-white) !important;
  border-top:1px solid rgba(17,17,17,.08) !important;
  border-bottom:1px solid var(--dp-line) !important;
}

.dp-nav a::after{
  background:var(--dp-yellow) !important;
}

/* =========================================================
   V6 — PRODUCT IMAGE BOTTOM GAP FIX
   Removes the small baseline/spacing gap under the main product image
   without changing its 9:16 sizing.
   ========================================================= */

body.product-single .product-slider{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  line-height:0 !important;
}

body.product-single .product-slider img{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:top !important;
}

body.product-single .product-slider + .main-content{
  margin-top:0 !important;
  padding-top:0 !important;
}

@media (max-width:767px){
  body.product-single .three-cols-wrap{
    row-gap:0 !important;
  }
}


/* =========================================================
   V7 — PRODUCT PAGE REFINEMENT
   1) Remove the large white gap below the main product image.
   2) Make favorite/share smaller and align them to the physical left.
   3) Make product title lighter and more elegant.
   ========================================================= */

/* ---------------------------------------------------------
   MAIN PRODUCT IMAGE
   The previous fixed 9:16 container could be taller than the
   actual uploaded dress image, creating a large white area.
   V7 uses the image's natural portrait ratio instead.
   --------------------------------------------------------- */
body.product-single .product-slider,
body.product-single .product-slider.has-one-image,
body.product-single .product-slider.img-is-cover{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}

body.product-single .product-slider > *,
body.product-single .product-slider salla-slider,
body.product-single .product-slider .swiper,
body.product-single .product-slider .swiper-wrapper,
body.product-single .product-slider .swiper-slide,
body.product-single .product-slider a,
body.product-single .product-slider picture{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}

body.product-single .product-slider img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center top !important;
  vertical-align:top !important;
  background:#fff !important;
}

/* Remove any leftover spacing between gallery and details column. */
body.product-single .three-cols-wrap{
  row-gap:0 !important;
}

body.product-single .product-slider + .main-content,
body.product-single .main-content{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* ---------------------------------------------------------
   PRODUCT TITLE — lighter, cleaner, less heavy.
   --------------------------------------------------------- */
body.product-single .main-content > h1{
  margin-top:14px !important;
  margin-bottom:8px !important;
  font-size:20px !important;
  line-height:1.65 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:var(--dp-black) !important;
}

/* ---------------------------------------------------------
   FAVORITE + SHARE — icon only, smaller, physical left side.
   --------------------------------------------------------- */
body.product-single .share-rate-area{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important; /* physical left in RTL */
  gap:7px !important;
  margin:5px 0 10px !important;
  padding:0 !important;
}

body.product-single .share-rate-area > .heart-icon,
body.product-single .share-rate-area > .share-area{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Always hide the visible action labels. */
body.product-single .share-rate-area > .heart-icon > span,
body.product-single .share-rate-area > .share-area > span,
body.product-single .share-rate-area .dp-action-text-hidden{
  display:none !important;
}

/* Favorite button footprint */
body.product-single .share-rate-area .heart-icon salla-button,
body.product-single .share-rate-area .heart-icon .btn--wishlist{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
}

body.product-single .share-rate-area .heart-icon salla-button button,
body.product-single .share-rate-area .heart-icon .s-button-btn,
body.product-single .share-rate-area .heart-icon button{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:50% !important;
}

/* Share component footprint */
body.product-single .share-rate-area .share-area salla-social-share{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  transform:scale(.88);
  transform-origin:center;
}

/* Visible icon sizing when icon nodes are exposed in light DOM. */
body.product-single .share-rate-area svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
}

body.product-single .share-rate-area i,
body.product-single .share-rate-area [class*="icon"]{
  font-size:16px !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width:767px){
  body.product-single .main-content > h1{
    margin-top:12px !important;
    margin-bottom:6px !important;
    font-size:18px !important;
    line-height:1.65 !important;
    font-weight:500 !important;
  }

  body.product-single .share-rate-area{
    gap:6px !important;
    margin-top:3px !important;
    margin-bottom:8px !important;
  }

  body.product-single .share-rate-area .heart-icon salla-button,
  body.product-single .share-rate-area .heart-icon .btn--wishlist,
  body.product-single .share-rate-area .heart-icon salla-button button,
  body.product-single .share-rate-area .heart-icon .s-button-btn,
  body.product-single .share-rate-area .heart-icon button,
  body.product-single .share-rate-area .share-area salla-social-share{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
  }
}


/* =========================================================
   V8 — DESKTOP PRODUCT GALLERY BALANCE
   Prevents the main product photo from dominating desktop pages.
   Mobile/tablet behavior remains unchanged.
   ========================================================= */

@media (min-width:992px){

  body.product-single .three-cols-wrap{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:34px !important;
  }

  /* Elegant fixed visual zone for the dress gallery on desktop. */
  body.product-single .product-slider{
    flex:0 0 42% !important;
    width:42% !important;
    max-width:460px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:flex-start !important;
  }

  /* Product information takes the remaining width cleanly. */
  body.product-single .main-content{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding-top:0 !important;
  }

  /* Keep the actual image proportional and fully visible. */
  body.product-single .product-slider img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 !important;
  }

  /* Prevent inner Salla slider layers from exceeding the gallery column. */
  body.product-single .product-slider salla-slider,
  body.product-single .product-slider .swiper,
  body.product-single .product-slider .swiper-wrapper,
  body.product-single .product-slider .swiper-slide{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Large desktop: keep the image refined instead of scaling endlessly. */
@media (min-width:1440px){
  body.product-single .product-slider{
    max-width:480px !important;
  }
}


/* =========================================================
   V9 — REMOVE ALL DONATION UI
   Store is a fashion shop, not a donation flow.
   ========================================================= */

/* Hide donation-specific widgets/labels if Raed/Salla injects them. */
salla-quick-donation,
[class*="donation"]:not(.dp-keep-donation),
[id*="donation"]:not(.dp-keep-donation),
[data-testid*="donation"]:not(.dp-keep-donation){
  display:none !important;
}

/* Any label explicitly marked by JS as donation-related is removed. */
.dp-donation-hidden{
  display:none !important;
}