/* =========================================================
   MASARI STORE — Components (Updated with B2C/B2B Elements)
   ========================================================= */

/* ---------- Top announcement bar ---------- */
.announce-bar{
  background: var(--color-forest-dark); color:#f2ede0;
  text-align:center; font-size:.78rem; padding:7px 10px; font-weight:600;
  letter-spacing:.02em;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 200;
  background: rgba(246,243,236,.94); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--color-line);
}
.header-inner{
  display:flex; align-items:center; gap:18px;
  height: var(--header-h);
}
/* ---------- Logo (Premium Brand Style) ---------- */
.logo {
  font-family: var(--font-display); 
  font-weight: 900; 
  font-size: 1.75rem; /* تكبير الخط قليلاً */
  color: var(--color-forest-dark); 
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 8px; /* مساحة للكلمة الصغيرة جواها */
  letter-spacing: -0.02em;
}

/* النقطة السماوية البارزة */
.logo span { 
  color: var(--color-gold); 
  font-size: 2.6rem;
  line-height: 0;
  position: relative;
  top: 6px;
  margin-right: 2px;
}

/* لمسة الماركات العالمية (كلمة SKINCARE صغيرة تحت الاسم) */
.logo::after {
  content: 'SKINCARE';
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.28em; /* حروف متباعدة تنطي فخامة */
  color: var(--color-gold);
}

.main-nav{ display:flex; align-items:center; gap:22px; flex:1; }
.main-nav a{
  font-weight:700; font-size:.92rem; color: var(--color-ink);
  position:relative; padding:6px 0;
}
.main-nav a.active,.main-nav a:hover{ color: var(--color-forest); }
.main-nav a.active::after{
  content:''; position:absolute; right:0; left:0; bottom:-2px; height:2px;
  background: var(--color-gold);
}

.header-search{
  flex:1; max-width: 380px; position:relative;
}
.header-search input{
  width:100%; padding:10px 40px 10px 14px; border-radius: 999px;
  border:1.5px solid var(--color-line); background:#fff; font-size:.85rem;
}
.header-search input:focus{ border-color: var(--color-forest); outline:none; }
.header-search button{
  position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:1.1rem; color: var(--color-ink-soft);
  padding:4px;
}

.header-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: transparent; border:none; font-size:1.2rem; color: var(--color-forest-dark);
  transition: background var(--transition);
}
.icon-btn:hover{ background: var(--color-cream-deep); }
.icon-badge{
  position:absolute; top:0; inset-inline-end:0; background: var(--color-gold);
  color: var(--color-forest-dark); font-size:.62rem; font-weight:800;
  min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; padding:0 3px; border: 2px solid var(--color-cream);
}

.menu-toggle{ display:none; }

/* ---------- Mobile slide-out menu ---------- */
.mobile-menu-panel{
  display:none; position:fixed; inset:0; z-index:500;
  background: rgba(20,39,28,.55);
}
.mobile-menu-panel.open{ display:block; }
.mobile-menu-panel .panel-inner{
  position:absolute; top:0; right:0; bottom:0; width: 78%; max-width:320px;
  background: var(--color-cream); padding: 20px; overflow-y:auto;
  box-shadow: -8px 0 24px rgba(0,0,0,.15);
}
.mobile-menu-panel .panel-close{
  background:none; border:none; font-size:1.4rem; float:left; color: var(--color-forest-dark);
}
.mobile-menu-panel .logo{ display:block; margin-bottom:18px; }
.mobile-menu-panel a{
  display:block; padding: 13px 4px; font-weight:700; font-size:.98rem;
  border-bottom:1px solid var(--color-line); color: var(--color-ink);
}
.mobile-menu-panel .mm-search{ margin: 6px 0 16px; position:relative; }
.mobile-menu-panel .mm-search input{
  width:100%; padding:10px 40px 10px 12px; border-radius:999px; border:1.5px solid var(--color-line);
}
.mobile-menu-panel .mm-search button{
  position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); background:none; border:none;
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  display:none; position: fixed; bottom:0; right:0; left:0; z-index:250;
  background:#fff; border-top:1px solid var(--color-line);
  height: var(--bottom-nav-h);
  box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
.bottom-nav ul{ display:flex; height:100%; }
.bottom-nav li{ flex:1; }
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; height:100%; font-size:.65rem; font-weight:700; color: var(--color-ink-soft);
  position:relative;
}
.bottom-nav a .bn-icon{ font-size:1.25rem; }
.bottom-nav a.active{ color: var(--color-forest); }
.bottom-nav a .icon-badge{ top:-2px; inset-inline-end:18%; }

