/* WATEEN_GLOBAL_HEADER_V2_PRODUCTION=1
   WATEEN_HEADER_MODERN_PRODUCTION=1
   One appearance owner. Existing controls and event handlers stay intact. */
header.top {
  --header-teal: #0b5e72;
  --header-red: #ff3b4a;
  --header-ink: #16333b;
  --header-line: #e4ecee;
  position: sticky; inset-block-start: 0; z-index: 100;
  background: #fff; border-block-end: 1px solid var(--header-line);
  box-shadow: 0 2px 8px rgb(8 63 77 / 3%);
}
header.top .head {
  box-sizing: border-box; width: 100%; max-width: 1240px;
  min-height: 88px; margin-inline: auto; padding: 16px 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand search actions"; align-items: center;
  gap: clamp(20px, 3vw, 44px);
}
header.top .head > .logo {
  grid-area: brand; justify-self: start; display: inline-flex;
  align-items: center; gap: 10px; min-width: 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--header-red); font: inherit; font-size: 27px;
  line-height: 1; text-decoration: none; cursor: pointer;
}
header.top .logo::before {
  content: ""; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #fff url('/wateen-brand-mark.webp') center / contain no-repeat;
}
header.top .brand-logo-text {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
header.top .brand-logo-text b,
header.top .brand-logo-text i { font-style: normal; font-weight: 900; }
header.top .brand-logo-text b { color: var(--header-red); }
header.top .brand-logo-text i { color: var(--header-teal); }
header.top .head > .search {
  grid-area: search; display: flex; align-items: center;
  width: 100%; min-width: 0; min-height: 50px; padding: 4px;
  border: 1px solid var(--header-line); border-radius: 14px;
  background: #f5f8f9; box-shadow: none; overflow: hidden;
  transition: border-color 160ms ease, background-color 160ms ease;
}
header.top .head > .search:focus-within {
  border-color: var(--header-teal); background: #fff;
  outline: 3px solid rgb(11 94 114 / 10%); outline-offset: 1px;
}
header.top .search > input {
  flex: 1; width: 100%; min-width: 0; min-height: 40px;
  padding: 10px 14px; border: 0; outline: 0; background: transparent;
  color: var(--header-ink); font: inherit; font-size: 14px; line-height: 1.4;
}
header.top .search > input::placeholder { color: #6d8086; opacity: 1; }
header.top .search > button {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: var(--header-teal); color: #fff; font-size: 0; cursor: pointer;
  transition: background-color 160ms ease;
}
header.top .search > button::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
header.top .head>.acts {
  --w-header-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/g%3E%3C/svg%3E");
  --w-header-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --w-header-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");
  grid-area: actions; justify-self: end; display: flex; align-items: center;
  gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none;
}
header.top .acts > .icon {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; min-width: 44px; height: 44px; padding: 0;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; box-shadow: none; color: var(--header-teal);
  font-size: 0; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
header.top .acts > .icon::before {
  content: ""; width: 23px; height: 23px; background: currentColor;
  -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
  mask-position: center; mask-repeat: no-repeat; mask-size: contain;
}
header.top .account-btn::before { -webkit-mask-image: var(--w-header-icon-user); mask-image: var(--w-header-icon-user); }
header.top .fav-header-btn::before { -webkit-mask-image: var(--w-header-icon-heart); mask-image: var(--w-header-icon-heart); }
header.top .acts > .icon:last-child::before { -webkit-mask-image: var(--w-header-icon-cart); mask-image: var(--w-header-icon-cart); }
header.top .count,
header.top .fav-count {
  position: absolute; inset-block-start: 1px; inset-inline-end: 0;
  display: grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 4px; border: 2px solid #fff; border-radius: 999px;
  background: var(--header-red); color: #fff; font: 700 10px/1 Arial, sans-serif;
}
header.top .account-dot {
  display: none; position: absolute; inset-block-start: 5px; inset-inline-end: 5px;
  width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #24a06b;
}
header.top .account-btn.signed-in .account-dot { display: block; }
header.top .wgh-home-old { display: none; }
/* Retain the standalone product template's existing home control. */
header.top .head:has(> .head-actions):not(:has(> .search)) {
  grid-template-columns: auto 1fr; grid-template-areas: "brand actions";
}
header.top .head-actions { grid-area: actions; justify-self: end; display: flex; gap: 8px; }
header.top .head-actions.wgh-home-old { display: none; }
header.top .head-btn {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--header-line); border-radius: 12px;
  background: #fff; color: var(--header-teal); font: inherit; text-decoration: none;
}
header.top :is(.logo, .icon, .head-btn, .search > button):focus-visible {
  outline: 3px solid rgb(11 94 114 / 30%); outline-offset: 3px;
}
@media (hover: hover) {
  header.top .acts > .icon:hover,
  header.top .head-btn:hover { background: #eef6f8; }
  header.top .search > button:hover { background: #083f4d; }
}
@media (max-width: 900px) {
  header.top .head {
    min-height: 0; padding: 12px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "search search"; gap: 12px 16px;
  }
  header.top .head > .logo { font-size: 24px; }
  header.top .logo::before { width: 44px; height: 44px; }
  header.top .head>.acts { gap: 4px; }
  header.top .search > input { font-size: 16px; }
}
@media (max-width: 420px) {
  header.top .head { padding: 10px 12px 12px; gap: 10px 8px; }
  header.top .head > .logo { gap: 6px; font-size: 20px; }
  header.top .brand-logo-text { gap: 4px; }
  header.top .logo::before { width: 38px; height: 38px; }
  header.top .head>.acts { gap: 0; }
  header.top .search > input { padding-inline: 10px; }
}
@media (max-width: 340px) {
  header.top .head > .logo { gap: 4px; font-size: 18px; }
  header.top .logo::before { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  header.top .search, header.top .search > button,
  header.top .acts > .icon { transition: none; }
}


/* WATEEN_DABBERHA_PRODUCTION_STYLE=1 — global floating sourcing entry, no storefront layout ownership */
.w-dabberha-fab{
  position:fixed;z-index:2600;inset-inline-start:max(18px,env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));
  width:78px;height:78px;padding:8px;border:1px solid rgba(255,255,255,.72);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(145deg,#ff3b4a,#e7253c);color:#fff;box-shadow:0 14px 34px rgba(210,31,54,.32);
  font:inherit;cursor:pointer;direction:rtl;isolation:isolate;transition:transform .16s ease,box-shadow .16s ease;
}
.w-dabberha-fab span{font-size:18px;line-height:1;font-weight:900}
.w-dabberha-fab b{font-size:12px;line-height:1.15;font-weight:950;text-align:center}
.w-dabberha-fab:focus-visible{outline:3px solid rgba(11,94,114,.34);outline-offset:4px}
@media(hover:hover){.w-dabberha-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(210,31,54,.38)}}
body:has(.w-install-banner:not([hidden])) .w-dabberha-fab,
body:has(.w-push-consent:not([hidden])) .w-dabberha-fab{bottom:calc(126px + env(safe-area-inset-bottom))}
.w-dabberha-overlay{
  position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px;
  background:rgba(3,34,42,.58);backdrop-filter:blur(10px);direction:rtl;
}
.w-dabberha-overlay[hidden]{display:none!important}
body.w-dabberha-lock{overflow:hidden!important}
.w-dabberha-panel{
  position:relative;width:min(600px,100%);max-height:min(820px,92vh);overflow:auto;
  padding:28px;border:1px solid rgba(7,91,109,.12);border-radius:28px;background:#fff;color:#16333b;
  box-shadow:0 30px 90px rgba(0,25,32,.28);text-align:right;
}
.w-dabberha-close{
  position:absolute;inset-inline-start:14px;top:13px;width:38px;height:38px;border:0;border-radius:50%;
  background:#f2f6f7;color:#536d74;font:700 27px/1 Arial,sans-serif;cursor:pointer;
}
.w-dabberha-kicker{color:#e7253c;font-size:12px;font-weight:950;margin-bottom:6px}
.w-dabberha-panel h2{margin:0;padding-inline-start:42px;color:#083f4d;font-size:27px;line-height:1.35}
.w-dabberha-lead{margin:8px 0 20px;color:#687d83;font-size:13px;line-height:1.8}
.w-dabberha-form{display:grid;gap:13px}
.w-dabberha-form label{display:grid;gap:6px;color:#254750;font-size:12px;font-weight:900}
.w-dabberha-form label>small{font-size:10px;color:#8b999d;font-weight:700}
.w-dabberha-form :is(input,textarea){
  width:100%;box-sizing:border-box;border:1px solid #dfe8ea;border-radius:13px;background:#f8fafb;color:#16333b;
  padding:11px 12px;font:inherit;font-size:14px;line-height:1.55;outline:none;resize:vertical;
}
.w-dabberha-form :is(input,textarea):focus{border-color:#0b5e72;background:#fff;box-shadow:0 0 0 3px rgba(11,94,114,.09)}
.w-dabberha-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.w-dabberha-file{min-width:0;border:1px dashed #cbdcde;border-radius:14px;padding:10px 12px;background:#fbfdfd;cursor:pointer}
.w-dabberha-file input{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important}
.w-dabberha-file span{color:#0b5e72;font-size:13px;font-weight:950}
.w-dabberha-file small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#849398;font-size:10px;font-weight:700}
.w-dabberha-voice{
  min-height:57px;border:1px solid #dce8ea;border-radius:14px;background:#f3f8f9;color:#075b6d;font:inherit;font-size:13px;font-weight:950;cursor:pointer;
}
.w-dabberha-voice[data-listening="1"]{border-color:#ffb7c0;background:#fff3f5;color:#d82139}
.w-dabberha-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.w-dabberha-submit{
  min-height:48px;border:0;border-radius:14px;background:#075b6d;color:#fff;font:inherit;font-size:14px;font-weight:950;cursor:pointer;
  box-shadow:0 9px 22px rgba(7,91,109,.18);
}
.w-dabberha-submit:disabled{opacity:.64;cursor:wait}
.w-dabberha-status{min-height:20px;border-radius:11px;padding:0;color:#60777d;font-size:12px;line-height:1.6;text-align:center}
.w-dabberha-status[data-state="error"]{padding:8px 10px;background:#fff2f3;color:#b52336}
.w-dabberha-status[data-state="success"]{padding:8px 10px;background:#ecf9f3;color:#13704a}
.w-dabberha-status[data-state="working"]{padding:8px 10px;background:#eef7fa;color:#075b6d}
@media(max-width:620px){
  .w-dabberha-fab{width:70px;height:70px;inset-inline-start:max(12px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom))}
  .w-dabberha-fab span{font-size:16px}.w-dabberha-fab b{font-size:11px}
  body:has(.w-install-banner:not([hidden])) .w-dabberha-fab,
  body:has(.w-push-consent:not([hidden])) .w-dabberha-fab{bottom:calc(132px + env(safe-area-inset-bottom))}
  .w-dabberha-overlay{padding:10px;align-items:end}
  .w-dabberha-panel{width:100%;max-height:90vh;padding:22px 16px 18px;border-radius:24px 24px 18px 18px}
  .w-dabberha-panel h2{font-size:22px}
  .w-dabberha-tools,.w-dabberha-contact{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.w-dabberha-fab{transition:none}}


/* WATEEN_DABBERHA_MEDIA_PRODUCTION_STYLE=3 */
.w-dabberha-voice[data-recording="1"]{
  border-color:#ef9aa6;background:#fff0f2;color:#b4233b;box-shadow:0 0 0 3px rgba(220,38,64,.08)
}
.w-dabberha-audio-name{
  grid-column:1/-1;color:#849398;font-size:10px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.w-dabberha-audio-preview{grid-column:1/-1;width:100%;height:38px}
.w-dabberha-audio-preview[hidden]{display:none!important}
.w-dabberha-account{
  display:grid;gap:3px;padding:12px 13px;border:1px solid #cfe4da;border-radius:14px;background:#f2fbf6;color:#225844
}
.w-dabberha-account[hidden],.w-dabberha-contact[hidden]{display:none!important}
.w-dabberha-account b{font-size:13px;color:#13704a}
.w-dabberha-account span{font-size:12px;font-weight:850;color:#315c4b}
.w-dabberha-account small{font-size:10px;line-height:1.6;color:#6f8d81}