/* WISAL / Salla — replace the previous custom CSS completely. */
:root {
  --wisal-ui-version: 3;
  --wisal-green: #003527;
  --wisal-accent: #0b6b50;
  --wisal-ink: #17231e;
  --wisal-muted: #52615a;
  --wisal-soft: #f7faf8;
  --wisal-line: #dfe8e4;
  --wisal-container: 1200px;
  --wisal-header-space: 96px;
}

/* Guard the document; component sizing is also corrected inside Shadow DOM. */
html, body {
  max-inline-size: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html, body {
    overflow-x: clip;
  }
}

html {
  scroll-padding-top: var(--wisal-header-space);
}

body {
  color: var(--wisal-ink);
}

.wisal-global-header,
.wisal-global-header *,
.wisal-global-header *::before,
.wisal-global-header *::after {
  box-sizing: border-box;
}

.wisal-global-header[hidden],
.wisal-global-header [hidden] {
  display: none !important;
}

/* Keep Salla's original header until its real account/cart nodes are mounted. */
html.wisal-global-ready body {
  padding-top: var(--wisal-header-space) !important;
}

html.wisal-global-ready header.store-header,
html.wisal-global-ready .wisal-nav-shell,
html.wisal-global-ready .wisal-header-host {
  display: none !important;
}

.wisal-global-header {
  position: fixed;
  z-index: 60;
  inset: 12px 0 auto;
  padding-inline: 18px;
  font-family: inherit;
}

.wisal-global-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  inline-size: 100%;
  max-inline-size: var(--wisal-container);
  min-block-size: 72px;
  margin-inline: auto;
  padding: 8px 12px;
  border: 1px solid rgb(0 53 39 / 11%);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(8 38 30 / 10%);
}

.wisal-global-header a {
  text-decoration: none;
}

.wisal-global-header__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 108px;
  min-inline-size: 0;
  min-block-size: 48px;
}

.wisal-global-header__brand img {
  display: block;
  inline-size: 104px;
  block-size: 44px;
  object-fit: contain;
}

.wisal-global-header__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  min-inline-size: 0;
  padding-inline: 12px;
  border-inline: 1px solid var(--wisal-line);
}

.wisal-global-header__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: #34433d;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.wisal-global-header__nav a:hover {
  color: var(--wisal-accent);
}

.wisal-global-header__actions,
.wisal-global-header__native {
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}

.wisal-global-header__actions {
  flex: 0 0 auto;
}

.wisal-global-header__native salla-user-menu,
.wisal-global-header__native salla-cart-summary {
  display: block !important;
  flex: 0 0 44px;
  inline-size: 44px !important;
  min-inline-size: 44px !important;
  block-size: 44px;
  margin: 0 !important;
}

.wisal-global-header__native .s-user-menu-login-btn,
.wisal-global-header__native .s-user-menu-trigger,
.wisal-global-header__native .s-cart-summary-wrapper {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  inline-size: 44px !important;
  min-inline-size: 44px !important;
  block-size: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wisal-line);
  border-radius: 12px;
  background: #fff;
  color: var(--wisal-green);
  box-shadow: none;
}

.wisal-global-header__native #s-cart-icon,
.wisal-global-header__native .header-btn__icon {
  inline-size: 20px !important;
  block-size: 20px !important;
  min-inline-size: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px;
}

.wisal-global-header__native .s-user-menu-login-btn svg {
  inline-size: 22px;
  block-size: 22px;
}

.wisal-global-header__native .s-cart-summary-content {
  display: none !important;
}

.wisal-global-header__native .s-cart-summary-count {
  position: absolute;
  inset: -5px auto auto -5px;
  display: grid;
  place-items: center;
  min-inline-size: 19px;
  block-size: 19px;
  padding-inline: 4px;
  border: 2px solid #fff;
  border-radius: 99px;
  background: var(--wisal-accent);
  color: #fff;
  font-size: 10px;
}

