/* =========================================================================
   Amola Optics — main stylesheet (RTL, mobile-first, dependency-free)
   ========================================================================= */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --ink:#1a2233; --muted:#6b7280;
  --primary:#132741; --primary-2:#1e3a5f; --accent:#e8a13a; --accent-2:#f2b04f;
  --line:#e6e8ec; --ok:#1a9d6a; --bad:#d64545; --warn:#d98a00; --info:#2a6fb0;
  --radius:14px; --radius-sm:9px; --shadow:0 6px 24px rgba(19,39,65,.08);
  --shadow-sm:0 2px 8px rgba(19,39,65,.06); --container:1200px; --header-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Tajawal",system-ui,"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.35;font-weight:800}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
.muted{color:var(--muted)}
.link{color:var(--info);font-weight:700}
.link:hover{text-decoration:underline}
.main{min-height:60vh;padding-bottom:40px}
.page-title{font-size:1.6rem;margin:1.2rem 0}
.section-title{font-size:1.25rem;margin:1.5rem 0 .8rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:1px solid transparent;border-radius:var(--radius-sm);padding:.62rem 1.1rem;
  font:inherit;font-weight:700;cursor:pointer;transition:.18s;background:#e9edf2;color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-2)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn--light{background:#fff;color:var(--primary)}
.btn--danger{background:#fdecec;color:var(--bad)}
.btn--danger:hover{background:var(--bad);color:#fff}
.btn--lg{padding:.85rem 1.6rem;font-size:1.05rem}
.btn--sm{padding:.45rem .8rem;font-size:.9rem}
.btn--xs{padding:.3rem .6rem;font-size:.8rem}
.btn--block{width:100%}

/* ---------- Alerts ---------- */
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);margin:1rem 0;font-weight:600}
.alert--ok{background:#e6f6ee;color:#0f7a4d;border:1px solid #b7e6cd}
.alert--bad{background:#fdeaea;color:#b12f2f;border:1px solid #f3c4c4}

/* ---------- Header (نمط cocyta: لوجو في المنتصف، أبيض نظيف) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.topbar{background:var(--primary);color:#fff;font-size:.82rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar a{color:#fff}
.header__main{display:flex;align-items:center;gap:14px;height:var(--header-h)}
.header__main--cocyta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:66px}
.header__side{display:flex;align-items:center;gap:10px;min-width:0}
.header__side--start{justify-self:start;width:100%}
.header__side--end{justify-self:end}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.15rem;color:var(--primary)}
.logo--lockup{justify-self:center}
.logo--lockup img{height:46px;width:auto;display:block}
.logo__text{white-space:nowrap}
.search{flex:1;display:flex;max-width:340px;background:#fff;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.search:focus-within{border-color:var(--primary)}
.search input{flex:1;border:0;background:transparent;padding:.58rem 1rem;font:inherit;outline:none;min-width:0}
.search button{border:0;background:transparent;color:var(--muted);padding:0 .85rem;cursor:pointer;display:flex;align-items:center}
.search button:hover{color:var(--primary)}
.header__actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.account-links{font-size:.88rem;font-weight:700;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:4px}
.account-links a{color:var(--ink)}
.account-links a:hover{color:var(--primary);text-decoration:underline}
.account-links__sep{color:var(--muted)}
.icon-link{display:flex;align-items:center;justify-content:center;padding:.35rem;color:var(--ink);position:relative;border-radius:50%}
.icon-link:hover{color:var(--primary)}
.icon-link__label{font-size:.7rem}
.cart-link .badge,.badge{position:absolute;top:-5px;inset-inline-start:-5px;background:var(--accent);color:#1a1a1a;font-size:.7rem;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:6px;flex:0 0 auto}
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px}

.mainnav{border-top:1px solid var(--line);background:#fff}
.mainnav__list{display:flex;gap:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mainnav__list::-webkit-scrollbar{display:none}
.mainnav--centered .mainnav__list{justify-content:center}
.mainnav__list>li{position:relative;flex:0 0 auto}
.mainnav__list>li>a{display:block;padding:.5rem .85rem;font-weight:600;font-size:.9rem;color:var(--ink);border-bottom:2px solid transparent;white-space:nowrap}
.mainnav__list>li>a:hover{color:var(--primary);border-color:var(--primary)}
.submenu{position:absolute;top:100%;inset-inline-start:0;min-width:190px;background:#fff;box-shadow:var(--shadow);border-radius:var(--radius-sm);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:40}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:.5rem .7rem;border-radius:6px;font-size:.9rem}
.submenu a:hover{background:#f0f2f5;color:var(--primary)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg,var(--primary),var(--primary-2));color:#fff;overflow:hidden}
.hero__inner{display:flex;align-items:center;gap:20px;padding:44px 16px;min-height:300px}
.hero__eyebrow{display:inline-block;background:rgba(255,255,255,.15);padding:.25rem .8rem;border-radius:999px;font-size:.85rem;font-weight:700;margin-bottom:1rem}
.hero h1{font-size:2.3rem;line-height:1.25}
.hero p{color:#d6e0ec;max-width:440px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.2rem}
.hero__art{flex:0 0 auto;color:var(--accent);width:min(42%,360px)}
.hero__art svg{width:100%;height:auto}

/* ---------- Feature row ---------- */
.features-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-28px;position:relative;z-index:5}
.feature{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem;display:flex;gap:.7rem;align-items:center}
.feature span{font-size:1.6rem}
.feature strong{display:block;font-size:.95rem}
.feature small{color:var(--muted)}

/* ---------- Sections / grid ---------- */
.section{margin:2.4rem auto}
.section__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem}
.section__head h2{font-size:1.4rem;margin:0}
.section__more{color:var(--info);font-weight:700}
.grid{display:grid;gap:16px}
.grid--products{grid-template-columns:repeat(4,1fr)}

.cat-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem .6rem;text-align:center;font-weight:700;transition:.18s}
.cat-tile:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.cat-tile__icon{display:block;font-size:1.8rem;margin-bottom:.35rem}

