/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAITH HOME — Brand Identity CSS
   Colors extracted directly from logo & pattern
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@200;300;400;500&display=swap');

:root {
  /* ── Brand Colors (from logo) ── */
  --fh-cream:       #f8f6f2;   /* خلفية كريمية دافية */
  --fh-cream-soft:  #f2efe9;   /* خلفية أقسام */
  --fh-ink:         #2e2c2a;   /* نص داكن دافي */
  --fh-gray:        #6b6860;   /* رمادي اللوغو */
  --fh-beige:       #c8c0b0;   /* بيج الأيقونة — الـ accent */
  --fh-border:      #ddd8d0;   /* حدود خفيفة */
  --fh-border-soft: #ece8e2;   /* حدود خفيفة جداً */

  /* ── Typography ── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', sans-serif;

  /* ── Motion ── */
  --t: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ━━━━━━━━━━━━━━━━━━━━━
   BASE
   ━━━━━━━━━━━━━━━━━━━━━ */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--fh-cream) !important;
  color: var(--fh-ink) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━
   HEADER
   ━━━━━━━━━━━━━━━━━━━━━ */
#fixed-header,
header[role="banner"] nav,
.navbar {
  background-color: var(--fh-cream) !important;
  border-bottom: 1px solid var(--fh-border-soft) !important;
  box-shadow: none !important;
}

.navbar-brand img { max-height: 40px !important; transition: var(--t) !important; }
.navbar-brand:hover img { opacity: 0.8 !important; }

/* Nav links */
#navbarSupportedContent .nav-link,
.navbar-nav .nav-link {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--fh-gray) !important;
  padding: 20px 14px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid transparent !important;
  transition: var(--t) !important;
}
#navbarSupportedContent .nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--fh-ink) !important;
  border-bottom-color: var(--fh-beige) !important;
}
#navbarSupportedContent {
  background-color: var(--fh-cream) !important;
  border-top: 1px solid var(--fh-border-soft) !important;
}

/* Search */
#js-header-search,
#fixed-header form[id="js-header-search"] {
  max-width: 300px !important;
  width: 26% !important;
  min-width: 180px !important;
}
#fixed-header .input-group {
  border: 1px solid var(--fh-border) !important;
  border-radius: 2px !important;
  background: transparent !important;
}
#fixed-header .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--fh-beige) !important;
}
#fixed-header .js-search-input-text {
  background: transparent !important;
  border: none !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  color: var(--fh-ink) !important;
  box-shadow: none !important;
}
#fixed-header .js-search-input-text::placeholder { color: var(--fh-border) !important; }
#fixed-header .js-search-submit {
  background: transparent !important;
  border: none !important;
  color: var(--fh-gray) !important;
  transition: color 0.2s !important;
}
#fixed-header .js-search-submit:hover { color: var(--fh-ink) !important; }
#fixed-header .input-group:focus-within {
  border-color: var(--fh-beige) !important;
  box-shadow: 0 0 0 2px rgba(200,192,176,0.15) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━
   PAGE BANNER
   ━━━━━━━━━━━━━━━━━━━━━ */
section.bg-primary {
  background-color: var(--fh-gray) !important;
  padding: 60px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* باترن الهوية في البانر */
section.bg-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://i.ibb.co/PGJf391N/Pat1-Trnsp2.png');
  background-size: 200px;
  background-repeat: repeat;
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(to top right, black 0%, transparent 62%);
  mask-image: linear-gradient(to top right, black 0%, transparent 62%);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
section.bg-primary .container { position: relative; z-index: 1; }
section.bg-primary h1,
section.bg-primary .h1,
section.bg-primary .h2 {
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--fh-cream) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
section.bg-primary p {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  color: var(--fh-beige) !important;
  margin-top: 10px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━
   FILTER BAR
   ━━━━━━━━━━━━━━━━━━━━━ */
.animated.slideIn .btn,
.hstack .btn,
.btn-outline-secondary {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--fh-border) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--fh-gray) !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  transition: var(--t) !important;
}
.animated.slideIn .btn:hover,
.hstack .btn:hover {
  color: var(--fh-ink) !important;
  border-color: var(--fh-beige) !important;
}
.hstack select, .hstack .form-select {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  border: 1px solid var(--fh-border) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--fh-gray) !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━
   PRODUCT CARD
   ━━━━━━━━━━━━━━━━━━━━━ */
.card.card-product {
  background: #ffffff !important;
  border: 1px solid var(--fh-border-soft) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: var(--t) !important;
  overflow: hidden !important;
  position: relative !important;
}
.card.card-product:hover {
  border-color: var(--fh-beige) !important;
  box-shadow: 0 6px 28px rgba(46,44,42,0.08) !important;
  transform: translateY(-4px) !important;
}

/* Image */
.card.card-product .card-img-top {
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1) !important;
  display: block !important;
  width: 100% !important;
}
.card.card-product:hover .card-img-top { transform: scale(1.04) !important; }