/* ---------- Hero / Banner slider ---------- */
.hero-slider{ position:relative; overflow:hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.hero-track{ display:flex; transition: transform 500ms ease; }
.hero-slide{
  min-width:100%; display:flex; align-items:center;
  background-size:cover; background-position:center;
  min-height: 340px; position:relative;
}
.hero-slide::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,39,28,.78) 0%, rgba(20,39,28,.35) 60%, transparent 100%);
}
.hero-content{ position:relative; z-index:2; padding: 40px; color:#fff; max-width:540px; }
.hero-content .eyebrow{ color: var(--color-gold); font-weight:700; font-size:.78rem; letter-spacing:.08em; }
.hero-content h1{ color:#fff; font-size:2.2rem; margin:6px 0 10px; }
.hero-content p{ color:#ede7d8; margin-bottom:22px; font-size:1.05rem; }
.hero-dots{ position:absolute; bottom:16px; right:50%; transform:translateX(50%); z-index:3; display:flex; gap:7px; }
.hero-dots button{
  width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.5); border:none; padding:0;
}
.hero-dots button.active{ background: var(--color-gold); width:22px; border-radius:5px; }
.hero-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; border:none; background: rgba(255,255,255,.85);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
}
.hero-arrow.prev{ right:16px; } .hero-arrow.next{ left:16px; }

/* ---------- New Trust & Consultation Sections ---------- */
.trust-bar { 
  display: flex; justify-content: space-around; background: #fff; padding: 20px; 
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); 
  margin: -30px auto 40px; position: relative; z-index: 10; max-width: 900px; 
  text-align: center; flex-wrap: wrap; gap: 10px; 
}
.trust-bar div { font-weight: 800; font-size: .95rem; color: var(--color-forest-dark); }

.consult-section { 
  background: var(--color-blush); padding: 40px 20px; border-radius: var(--radius-lg); 
  text-align: center; margin: 40px 0; 
}
.consult-section h2 { font-size: 1.6rem; color: var(--color-forest-dark); margin-bottom: 10px; }
.consult-section p { 
  margin-bottom: 24px; color: var(--color-forest-dark); font-size:1.05rem; 
  max-width: 600px; margin-left: auto; margin-right: auto;
}

/* ---------- Category cards ---------- */
.cat-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
}
.cat-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition);
  text-align:center;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.cat-card .cat-img{ aspect-ratio:1/1; background: var(--color-cream-deep); overflow:hidden; }
.cat-card .cat-img img{ width:100%; height:100%; object-fit:cover; }
.cat-card .cat-name{ padding:12px 8px; font-weight:700; font-size:.88rem; }
.cat-card .cat-count{ font-size:.72rem; color: var(--color-ink-soft); padding-bottom:12px; display:block; }