.wisal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 8px 14px;
  border: 1px solid var(--wisal-line);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.wisal-btn--primary {
  background: var(--wisal-green);
  border-color: var(--wisal-green);
  color: #fff;
}

.wisal-btn--ghost {
  background: #fff;
  color: var(--wisal-green);
}

.wisal-global-header__menu {
  display: none;
}

.wisal-global-header :is(a, summary):focus-visible {
  outline: 3px solid #6cc9a4;
  outline-offset: 3px;
}

/* Host widths only. Inner component CSS is installed by wisal-ui.js. */
[component-name="wisal-main-hero"],
[component-name="hero-wisal"],
[component-name="wisal-experience"] {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

body.index #main-content > :is(
  .s-block--bundle-wisal-main-hero,
  .s-block--bundle-hero-wisal,
  .s-block--bundle-wisal-experience
) {
  margin-block: 0 !important;
  padding-block: 0 !important;
  min-inline-size: 0;
}

/* Product: preserve Salla's prices, selectors, quantity and purchase controls. */
body.product-single .container--product-details,
body.product-single .container--product-details *,
body.product-single .container--product-details *::before,
body.product-single .container--product-details *::after {
  box-sizing: border-box;
}

body.product-single #main-content {
  padding-bottom: 40px;
}

body.product-single :is(
  .container--breadcrumbs,
  .container--product-details
),
body.cart #main-content > .container,
body.page #main-content > .container {
  inline-size: 100%;
  max-inline-size: var(--wisal-container) !important;
  margin-inline: auto;
  padding-inline: 24px !important;
  box-sizing: border-box;
}

body.product-single .container--product-details > [id^="product-"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px !important;
}

body.product-single .container--product-details .sidebar {
  grid-column: 2;
  grid-row: 1;
  position: sticky !important;
  top: calc(var(--wisal-header-space) + 12px) !important;
  inline-size: 100% !important;
  min-inline-size: 0;
  margin: 0 !important;
}

body.product-single .container--product-details .main-content {
  grid-column: 1;
  grid-row: 1;
  position: static !important;
  display: flex;
  flex-direction: column;
  inline-size: 100% !important;
  min-inline-size: 0;
  margin: 0 !important;
  overflow: visible !important;
}

body.product-single .container--product-details .main-content > * {
  order: 10;
}

body.product-single [data-testid="store-product-title"] {
  order: 1;
  margin: 0 0 16px;
  color: var(--wisal-green);
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.5;
}

body.product-single .product-form {
  order: 2;
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid var(--wisal-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(8 38 30 / 4%);
}

body.product-single .product__description {
  order: 3;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

body.product-single .main-content > [data-testid="store-product-price"] {
  display: none;
}

body.product-single .s-product-options-option-container {
  margin-bottom: 16px;
  min-inline-size: 0;
}

body.product-single .s-product-options-option-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--wisal-green);
}

body.product-single .s-product-options-option-content {
  min-inline-size: 0;
}

body.product-single .product-form select.s-form-control {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 52px;
  padding-inline: 12px 36px;
  border: 1px solid #bdcfc4;
  border-radius: 12px;
  background-color: var(--wisal-soft);
  color: var(--wisal-ink);
  font-size: 16px;
}

body.product-single .product-form > section {
  padding: 14px 0 !important;
}

body.product-single .product-form .total-price {
  color: var(--wisal-green);
  font-size: 28px;
}

body.product-single .details-slider {
  border-radius: 18px;
  overflow: hidden;
  background: var(--wisal-soft);
}

body.product-single .details-slider img {
  object-fit: contain !important;
}

body.product-single .s-button-primary {
  border-color: var(--wisal-green);
  background: var(--wisal-green);
}

body.product-single .product__description .article--main {
  max-inline-size: 100%;
  color: #263b32;
  font-size: 16px;
  line-height: 1.9;
}

