:root{
  --primary:#8B5E3C;
  --secondary:#C8A97E;
  --background:#F5F1EA;
  --card:#FFFFFF;
  --text:#2B2B2B;
  --muted:#7A7A7A;
  --border:#E8E2D9;
  --shadow:0 18px 40px rgba(43,43,43,.08);
  --shadow-soft:0 10px 24px rgba(43,43,43,.08);
  --radius:16px;
  --radius-sm:12px;
  --container:1280px;
  --gutter-desktop:24px;
  --gutter-mobile:16px;
  --font-body:"Cairo","Tajawal","IBM Plex Sans Arabic","Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--background);
  line-height:1.5;
  overflow-x:hidden;
}

body.is-nav-open{overflow-y:hidden}

[dir="rtl"]{
  --font-body:"Cairo","Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter-mobile);
}

.section .container,
.site-main > .container{
  max-width:var(--container);
}

.skip-link{
  position:fixed;
  inset-inline-start:12px;
  top:10px;
  background:var(--card);
  color:var(--secondary);
  padding:10px 14px;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
  z-index:1000;
  transform:translateY(-180%);
  transition:transform .15s ease;
}
.skip-link:focus{transform:translateY(0)}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--background);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 16px rgba(43,43,43,.05);
  padding-bottom:8px;
}

.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
  z-index:40;
}
.nav-backdrop.is-open{
  opacity:1;
  visibility:visible;
}

.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0 10px;
  min-height:64px;
}
.header-nav{
  padding:0;
  margin-top:0;
}
.header-actions{
  display:none;
  align-items:center;
  gap:8px;
}
.header-actions.header-actions-end{
  display:flex;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-center{justify-self:center}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)),
             linear-gradient(135deg, rgba(200,169,126,.95), rgba(139,94,60,.9));
  box-shadow:var(--shadow-soft);
}
.brand-mark img{
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  display:block;
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-subtitle{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:none;
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(90,62,43,.14);
  background:var(--card);
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  margin-right:4px;
}
.nav-toggle-lines{
  width:18px;
  height:12px;
  position:relative;
}
.nav-toggle-lines{
  background:
    linear-gradient(var(--secondary),var(--secondary)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--secondary),var(--secondary)) 0 50%/100% 2px no-repeat,
    linear-gradient(var(--secondary),var(--secondary)) 0 100%/100% 2px no-repeat;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{display:none}

.site-nav{
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  width:260px;
  max-width:72%;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,241,229,.92));
  border:1px solid rgba(90,62,43,.10);
  box-shadow:-18px 0 40px rgba(0,0,0,.20);
  padding:80px 16px 24px;
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  z-index:60;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-top-left-radius:24px;
  border-bottom-left-radius:24px;
}
.site-nav.is-open{
  display:flex;
}

.nav-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  color:var(--text);
  font-weight:500;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(90,62,43,.10);
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.nav-link:hover{
  background:rgba(200,169,126,.14);
  border-color:rgba(200,169,126,.35);
  transform:translateY(-1px);
}
.nav-link.is-active{
  background:rgba(200,169,126,.22);
  border-color:rgba(200,169,126,.55);
}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 10px;
  min-width:40px;
  height:44px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  font-weight:600;
  line-height:1;
}
.icon-btn .badge{
  display:inline-flex;
  min-width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(200,169,126,.35);
  color:var(--text);
  font-size:11px;
  font-weight:700;
  position:relative;
  top:-8px;
}
.nav-cart .badge{
  display:inline-flex;
  min-width:22px;
  height:22px;
  padding:0 7px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(200,169,106,.25);
  color:var(--secondary);
  font-size:12px;
  font-weight:600;
}

.site-main{padding:80px 0 60px}

.alert{
  border-radius:var(--radius-sm);
  padding:12px 14px;
  background:var(--card);
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(90,62,43,.10);
  margin:0 0 18px;
}
.alert-success{border-color:rgba(122,139,90,.35)}
.alert-error{border-color:rgba(180,70,70,.35)}
.alert-info{border-color:rgba(200,169,106,.35)}