/* ---------- Brand strip ---------- */
.brand-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:14px; }
.brand-card{
  background:#fff; border:1px solid var(--color-line); border-radius: var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 18px 10px; gap:8px; transition: box-shadow var(--transition), transform var(--transition);
}
.brand-card:hover{ box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.brand-card img{ height:38px; object-fit:contain; }
.brand-card .b-name{ font-weight:700; font-size:.82rem; text-align:center; }
.brand-card .b-count{ font-size:.7rem; color: var(--color-ink-soft); }

/* ---------- Product grid & card ---------- */
.product-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.product-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-card); display:flex; flex-direction:column; height:100%;
  transition: box-shadow var(--transition), transform var(--transition); position:relative;
}
.product-card:hover{ box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.product-card .pc-media{
  position:relative; aspect-ratio: 1/1; background: var(--color-cream-deep); overflow:hidden;
}
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition: transform 400ms ease; }
.product-card:hover .pc-media img{ transform: scale(1.05); }
.pc-badge{
  position:absolute; top:10px; inset-inline-start:10px; background: var(--color-danger);
  color:#fff; font-size:.7rem; font-weight:800; padding:4px 9px; border-radius:999px; z-index:2;
}
.pc-fav{
  position:absolute; top:8px; inset-inline-end:8px; z-index:2;
  width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.92); border:none;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; color: var(--color-ink-soft);
  transition: color var(--transition), transform var(--transition);
}
.pc-fav.active{ color: var(--color-danger); }
.pc-fav:active{ transform: scale(1.2); }
.pc-body{ padding: 12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pc-brand{ font-size:.72rem; font-weight:700; color: var(--color-gold-dark); text-transform:uppercase; letter-spacing:.03em; }
.pc-name{
  font-size:.9rem; font-weight:700; color: var(--color-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 2.6em; line-height:1.3;
}
.pc-avail { font-size: .75rem; font-weight: 800; margin-bottom: 4px; display:inline-block;}
.pc-avail.true { color: var(--color-success); }
.pc-avail.false { color: var(--color-danger); }
.pc-prices{ display:flex; align-items:baseline; gap:8px; margin-top:4px; flex-wrap:wrap; }
.pc-price{ font-weight:800; color: var(--color-forest-dark); font-size:1rem; }
.pc-price-old{ font-size:.78rem; color: var(--color-ink-soft); text-decoration: line-through; }
.pc-foot{ display:flex; gap:8px; margin-top:10px; }
.pc-foot .btn{ flex:1; padding:9px 10px; font-size:.8rem; }
.pc-stock-out{
  position:absolute; inset:0; background: rgba(246,243,236,.72); z-index:2;
  display:flex; align-items:center; justify-content:center; font-weight:800; color: var(--color-danger);
}

/* ---------- Filters / sort bar ---------- */
.listing-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 14px 0; border-bottom:1px solid var(--color-line); margin-bottom:20px;
}
.listing-count{ font-size:.85rem; color: var(--color-ink-soft); }
.listing-layout{ display:grid; grid-template-columns: 250px 1fr; gap:26px; align-items:start; }
.filters-panel{
  background:#fff; border:1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 18px; position:sticky; top: calc(var(--header-h) + 16px);
}
.filters-panel h4{ font-size:.85rem; margin-bottom:10px; }
.filter-group{ padding: 12px 0; border-bottom:1px solid var(--color-line); }
.filter-group:last-child{ border-bottom:none; }
.filter-group label{
  display:flex; align-items:center; gap:8px; font-size:.83rem; padding:5px 0; cursor:pointer;
}
.select-sort{
  padding: 9px 30px 9px 12px; border-radius: var(--radius-sm); border:1.5px solid var(--color-line);
  font-size:.83rem; background:#fff;
}
.mobile-filter-bar{ display:none; }

/* ---------- Product detail ---------- */
.pdp-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:44px; align-items:flex-start; }
.pdp-gallery-main{
  aspect-ratio:1/1; background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-card); margin-bottom:12px;
}
.pdp-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.pdp-info .pc-brand{ font-size:.82rem; }
.pdp-info h1{ font-size:1.6rem; margin: 6px 0 8px; }
.pdp-avail { font-size: .9rem; font-weight: 800; display: inline-block; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px;}
.pdp-avail.true { background: #e9f2eb; color: var(--color-success); }
.pdp-avail.false { background: #fbeae9; color: var(--color-danger); }
.pdp-prices{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.pdp-prices .pc-price{ font-size:1.6rem; }
.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--color-line); border-radius: var(--radius-sm); }
.qty-stepper button{ background:none; border:none; width:38px; height:40px; font-size:1.1rem; }
.qty-stepper input{ width:44px; text-align:center; border:none; font-weight:700; }
.pdp-actions{ display:flex; gap:10px; margin: 20px 0; }
.pdp-actions .btn-primary{ flex:1; }

.pdp-consult-box { background: var(--color-cream-deep); padding: 18px; border-radius: var(--radius-md); text-align: center; margin: 24px 0; }
.pdp-consult-box p { font-weight: 700; color: var(--color-forest-dark); margin-bottom: 12px; }

.pdp-tabs{ margin-top: 30px; border-top:1px solid var(--color-line); }
.pdp-tab-btns{ display:flex; gap:22px; border-bottom:1px solid var(--color-line); }
.pdp-tab-btns button{
  background:none; border:none; padding:12px 2px; font-weight:700; color: var(--color-ink-soft);
  border-bottom: 2px solid transparent;
}
.pdp-tab-btns button.active{ color: var(--color-forest-dark); border-color: var(--color-gold); }
.pdp-tab-panel{ padding: 16px 2px; font-size:.9rem; color: var(--color-ink-soft); display:none; }
.pdp-tab-panel.active{ display:block; }

/* ---------- Cart ---------- */
.cart-layout{ display:grid; grid-template-columns: 1fr 340px; gap:30px; align-items:flex-start; }
.cart-line{
  display:grid; grid-template-columns: 84px 1fr auto; gap:14px; align-items:center;
  padding: 16px 0; border-bottom:1px solid var(--color-line);
}
.cart-line img{ width:84px; height:84px; object-fit:cover; border-radius: var(--radius-sm); background:var(--color-cream-deep); }
.cart-line .cl-name{ font-weight:700; font-size:.92rem; }
.cart-line .cl-brand{ font-size:.75rem; color: var(--color-ink-soft); }
.cart-line .cl-remove{ background:none; border:none; color: var(--color-danger); font-size:.78rem; font-weight:700; margin-top:6px; }
.cart-line .cl-side{ text-align:left; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.summary-card{
  background:#fff; border:1px solid var(--color-line); border-radius: var(--radius-md); padding: 20px; position:sticky; top: calc(var(--header-h) + 16px);
}
.summary-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:.88rem; }
.summary-row.total{ font-weight:800; font-size:1.05rem; border-top:1px solid var(--color-line); margin-top:8px; padding-top:14px; color: var(--color-forest-dark); }

/* ---------- Forms (checkout / profile) ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-field.full{ grid-column: 1/-1; }
.form-field label{ font-size:.82rem; font-weight:700; }
.form-field input, .form-field select, .form-field textarea{
  padding: 11px 13px; border-radius: var(--radius-sm); border:1.5px solid var(--color-line); font-size:.88rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--color-forest); }
.pay-option{
  display:flex; align-items:center; gap:10px; padding:14px; border:1.5px solid var(--color-line);
  border-radius: var(--radius-sm); margin-bottom:10px; cursor:pointer;
}
.pay-option.selected{ border-color: var(--color-forest); background: #f3f6f2; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-forest-dark); color:#cfd6c9; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:30px; padding: 46px 0 24px; }
.site-footer h4{ color:#fff; font-size:.9rem; margin-bottom:14px; }
.site-footer a{ display:block; font-size:.82rem; padding:5px 0; color:#b9c2b1; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:16px 0; text-align:center; font-size:.76rem; color:#9aa593;
}