/* Do not turn every paragraph of the authored product HTML into a card. */
body.product-single .product__description :is(img, video, iframe) {
  max-inline-size: 100%;
}

body.product-single .product__description table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}

body.cart .no-content-placeholder {
  inline-size: min(620px, 100%);
  box-sizing: border-box;
  margin: 28px auto;
  padding: 48px 20px;
  border: 1px solid var(--wisal-line);
  border-radius: 22px;
  background: var(--wisal-soft);
}

.store-footer a {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  :root {
    --wisal-header-space: 84px;
  }

  .wisal-global-header {
    top: 8px;
    padding-inline: 10px;
  }

  .wisal-global-header__bar {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto minmax(94px, 1fr);
    gap: 8px;
    min-block-size: 64px;
    padding: 8px;
    border-radius: 18px;
  }

  .wisal-global-header__nav,
  .wisal-desktop-action {
    display: none !important;
  }

  .wisal-global-header__brand {
    grid-column: 2;
    grid-row: 1;
    inline-size: 94px;
  }

  .wisal-global-header__brand img {
    inline-size: 90px;
    block-size: 40px;
  }

  .wisal-global-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .wisal-global-header__menu {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .wisal-global-header__menu summary {
    display: grid;
    place-content: center;
    gap: 4px;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--wisal-line);
    border-radius: 12px;
    list-style: none;
    cursor: pointer;
  }

  .wisal-global-header__menu summary::-webkit-details-marker {
    display: none;
  }

  .wisal-global-header__menu summary span {
    inline-size: 18px;
    block-size: 2px;
    background: var(--wisal-green);
  }

  .wisal-global-header__menu[open] summary span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .wisal-global-header__menu[open] summary span:nth-child(2) {
    opacity: 0;
  }

  .wisal-global-header__menu[open] summary span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .wisal-global-header__panel {
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    max-block-size: calc(100vh - 100px);
    max-block-size: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 12px;
    border: 1px solid var(--wisal-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgb(8 38 30 / 14%);
  }

  .wisal-global-header__panel nav {
    display: grid;
    gap: 4px;
  }

  .wisal-mobile-link {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    padding: 8px 12px;
    color: var(--wisal-ink);
    border-radius: 10px;
    font-size: 15px;
  }

  .wisal-mobile-link:hover {
    background: var(--wisal-soft);
  }

  .wisal-global-header__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--wisal-line);
  }

  .wisal-global-header__panel-actions .wisal-btn {
    flex: 1;
  }
}

@media (max-width: 900px) {
  body.product-single .container--product-details > [id^="product-"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px !important;
  }

  body.product-single .container--product-details .sidebar {
    grid-column: 1;
    grid-row: 1;
    position: static !important;
  }

  body.product-single .container--product-details .main-content {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 640px) {
  body.product-single :is(
    .container--breadcrumbs,
    .container--product-details
  ),
  body.cart #main-content > .container,
  body.page #main-content > .container {
    padding-inline: 16px !important;
  }

  body.product-single .product-form {
    padding: 16px;
  }

  body.product-single .product-form .total-price {
    font-size: 26px;
  }

  body.product-single .product__description .article--main {
    font-size: 15px;
  }

  body.product-single .product-form .center-between {
    gap: 12px;
    flex-wrap: wrap;
  }

  body.product-single .s-product-options-option-label {
    display: block;
  }

  /* Keep quantity/options/checkout in normal flow; avoid a competing fixed bar. */
  body.product-single .product-form .sticky-product-bar {
    position: static !important;
    inset: auto !important;
    inline-size: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 360px) {
  .wisal-global-header__brand {
    inline-size: 80px;
  }

  .wisal-global-header__brand img {
    inline-size: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wisal-global-header * {
    transition: none !important;
  }
}
/* إخفاء وثيقة العمل الحر من الفوتر */
salla-trust-badges:has(img[alt="وثيقة العمل الحر"]) {
  display: none !important;
}