.hero{
  border-radius:0;
  overflow:hidden;
}
.hero-media{
  position:relative;
  min-height:380px;
}
.hero-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(43,30,20,.72), rgba(43,30,20,.28));
  pointer-events:none;
}
.hero-inner{
  position:relative;
  padding:96px 0;
  display:grid;
  gap:20px;
  z-index:1;
}
.hero-content{display:grid;gap:14px}
.hero-eyebrow{
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  color:rgba(255,255,255,.85);
  margin:0;
}
.hero-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:38px;
  color:#fff;
  margin:0;
  max-width:26ch;
}
.hero-subtitle{
  color:rgba(255,255,255,.92);
  margin:0;
  max-width:56ch;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-card{align-self:end}
.hero-card-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  color:var(--secondary);
  margin-bottom:6px;
}
.hero-card-text{color:var(--muted);margin:0 0 16px}
.hero-card-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.stat-value{font-weight:700;color:var(--secondary);font-size:20px}
.stat-label{font-size:12px;color:var(--muted)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:600;
  font-family:inherit;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 14px 28px rgba(139,94,60,.25);
}
.btn-primary:hover{background:#9c6a46}
.btn-secondary{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.28);
}
.btn-secondary:hover{background:rgba(255,255,255,.14)}
.btn-outline{
  background:rgba(255,255,255,.8);
  border-color:var(--border);
  color:var(--text);
}
.btn-outline:hover{background:rgba(90,62,43,.06)}

.section{padding:32px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px}
.section-title{
  margin:0;
  font-family:"Playfair Display",serif;
  font-weight:700;
  color:var(--text);
  letter-spacing:.2px;
}
.section-subtitle{margin:0;color:var(--muted);font-size:14px}

.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border);
  overflow:hidden;
}
.card-pad{padding:16px}

.category-strip{
  margin-top:-72px;
  position:relative;
  z-index:2;
}
.category-tiles{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(1,minmax(0,1fr));
  align-items:stretch;
}
.category-tile{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(90,62,43,.12);
  box-shadow:0 10px 18px rgba(43,43,43,.06);
  width:100%;
  height:100%;
  transition:transform .15s ease, box-shadow .15s ease;
}
.category-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px rgba(43,43,43,.12);
}
.category-tile:focus-visible{
  outline:2px solid rgba(139,94,60,.35);
  outline-offset:2px;
}
.category-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(200,169,126,.18);
  border:1px solid rgba(200,169,126,.35);
  font-size:22px;
  flex:0 0 auto;
}
.category-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}
.category-body{display:grid;gap:2px;min-width:0}
.category-title{font-weight:600;color:var(--text);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-sub{font-size:12px;color:var(--muted)}

.subcat-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.subcat-chip{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(90,62,43,.12);
  color:var(--text);
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}
.subcat-chip:hover{
  background:rgba(200,169,126,.14);
  border-color:rgba(200,169,126,.35);
}
.subcat-chip.is-active{
  background:rgba(200,169,126,.22);
  border-color:rgba(200,169,126,.55);
}

.category-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px;
}
.category-name{font-weight:600;color:var(--secondary)}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(122,139,90,.14);
  color:var(--accent);
  font-weight:600;
  font-size:12px;
}

.product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  max-width:280px;
  margin:0 auto;
  transition:transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(43,43,43,.12);
}
.product-media{
  height:220px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, rgba(200,169,126,.26), rgba(139,94,60,.18));
  position:relative;
  overflow:hidden;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-media .media-mark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(90,62,43,.35);
  font-family:"Playfair Display",serif;
  font-weight:700;
  letter-spacing:1.2px;
}
.product-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1;text-align:center}
.product-top{display:flex;flex-direction:column;align-items:center;gap:6px}
.product-name{margin:0;font-weight:600;color:var(--text);line-height:1.3}
.product-cat{font-size:12px;color:var(--muted)}
.product-price{
  font-weight:700;
  color:var(--primary);
  background:rgba(200,169,126,.2);
  padding:6px 10px;
  border-radius:12px;
  font-size:13px;
}
.product-actions{margin-top:auto;display:flex;gap:12px;justify-content:center;flex-wrap:nowrap}
.product-actions .btn{width:auto;min-width:0}
.product-actions form{display:flex}

