/* ============ TOKENS ============ */
:root{
  --clay:        #B4502E;
  --clay-deep:   #8A3A21;
  --clay-light:  #D98B5F;
  --ink:         #2B231D;
  --ink-soft:    #55483E;
  --sand:        #EFE6D6;
  --sand-deep:   #E3D5BC;
  --porcelain:   #FBF8F2;
  --olive:       #6E7350;
  --line:        rgba(43,35,29,0.12);
  --shadow:      0 10px 30px rgba(43,35,29,0.14);
  --radius:      18px;
  --disp: 'Aref Ruqaa', 'Heebo', serif;
  --body: 'Tajawal', 'Heebo', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--porcelain);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:74px;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; padding:0; margin:0; color:inherit; text-align:inherit; font-size:inherit;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:3px solid var(--clay); outline-offset:2px;}

/* ============ TEXTURE SWATCHES (signature element) ============ */
.tex-wood{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 9px),
    linear-gradient(160deg,#8A5A34,#6B4224);
}
.tex-tile{
  background:
    radial-gradient(circle at 50% -10px, transparent 12px, rgba(0,0,0,0.10) 13px 14px, transparent 15px) 0 0/34px 26px repeat-x,
    linear-gradient(160deg,var(--clay-light),var(--clay-deep));
}
.tex-porcelain{
  background:
    radial-gradient(120% 60% at 20% 10%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(155deg,#F4EFE4,#D9CBB0);
  position:relative;
}
.tex-stone{
  background:
    radial-gradient(circle at 22% 30%, rgba(0,0,0,0.14) 0 3px, transparent 4px) 0 0/22px 22px,
    radial-gradient(circle at 65% 70%, rgba(255,255,255,0.18) 0 2px, transparent 3px) 0 0/26px 26px,
    linear-gradient(160deg,#8C8579,#5C564C);
}
.tex-marble{
  background:
    linear-gradient(115deg, transparent 40%, rgba(120,110,95,0.35) 41%, transparent 43%) 0 0/70px 70px,
    linear-gradient(35deg, transparent 55%, rgba(120,110,95,0.22) 56%, transparent 58%) 0 0/90px 90px,
    linear-gradient(160deg,#F7F3EA,#DED2BE);
}
.tex-metal{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 7px),
    linear-gradient(160deg,#AEB4B8,#6B7378);
}
.tex-glass{
  background:
    linear-gradient(120deg, rgba(255,255,255,0.55) 0%, transparent 30%),
    linear-gradient(160deg,#9FC7CE,#4E7C88);
  position:relative;
}
.tex-concrete{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 70% 65%, rgba(0,0,0,0.08) 0 2px, transparent 3px) 0 0/24px 24px,
    linear-gradient(160deg,#B7B2A9,#8A857B);
}
.tex-brick{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 30px),
    linear-gradient(160deg,#A85A3F,#7A3A26);
}
.tex-bamboo{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.09) 0 3px, transparent 3px 20px),
    linear-gradient(160deg,#D9B978,#B8944F);
}
.tex-strip{
  display:flex; height:10px; width:100%;
}
.tex-strip span{flex:1;}

/* ============ TOP BAR ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:rgba(251,248,242,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0; flex:1; overflow:hidden;}
.brand-mark{width:92px; height:92px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.brand-name{font-family:var(--disp); font-size:38px; color:var(--ink); font-weight:700; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-sub{font-size:13px; letter-spacing:1.5px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media(max-width:420px){
  .brand-mark{width:52px; height:52px;}
  .brand-name{font-size:24px;}
  .brand-sub{font-size:10.5px; letter-spacing:1px;}
  .topbar{padding:12px 14px;}
}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); background:var(--sand);
}
.icon-btn svg{width:18px; height:18px;}

.lang-switcher{position:relative; flex-shrink:0;}
.lang-switcher-btn{
  display:flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:999px; background:var(--sand); color:var(--ink);
  font-size:12.5px; font-weight:700;
}
.lang-switcher-btn svg{width:15px; height:15px; flex-shrink:0;}
.lang-switcher-btn .chev{width:11px; height:11px; transition:transform .18s ease;}
.lang-switcher.open .lang-switcher-btn .chev{transform:rotate(180deg);}
.lang-switcher.open .lang-switcher-btn{background:var(--ink); color:var(--porcelain);}
.lang-switcher-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60;
  background:var(--porcelain); border-radius:14px; box-shadow:var(--shadow);
  min-width:130px; overflow:hidden; padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.lang-switcher.open .lang-switcher-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-switcher-menu a{
  display:block; padding:10px 14px; border-radius:9px; font-size:13px; font-weight:700;
  color:var(--ink-soft); text-align:start;
}
.lang-switcher-menu a:hover{background:var(--sand);}
.lang-switcher-menu a.active{background:var(--clay); color:#fff;}

/* ============ SEARCH ============ */
.search-wrap{padding:0 18px; margin-top:10px; display:none;}
.search-wrap.open{display:block;}
.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--sand); border-radius:999px; padding:10px 16px;
}
.search-box input{
  flex:1; background:none; border:none; font-family:var(--body);
  font-size:15px; color:var(--ink);
}
.search-box svg{width:16px; height:16px; color:var(--ink-soft); flex-shrink:0;}

/* ============ HERO BANNER SLIDER ============ */
.btn{
  padding:13px 24px; border-radius:999px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{background:var(--ink); color:var(--porcelain);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}

.banner{position:relative; overflow:hidden;}
.banner-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
.banner-track::-webkit-scrollbar{display:none;}
.banner-slide{
  flex:0 0 100%; scroll-snap-align:start; position:relative;
  min-height:76vw; max-height:420px; display:flex; align-items:flex-end; padding:26px 20px;
  overflow:hidden;
}
.banner-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,14,10,0.78), rgba(20,14,10,0.08) 60%);
}
.banner-copy{position:relative; z-index:2; color:#fff;}
.banner-eyebrow{
  font-size:11.5px; letter-spacing:3px; font-weight:700; opacity:.9;
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.banner-eyebrow::before{content:''; width:20px; height:2px; background:#fff;}
.banner-copy h1{
  font-family:var(--disp); font-weight:700; font-size:32px; line-height:1.25; margin-bottom:10px;
}
.banner-copy h1 em{font-style:normal; color:var(--clay-light);}
.banner-copy p{font-size:13.5px; line-height:1.7; opacity:.92; max-width:40ch; margin-bottom:16px;}
.banner-ctas{display:flex; gap:8px; flex-wrap:wrap;}
.banner-ctas .btn{padding:11px 20px; font-size:13px;}
.banner-ctas .btn-ghost{border-color:rgba(255,255,255,0.5); color:#fff;}

/* ============ SECTION HEAD ============ */
.section{padding:34px 18px 6px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px;}
.section-title{font-family:var(--disp); font-size:26px; font-weight:700;}
.section-note{font-size:12.5px; color:var(--ink-soft);}

/* ============ CATEGORY CARDS ============ */
.cat-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.cat-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  height:150px; display:flex; align-items:flex-end; padding:18px;
  box-shadow:var(--shadow);
}
.cat-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,14,10,0.72), rgba(20,14,10,0.05) 55%);
}
.cat-card-body{position:relative; z-index:2; color:#fff;}
.cat-card-name{font-family:var(--disp); font-size:23px; font-weight:700;}
.cat-card-count{font-size:12px; opacity:0.85; margin-top:2px;}

/* ============ CATEGORY LIST — PROFESSIONAL/EDITORIAL STYLE ============ */
.cat-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.cat-row{
  display:flex; align-items:center; gap:16px;
  padding:20px 4px; border-bottom:1px solid var(--line);
  text-align:start; width:100%; background:none;
  transition:background .2s ease;
}
.cat-row:hover{background:var(--sand);}
.cat-row-index{
  font-family:var(--disp); font-size:14px; color:var(--ink-soft);
  width:26px; flex-shrink:0; letter-spacing:.5px;
}
.cat-row-swatch{
  width:58px; height:58px; border-radius:14px; flex-shrink:0;
  box-shadow:0 6px 16px rgba(43,35,29,0.18);
}
.cat-row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.cat-row-name{font-family:var(--disp); font-size:21px; font-weight:700; color:var(--ink); line-height:1.2;}
.cat-row-desc{
  font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:60ch;
}
.cat-row-count{
  font-size:11.5px; color:var(--ink-soft); flex-shrink:0; white-space:nowrap;
  border:1px solid var(--line); padding:5px 12px; border-radius:999px;
}
.cat-row-arrow{
  width:36px; height:36px; border-radius:50%; background:var(--sand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.cat-row:hover .cat-row-arrow{background:var(--ink); color:#fff; transform:scale(1.06);}
.cat-row-arrow svg{width:14px; height:14px;}
@media(max-width:520px){
  .cat-row-desc{display:none;}
  .cat-row-count{display:none;}
  .cat-row-swatch{width:48px; height:48px; border-radius:11px;}
  .cat-row-name{font-size:18px;}
}

/* ============ PRODUCT GRID ============ */
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin-bottom:6px; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0; padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--sand); color:var(--ink-soft); white-space:nowrap;
}
.chip.active{background:var(--ink); color:var(--porcelain);}

.prod-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px;}
.prod-card{
  background:var(--porcelain); border-radius:12px; overflow:hidden;
  border:1px solid var(--line); text-align:start;
}
.prod-thumb{aspect-ratio:1/1; position:relative;}
.prod-thumb .media-badge{
  position:absolute; bottom:5px; inset-inline-start:5px; background:rgba(20,14,10,0.55); color:#fff;
  font-size:8.5px; padding:2px 6px; border-radius:999px; display:flex; align-items:center; gap:3px;
}
.prod-thumb .media-badge svg{width:8px; height:8px;}
.prod-info{padding:7px 8px 10px;}
.prod-name{font-size:11.5px; font-weight:700; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.prod-price-block{margin-bottom:4px;}
.prod-old-price{font-size:10px; text-decoration:line-through; color:var(--ink-soft); font-weight:500; line-height:1.3;}
.prod-price-row{display:flex; align-items:center; gap:6px;}
.prod-price{font-size:12.5px; font-weight:800; color:var(--clay-deep);}
.prod-discount{
  display:inline-flex; align-items:center; background:var(--clay); color:#fff;
  font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px; line-height:1.3;
}
.stock-status{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; margin-bottom:4px;}
.stock-status .dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.stock-status.limited{color:#9a6b1f;}
.stock-status.limited .dot{background:#E0A339;}
.stock-status.unavailable{color:#B4502E;}
.stock-status.unavailable .dot{background:#B4502E;}
.prod-badge{
  position:absolute; top:8px; inset-inline-start:8px; z-index:2;
  padding:4px 10px; border-radius:999px; font-size:10px; font-weight:700; color:#fff;
}
.prod-badge.featured{background:var(--clay);}
.prod-badge.new{background:var(--olive);}
.prod-desc{font-size:9.5px; color:var(--ink-soft); line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.prod-cta{font-size:10px; font-weight:700; color:var(--clay-deep); display:flex; align-items:center; gap:3px;}
.prod-cta svg{width:10px; height:10px;}
.empty-state{padding:40px 10px; text-align:center; color:var(--ink-soft); font-size:14px;}

/* ============ ABOUT / STRIP ============ */
.about{
  margin:34px 18px; padding:26px 20px; border-radius:var(--radius);
  background:var(--ink); color:var(--porcelain);
}
.about h3{font-family:var(--disp); font-size:22px; margin-bottom:10px;}
.about p{font-size:14px; line-height:1.9; color:#DCD3C6;}

/* ============ FOOTER ============ */
footer{padding:30px 18px 20px; text-align:center;}
.footer-brand{font-family:var(--disp); font-size:20px; margin-bottom:6px;}
.footer-line{font-size:12.5px; color:var(--ink-soft); margin-bottom:14px;}
.footer-links{display:flex; justify-content:center; gap:16px; margin-bottom:16px;}
.footer-links a{
  width:38px; height:38px; border-radius:50%; background:var(--sand);
  display:flex; align-items:center; justify-content:center;
}
.footer-links svg{width:16px; height:16px;}
.footer-copy{font-size:11px; color:#9a8f80;}

.footer-map{
  max-width:480px; margin:0 auto 20px; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.footer-map iframe{width:100%; height:200px; border:0; display:block;}
.footer-map-link{
  display:block; padding:11px; background:var(--porcelain); font-size:12.5px; font-weight:700;
  color:var(--clay-deep); text-decoration:underline;
}

/* ============ BOTTOM NAV ============ */
.bottom-nav{
  position:fixed; bottom:0; right:0; left:0; z-index:50;
  display:flex; background:var(--porcelain); border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; color:var(--ink-soft); padding:4px; border-radius:12px;
}
.bn-item svg{width:20px; height:20px;}
.bn-item.active{color:var(--clay-deep);}

/* ============ PRODUCT DETAIL OVERLAY ============ */
.overlay{
  position:fixed; inset:0; z-index:100; background:var(--porcelain);
  transform:translateY(100%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
}
.overlay.open{transform:translateY(0);}
.ov-topbar{
  position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; background:rgba(251,248,242,0.9); backdrop-filter:blur(8px);
}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:22px;}
.gallery-item{
  aspect-ratio:1/1; border-radius:12px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.gallery-item .media-badge{
  position:absolute; bottom:6px; inset-inline-start:6px; background:rgba(20,14,10,0.55); color:#fff;
  font-size:9px; padding:2px 7px; border-radius:999px; display:flex; align-items:center; gap:3px;
}
.gallery-item .media-badge svg{width:9px; height:9px;}
.gallery-label{font-size:11.5px; font-weight:700; color:var(--clay-deep); letter-spacing:.5px; margin-bottom:10px;}

/* ============ FULLSCREEN LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(18,13,9,0.97);
  display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox-top{display:flex; justify-content:space-between; align-items:center; padding:14px 16px;}
.lightbox-count{color:#fff; font-size:13px; font-weight:700;}
.lightbox-close{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-track{flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; align-items:center;}
.lightbox-track::-webkit-scrollbar{display:none;}
.lightbox-slide{
  flex:0 0 100%; scroll-snap-align:start; height:100%;
  display:flex; align-items:center; justify-content:center; padding:0 18px;
}
.lightbox-slide video{max-width:100%; max-height:100%; border-radius:8px; object-fit:contain;}
.lightbox-slide .ph{color:rgba(255,255,255,0.85); width:100%; height:60vw; max-height:320px; border-radius:12px;}

.ov-body{padding:22px 18px 40px;}
.ov-cat{font-size:11.5px; font-weight:700; color:var(--clay-deep); letter-spacing:1px; margin-bottom:6px;}
.ov-title{font-family:var(--disp); font-size:28px; font-weight:700; margin-bottom:10px;}
.ov-price{font-size:19px; font-weight:700; color:var(--clay-deep); margin-bottom:14px;}
.ov-desc{font-size:14.5px; line-height:1.9; color:var(--ink-soft); margin-bottom:22px;}
.spec-table{width:100%; border-collapse:collapse; margin-bottom:26px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:11px 4px; font-size:13.5px;}
.spec-table td:first-child{color:var(--ink-soft); width:38%;}
.spec-table td:last-child{font-weight:700;}
.ov-actions{display:flex; gap:10px; position:sticky; bottom:0; padding:14px 0 6px; background:linear-gradient(0deg, var(--porcelain) 60%, transparent);}
.ov-actions .btn{flex:1; justify-content:center;}

/* placeholder media fill */
.ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; color:rgba(255,255,255,0.85); text-align:center; padding:14px;
}
.ph svg{width:26px; height:26px;}
.ph span{font-size:11px; line-height:1.5;}
.prod-thumb .ph svg{width:18px; height:18px;}
.prod-thumb .ph span{font-size:8px;}

/* ============ RESPONSIVE (tablet/desktop) ============ */
@media(min-width:720px){
  body{padding-bottom:0;}
  .bottom-nav{display:none;}
  .banner-slide{min-height:38vw; max-height:480px;}
  .banner-copy h1{font-size:46px;}
  .section{padding:44px 40px 6px;}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .prod-grid{grid-template-columns:repeat(6,1fr);}
  .about{margin:44px 40px;}
  .footer-links{margin-bottom:16px;}
  .ov-body{padding:30px 60px 60px; max-width:900px; margin:0 auto;}
  .gallery-grid{grid-template-columns:repeat(4,1fr);}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}