:root{--paper:#FBF9F2;--surface:#E8DFC7;--ink:#22271B;--ink-soft:#5F6354;--line:#DAD2B8;--green:#324427;--green-deep:#232F1B;--gold:#FFC60B;--white:#FFFFFF;--font:'IBM Plex Sans Arabic', sans-serif;--container:1280px;}
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--font); background:var(--paper); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block; width:100%; height:100%; object-fit:cover;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
  h1,h2,h3{font-weight:700; line-height:1.3;}

  .promo-bar{background:var(--green); color:var(--white); text-align:center; font-size:.78rem; padding:9px 12px;}
  header{position:sticky; top:0; z-index:100; background:rgba(251,249,242,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:20px;}
  .logo{font-size:1.35rem; font-weight:700;}
  .logo span{color:var(--green);}
  nav.primary ul{display:flex; gap:32px; font-size:.92rem; font-weight:500;}
  nav.primary a:hover{color:var(--green);}
  .nav-actions{display:flex; align-items:center; gap:20px; padding-inline-end:10px;}
  .icon-btn{width:20px; height:20px; position:relative; display:flex; align-items:center; justify-content:center;}
  .icon-btn svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.6;}
  .cart-count{position:absolute; top:-8px; left:-9px; background:var(--green); color:var(--white); font-size:.6rem; font-weight:700; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

  /* slim utility head: SEO/orientation only, minimal visual weight */
  .utility-head{padding:14px 0; border-bottom:1px solid var(--line);}
  .utility-head .row{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
  .utility-head .breadcrumb{font-size:.78rem; color:var(--ink-soft);}
  .utility-head h1{font-size:1.05rem; font-weight:700;}
  .utility-head .tagline{font-size:.8rem; color:var(--ink-soft); font-weight:300;}

  /* spotlight (editor's pick, pinned) */
  .spotlight{padding:36px 0 0;}
  .spotlight-card{display:grid; grid-template-columns:.85fr 1.15fr; gap:0; background:var(--white); border:1px solid var(--line); overflow:hidden;}
  .spotlight-visual{position:relative; aspect-ratio:4/3.4; overflow:hidden; background:var(--surface);}
  .spotlight-visual .tag{position:absolute; top:18px; right:18px; background:var(--gold); color:var(--ink); font-size:.72rem; font-weight:700; padding:6px 14px; border-radius:2px;}
  .spotlight-copy{padding:44px 48px; display:flex; flex-direction:column; justify-content:center;}
  .spotlight-copy .eyebrow{font-size:.76rem; font-weight:700; letter-spacing:0; color:var(--green); margin-bottom:12px;}
  .spotlight-copy h2{font-size:1.85rem; margin-bottom:6px;}
  .spotlight-copy .author{font-size:.9rem; color:var(--ink-soft); margin-bottom:16px;}
  .spotlight-copy p{color:var(--ink-soft); margin-bottom:22px; max-width:460px; font-weight:300;}
  .spotlight-meta{display:flex; align-items:center; gap:22px; margin-bottom:24px; font-size:.8rem; color:var(--ink-soft);}
  .spotlight-actions{display:flex; align-items:center; gap:16px;}
  .price-big{font-size:1.4rem; font-weight:700;}
  .btn-buy{background:var(--green); color:var(--white); padding:14px 30px; border-radius:2px; font-weight:600; font-size:.9rem;}
  .btn-buy:hover{background:var(--green-deep);}
  .btn-outline{border:1px solid var(--ink); padding:14px 22px; border-radius:2px; font-weight:600; font-size:.86rem;}
  .btn-outline:hover{background:var(--ink); color:var(--white);}

  /* top picks: bestseller + new arrival, bigger than grid, smaller than spotlight */
  .top-picks{padding:40px 0 8px;}
  .top-picks-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  .top-pick-card{background:var(--white); border:1px solid var(--line); overflow:hidden; display:grid; grid-template-columns:1fr 1.15fr;}
  .top-pick-visual{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--surface);}
  .top-pick-visual img{position:absolute; inset:0; transition:opacity .4s ease;}
  .top-pick-visual img.secondary{opacity:0;}
  .top-pick-card:hover .top-pick-visual img.primary{opacity:0;}
  .top-pick-card:hover .top-pick-visual img.secondary{opacity:1;}
  .top-pick-copy{padding:26px 24px; display:flex; flex-direction:column; justify-content:center;}
  .pill{display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; letter-spacing:0; padding:5px 11px; border-radius:2px; margin-bottom:12px; width:fit-content;}
  .pill.best{background:var(--gold); color:var(--ink);}
  .pill.newp{background:var(--green); color:var(--white);}
  .top-pick-copy h3{font-size:1.2rem; margin-bottom:6px;}
  .top-pick-copy .meta-line{font-size:.78rem; color:var(--ink-soft); margin-bottom:16px;}
  .top-pick-copy .price-row{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
  .top-pick-copy .price{font-size:1.1rem; font-weight:700;}
  .add-solid{background:var(--green); color:var(--white); padding:10px 18px; border-radius:2px; font-weight:600; font-size:.82rem;}
  .add-solid:hover{background:var(--green-deep);}

  /* filter bar: contextually placed right above the grid, not before any visual */
  .filter-bar{background:var(--paper); border-bottom:1px solid var(--line); padding:16px 0; margin-top:12px;}
  .filter-row{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .chip-group{display:flex; gap:10px; flex-wrap:wrap;}
  .chip{font-size:.82rem; font-weight:500; padding:8px 18px; border:1px solid var(--line); border-radius:20px; color:var(--ink-soft); white-space:nowrap;}
  .chip:hover{border-color:var(--green); color:var(--green);}
  .chip.active{background:var(--green); border-color:var(--green); color:var(--white);}
  .sort-group{display:flex; align-items:center; gap:12px;}
  .sort-group select{padding:8px 14px; border:1px solid var(--line); border-radius:20px; font-family:inherit; font-size:.82rem; background:var(--white); color:var(--ink);}

  .section{padding:48px 0;}
  .grid-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px;}
  .grid-head h3{font-size:1.2rem;}
  .grid-head span{font-size:.8rem; color:var(--ink-soft);}
  .shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px 28px;}
  .shop-card{position:relative;}
  .shop-frame{position:relative; aspect-ratio:3/4.2; overflow:hidden; background:var(--surface); border:1px solid var(--line); margin-bottom:12px;}
  .shop-frame img{position:absolute; inset:0; transition:opacity .35s ease, transform .5s ease;}
  .shop-frame img.secondary{opacity:0;}
  .shop-card:hover .shop-frame img.primary{opacity:0;}
  .shop-card:hover .shop-frame img.secondary{opacity:1;}
  .wish-mini{position:absolute; top:8px; left:8px; z-index:3; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;}
  .wish-mini svg{width:14px; height:14px; stroke:var(--ink-soft); fill:none; stroke-width:1.6;}
  .wish-mini:hover svg{stroke:var(--green);}
  .s-meta .tag-line{font-size:.72rem; color:var(--ink-soft); margin-bottom:4px;}
  .s-meta .title{font-weight:600; font-size:.92rem; margin-bottom:12px; line-height:1.4; min-height:2.8em;}
  .shop-card{display:flex; flex-direction:column;}
  .shop-card > a{display:flex; flex-direction:column; flex:1;}
  .shop-card .s-meta{display:flex; flex-direction:column; flex:1;}
  .shop-card .s-meta .action-row{margin-top:auto;}
  .s-meta .action-row{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px;}
  .s-meta .price{font-weight:700; font-size:.88rem; line-height:1; white-space:nowrap;}
  .mini-add{display:inline-flex; align-items:center; height:32px; font-size:.72rem; font-weight:700; line-height:1; color:var(--white); background:var(--green); padding:0 14px; border-radius:2px; white-space:nowrap;}
  .mini-add:hover{background:var(--green-deep);}

  /* collections section, homepage visual language */
  .collections{padding:8px 0 56px;}
  .collections-head{display:flex; justify-content:flex-end; margin-bottom:22px;}
  .collections-head h3{font-size:1.25rem;}
  .collections-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
  .collection-tile{position:relative; aspect-ratio:4/5; overflow:hidden;}
  .collection-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,20,14,.68) 0%, rgba(20,20,14,0) 48%);}
  .collection-tile img{transition:transform .4s ease;}
  .collection-tile:hover img{transform:scale(1.045);}
  .collection-tile span{position:absolute; bottom:16px; right:16px; z-index:1; color:var(--white); font-weight:600; font-size:.92rem;}

  .pagination{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:44px;}
  .pagination a, .pagination span{box-sizing:border-box; line-height:1; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; font-size:.85rem; font-weight:600; color:var(--ink-soft);}
  .pagination a.active{background:var(--green); color:var(--white); border-color:var(--green);}
  .pagination a:hover:not(.active){border-color:var(--green); color:var(--green);}

  footer{background:var(--surface); border-top:1px solid var(--line); padding-top:56px; margin-top:20px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; border-bottom:1px solid var(--line);}
  .footer-brand p{font-size:.85rem; color:var(--ink-soft); max-width:280px; margin:14px 0 20px; font-weight:300;}
  .footer-social{display:flex; gap:14px;}
  .footer-social a svg{width:17px; height:17px; stroke:var(--ink-soft); fill:none; stroke-width:1.6;}
  .footer-social a:hover svg{stroke:var(--green);}
  .footer-col h5{font-size:.82rem; font-weight:700; margin-bottom:16px;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col a, .footer-col span{font-size:.85rem; color:var(--ink-soft);}
  .footer-col a:hover{color:var(--green);}
  .tel-num{direction:ltr; unicode-bidi:isolate; display:inline-block;}
  .footer-bottom{display:flex; align-items:center; justify-content:space-between; padding:20px 0 32px; font-size:.78rem; color:var(--ink-soft); flex-wrap:wrap; gap:10px;}

  @media (max-width:980px){
    .shop-grid{grid-template-columns:repeat(2,1fr);}
    .spotlight-card, .top-pick-card{grid-template-columns:1fr;}
    .spotlight-copy{padding:32px 26px;}
    .top-picks-grid{grid-template-columns:1fr;}
    .collections-grid{grid-template-columns:1fr;}
    nav.primary{display:none;}
    .filter-row{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:560px){
    .shop-grid{grid-template-columns:1fr; max-width:320px; margin:0 auto;}
  }

.shop-card{display:block}
  .spotlight-visual img{object-fit:contain !important;}
  @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; gap:30px;}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}