.card,
.category-tile,
.product-card,
.icon-btn{
  max-width:100%;
}

.muted{color:var(--muted)}
.spacer-12{height:12px}

[dir="rtl"] .nav-link{
  justify-content:flex-end;
}

.about-preview,
.about-page{
  display:grid;
  overflow:hidden;
  align-items:start;
}
.about-media{
  min-height:220px;
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  max-height:340px;
}
.about-image{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}
.about-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-content{
  padding:22px;
  display:grid;
  gap:14px;
}
.about-points{display:flex;gap:10px;flex-wrap:wrap}
.about-grid{display:grid;gap:12px}
.note-card{
  padding:14px;
  border-radius:14px;
  background:rgba(200,169,106,.08);
  border:1px solid rgba(200,169,106,.2);
}
.note-title{font-weight:600;color:var(--secondary);margin-bottom:6px}

.product-view{
  display:grid;
  gap:18px;
  padding:18px;
}
.product-gallery{display:grid;gap:12px}
.gallery-main{
  border-radius:16px;
  overflow:hidden;
  min-height:260px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, rgba(200,169,106,.26), rgba(90,62,43,.18));
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumb-button{
  border:none;
  background:transparent;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  width:72px;
  height:72px;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
}
.thumb-button img{width:100%;height:100%;object-fit:cover}
.product-info{display:grid;gap:14px}
.product-meta{display:flex;gap:10px;flex-wrap:wrap}
.product-buy{display:flex;gap:12px;flex-wrap:wrap}
.product-notes{display:grid;gap:10px}

.cart-head th{
  text-align:left;
  color:var(--muted);
  font-weight:500;
  padding:8px 12px;
}
.cart-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}

.contact-info{align-self:start}
.contact-form{
  border-radius:20px;
  box-shadow:0 18px 40px rgba(43,43,43,.12);
}
.contact-form .field{gap:8px}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  background:#fff;
  border:1px solid rgba(90,62,43,.12);
  box-shadow:0 12px 24px rgba(43,43,43,.06);
  border-radius:16px;
}
.contact-form textarea{min-height:160px}
.contact-form .btn{
  align-self:flex-start;
  padding:12px 18px;
}
.contact-head{display:grid;gap:6px;margin-bottom:16px}
.contact-list{display:grid;gap:12px;margin-bottom:14px}
.contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(200,169,106,.08);
  border:1px solid rgba(200,169,106,.18);
}
.contact-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(90,62,43,.12);
  font-size:18px;
  flex:0 0 auto;
}
.contact-item-body{display:grid;gap:2px;min-width:0}
.contact-label{font-size:12px;color:var(--muted)}
.contact-value{font-weight:600;color:var(--text);font-size:14px;line-height:1.4}
.contact-note{
  color:var(--muted);
  line-height:1.7;
  background:rgba(255,255,255,.6);
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(90,62,43,.1);
}

