/* ==========================================================================
   Fonts — self-hosted (Arabic subset only), no external request
   ========================================================================== */
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/tajawal-arabic-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/tajawal-arabic-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/tajawal-arabic-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/tajawal-arabic-800-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/aref-ruqaa-arabic-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Aref Ruqaa';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/aref-ruqaa-arabic-700-normal.woff2') format('woff2');
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --red:#C22A2A;--red-dark:#9E2020;--charcoal:#1A1817;--cream:#FBF7F1;
  --card:#FFFFFF;--gold:#C9A24B;--gold-soft:#E8D9B0;--text:#2B2420;
  --muted:#8A7D6F;--line:#EFE7DA;
  --radius-lg:20px;--radius-md:14px;
  --shadow:0 6px 20px rgba(43,36,32,0.08);
}

*{box-sizing:border-box;}
html{margin:0;padding:0;}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:'Tajawal',sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
}
.app{width:100%;max-width:430px;min-height:100vh;background:var(--cream);position:relative;padding-bottom:calc(78px + env(safe-area-inset-bottom));}
a{color:inherit;}
button{font-family:inherit;}

/* ==========================================================================
   Header / search / drawer
   ========================================================================== */
.wabo-header-sticky{position:sticky;top:0;z-index:40;background:var(--cream);}
.wabo-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);}
.icon-btn{background:none;border:none;padding:6px;display:flex;align-items:center;justify-content:center;color:var(--charcoal);cursor:pointer;}
.logo-badge{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7a1414, var(--red-dark) 70%);
  border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center;
  color:var(--gold-soft);font-family:'Aref Ruqaa',serif;font-size:12px;font-weight:700;
  text-align:center;line-height:1.15;box-shadow:0 3px 10px rgba(194,42,42,0.25);
  text-decoration:none;
}

.wabo-search-bar{max-height:0;overflow:hidden;transition:max-height .25s ease, padding .25s ease;background:var(--cream);}
.wabo-search-bar.open{max-height:70px;padding:10px 18px 14px;}
.wabo-search-bar input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:11px 16px;font-family:inherit;font-size:14px;color:var(--text);}
.wabo-search-bar input::placeholder{color:var(--muted);}

.wabo-overlay{position:fixed;inset:0;background:rgba(26,24,23,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;}
.wabo-overlay.open{opacity:1;pointer-events:auto;}
.wabo-drawer{position:fixed;top:0;right:0;height:100%;width:82%;max-width:340px;background:var(--cream);transform:translateX(100%);transition:transform .28s ease;z-index:61;padding:18px;overflow-y:auto;}
.wabo-drawer.open{transform:translateX(0);}
.wabo-drawer input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:11px 16px;font-family:inherit;font-size:14px;margin-bottom:18px;}
.wabo-drawer h6{font-family:'Aref Ruqaa',serif;font-size:16px;color:var(--red-dark);margin-bottom:10px;}
.wabo-drawer ul{list-style:none;margin:0;padding:0;}
.wabo-drawer li a{display:block;padding:13px 4px;color:var(--text);text-decoration:none;font-weight:600;font-size:14px;border-bottom:1px solid var(--line);}

/* ==========================================================================
   Divider (signature element)
   ========================================================================== */
.wabo-divider{display:flex;align-items:center;gap:10px;padding:22px 20px 14px;}
.wabo-divider::before,.wabo-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--gold), transparent);opacity:.7;}
.wabo-divider .mark{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;}

/* ==========================================================================
   Hero
   ========================================================================== */
