/* ===== تشيدان — التصميم الجديد (منشور 2026-10-22) =====
   Brand: charcoal header/footer, logo orange for actions, light grey tiles.
   Texts drawn by CSS (announcement, section titles) have ar/en/ur/hi versions via html[lang].
   Sections: 0 tokens · 1 announcement · 2 header · 3 hero · 4 category tiles
   5 section titles · 6 product cards · 7 features · 8 footer · 9 product/category pages · 10 load stability */

/* 0) Tokens */
:root{
  --tsh-ink:#1D1D1F;
  --tsh-muted:#5B5D63;
  --tsh-char:#222224;
  --tsh-char-2:#2E2E31;
  --tsh-orange:#C94A0A;
  --tsh-orange-dark:#A93C06;
  --tsh-tile:#EEF0F5;
  --tsh-line:#E3E4E8;
  --tsh-soft:#F6F6F8;
  --tsh-radius:14px;
  /* Theme primary = logo orange (darkened to pass contrast with white text) */
  --color-primary:#C94A0A;
  --color-primary-dark:#A93C06;
  --color-primary-light:#E2692B;
  --color-primary-reverse:#FFFFFF;
}
body{color:var(--tsh-ink);font-size:16px;background:#fff}

/* 1) Announcement bar: verified facts only, no motion */
.store-header::before{
  content:"جملة وتجزئة بأسعار مناسبة   •   كيابل فلكس صناعة وطنية من نحاس خالص   •   للطلبات والكميات واتساب 0551245662";
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px;
  height:36px;line-height:36px;font-size:14.5px;font-weight:700;
  background:var(--tsh-orange);color:#fff;text-align:center
}
html[lang="en"] .store-header::before{content:"Wholesale & retail   •   Locally made pure-copper flex cables   •   Orders & quantities: WhatsApp 0551245662"}
html[lang="ur"] .store-header::before{content:"ہول سیل اور ریٹیل مناسب قیمتوں پر   •   سعودی ساختہ خالص تانبے کی فلیکس کیبلز   •   آرڈرز اور مقدار کے لیے واٹس ایپ 0551245662"}
html[lang="hi"] .store-header::before{content:"थोक और खुदरा, उचित दाम   •   सऊदी निर्मित शुद्ध तांबे की फ्लेक्स केबल   •   ऑर्डर और मात्रा के लिए व्हाट्सऐप 0551245662"}

/* 2) Header: dark bar, white logo badge, big search */
.store-header .top-navbar{background:var(--tsh-char);border-bottom:1px solid #343438;padding:8px 0}
.store-header .top-navbar,
.store-header .top-navbar a,
.store-header .top-navbar .s-contacts-topnav-link,
.store-header .s-localization-modal-trigger-btn{color:#E9E9EE!important}
.store-header .top-navbar .s-menu-topnav-item{font-size:14px;font-weight:700;opacity:.9}
.store-header .top-navbar .s-menu-topnav-item:hover{opacity:1;color:#fff!important}
.store-header .s-localization-modal-trigger-btn{background:var(--tsh-char-2)!important;border-radius:10px;padding:6px 12px}
.store-header .header-search .s-search-input{
  height:46px!important;border-radius:12px!important;border:2px solid transparent!important;
  background:#fff!important;font-size:16px!important;color:var(--tsh-ink)!important;padding-inline-start:44px!important
}
.store-header .header-search .s-search-input::placeholder{color:#6B6D73}
.store-header .header-search .s-search-input:focus{border-color:var(--tsh-orange)!important}
.store-header .header-search .s-search-icon-wrap{inset-inline-start:14px}
#mainnav,#mainnav .inner{background:var(--tsh-char)!important;box-shadow:none!important}
#mainnav{min-height:76px}
#mainnav .navbar-brand{background:#fff;border-radius:12px;padding:4px 6px;margin-block:8px}
#mainnav .navbar-brand img{height:52px;width:auto;aspect-ratio:381/400;object-fit:contain}
#mainnav .main-menu > li > a,
#mainnav .main-menu > li > a span{color:#F2F2F5!important;font-weight:700;font-size:15.5px}
#mainnav .main-menu > li > a:hover,#mainnav .main-menu > li:hover > a span{color:#FFB48A!important}
#mainnav .main-menu > li#offers > a span,#mainnav .offers-link span,#mainnav .main-menu > li > a[href$="/offers"] span{color:#FF9A62!important}
#mainnav .sub-menu{border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);border-top:3px solid var(--tsh-orange)}
#mainnav .sub-menu a span{color:var(--tsh-ink)!important;font-size:15px}
#mainnav .sicon-menu,#mainnav .header-btn__icon,#mainnav .s-cart-summary-total,#mainnav i{color:#fff!important}
#mainnav .s-cart-summary-wrapper svg,#mainnav .s-user-menu-login-btn svg{fill:#fff}
#mainnav .s-user-menu-login-btn,#mainnav .s-cart-summary-wrapper{border-radius:12px}
#mainnav .s-cart-summary-count{background:var(--tsh-orange)!important}
#mainnav .mburger .sicon-menu{color:#FF9A62!important;font-size:28px}

/* 3) Hero: desktop slider (wide banners) and a separate phone slider (portrait banner) */
.s-block--photos-slider{padding-top:18px;margin-top:0!important}
.s-block--photos-slider .swiper-slide img{border-radius:18px;width:100%;height:auto;object-fit:cover;aspect-ratio:1080/418}
.s-block--photos-slider.repeated-block .swiper-slide img{aspect-ratio:780/1000}

/* 4) Category tiles (قائمة عناصر): photo on light grey, name underneath, whole card clickable */
.s-block--banners .square-photos-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:16px!important}
.s-block--banners .square-photos-grid > *{grid-row:auto!important;grid-column:auto!important}
.s-block--banners .banner-entry{
  height:auto!important;padding:0!important;display:flex!important;flex-direction:column;
  background:var(--tsh-tile)!important;border:1px solid #E3E6EE;border-radius:16px!important;overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease
}
.s-block--banners .banner-entry::after,.s-block--banners .banner-entry::before{display:none!important}
.s-block--banners .banner-entry .lazy__bg{
  position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:1/1;flex:none;
  background-size:cover!important;background-position:center!important;transition:transform .35s ease
}
.s-block--banners .banner-entry:hover{box-shadow:0 12px 26px rgba(20,20,30,.10);transform:translateY(-2px)}
.s-block--banners .banner-entry:hover .lazy__bg{transform:scale(1.04)}
.s-block--banners .banner-entry h3{
  position:static!important;height:auto!important;min-height:52px;margin:0!important;padding:10px 8px!important;
  flex:1 1 auto; /* in the 5-tile rows the theme makes the first label taller; the others now fill the same height */
  display:flex!important;align-items:center;justify-content:center;text-align:center;
  background:#fff!important;border:0!important;border-top:1px solid #E3E6EE!important;
  color:var(--tsh-ink)!important;font-size:16px!important;font-weight:800!important;line-height:1.35;
  opacity:1!important;transform:none!important
}
.s-block--banners .banner-entry h3 span{border:0!important;padding:0!important;background:none!important;color:inherit!important;font:inherit!important}
.s-block--banners .banner-entry:hover h3{color:var(--tsh-orange)!important}

/* 4b) Wide promo banners */
.s-block--fixed-banner img,.s-block--fixed-banner a{border-radius:18px;overflow:hidden;display:block}

/* 5) Section titles and "view all" */
.s-block__title h2,.s-slider-block__title h2{font-size:24px!important;font-weight:800!important;color:var(--tsh-ink)!important;line-height:1.3}
.s-block__title,.s-slider-block__title{margin-bottom:18px!important;align-items:center}
.s-slider-block__title-right h2::after,.s-block__title .right-side h2::after{
  content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--tsh-orange);margin-top:8px
}
.s-slider-block__display-all,.s-block__display-all,a.s-slider-block__display-all{
  color:var(--tsh-orange)!important;font-weight:800!important;font-size:15px!important;
  border-bottom:2px solid var(--tsh-orange);padding-bottom:2px
}
.s-slider-nav-arrow{border:1.5px solid var(--tsh-line)!important;border-radius:12px!important;width:40px!important;height:40px!important}
.s-block{margin-bottom:8px}

/* 6) Product cards: bordered card, whole image visible, clear price, big add-to-cart */
.s-product-card-entry{
  border:1.5px solid #2B2B2E!important;border-radius:var(--tsh-radius)!important;overflow:hidden;background:#fff!important;
  box-shadow:none!important;transition:box-shadow .2s ease,transform .2s ease
}
.s-product-card-entry:hover{box-shadow:0 12px 28px rgba(20,20,30,.10)!important;transform:translateY(-2px)}
.s-product-card-image{aspect-ratio:1/1;height:auto!important;background:#fff;border-radius:0!important;position:relative}
.s-product-card-image > a{display:block;width:100%;height:100%}
.s-product-card-image img,.s-product-card-image-cover{width:100%!important;height:100%!important;object-fit:contain!important;padding:8px;background:#fff}
.s-product-card-content{padding:12px 12px 14px!important;text-align:center;gap:6px}
.s-product-card-content-title,.s-product-card-content-title a{
  font-size:15px!important;font-weight:700!important;color:var(--tsh-ink)!important;line-height:1.55!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.1em
}
.s-product-card-content-sub{justify-content:center!important}
.s-product-card-price,.s-product-card-sale-price h4{font-size:19px!important;font-weight:800!important;color:var(--tsh-ink)!important}
.s-product-card-sale-price{justify-content:center;gap:8px;align-items:baseline}
.s-product-card-sale-price h4{color:var(--tsh-orange)!important}
.s-product-card-sale-price span{color:#85878D!important;font-size:14px!important;text-decoration:line-through}
.s-product-card-content-footer .s-button-btn,
.s-product-card-content-footer button.s-button-element{
  height:46px!important;border-radius:10px!important;font-size:15.5px!important;font-weight:800!important;
  border:1.5px solid var(--tsh-orange)!important;color:var(--tsh-orange)!important;background:#fff!important
}
.s-product-card-content-footer .s-button-btn:hover{background:var(--tsh-orange)!important;color:#fff!important}
.s-product-card-wishlist-btn button{background:#fff!important;border:1px solid var(--tsh-line)!important}
.tsh-off{
  position:absolute;top:10px;right:10px;left:auto;z-index:2;
  background:var(--tsh-orange);color:#fff;font-weight:800;font-size:13px;line-height:1;
  padding:6px 8px;border-radius:8px;direction:ltr
}

/* 7) Store features ("لماذا تشيدان") as cards, and the brand banners as a calm static row */
.s-block--features{margin-bottom:0!important}
.s-block--photos-slider + .s-block--features::before,
.s-block--best-offers + .s-block--features::before{
  content:"لماذا تتسوق من تشيدان؟";display:block;font-size:24px;font-weight:800;color:var(--tsh-ink);margin:8px 0 18px
}
html[lang="en"] .s-block--photos-slider + .s-block--features::before,
html[lang="en"] .s-block--best-offers + .s-block--features::before{content:"Why shop at Tshydan?"}
html[lang="ur"] .s-block--photos-slider + .s-block--features::before,
html[lang="ur"] .s-block--best-offers + .s-block--features::before{content:"تشیدان سے خریداری کیوں کریں؟"}
html[lang="hi"] .s-block--photos-slider + .s-block--features::before,
html[lang="hi"] .s-block--best-offers + .s-block--features::before{content:"Tshydan से खरीदारी क्यों करें?"}
.s-block--features + .s-block--features{padding-top:12px!important;margin-top:0!important}
.s-block--features .s-block--features__item{
  border:1px solid var(--tsh-line)!important;border-radius:16px!important;background:var(--tsh-soft)!important;
  box-shadow:none!important;padding:18px 14px!important
}
.s-block--features .feature-icon{background:var(--tsh-orange)!important;color:#fff!important;border-radius:14px!important}
.s-block--features .feature-icon i{color:#fff!important}
.s-block--features__item h2{font-size:16.5px!important;font-weight:800!important;color:var(--tsh-ink)!important;margin-top:10px}
.s-block--features__item p{font-size:14.5px!important;color:var(--tsh-muted)!important;line-height:1.6}
.s-block--features + .s-block--photos-slider{padding-top:28px}
.s-block--features + .s-block--photos-slider::before{content:"الماركات المتوفرة لدينا";display:block;max-width:1280px;margin:0 auto 16px;padding:0 16px;font-size:24px;font-weight:800;color:var(--tsh-ink)}
html[lang="en"] .s-block--features + .s-block--photos-slider::before{content:"Brands we carry"}
html[lang="ur"] .s-block--features + .s-block--photos-slider::before{content:"ہمارے پاس دستیاب برانڈز"}
html[lang="hi"] .s-block--features + .s-block--photos-slider::before{content:"हमारे पास उपलब्ध ब्रांड"}
.s-block--features + .s-block--photos-slider .swiper-wrapper{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;transform:none!important;max-width:1280px;margin:0 auto;padding:0 16px}
.s-block--features + .s-block--photos-slider .swiper-slide{width:auto!important;margin:0!important;opacity:1!important;transform:none!important}
.s-block--features + .s-block--photos-slider .swiper-slide img{aspect-ratio:auto!important;border:1px solid var(--tsh-line);border-radius:14px}
.s-block--features + .s-block--photos-slider .s-slider-nav-arrow,
.s-block--features + .s-block--photos-slider .swiper-pagination{display:none!important}

/* 8) Footer */
.store-footer,.store-footer__inner{background:var(--tsh-char)!important}
.store-footer h3,.store-footer .s-contacts-title{color:#fff!important;font-weight:800!important;font-size:17px!important}
.store-footer a,.store-footer p,.store-footer .s-menu-footer-item,.store-footer .s-contacts-item{color:#D5D6DB!important}
.store-footer a:hover,.store-footer .s-menu-footer-item:hover{color:#FFB48A!important}
.store-footer .s-menu-footer-item{font-size:15px;padding-block:4px}
/* The footer listed the same phone number twice, and the app badges pointed back to the website. */
.store-footer a.s-contacts-item[href="tel:966551245662"]{display:none!important}
.store-footer salla-apps-icons{display:none!important}

/* 9) Category and product pages */
.s-breadcrumb-item a,.breadcrumbs a{color:var(--tsh-muted)!important}
.product-single .s-product-card-price,.product-single [class*="price"] h2,.product-single .total-price{font-size:28px!important;font-weight:800!important}
.product-single salla-add-product-button button,.sticky-product-bar salla-add-product-button button{
  height:52px!important;border-radius:12px!important;font-size:17px!important;font-weight:800!important;
  background:var(--tsh-orange)!important;border-color:var(--tsh-orange)!important;color:#fff!important
}
.product-single h1{font-size:24px!important;font-weight:800!important;line-height:1.5!important}

/* 10) Load stability (kept from the speed work, adjusted for the new banners) */
salla-slider.photos-slider:not(:has(.swiper-initialized)) .swiper-slide:not(:first-child){display:none}
salla-slider.photos-slider:not(:has(.swiper-initialized)) .swiper-slide:first-child{width:100%;max-width:100%;margin:0 auto}
.s-block--best-offers salla-products-slider:not(:has(.swiper-initialized)){display:block;height:420px;overflow:hidden}
.s-block--best-offers salla-products-slider:not(:has(.swiper-initialized)) > *{opacity:0!important}

/* Phones */
@media (max-width:767px){
  .store-header::before{content:"جملة وتجزئة  •  واتساب 0551245662";font-size:14px;height:34px;line-height:34px}
  html[lang="en"] .store-header::before{content:"Wholesale & retail  •  WhatsApp 0551245662"}
  html[lang="ur"] .store-header::before{content:"ہول سیل اور ریٹیل  •  واٹس ایپ 0551245662"}
  html[lang="hi"] .store-header::before{content:"थोक और खुदरा  •  व्हाट्सऐप 0551245662"}
  .store-header .top-navbar{padding:8px 0 10px}
  .store-header .header-search .s-search-input{height:48px!important}
  #mainnav{min-height:66px}
  #mainnav .navbar-brand img{height:44px}
  .s-block--banners .square-photos-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .s-block--banners .banner-entry h3{font-size:14px!important;min-height:48px;padding:8px 4px!important}
  .s-block__title h2,.s-slider-block__title h2{font-size:21px!important}
  .s-product-card-content-title,.s-product-card-content-title a{font-size:14.5px!important}
  .s-product-card-price,.s-product-card-sale-price h4{font-size:18px!important}
  .s-block--best-offers salla-products-slider:not(:has(.swiper-initialized)){height:400px}
  .s-block--features + .s-block--photos-slider .swiper-wrapper{grid-template-columns:1fr;gap:10px}
  .s-product-card-content-footer .s-button-btn,.s-product-card-content-footer button.s-button-element{font-size:14px!important;padding:0 6px!important}
  .s-product-card-content-footer .s-button-text{white-space:nowrap;overflow:visible!important;text-overflow:clip!important}
  section.s-block--features > div.grid{grid-template-columns:1fr!important;gap:10px!important}
  section.s-block--features .s-block--features__item{grid-column:auto!important}
  .s-block--features .s-block--features__item{display:grid!important;grid-template-columns:52px 1fr;column-gap:14px;align-items:center;text-align:start!important;padding:14px!important}
  .s-block--features .feature-icon{grid-row:span 2;width:52px!important;height:52px!important;margin:0!important}
  .s-block--features__item h2{margin:0!important}
  .s-block--photos-slider + .s-block--features::before,.s-block--best-offers + .s-block--features::before,
  .s-block--features + .s-block--photos-slider::before{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}