.payment-methods{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.payment-card{
  border:1px solid rgba(90,62,43,.15);
  background:rgba(255,255,255,.9);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}
.payment-card.is-active{
  border-color:var(--primary);
  box-shadow:0 16px 30px rgba(200,169,106,.25);
}
.payment-title{font-weight:600;color:var(--secondary)}
.payment-subtitle{font-size:12px;color:var(--muted)}
.payment-panels{display:grid;gap:12px;margin-bottom:16px}
.payment-panel{display:none;gap:12px}
.payment-panel.is-active{display:grid}

.checkout-hero{
  margin-top:6px;
  margin-bottom:18px;
}
.checkout-hero-inner{
  border-radius:22px;
  padding:26px 24px;
  background:
    linear-gradient(135deg, rgba(139,94,60,.94), rgba(200,169,126,.88)),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 52%);
  box-shadow:0 20px 40px rgba(43,43,43,.16);
  display:grid;
  gap:16px;
  align-items:center;
}
.checkout-title{
  max-width:none;
  font-size:32px;
  margin-top:4px;
}
.checkout-subtitle{max-width:65ch}
.checkout-section{padding-top:6px}
.checkout-layout{
  display:grid;
  gap:16px;
  align-items:start;
}
.checkout-form,
.checkout-summary{
  border-radius:20px;
  border:1px solid rgba(90,62,43,.12);
  box-shadow:0 16px 32px rgba(43,43,43,.10);
}
.checkout-form{
  padding:20px;
  display:grid;
  gap:12px;
}
.checkout-summary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
}
.checkout-card-title{
  margin:0 0 2px;
  color:var(--secondary);
  font-size:22px;
}
.checkout-submit{
  width:fit-content;
  min-width:180px;
}
.checkout-empty{
  border-radius:20px;
  border:1px solid rgba(90,62,43,.12);
  box-shadow:0 18px 34px rgba(43,43,43,.1);
}
.checkout-form textarea{
  min-height:96px;
}
.checkout-form .payment-card{
  min-height:86px;
  justify-content:center;
}

