/* VCL 1.2 - mimic provided UI */
.vcl-app{
  direction: rtl!important;
  font-family: inherit;
  background: var(--vcl-page-bg);
  color: var(--vcl-text);
}
.vcl-header{
  background: var(--vcl-header-bg);
  color: var(--vcl-header-text);
  padding: 26px 0 22px;
}
.vcl-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 18px;
}
.vcl-header-search{flex:1; display:flex; justify-content:center;}
.vcl-search{
  width: 72%;
  min-width: 380px;
  max-width: 720px;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 18px;
}
.vcl-search-icon{opacity:.9}
.vcl-search-input{
  width:100%;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  color: #fff !important;
  font-size: 14px;
}
.vcl-search-input::placeholder{color: rgba(255,255,255,.75);}

.vcl-header-brand{
  min-width: 280px;
  text-align: right;
}
.vcl-brand-title{font-weight: 900; font-size: 28px; line-height: 1.2;}
.vcl-brand-sub{opacity: .9; margin-top: 6px; font-size: 13px;}
.vcl-nav{margin-top: 14px; font-size: 13px; display:flex; gap: 10px; justify-content:flex-end; flex-wrap:wrap;}
.vcl-nav a{color:#fff; text-decoration:none; opacity:.95;}
.vcl-nav a:hover{opacity:1;}
.vcl-nav-sep{opacity:.7;}

.vcl-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px 50px;
}

.vcl-grid-layout{
  display:grid;
  grid-template-columns: 1fr 330px;
  gap: 18px;
}
.vcl-grid-layout.no-sidebar{grid-template-columns: 1fr;}
@media (max-width: 992px){
  .vcl-header-inner{flex-direction: column; align-items:stretch;}
  .vcl-search{width:100%; min-width: auto;}
  .vcl-header-brand{min-width:auto;}
  .vcl-grid-layout{grid-template-columns: 1fr;}
}

.vcl-content{padding-top: 16px;}
.vcl-breadcrumb{
  color: var(--vcl-muted);
  font-size: 12px;
  margin: 14px 0 10px;
}
.vcl-bc-sep{margin: 0 8px; opacity:.6;}

.vcl-list-wrap{
  background: var(--vcl-surface);
  border: 1px solid var(--vcl-border);
  border-radius: 10px;
  padding: 16px;
}
.vcl-h1{
  text-align:center;
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 12px;
}
.vcl-pager{
  display:flex;
  justify-content:center;
  gap: 6px;
  margin: 6px 0 12px;
}
.vcl-page-btn{
  width: 34px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 4px;
  border: 1px solid var(--vcl-border);
  background: #f0f0f0;
  color: var(--vcl-text);
  text-decoration:none;
}
.vcl-page-btn.is-active{
  background: var(--vcl-accent);
  color: #fff;
  border-color: var(--vcl-accent);
}

.vcl-products{display:flex; flex-direction:column; gap: 12px;}
.vcl-item{
  background:#f3f3f3;
  border-radius: 10px;
  overflow:hidden;
}
.vcl-item-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px;
  text-decoration:none;
  color: inherit;
}
.vcl-item-title{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}
.vcl-item-body{flex:1; display:flex; flex-direction:column; align-items:center; gap: 8px;}
.vcl-item-meta{display:flex; align-items:center; gap: 8px; font-size: 12px; color: var(--vcl-muted);}
.vcl-meta-dot{width:8px; height:8px; border-radius:2px; background: #16a34a; display:inline-block;}
.vcl-item-icon{width: 64px; height: 64px; display:flex; align-items:center; justify-content:center;}
.vcl-item-icon img{max-width: 56px; max-height: 56px; border-radius: 8px; background:#fff; padding:6px;}

.vcl-sidebar{padding-top: 16px;}
.vcl-sidebar-inner{
  background: transparent;
}
.vcl-cats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 10px;}
.vcl-cat-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 6px;
  background: var(--vcl-sidebar-item-bg);
  color: var(--vcl-sidebar-item-text);
  text-decoration:none;
  border: 1px solid var(--vcl-border);
direction: rtl!important;
}
.vcl-cat-chevron{color: var(--vcl-sidebar-chevron); font-size: 18px;}
.vcl-cat.is-active .vcl-cat-link{
  outline: 2px solid rgba(11,55,255,.25);
  background: #e9eefc;
direction: rtl!important;
}
.vcl-app .vcl-cat-link{
direction: rtl!important;
}
.vcl-empty{
  padding: 16px;
  border: 1px dashed var(--vcl-border);
  border-radius: 10px;
  color: var(--vcl-muted);
  text-align:center;
}

.vcl-cart-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  background: #0b37ff;
  color:#fff;
  border-radius: 14px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  box-shadow: 0 16px 36px rgba(0,0,0,.2);
  z-index: 9999;
}
.vcl-cart-fab span{font-weight:800; font-size: 12px;}


/* --- RTL/Alignment hardening (v1.2.1) --- */
.vcl-app, .vcl-app * { direction: ltr!important; }
.vcl-app { text-align: right; }
.vcl-header, .vcl-header * { direction: ltr!important; }
.vcl-header-brand, .vcl-breadcrumb, .vcl-list-wrap, .vcl-content { text-align: right; }

.vcl-search-input{
  direction: rtl !important;
  text-align: right !important;
}

/* Keep centered parts centered */
.vcl-h1, .vcl-item-title { text-align: center; }

/* Some themes force ul/li to LTR or left align */
.vcl-cats, .vcl-cats li { text-align: right; }


/* --- Layout: sidebar on LEFT (v1.2.2) --- */
.vcl-grid-layout.has-sidebar{
  grid-template-columns: 330px 1fr !important; /* sidebar | content */
}
.vcl-sidebar{ grid-column: 1 !important; }
.vcl-content{ grid-column: 2 !important; }


/* --- Standard RTL layout: sidebar RIGHT (v1.2.3) --- */
.vcl-grid-layout.has-sidebar{
  grid-template-columns: 1fr 330px !important; /* content | sidebar */
}
.vcl-content{ grid-column: 1 !important; }
.vcl-sidebar{ grid-column: 2 !important; }

/* RTL text alignment */
.vcl-app{
  direction: rtl!important;
  text-align: right;
}


/* --- Header layout: search LEFT, brand RIGHT (v1.3.0) --- */
.vcl-header-inner{
  align-items: flex-start;
}
.vcl-header-search{ order: 1; justify-content: flex-start; } /* LEFT side */
.vcl-header-brand{ order: 2; text-align: right; } /* RIGHT side */
@media (max-width: 992px){
  .vcl-header-search{ order: 2; }
  .vcl-header-brand{ order: 1; }
}

/* --- Live search dropdown --- */
.vcl-header-search{ position: relative; }
.vcl-search-dd{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 72%;
  min-width: 380px;
  max-width: 720px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  display: none;
  z-index: 99999;
}
@media (max-width: 992px){
  .vcl-search-dd{ width: 100%; min-width: auto; position: static; margin-top: 10px; }
  .vcl-header-search{ position: static; }
}
.vcl-dd-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  text-decoration:none;
  color: #111827;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.vcl-dd-item:last-child{ border-bottom:none; }
.vcl-dd-item:hover{ background: #f3f4f6; }
.vcl-dd-title{ font-weight: 800; font-size: 13px; line-height: 1.6; }
.vcl-dd-thumb img{ width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background:#fff; padding:4px; }
.vcl-dd-empty{ padding: 12px; color:#6b7280; font-size: 13px; }