.wabo-hero{
  margin:14px 18px 0;border-radius:var(--radius-lg);overflow:hidden;position:relative;height:190px;
  background:linear-gradient(180deg, rgba(26,24,23,0) 40%, rgba(26,24,23,0.75) 100%), linear-gradient(135deg, #d9b877, #b5824a 40%, #7a4f2c 100%);
  display:flex;align-items:flex-end;box-shadow:var(--shadow);
}
.wabo-hero .hero-label{color:#fff;padding:18px 20px;font-family:'Aref Ruqaa',serif;font-weight:700;font-size:26px;text-shadow:0 2px 8px rgba(0,0,0,.35);}

/* ==========================================================================
   Section banner
   ========================================================================== */
.wabo-banner{margin:0 18px;background:linear-gradient(135deg, var(--red), var(--red-dark));color:#fff;text-align:center;padding:13px 16px;border-radius:var(--radius-md);font-weight:800;font-size:15px;box-shadow:0 4px 14px rgba(194,42,42,0.28);}

/* ==========================================================================
   Featured / offer card
   ========================================================================== */
.wabo-featured-card{margin:14px 18px 0;background:var(--card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.wabo-featured-card .photo{height:170px;background-color:#e0a86a;}
.wabo-featured-card .body{padding:14px 16px 16px;}
.wabo-featured-card h3{font-size:16px;font-weight:800;margin:0 0 6px;}
.wabo-featured-card p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 10px;}
.price-row{display:flex;align-items:center;justify-content:space-between;}
.price{font-weight:800;font-size:14.5px;color:var(--red-dark);}
.btn-options{background:var(--charcoal);color:#fff;border:none;padding:10px 18px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.btn-add{background:var(--red);color:#fff;border:none;padding:10px 18px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer;width:100%;margin-top:4px;white-space:nowrap;}

/* ==========================================================================
   Category filter chips
   ========================================================================== */
.wabo-cat-row{display:flex;gap:8px;padding:14px 18px 6px;overflow-x:auto;scrollbar-width:none;}
.wabo-cat-row::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;padding:8px 18px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--card);color:var(--text);border:1px solid var(--line);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;}
.chip.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal);}

/* ==========================================================================
   Product list
   ========================================================================== */
.wabo-product-list{padding:6px 18px 4px;display:flex;flex-direction:column;gap:12px;}
.wabo-product-card{background:var(--card);border-radius:var(--radius-md);display:flex;gap:12px;padding:10px;box-shadow:var(--shadow);align-items:center;}
.wabo-product-card .thumb{width:78px;height:78px;border-radius:12px;flex-shrink:0;background-color:#8fae6f;}
.wabo-product-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.wabo-product-card h4{font-size:14px;font-weight:800;margin:0;}
.wabo-product-card p{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;}

/* Star rating — real WooCommerce average_rating data, CSS-only 5-star row:
   gray base stars with a gold overlay clipped to the rating percentage. */
.wabo-stars{position:relative;display:inline-block;font-size:13px;line-height:1;color:var(--line);letter-spacing:2px;direction:ltr;}
.wabo-stars::before{content:'★★★★★';}
.wabo-stars::after{content:'★★★★★';position:absolute;inset:0;color:var(--gold);width:calc(var(--rating) / 5 * 100%);overflow:hidden;white-space:nowrap;}

.wabo-product-card .price{font-weight:800;font-size:13.5px;color:var(--red-dark);}
.cart-btn-full{
  width:100%;background:var(--red);color:#fff;border:none;
  padding:9px 12px;border-radius:10px;font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
}
.cart-btn-full:hover{background:var(--red-dark);}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.wabo-empty-note{text-align:center;padding:40px 30px;color:var(--muted);font-size:13px;}

.stepper{display:flex;align-items:center;background:var(--cream);border-radius:999px;overflow:hidden;border:1px solid var(--line);}
.stepper button{width:28px;height:28px;border:none;background:none;font-size:15px;font-weight:700;cursor:pointer;color:var(--text);}
.stepper button.plus{background:var(--gold);color:#fff;}
.stepper span{width:22px;text-align:center;font-weight:700;font-size:13px;}
.add-pill{background:var(--red);color:#fff;border:none;padding:7px 16px;border-radius:999px;font-weight:700;font-size:12px;cursor:pointer;transition:background .15s;white-space:nowrap;}

/* ==========================================================================
   Shop by category
   ========================================================================== */
.wabo-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px 18px 4px;}
.cat-item{text-align:center;text-decoration:none;display:block;}
.cat-item .circle{width:100%;aspect-ratio:1/1;border-radius:50%;background-color:#c98a4d;box-shadow:var(--shadow);margin-bottom:8px;}
.cat-item span{font-size:12.5px;font-weight:700;color:var(--text);}

/* ==========================================================================
   Footer
   ========================================================================== */
.wabo-footer{margin-top:20px;background:var(--charcoal);color:#fff;padding:26px 20px 20px;text-align:center;}
.wabo-footer .socials{display:flex;justify-content:center;gap:14px;margin-bottom:20px;}
.wabo-footer .socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;}
.wabo-footer h5{font-family:'Aref Ruqaa',serif;font-size:17px;font-weight:700;color:var(--gold-soft);margin:0 0 14px;}
.hours-row{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.75);padding:9px 4px;border-top:1px solid rgba(255,255,255,.08);}

/* ==========================================================================
   Bottom nav
   ========================================================================== */
.wabo-bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--card);border-top:1px solid var(--line);display:flex;padding:9px 6px calc(9px + env(safe-area-inset-bottom));z-index:50;}
.wabo-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:700;position:relative;}
.wabo-bottom-nav a.active{color:var(--red);}
.badge{position:absolute;top:-4px;right:22%;background:var(--red);color:#fff;width:16px;height:16px;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:800;}

/* ==========================================================================
   Quickview bottom sheet
   ========================================================================== */
.wabo-sheet-overlay{position:fixed;inset:0;background:rgba(26,24,23,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:70;}
.wabo-sheet-overlay.open{opacity:1;pointer-events:auto;}
.wabo-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:100%;max-width:430px;max-height:88vh;background:var(--cream);border-radius:24px 24px 0 0;z-index:71;transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 30px rgba(0,0,0,.2);}
.wabo-sheet.open{transform:translate(-50%,0);}
.wabo-sheet .sheet-handle{display:flex;justify-content:center;padding:10px 0 4px;flex-shrink:0;}
.wabo-sheet .sheet-handle span{width:36px;height:4px;border-radius:99px;background:var(--line);}
.wabo-sheet .sheet-close{position:absolute;top:14px;left:14px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(26,24,23,.55);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.wabo-sheet .sheet-scroll{overflow-y:auto;flex:1;padding:0 20px 20px;}

/* ==========================================================================
   Generic page / empty states (index.php fallback)
   ========================================================================== */
.wabo-page-header{padding:16px 18px 8px;}
.wabo-page-header h1{font-family:'Aref Ruqaa',serif;font-size:20px;font-weight:700;color:var(--red-dark);margin:0;}
.wabo-generic-content{padding:0 18px;}
.wabo-empty{text-align:center;padding:50px 30px;color:var(--muted);font-size:13px;}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.01ms !important;}
}

/* ==========================================================================
   Desktop (≥900px) — real breakpoint UX, not just a wider mobile layout.
   Mobile-only elements (hamburger, drawer, bottom nav, toggled search) hide;
   desktop-only elements (inline nav, always-visible search, header icons)
   take over. Cards/grids reflow via CSS alone — same markup either way.
   ========================================================================== */
.wabo-desktop-only{display:none;}

@media (min-width:900px){

  .wabo-mobile-only{display:none !important;}
  .wabo-desktop-only{display:flex;}

  body{align-items:flex-start;}
  .app{
    max-width:1180px;
    padding-bottom:40px; /* no bottom nav to clear on desktop */
  }

  /* ---- Header ---- */
  .wabo-top{
    padding:16px 40px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    border-bottom:none;
  }
  .wabo-header-actions{gap:22px;justify-self:start;align-items:center;}
  .header-icon-link{
    display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--text);
    font-size:13px;font-weight:700;line-height:1;
  }
  .header-icon-link svg{flex-shrink:0;display:block;}
  .header-icon-link .badge{position:static;margin-inline-start:2px;width:auto;height:auto;padding:1px 6px;border-radius:99px;line-height:1.4;}
  .logo-badge{width:60px;height:60px;font-size:12px;justify-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px;}

  .wabo-desktop-nav{
    justify-content:space-between;align-items:center;gap:24px;
    padding:12px 40px;border-bottom:1px solid var(--line);
  }
  .desktop-cats{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .desktop-cats::-webkit-scrollbar{display:none;}
  .desktop-cats a{
    text-decoration:none;color:var(--text);font-weight:700;font-size:13px;
    white-space:nowrap;flex-shrink:0;
    padding:8px 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  }
  .desktop-cats a:hover{border-color:var(--gold);}
  .desktop-cats a.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal);}
  .desktop-search{flex-shrink:0;}
  .desktop-search input{
    width:240px;border:1px solid var(--line);background:var(--card);
    border-radius:999px;padding:10px 16px;font-family:inherit;font-size:13.5px;
  }

  /* ---- Hero ---- */
  .wabo-hero{margin:24px 40px 0;height:280px;border-radius:24px;}
  .wabo-hero .hero-label{font-size:38px;padding:30px 36px;}

  /* ---- Divider / banner ---- */
  .wabo-divider{padding:32px 40px 20px;}
  .wabo-banner{margin:0 40px;padding:16px;font-size:17px;}

  /* ---- Featured card: horizontal split ---- */
  .wabo-featured-card{margin:20px 40px 0;display:flex;align-items:center;border-radius:24px;min-height:280px;}
  .wabo-featured-card .photo{width:42%;align-self:stretch;flex-shrink:0;}
  .wabo-featured-card .body{flex:1;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;}
  .wabo-featured-card h3{font-size:22px;}
  .wabo-featured-card p{font-size:14px;max-width:480px;}
  .btn-options,.btn-add{width:max-content;padding:12px 26px;font-size:13.5px;}

  /* ---- Category chips ---- */
  .wabo-cat-row{padding:22px 40px 8px;}

  /* ---- Product grid: horizontal carousel, arrows float over the row edges ---- */
  .wabo-carousel{position:relative;padding:0 52px;}
  .wabo-carousel .wabo-product-list{padding:10px 0 4px;margin:0;}
  .carousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:40px;height:40px;border-radius:50%;
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
    display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;
  }
  .carousel-arrow.prev{right:0;}
  .carousel-arrow.next{left:0;}
  .carousel-arrow:hover{border-color:var(--gold);color:var(--red-dark);}

  .wabo-product-list{
    display:flex;flex-wrap:nowrap;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    width:100%;
  }
  .wabo-product-list::-webkit-scrollbar{display:none;}
  .wabo-product-card{
    flex:0 0 210px;scroll-snap-align:start;
    flex-direction:column;align-items:stretch;padding:0;overflow:hidden;border-radius:16px;
    border:1px solid var(--line);box-shadow:none;
  }
  .wabo-product-card .thumb{width:100%;aspect-ratio:1/1;height:auto;border-radius:0;}
  .wabo-product-card .info{padding:14px;gap:8px;}
  .wabo-product-card h4{font-size:14px;font-weight:700;}

  /* ---- Shop by category ---- */
  .wabo-cat-grid{grid-template-columns:repeat(5,1fr);padding:10px 40px 4px;gap:20px;}

  /* ---- Footer: multi-column instead of stacked/centered ---- */
  .wabo-footer{
    margin-top:36px;padding:40px 40px 30px;text-align:start;
    display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
  }
  .wabo-footer .socials{justify-content:flex-start;grid-column:1;}
  .wabo-footer h5{grid-column:2;grid-row:1;margin-bottom:10px;}
  .hours-row{grid-column:2;}

  /* ---- Quickview: centered dialog instead of bottom sheet ---- */
  .wabo-sheet{
    left:50%;top:50%;bottom:auto;right:auto;
    transform:translate(-50%,-46%) scale(.96);opacity:0;
    max-width:640px;width:90%;max-height:82vh;
    border-radius:24px;
    transition:transform .25s ease, opacity .25s ease;
    pointer-events:none;
  }
  .wabo-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
  .wabo-sheet .sheet-handle{display:none;}
  .wabo-sheet .sheet-scroll{display:flex;gap:0;padding:0;}
  .wabo-sheet .sheet-photo{width:45%;flex-shrink:0;margin:0 !important;height:auto !important;align-self:stretch;}
  .wabo-sheet .sheet-details{padding:26px 28px;overflow-y:auto;}
}