.admin-header{position:sticky}
.admin-nav{display:flex}
.message-list{display:grid;gap:14px}
.message-card{display:grid;gap:12px}
.message-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.message-name{font-weight:600;color:var(--secondary)}
.message-body{color:var(--text);line-height:1.7}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.thumb-item{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(90,62,43,.12);
  background:#fff;
}
.thumb-item img{width:100%;height:90px;object-fit:cover;display:block}
.thumb-item--removable{position:relative}
.thumb-remove{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.thumb-remove:hover{background:rgba(0,0,0,.72)}
.settings-grid{display:grid;gap:16px}
.settings-layout{display:grid;gap:16px}
.settings-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:6px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,241,229,.95));
  border:1px solid rgba(200,169,126,.5);
  box-shadow:0 14px 26px rgba(43,43,43,.10);
}
.settings-tab{
  border:none;
  background:transparent;
  padding:8px 14px;
  border-radius:999px;
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.settings-tab::before{
  content:"•";
  font-size:18px;
  color:rgba(200,169,126,.8);
}
.settings-tab:hover{
  background:rgba(200,169,126,.08);
  color:var(--text);
}
.settings-tab.is-active{
  background:linear-gradient(135deg, rgba(139,94,60,.96), rgba(200,169,126,.92));
  color:#fff;
  box-shadow:0 14px 30px rgba(43,43,43,.28);
  transform:translateY(-1px);
}
.settings-tab.is-active::before{
  color:#fff;
}
.settings-section{
  display:grid;
  gap:12px;
  border-radius:18px;
  border:1px solid rgba(90,62,43,.12);
  background:linear-gradient(135deg, #ffffff, rgba(248,241,229,.96));
  box-shadow:0 14px 28px rgba(43,43,43,.12);
  padding:16px 18px;
}
.settings-panel{display:none}
.settings-panel.is-active{display:grid}
.settings-fields{display:grid;gap:12px}
.settings-actions{display:flex;justify-content:flex-end}
.payment-settings-grid{display:grid;gap:14px}
.payment-setting{
  border-radius:18px;
  border:1px solid rgba(90,62,43,.12);
  background:linear-gradient(135deg, #ffffff, rgba(248,241,229,.96));
  box-shadow:0 14px 28px rgba(43,43,43,.12);
  padding:14px 16px;
  display:grid;
  gap:10px;
}
.payment-setting-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.payment-setting-title{
  font-weight:700;
  color:var(--primary);
}
.payment-setting-sub{
  font-size:12px;
  color:var(--muted);
}
.payment-setting-body{
  border-top:1px dashed rgba(90,62,43,.18);
  padding-top:10px;
  margin-top:4px;
  display:grid;
  gap:10px;
}
.payment-setting.is-disabled{
  opacity:.55;
}
.payment-setting-body.is-collapsed{
  display:none;
}
.payment-settings-fields{display:grid;gap:10px}
.field.field-span-2{grid-column:1 / -1}
.settings-image{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(90,62,43,.12);
  background:#fff;
}
.settings-image img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.settings-image video{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.gallery-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.gallery-card{
  width:100%;
  padding:0;
  border:none;
  cursor:pointer;
  text-align:inherit;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(90,62,43,.12);
  background:#fff;
  box-shadow:0 14px 30px rgba(43,43,43,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(43,43,43,.18);
}
.gallery-card:focus-visible{
  outline:2px solid rgba(139,94,60,.35);
  outline-offset:2px;
}
.gallery-card img{width:100%;height:240px;object-fit:cover;display:block}
.gallery-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:80;
}
.gallery-lightbox.is-open{display:flex}
.lightbox-image{
  max-width:min(1100px, 96vw);
  max-height:90vh;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  background:#fff;
}
.lightbox-close{
  position:absolute;
  top:20px;
  inset-inline-end:20px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(43,43,43,.42);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.lightbox-prev{inset-inline-start:24px}
.lightbox-next{inset-inline-end:24px}
.gallery-admin-grid{
  margin-top:16px;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.gallery-admin-card{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(90,62,43,.12);
  box-shadow:var(--shadow-soft);
  padding:12px;
  display:grid;
  gap:10px;
}
.gallery-admin-card img{width:100%;height:180px;object-fit:cover;border-radius:12px;display:block}

.cart-layout{
  display:grid;
  gap:16px;
}
.cart-panel{
  overflow:hidden;
}
.cart-table{margin:0}
.cart-row td{vertical-align:middle}
.cart-actions{justify-content:flex-start}

@media (min-width:1024px){
  .cart-layout{grid-template-columns:2fr 1fr;align-items:start}
  .summary{position:sticky;top:120px}
}
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.admin-table th{
  text-align:left;
  color:var(--muted);
  font-weight:500;
  padding:6px 10px;
}
.admin-table td{
  background:var(--card);
  border:1px solid rgba(90,62,43,.08);
  padding:12px 10px;
}
.admin-table tr td:first-child{border-radius:14px 0 0 14px}
.admin-table tr td:last-child{border-radius:0 14px 14px 0}
.category-name{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.category-indent{
  color:var(--muted);
}
.category-row--child td{
  background:rgba(255,255,255,.8);
}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.auth-container{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 0;
}
.auth-card{
  max-width:480px;
  width:100%;
  padding:28px;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(43,43,43,.12);
}
.auth-card .page-title{
  text-align:center;
  margin-bottom:14px;
}
.auth-card .field{gap:8px}
.auth-card input[type="email"],
.auth-card input[type="password"]{
  padding:14px 14px;
  border-radius:14px;
}
.auth-card .btn{
  width:100%;
  margin-top:6px;
}
.metric-label{color:var(--muted);font-size:13px}
.metric-value{font-size:26px;font-weight:700;color:var(--secondary)}
.dashboard-grid{
  display:grid;
  gap:16px;
}
.dashboard-metrics{
  display:grid;
  gap:14px;
}
.dashboard-links{
  display:grid;
  gap:14px;
}
.dashboard-card{
  border-radius:18px;
  padding:16px 18px;
  background:linear-gradient(135deg, #ffffff, rgba(248,241,229,.96));
  box-shadow:0 18px 40px rgba(43,43,43,.12);
  border:1px solid rgba(90,62,43,.08);
  display:grid;
  gap:6px;
}
.dashboard-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.dashboard-card-title{
  font-weight:600;
  color:var(--secondary);
}
.dashboard-card-sub{
  font-size:12px;
  color:var(--muted);
}
.dashboard-links .btn{
  justify-content:space-between;
}
.user-form-layout{
  display:grid;
  gap:16px;
}
.user-permissions-card{
  border-radius:18px;
  padding:16px 18px;
  background:linear-gradient(135deg,#ffffff,rgba(248,241,229,.96));
  box-shadow:0 14px 30px rgba(43,43,43,.12);
  border:1px solid rgba(90,62,43,.08);
  display:grid;
  gap:12px;
}
.permission-grid{
  display:grid;
  gap:10px;
}
.permission-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(246,238,228,.9);
  border:1px solid rgba(200,169,126,.5);
  font-size:13px;
}
.permission-pill input[type="checkbox"]{
  width:14px;
  height:14px;
}
.user-role-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(139,94,60,.06);
  color:var(--secondary);
}
.user-perms-list{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-width:420px;
}
.perm-badge{
  padding:3px 8px;
  border-radius:999px;
  background:rgba(200,169,126,.12);
  font-size:11px;
  color:var(--muted);
}
.status-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:rgba(200,169,106,.2);
  color:var(--secondary);
}
.status-pending{background:rgba(214,184,120,.25);color:var(--secondary)}
.status-paid{background:rgba(122,139,90,.18);color:var(--accent)}
.status-shipped{background:rgba(90,132,180,.18);color:#305c8a}
.status-completed{background:rgba(82,163,120,.18);color:#2c6b48}
.status-paid{background:rgba(122,139,90,.2);color:var(--accent)}
.status-cancelled{background:rgba(180,70,70,.15);color:#8a2e2e}
.detail-row{display:flex;justify-content:space-between;gap:10px;margin:8px 0}
.payment-actions{display:flex;gap:10px;flex-wrap:wrap}

.order-status-steps{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.order-status-step{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.order-status-step.is-active{
  color:var(--secondary);
  font-weight:600;
}
.order-status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:2px solid rgba(200,169,126,.7);
  background:transparent;
}
.order-status-step.is-active .order-status-dot{
  background:var(--secondary);
  border-color:var(--secondary);
}
.my-orders-filters{
  margin-bottom:8px;
}
.my-orders-table{display:block}
.my-orders-cards{display:none}
.my-order-card{
  border-radius:18px;
  border:1px solid rgba(90,62,43,.08);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-soft);
  padding:14px;
  display:grid;
  gap:12px;
}
.my-order-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.my-order-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.my-order-id{
  font-weight:700;
  color:var(--text);
}
.my-order-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.my-order-meta{
  border-radius:14px;
  border:1px solid rgba(90,62,43,.08);
  background:rgba(255,255,255,.78);
  padding:10px 12px;
  min-width:0;
}
.my-order-meta > div:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.my-order-card .my-order-details{
  padding-top:10px;
  border-top:1px solid rgba(90,62,43,.08);
}
.order-items-list{
  display:grid;
  gap:8px;
  margin-top:8px;
}
.order-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(90,62,43,.08);
  background:rgba(255,255,255,.9);
}
.order-item-main{
  display:grid;
  gap:3px;
}
.order-item-name{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.order-item-name-ar{
  font-weight:400;
  color:var(--muted);
}
.order-item-meta{
  font-size:12px;
  color:var(--muted);
}
.order-item-total{
  font-size:13px;
  font-weight:700;
  color:var(--secondary);
}

[dir="rtl"] .header-top{
  direction:rtl;
}
[dir="rtl"] .header-actions{flex-direction:row-reverse}
[dir="rtl"] .header-actions-end{justify-content:flex-start}
[dir="rtl"] .brand{flex-direction:row-reverse}
[dir="rtl"] .brand-title{font-family:"Cairo","Poppins",sans-serif}
[dir="rtl"] .hero-eyebrow{text-transform:none;letter-spacing:0}
[dir="rtl"] .site-nav{flex-direction:column}
[dir="rtl"] .nav-link{direction:rtl}
[dir="rtl"] .category-tile{flex-direction:row-reverse}
[dir="rtl"] .hero-content{text-align:right}
[dir="rtl"] .hero-actions{justify-content:flex-end}
[dir="rtl"] .section-head,
[dir="rtl"] .page-head{flex-direction:row-reverse}
[dir="rtl"] .product-top{align-items:center}
[dir="rtl"] .product-actions{flex-direction:row-reverse}
[dir="rtl"] .cart-head th{text-align:right}
[dir="rtl"] .cart-product{flex-direction:row-reverse}
[dir="rtl"] .summary-row{flex-direction:row-reverse}
[dir="rtl"] .detail-row{flex-direction:row-reverse}
[dir="rtl"] .payment-card{text-align:right}
[dir="rtl"] .footer-links{flex-direction:row-reverse}
[dir="rtl"] .footer-meta{text-align:left}
[dir="rtl"] .message-head{flex-direction:row-reverse}
[dir="rtl"] .admin-table th,
[dir="rtl"] .admin-table td{text-align:right}
[dir="rtl"] .table-actions{flex-direction:row-reverse}

.filters{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  margin-bottom:16px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.label{font-size:13px;color:var(--muted);font-weight:500}
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(90,62,43,.14);
  background:rgba(255,255,255,.8);
  box-shadow:0 10px 22px rgba(26,18,12,.06);
  font-family:inherit;
  outline:none;
}
textarea{min-height:120px;resize:vertical}

.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 16px;
}
.page-title{
  margin:0;
  font-family:"Playfair Display",serif;
  color:var(--secondary);
  font-weight:700;
}

.cart-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.cart-row{
  background:var(--card);
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(90,62,43,.08);
}
.cart-row td{padding:12px 12px}
.cart-cell-remove{text-align:center}
.cart-product{display:flex;align-items:center;gap:12px}
.thumb{
  width:56px;
  height:56px;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(200,169,106,.26), rgba(90,62,43,.18));
  flex:0 0 auto;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.qty-control{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(90,62,43,.15);
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(26,18,12,.06);
}
.qty-btn{
  width:32px;
  height:32px;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--secondary);
  cursor:pointer;
}
.qty-btn:hover{
  background:rgba(200,169,126,.12);
}
.qty-input{
  max-width:64px;
  padding:8px 6px;
  border:none;
  box-shadow:none;
  text-align:center;
}
.qty-input:focus{outline:none}
.cart-remove-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(90,62,43,.12);
  background:rgba(255,255,255,.9);
  color:#b05a4a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(26,18,12,.06);
}
.cart-remove-btn:hover{
  background:rgba(176,90,74,.08);
  border-color:rgba(176,90,74,.2);
}

@media (max-width:719.98px){
  .cart-head{
    display:none;
  }
  .cart-table,
  .cart-table tbody{
    display:block;
    width:100%;
  }
  .cart-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "product remove"
      "price qty"
      "total total";
    gap:10px;
    padding:14px;
    border-radius:18px;
  }
  .cart-row td{
    display:block;
    padding:0;
    border:none;
    background:transparent;
  }
  .cart-cell-product{grid-area:product;min-width:0}
  .cart-cell-remove{
    grid-area:remove;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
  }
  .cart-cell-price{grid-area:price}
  .cart-cell-qty{grid-area:qty}
  .cart-cell-total{grid-area:total}
  .cart-cell-price,
  .cart-cell-qty,
  .cart-cell-total{
    background:rgba(255,255,255,.72);
    border:1px solid rgba(90,62,43,.08);
    border-radius:14px;
    padding:10px 12px;
  }
  .cart-cell-price::before,
  .cart-cell-qty::before,
  .cart-cell-total::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
  }
  .cart-product{
    align-items:flex-start;
    gap:10px;
  }
  .cart-product .product-name{
    font-size:18px;
    line-height:1.35;
  }
  .cart-product .muted{
    font-size:13px;
  }
  .qty-control{
    white-space:nowrap;
  }
  .qty-btn{
    width:30px;
    height:30px;
  }
  .qty-input{
    width:44px;
    max-width:44px;
    padding:6px 4px;
  }
  .cart-actions{
    gap:10px;
    margin:14px 0 0;
  }
  .cart-actions .btn{
    flex:1 1 0;
    min-width:0;
  }
}

.summary{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border);
  padding:16px;
  display:grid;
  gap:10px;
}
.summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.summary-total{font-weight:800;color:var(--secondary)}

.two-col{display:grid;gap:14px}

.site-footer{
  padding:26px 0;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.45);
}
.footer-inner{
  display:grid;
  gap:14px;
}
.footer-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  color:var(--secondary);
}
.footer-subtitle{color:var(--muted);font-size:14px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:var(--secondary);font-weight:500}
.footer-links a:hover{text-decoration:underline}
.footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.social-icon{
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  color:var(--secondary);
  font-size:14px;
}
.social-icon:hover{
  background:rgba(200,169,126,.14);
  border-color:rgba(200,169,126,.4);
}
.footer-meta{
  color:var(--muted);
  font-size:13px;
}
.footer-meta span+span{
  display:block;
  margin-top:4px;
}
.footer-meta a{
  color:var(--secondary);
  font-weight:600;
}

@media (min-width:720px){
  .site-main{padding:140px 0 60px}
  .header-top{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
    padding:18px 0 16px;
    min-height:72px;
  }
  .header-nav{
    padding:16px 0 22px;
    margin-top:10px;
  }
  .header-actions{
    display:flex;
  }
  .header-actions.header-actions-end{
    justify-content:flex-end;
  }
  .brand-center{
    justify-self:center;
  }
  .brand-subtitle{
    display:block;
  }
  .nav-toggle{
    display:none;
  }
  .site-nav{
    display:flex;
    position:static;
    transform:none;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:auto;
    max-width:none;
    border-radius:0;
  }
  .nav-backdrop{
    display:none;
  }
  .site-nav .nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.7);
    border:1px solid var(--border);
    width:auto;
  }
  .site-nav .nav-link:hover{
    background:rgba(200,169,126,.18);
  }
  .site-nav .nav-link.is-active{
    background:rgba(200,169,126,.28);
  }
  .hero-inner{padding:100px 0;grid-template-columns:1fr;align-items:center}
  .hero-title{font-size:46px}
  .category-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:2fr 1fr auto;align-items:end}
  .two-col{grid-template-columns:2fr 1fr;align-items:start}
  .my-orders-form{grid-template-columns:1fr 1fr}
  .about-preview,
  .about-page{grid-template-columns:1fr 1.2fr}
  .product-view{grid-template-columns:1fr 1fr;align-items:start}
  .payment-methods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .payment-settings-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkout-hero-inner{grid-template-columns:1fr auto}
  .checkout-layout{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
  .checkout-summary{position:sticky;top:120px}
  .footer-inner{grid-template-columns:2fr 1fr 1fr;align-items:center}
  .footer-meta{text-align:right}
  .settings-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-actions{grid-column:1 / -1}
  .payment-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

@media (max-width:719.98px){
  .my-orders-table{display:none}
  .my-orders-cards{
    display:grid;
    gap:12px;
    margin-top:12px;
  }
  .my-order-card-grid{
    grid-template-columns:1fr;
  }
}

@media (min-width:1024px){
  .hero-inner{padding:112px 0}
  .container{padding:0 var(--gutter-desktop)}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:720px){
  [dir="rtl"] .site-nav{
    flex-direction:row;
  }
}