/* Desktop storefront only. Mobile keeps dijla-shop.css unchanged. */
@media (min-width: 1100px) {
  body { background: #f6f7f9; }
  .wrap { width: min(1320px, calc(100% - 96px)); }
  .topbar { background: linear-gradient(90deg, #c94012 0%, #f15a24 55%, #ff7434 100%); color: #fff; box-shadow: 0 3px 12px rgba(154,43,5,.12); }
  .topbar .wrap { min-height: 36px; font-size: 11px; }
  .topbar a, .topbar span { color: #fff; opacity: 1; }
  .site-header { background: #fff; color: var(--ink); box-shadow: 0 4px 24px rgba(30,24,20,.055); border-bottom: 1px solid var(--line); }
  .header-main { min-height: 92px; gap: 36px; grid-template-columns: 190px minmax(320px, 1fr) 190px; }
  .wordmark { color: var(--brand); gap: 12px; }
  .wordmark img { width: 58px; height: 58px; background: var(--brand-soft); padding: 5px; border-radius: 16px; }
  .wordmark b { font-size: 24px; letter-spacing: 2px; }
  .wordmark small { color: var(--ink); font-size: 10px; letter-spacing: 3px; }
  .wordmark em { color: var(--muted); font-size: 11px; margin-top: 7px; }
  .header-search { height: 50px; background: #f7f5f3; border: 1px solid #e9e3de; box-shadow: none; border-radius: 14px; overflow: visible; }
  .search input { font-size: 14px; padding-inline: 18px; }
  .search button { width: 52px; height: 48px; border-radius: 12px 0 0 12px; background: #c94012; flex-shrink: 0; }
  .header-actions { justify-content: flex-end; gap: 18px; }
  .header-actions .icon-btn { color: var(--ink); width: 40px; height: 40px; }
  .header-actions .icon-btn:hover { background: var(--brand-soft); color: var(--brand); }
  .header-actions .action-label { color: var(--muted); font-size: 10px; }
  .icon-btn .badge { background: var(--brand); color: #fff; }
  main.wrap { padding-top: 28px; }
  main.wrap:has(> .announce) { display: grid; grid-template-columns: 348px minmax(0, 1fr); column-gap: 18px; row-gap: 18px; }
  main.wrap:has(> .announce) > section:not(.announce):not(.promo-slider),
  main.wrap:has(> .announce) > .benefits { grid-column: 1 / -1; }
  .announce {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-height: 282px;
    height: 282px;
    padding: 30px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #ebe6e2;
    border-inline-start: 4px solid #c94012;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff 0%, #fff4ee 100%);
    box-shadow: 0 12px 30px rgba(24,31,48,.06);
  }
  .announce::before { content: "أهلاً بك"; padding: 5px 11px; border-radius: 999px; background: #fff0e9; color: #c94012; font-size: 10px; font-weight: 800; }
  .announce strong { max-width: 14ch; font-size: clamp(23px, 2vw, 30px); line-height: 1.55; }
  .announce > span { max-width: 30ch; color: var(--muted); font-size: 13px; line-height: 1.8; }
  .promo-slider { margin-top: 0; height: 282px; border-radius: 22px; box-shadow: 0 14px 34px rgba(206,66,14,.15); }
  main.wrap:has(> .announce) > .promo-slider { grid-column: 2; grid-row: 1; }
  .promo-slide { min-height: 282px; max-height: 282px; height: 282px; aspect-ratio: auto; background: #ed531f; }
  .promo-slide img { object-fit: cover; object-position: center; }
  .promo-arrow { width: 42px; height: 42px; box-shadow: 0 4px 16px rgba(30,24,20,.12); }
  main.wrap:has(> .announce) > .benefits { grid-row: 2; }
  main.wrap:has(> .announce) > .cats-block { grid-row: 3; }
  main.wrap:has(> .announce) > #products { grid-row: 4; }
  .cats-block { position: relative; margin-top: 10px; padding: 24px 24px 26px; overflow: hidden; border: 0; border-radius: 23px; background: linear-gradient(125deg, #c93d10 0%, #ed511e 48%, #ff7836 100%); box-shadow: 0 16px 35px rgba(197,57,9,.18); }
  .cats-block::before, .cats-block::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
  .cats-block::before { width: 310px; height: 310px; left: -105px; top: -180px; border: 62px solid rgba(255,255,255,.065); }
  .cats-block::after { width: 210px; height: 210px; right: 32%; bottom: -175px; background: rgba(255,255,255,.055); }
  .section-head { margin-bottom: 20px; }
  .section-head h2 { font-size: 22px; font-weight: 800; }
  .cats-block .section-head { position: relative; z-index: 2; }
  .cats-block .section-head h2 { color: #fff; }
  .categories-hint { display: none; }
  .category-controls:not([hidden]) { display: flex; gap: 8px; }
  .category-controls button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
  .category-controls button:hover:not(:disabled) { background: #fff; color: #c94012; border-color: #fff; }
  .category-controls button:disabled { opacity: .3; cursor: default; }
  .category-controls button:focus-visible, .cat:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .cats { position: relative; z-index: 2; gap: 18px; padding: 8px 4px 5px; scroll-padding-inline: 4px; scroll-snap-type: inline proximity; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .cat { position: relative; flex: 0 0 164px; min-height: 164px; height: 164px; padding: 0; gap: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; font-size: 12px; overflow: visible; }
  .cat picture { position: relative; display: block; width: 154px; height: 154px; flex-shrink: 0; overflow: hidden; border: 3px solid rgba(255,255,255,.78); border-radius: 50%; box-shadow: 0 12px 25px rgba(93,20,0,.22); }
  .cat picture::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(to bottom, transparent 42%, rgba(32,14,8,.18) 59%, rgba(24,10,5,.82) 100%); }
  .cat img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; padding: 0; background: transparent; box-shadow: none; transform: scale(1.025); }
  .cat-name { position: absolute; z-index: 3; left: 13px; right: 13px; bottom: 36px; display: block; min-height: 0; width: auto; overflow: hidden; color: #fff; font-size: 11.5px; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
  .cat small { position: absolute; z-index: 3; left: 13px; right: 13px; bottom: 21px; margin: 0; color: rgba(255,255,255,.84); font-size: 8px; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
  .cat:hover { transform: translateY(-4px); border: 0; background: transparent; box-shadow: none; }
  .cat:hover img { transform: scale(1.075); }
  .cat.active { transform: translateY(-4px); border: 0; background: transparent; box-shadow: none; }
  .cat.active picture { border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.2), 0 15px 30px rgba(86,18,0,.27); }
  .cat.active .cat-name { color: #fff; }
  .section { margin-top: 12px; scroll-margin-top: 180px; }
  .cats-block { scroll-margin-top: 180px; }
  .view-all { padding: 7px 14px; border: 1px solid #f0d8ca; border-radius: 9px; background: #fff; }
  .products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .product-card { padding: 14px; border-radius: 18px; border-color: #eee9e4; box-shadow: 0 3px 10px rgba(30,24,20,.025); }
  .product-image { height: 190px; background: #fff; border-radius: 12px; }
  .product-image img { padding: 12px; }
  .product-name { margin-top: 16px; font-size: 14px; line-height: 1.65; height: 46px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .product-meta { justify-content: space-between; font-size: 11px; min-height: 28px; gap: 8px; }
  .product-meta > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .product-meta .rate { flex-shrink: 0; }
  .price { font-size: 19px; margin: 12px 0 16px; }
  .price small { font-size: 11px; }
  .add-btn { min-height: 40px; border-radius: 10px; background: #c94012; font-size: 12px; }
  .benefits { margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); gap: 0; min-height: 82px; overflow: hidden; border-radius: 17px; border: 1px solid #e8e9ed; background: #fff; box-shadow: 0 8px 24px rgba(24,31,48,.04); }
  .benefit { justify-content: center; padding: 18px 20px; border: 0; border-radius: 0; background: #fff; }
  .benefit + .benefit { border-inline-start: 1px solid #e8e9ed; }
  .benefit .ico { width: 25px; height: 25px; padding: 5px; box-sizing: content-box; border-radius: 11px; background: #fff1eb; color: #c94012; }
  .benefit strong { font-size: 12px; }
  .benefit small { font-size: 9px; }
  .site-footer { margin-top: 32px; }
}

@media (min-width: 1100px) and (max-width: 1240px) {
  .wrap { width: calc(100% - 64px); }
  .header-main { grid-template-columns: 165px minmax(280px, 1fr) 175px; gap: 20px; }
  .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}