/* ---------- Product card ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card__media{position:relative;display:block;aspect-ratio:1;background:#f2f4f7}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__tag{position:absolute;top:10px;font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:999px}
.card__tag--sale{inset-inline-start:10px;background:var(--accent);color:#241a00}
.card__tag--out{inset-inline-end:10px;background:#3a3a3a;color:#fff}
.card__body{padding:.8rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card__brand{font-size:.75rem;color:var(--muted);font-weight:700}
.card__title{font-size:.95rem;margin:0;font-weight:700;line-height:1.4}
.card__title a:hover{color:var(--primary)}
.card__price{display:flex;align-items:baseline;gap:.5rem;margin-top:auto}
.price{color:var(--primary);font-weight:800;font-size:1.05rem}
.price--old{color:var(--muted);text-decoration:line-through;font-size:.85rem;font-weight:600}
.price--xl{font-size:1.7rem}
.card__action{margin-top:.3rem}

/* ---------- Promo ---------- */
.promo{background:linear-gradient(120deg,var(--accent),var(--accent-2));margin:2.4rem 0}
.promo__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 16px;flex-wrap:wrap}
.promo h2{color:#3a2a00;margin:0}
.promo p{color:#5a4410;margin:.3rem 0 0}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem;color:var(--muted);margin:1rem 0}
.breadcrumb a:hover{color:var(--primary)}

/* ---------- Listing ---------- */
.listing{display:grid;grid-template-columns:250px 1fr;gap:22px;margin-bottom:2rem}
.filters__body{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.filters__toggle{display:none;width:100%;margin-bottom:10px}
.filters__group{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.filters__group h4{font-size:.95rem;margin-bottom:.6rem}
.filters__price{display:flex;align-items:center;gap:.4rem}
.filters__price input{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.radio{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;cursor:pointer;font-size:.92rem}
.filters select{width:100%;padding:.55rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.filters__reset{display:block;text-align:center;margin-top:.6rem;color:var(--muted);font-size:.85rem}
.listing__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:1rem;flex-wrap:wrap}
.listing__title{font-size:1.3rem;margin:0}
.listing__title small{color:var(--muted);font-weight:600}
.sort{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.sort select{padding:.5rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}

/* ---------- Product page ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:1rem 0 2rem}
.product__main{position:relative;background:#f2f4f7;border-radius:var(--radius);overflow:hidden;aspect-ratio:1}
.product__main img{width:100%;height:100%;object-fit:cover}
.product__thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{border:2px solid var(--line);border-radius:8px;overflow:hidden;padding:0;cursor:pointer;background:none;width:70px;height:70px}
.thumb.is-active{border-color:var(--primary)}
.product__brand{color:var(--muted);font-weight:700}
.product__title{font-size:1.7rem;margin:.2rem 0}
.product__price{display:flex;align-items:baseline;gap:.6rem;margin:.6rem 0}
.product__stock{font-weight:700}
.product__stock.is-in{color:var(--ok)}
.product__stock.is-out{color:var(--bad)}
.product__sku{color:var(--muted);font-size:.85rem}
.product__buy{margin:1.2rem 0 .6rem}
.product__buy-row{display:flex;gap:12px;align-items:stretch;margin-top:.8rem}
.product__trust{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}
.product__section{margin:2rem 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.prose{line-height:1.9}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.qty__btn{width:38px;height:44px;border:0;background:#f0f2f5;font-size:1.2rem;cursor:pointer}
.qty__btn:hover{background:#e2e6eb}
.qty__input{width:52px;height:44px;border:0;text-align:center;font:inherit;font-weight:700}

/* ---------- Rating ---------- */
.rating{display:flex;align-items:center;gap:.5rem}
.stars{--rate:0;position:relative;display:inline-block;font-size:16px;line-height:1;
  font-family:Arial,sans-serif;letter-spacing:2px;color:#d6d9df;white-space:nowrap}
.stars::before{content:"★★★★★"}
.stars::after{content:"★★★★★";position:absolute;inset-inline-start:0;top:0;color:var(--accent);
  overflow:hidden;white-space:nowrap;width:calc(var(--rate) / 5 * 100%)}
.rating__count{color:var(--muted);font-size:.85rem}
.reviews{display:flex;flex-direction:column;gap:14px;margin-bottom:1.5rem}
.review{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem}
.review__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
.review-form{border-top:1px solid var(--line);padding-top:1.2rem}

/* ---------- Fields ---------- */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;margin-bottom:.35rem;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;padding:.62rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:#fff;outline:none;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(19,39,65,.08)}
.field input:disabled{background:#f2f4f7;color:var(--muted)}
.field__error{color:var(--bad);font-size:.82rem;margin-top:.3rem;display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- Cart ---------- */
.cart{display:grid;grid-template-columns:1fr 340px;gap:22px;margin-bottom:2rem}
.cart__items{display:flex;flex-direction:column;gap:12px}
.cart-item{display:grid;grid-template-columns:90px 1fr auto auto auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.cart-item.is-out{opacity:.7}
.cart-item__img img{border-radius:8px;width:90px;height:90px;object-fit:cover}
.cart-item__info{display:flex;flex-direction:column;gap:2px}
.cart-item__name{font-weight:700}
.cart-item__variant{font-size:.82rem;color:var(--muted)}
.cart-item__unit{color:var(--primary);font-weight:700;font-size:.9rem}
.cart-item__warn{color:var(--bad);font-size:.8rem}
.cart-item__qty{display:flex;flex-direction:column;gap:6px;align-items:center}
.cart-item__update{background:none;border:0;color:var(--info);font-size:.78rem;cursor:pointer;text-decoration:underline}
.cart-item__total{font-weight:800;color:var(--primary);white-space:nowrap}
.cart-item__remove button{background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--muted)}
.cart-item__remove button:hover{color:var(--bad)}
.cart__summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;align-self:start;position:sticky;top:calc(var(--header-h) + 10px)}
.summary__row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.summary__row--total{font-size:1.15rem;font-weight:800;color:var(--primary);border-bottom:0;border-top:2px solid var(--line);margin-top:.3rem;padding-top:.7rem}
.summary__row--ok{color:var(--ok)}
.coupon{display:flex;gap:6px;margin:.7rem 0}
.coupon input{flex:1;padding:.5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.coupon-remove button{background:none;border:0;color:var(--bad);font-size:.8rem;cursor:pointer;text-decoration:underline;margin-bottom:.5rem}
.cart__continue{display:block;text-align:center;margin-top:.7rem;color:var(--muted)}

/* ---------- Checkout ---------- */
.checkout{display:grid;grid-template-columns:1fr 360px;gap:22px;margin-bottom:2rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin-bottom:18px}
.panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.panel__head h2,.panel h2{font-size:1.15rem;margin:0 0 .2rem}
.payopt{display:flex;gap:.7rem;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem;margin-bottom:.6rem;cursor:pointer}
.payopt input{margin:0}
.payopt strong{display:block}
.payopt small{color:var(--muted)}
.checkout__summary .panel{position:sticky;top:calc(var(--header-h) + 10px)}
.mini-items{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem;max-height:230px;overflow:auto}
.mini-items li{display:flex;gap:.5rem;font-size:.88rem;align-items:center}
.mini-items__qty{color:var(--muted);font-weight:700}
.mini-items__name{flex:1}
.checkout__note{font-size:.8rem;color:var(--muted);text-align:center;margin:.7rem 0 0}

/* ---------- Success ---------- */
.success{max-width:640px;margin:2rem auto;text-align:center}
.success__icon{width:74px;height:74px;border-radius:50%;background:var(--ok);color:#fff;font-size:2.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.success__code{color:var(--primary);letter-spacing:1px}
.success__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;text-align:start;margin:1.4rem 0}
.success__row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.success__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.order-items{width:100%;border-collapse:collapse;margin:1rem 0}
.order-items th,.order-items td{padding:.55rem;border-bottom:1px solid var(--line);text-align:start;font-size:.9rem}

/* ---------- Auth ---------- */
.auth-card{max-width:440px;margin:2.5rem auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm)}
.auth-card h1{font-size:1.5rem}
.auth-card__alt{text-align:center;margin:1rem 0 0;color:var(--muted)}
.auth-card__alt a{color:var(--info);font-weight:700}

/* ---------- Account ---------- */
.account{display:grid;grid-template-columns:240px 1fr;gap:22px;margin:1.2rem auto 2.5rem}
.account-nav{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;align-self:start}
.account-nav__user{display:flex;gap:.6rem;align-items:center;padding-bottom:.8rem;margin-bottom:.6rem;border-bottom:1px solid var(--line)}
.account-nav__avatar{width:42px;height:42px;background:#eef1f5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.account-nav nav{display:flex;flex-direction:column;gap:2px}
.account-nav nav a{padding:.6rem .7rem;border-radius:8px;font-weight:600}
.account-nav nav a:hover{background:#f0f2f5}
.account-nav nav a.is-active{background:var(--primary);color:#fff}
.account-nav__logout{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.6rem}
.account-nav__logout button{background:none;border:0;color:var(--bad);font-weight:700;cursor:pointer;padding:.4rem}
.account-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.6rem}
.account-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;text-align:center;font-weight:700;transition:.15s}
.account-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.account-card span{display:block;font-size:1.7rem;margin-bottom:.3rem}
.account__head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---------- Tables / badges ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:.65rem .6rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
.table th{color:var(--muted);font-weight:700;font-size:.82rem}
.badge{position:static;display:inline-flex;background:#eef1f5;color:var(--ink);border-radius:999px;padding:.15rem .6rem;font-size:.78rem;font-weight:700;min-width:auto;height:auto}
.badge--ok{background:#e2f5ec;color:#0f7a4d}
.badge--bad{background:#fdeaea;color:#b12f2f}
.badge--warn{background:#fdf0d8;color:#8a5d00}
.badge--info{background:#e4f0fb;color:#1c5a91}
.badge--muted{background:#eef1f5;color:var(--muted)}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:6px;justify-content:center;margin:1.6rem 0;flex-wrap:wrap}
.pagination__link{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700}
.pagination__link:hover{border-color:var(--primary)}
.pagination__link.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination__dots{padding:0 .4rem;color:var(--muted)}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:3rem 1rem;background:#fff;border:1px dashed var(--line);border-radius:var(--radius)}
.empty p{color:var(--muted);margin-bottom:1rem}
.error-page{text-align:center;padding:4rem 1rem}
.error-page__code{font-size:5rem;font-weight:800;color:var(--primary);line-height:1}
.static-page{max-width:820px;margin:1rem auto 3rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:2rem}
.contact__list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.socials{display:flex;gap:10px;margin-top:1rem}
.socials a{padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem}

/* ---------- Cart FAB ---------- */
.cart-fab{position:fixed;inset-block-end:18px;inset-inline-end:18px;width:56px;height:56px;background:var(--primary);color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:45}
.cart-fab__badge{position:absolute;top:-2px;inset-inline-start:-2px;background:var(--accent);color:#1a1a1a;font-size:.72rem;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--primary);color:#cdd8e6;margin-top:3rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:26px;padding:2.4rem 16px}
.logo--footer{color:#fff}
.footer__about{color:#a9b7c9;font-size:.9rem;margin-top:.8rem}
.footer__col h4{color:#fff;font-size:1rem;margin-bottom:.9rem}
.footer__col li{margin-bottom:.5rem;font-size:.9rem}
.footer__col a:hover{color:#fff}
.footer__contact li{margin-bottom:.6rem}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.trust__badge{background:rgba(255,255,255,.1);padding:.3rem .6rem;border-radius:8px;font-size:.8rem}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:1rem 0;font-size:.85rem;text-align:center}

/* =========================================================================
   Admin
   ========================================================================= */
.body--centered{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.admin-login{width:100%;max-width:400px;padding:20px}
.admin-login__card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;text-align:center}
.admin-login__card h1{font-size:1.25rem;margin:.6rem 0 .2rem}
.admin-login__card form{text-align:start;margin-top:1rem}
.admin-login__back{display:inline-block;margin-top:1rem;color:var(--muted)}

.admin{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin__sidebar{background:var(--primary);color:#cdd8e6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.admin__brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;padding:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.admin__nav{display:flex;flex-direction:column;gap:2px;padding:1rem .7rem;flex:1;overflow:auto}
.admin__nav a{padding:.7rem .9rem;border-radius:8px;font-weight:600;color:#cdd8e6}
.admin__nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin__nav a.is-active{background:var(--accent);color:#241a00}
.admin__logout{padding:1rem;border-top:1px solid rgba(255,255,255,.1)}
.admin__logout button{width:100%;background:rgba(255,255,255,.08);border:0;color:#fff;padding:.6rem;border-radius:8px;cursor:pointer;font:inherit}
.admin__main{min-width:0;display:flex;flex-direction:column}
.admin__topbar{display:flex;align-items:center;gap:1rem;background:#fff;border-bottom:1px solid var(--line);padding:.8rem 1.2rem;position:sticky;top:0;z-index:20}
.admin__topbar h1{font-size:1.15rem;margin:0;flex:1}
.admin__user{color:var(--muted);font-size:.9rem}
.admin__menu-btn{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer}
.admin__content{padding:1.4rem}

.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:1.4rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;display:flex;gap:.7rem;align-items:center}
.stat__icon{font-size:1.7rem}
.stat strong{display:block;font-size:1.25rem;color:var(--primary)}
.stat small{color:var(--muted);font-size:.82rem}
.stat--warn{border-color:#f3d79a;background:#fffaf0}
.admin-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.admin-cols--wide{grid-template-columns:1fr 1fr}
.lowstock li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line)}
.admin-form__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.admin-form__checks{display:flex;gap:1.4rem;margin:1rem 0}
.admin-form__preview{margin-top:.6rem;border-radius:8px;border:1px solid var(--line)}
.switch{display:flex;align-items:center;gap:.5rem;font-weight:600;cursor:pointer}
.inline-form{display:contents}
.inline-form input[type=text],.table select{padding:.4rem;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.85rem;max-width:150px}
.actions{display:flex;gap:6px;align-items:center}
.actions form{display:inline}
.thumb-xs{border-radius:6px;object-fit:cover}
.filter-inline select{padding:.45rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.admin-side .panel h3{font-size:1rem;margin-bottom:.8rem}
.kv{display:flex;flex-direction:column;gap:.5rem}
.kv li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.kv span{color:var(--muted)}
.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem}
.cat-row input[type=text]{flex:1;min-width:120px;padding:.4rem;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.85rem}
.cat-row select{padding:.4rem;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.85rem}
.cat-row__switch{font-size:.82rem;white-space:nowrap}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1024px){
  .grid--products{grid-template-columns:repeat(3,1fr)}
  .cat-tiles{grid-template-columns:repeat(4,1fr)}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .listing{grid-template-columns:1fr}
  .filters__toggle{display:block}
  .filters__body{display:none}
  .filters.is-open .filters__body{display:block}
  .product{grid-template-columns:1fr}
  .cart{grid-template-columns:1fr}
  .checkout{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .account{grid-template-columns:1fr}
  .admin-cols,.admin-cols--wide{grid-template-columns:1fr}
  .admin-form__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .nav-toggle{display:flex}
  .header__main{flex-wrap:wrap}
  /* الموبايل: زر القائمة + لوجو في المنتصف + أيقونات، والبحث سطر كامل تحتهم */
  .header__main--cocyta{display:flex;flex-wrap:wrap;align-items:center;height:auto;padding-block:8px;gap:10px}
  .header__main--cocyta .header__side--start{display:contents}
  .header__main--cocyta .nav-toggle{order:1}
  .header__main--cocyta .logo--lockup{order:2;margin-inline:auto}
  .header__main--cocyta .logo--lockup img{height:38px}
  .header__main--cocyta .header__side--end{order:3}
  .header__main--cocyta .search{order:4;flex-basis:100%;max-width:none}
  .account-links{display:none}
  .search{order:5;flex-basis:100%;max-width:none}
  .icon-link__label{display:none}
  .mainnav{position:fixed;inset-block-start:0;inset-inline-end:-100%;width:78%;max-width:320px;height:100vh;background:#fff;box-shadow:var(--shadow);transition:.25s;z-index:60;overflow:auto;border-top:0}
  .mainnav.is-open{inset-inline-end:0}
  .mainnav__list{flex-direction:column;padding:1rem}
  .mainnav__list>li>a{border-bottom:1px solid var(--line)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding-inline-start:1rem}
  .cart-fab{display:flex}
  .features-row{grid-template-columns:1fr 1fr;margin-top:16px}
  .hero__inner{flex-direction:column;text-align:center}
  .hero__art{width:min(70%,240px)}
  .hero h1{font-size:1.9rem}
  .hero__cta{justify-content:center}
  .account-cards{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .admin{grid-template-columns:1fr}
  .admin__sidebar{position:fixed;inset-inline-start:-100%;width:250px;z-index:70;transition:.25s}
  .admin__sidebar.is-open{inset-inline-start:0}
  .admin__menu-btn{display:block}
  .cart-item{grid-template-columns:70px 1fr;grid-auto-rows:auto}
  .cart-item__img img{width:70px;height:70px}
  .cart-item__total{grid-column:2}
}
@media (max-width:480px){
  .grid--products{grid-template-columns:1fr 1fr}
  .cat-tiles{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .admin-form__grid{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
}

@media print{
  .site-header,.site-footer,.cart-fab,.admin__sidebar,.admin__topbar,.btn{display:none!important}
  body{background:#fff}
  .panel{border:0;box-shadow:none}
}