/* Name */
.card.card-product h2,
.card.card-product h2.list-group-item {
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: var(--fh-ink) !important;
  text-align: center !important;
  padding: 16px 16px 5px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  line-height: 1.3 !important;
}
.card.card-product h2 a { color: var(--fh-ink) !important; text-decoration: none !important; transition: var(--t) !important; }
.card.card-product h2 a:hover { color: var(--fh-gray) !important; }

/* Price */
.card.card-product strong {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--fh-gray) !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  text-align: center !important;
  padding: 2px 16px 14px !important;
}

/* Card footer */
.card.card-product .card-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--fh-border-soft) !important;
  padding: 12px 14px 14px !important;
}

/* Notify button */
.card.card-product .card-footer .btn {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--fh-border) !important;
  border-radius: 2px !important;
  color: var(--fh-gray) !important;
  font-family: var(--font-sans) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
  text-align: center !important;
  transition: var(--t) !important;
}
.card.card-product .card-footer .btn:hover {
  background: var(--fh-ink) !important;
  color: var(--fh-cream) !important;
  border-color: var(--fh-ink) !important;
}

/* Wishlist */
/* ══ WISHLIST ══ */
.add-to-wishlist { 
  position: absolute !important; 
  top: 10px !important; 
  right: 10px !important; 
  z-index: 3 !important; 
}
.icon-heart-mask {
  width: 20px !important;
  height: 20px !important;
  background: rgba(248,246,242,0.92) !important;
  border: 1px solid var(--fh-border) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--t) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.icon-heart-mask::before {
  content: '♡' !important;
  font-size: 10px !important;
  color: var(--fh-gray) !important;
  transition: var(--t) !important;
  line-height: 1 !important;
}
.icon-heart-mask:hover {
  background: var(--fh-ink) !important;
  border-color: var(--fh-ink) !important;
}
.icon-heart-mask:hover::before {
  content: '♥' !important;
  color: var(--fh-cream) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━
   PRODUCT PAGE
   ━━━━━━━━━━━━━━━━━━━━━ */
.nav-tabs { border-bottom: 1px solid var(--fh-border-soft) !important; }
.nav-tabs .nav-link {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fh-gray) !important;
  border: none !important;
  border-bottom: 1.5px solid transparent !important;
  border-radius: 0 !important;
  padding: 13px 18px !important;
  background: transparent !important;
  transition: var(--t) !important;
}
.nav-tabs .nav-link:hover { color: var(--fh-ink) !important; }
.nav-tabs .nav-link.active {
  color: var(--fh-ink) !important;
  border-bottom-color: var(--fh-beige) !important;
  background: transparent !important;
}

/* Product title */
h1.h2 {
  font-family: var(--font-serif) !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  color: var(--fh-ink) !important;
  line-height: 1.2 !important;
  margin-bottom: 24px !important;
}

/* List group */
.list-group-flush .list-group-item {
  border-color: var(--fh-border-soft) !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--fh-gray) !important;
  padding: 13px 0 !important;
}
.list-group-item .fw-bold {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--fh-beige) !important;
}

/* Description */
.tab-pane p {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: var(--fh-gray) !important;
}

/* Form fields — underline only */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"] {
  border: none !important;
  border-bottom: 1px solid var(--fh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: var(--fh-ink) !important;
  padding: 11px 0 !important;
  box-shadow: none !important;
  transition: border-color 0.22s !important;
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  border-bottom-color: var(--fh-beige) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--fh-border) !important; letter-spacing: 0.1em !important; }

/* Send button */
form .btn.btn-primary {
  background: var(--fh-ink) !important;
  color: var(--fh-cream) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 13px 32px !important;
  transition: var(--t) !important;
  float: right !important;
  margin-top: 8px !important;
}
form .btn.btn-primary:hover {
  background: var(--fh-gray) !important;
}

/* Product image */
.tab-content img { border-radius: 2px !important; box-shadow: 0 2px 20px rgba(46,44,42,0.08) !important; }

/* Links */
.list-group-item a {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  color: var(--fh-gray) !important;
  text-decoration: none !important;
  letter-spacing: 0.06em !important;
  transition: var(--t) !important;
}
.list-group-item a:hover { color: var(--fh-beige) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━
   TYPOGRAPHY
   ━━━━━━━━━━━━━━━━━━━━━ */
h1, h2, h3 { font-family: var(--font-serif) !important; font-weight: 300 !important; }
h2 { font-size: 28px !important; letter-spacing: 0.14em !important; color: var(--fh-ink) !important; }
h3 { font-size: 20px !important; letter-spacing: 0.08em !important; }
p  { font-family: var(--font-sans) !important; font-weight: 300 !important; color: var(--fh-gray) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━ */
footer, .footer {
  background: var(--fh-ink) !important;
  border-top: none !important;
}
footer a, .footer a {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  color: var(--fh-gray) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
footer a:hover, .footer a:hover { color: var(--fh-beige) !important; }
footer h3, footer h4, .footer h3, .footer h4 {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--fh-beige) !important;
  margin-bottom: 16px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━
   MISC
   ━━━━━━━━━━━━━━━━━━━━━ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--fh-cream); }
::-webkit-scrollbar-thumb { background: var(--fh-border); }
::-webkit-scrollbar-thumb:hover { background: var(--fh-beige); }

::selection { background: var(--fh-gray) !important; color: var(--fh-cream) !important; }

#ez-rw-launcher, [id*="rewards"] {
  background: var(--fh-ink) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  section.bg-primary h1, section.bg-primary .h2 { font-size: 22px !important; letter-spacing: 0.2em !important; }
  h1.h2 { font-size: 26px !important; }
  #js-header-search { width: 100% !important; max-width: 100% !important; }
}


/* ══ ADD TO CART BUTTON ══ */
.card.card-product .card-footer .btn {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--fh-border) !important;
  border-radius: 2px !important;
  color: var(--fh-gray) !important;
  font-family: var(--font-sans) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
  text-align: center !important;
  transition: var(--t) !important;
}
.card.card-product .card-footer .btn:hover {
  background: var(--fh-ink) !important;
  color: var(--fh-cream) !important;
  border-color: var(--fh-ink) !important;
}

/* إخفاء أيقونة الـ cart داخل الزر */
.card.card-product .card-footer .btn svg,
.card.card-product .card-footer .btn i,
.card.card-product .card-footer .btn img {
  display: none !important;
}

/* ══ السعر في المنتصف ══ */
.card.card-product .list-group-item,
.card.card-product .border-0,
.card.card-product .px-3 {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Fixed bottom action bar */
.fixed-action-bar,
[class*="sticky-bar"],
[class*="product-actions"],
.zid-bottom-bar {
  border-top: 0.5px solid var(--fh-border) !important;
  background: var(--fh-cream) !important;
  padding: 12px 20px !important;
  box-shadow: 0 -4px 20px rgba(46,44,42,0.08) !important;
}

/* Quantity buttons */
.qty-btn, button[onclick*="decrease"], button[onclick*="increase"] {
  background: transparent !important;
  border: 0.5px solid var(--fh-border) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  color: var(--fh-ink) !important;
  width: 32px !important;
  height: 32px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAITH HOME — PRODUCT PAGE FIX v2
   أضف هذا في نهاية CSS الحالي
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Fix 1: Send button بدون float واسع ──
   نضيق السيليكتور ليطال فورم الـ notify فقط */
form .btn.btn-primary { float: none !important; }
[class*="notify"] form .btn,
[class*="contact"] form .btn,
.js-notify-form .btn {
  float: right !important;
  margin-top: 8px !important;
}

/* ── Fix 2: List group items — reset flex ── */
.card.card-product .list-group-item {
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
}
/* السعر في المنتصف بطريقة أنظف */
.card.card-product .list-group-item strong {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STICKY BOTTOM BAR — صفحة المنتج
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* الـ Bar نفسه */
.vitrin-kit-sticky-bar,
[class*="vitrin"],
div.fixed-bottom,
.position-fixed.bottom-0,
div[style*="position: fixed"][style*="bottom"] {
  background: var(--fh-cream) !important;
  border-top: 0.5px solid var(--fh-border-soft) !important;
  box-shadow: 0 -4px 20px rgba(46,44,42,0.07) !important;
  padding: 10px 20px !important;
}

/* زر الكمية − */
button[onclick*="decrease"],
button[onclick*="Decrease"],
button[aria-label*="decrease"],
button[aria-label*="minus"] {
  background: transparent !important;
  border: 0.5px solid var(--fh-border) !important;
  border-radius: 2px !important;
  color: var(--fh-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  width: 34px !important;
  height: 36px !important;
  line-height: 1 !important;
  transition: var(--t) !important;
}

/* زر الكمية + */
button[onclick*="increase"],
button[onclick*="Increase"],
button[aria-label*="increase"],
button[aria-label*="plus"] {
  background: transparent !important;
  border: 0.5px solid var(--fh-border) !important;
  border-radius: 2px !important;
  color: var(--fh-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  width: 34px !important;
  height: 36px !important;
  line-height: 1 !important;
  transition: var(--t) !important;
}

button[onclick*="decrease"]:hover,
button[onclick*="increase"]:hover {
  background: var(--fh-ink) !important;
  color: var(--fh-cream) !important;
  border-color: var(--fh-ink) !important;
}

/* حقل الكمية */
input[name="quantity"],
input[id*="quantity"],
input[class*="quantity"] {
  border: none !important;
  border-bottom: 0.5px solid var(--fh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  text-align: center !important;
  width: 42px !important;
  box-shadow: none !important;
  color: var(--fh-ink) !important;
}

/* زر ADD TO CART في الـ Bar */
button[onclick*="productAddToCart"],
button[onclick*="AddToCart"],
[id*="add-to-cart-btn"],
.js-product-add-to-cart {
  background: var(--fh-ink) !important;
  color: var(--fh-cream) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  transition: var(--t) !important;
  float: none !important;
}
button[onclick*="productAddToCart"]:hover { background: var(--fh-gray) !important; }

/* إخفاء أيقونة السلة داخل زر ADD TO CART */
button[onclick*="productAddToCart"] img,<span class="cursor">█</span>