/* ==========================================================================
   Habooba brand polish
   FMCG / daily-essentials & wholesale food — green / gold / cream theme
   Loaded AFTER front/css/styles.php so these rules win the cascade for any
   conflicting selectors (used deliberately to override legacy defaults
   such as footer text/link colors and product-card visuals).
   ========================================================================== */

:root {
  --brand-green: #1d5b3b;
  --brand-green-dark: #123c29;
  --brand-gold: #b88734;
  --cream: #f7f0e4;
  --paper: #fffaf2;
  --ink: #28241f;
  --muted: #6e655a;
  --line: #dfd1bd;
  --soft-shadow: 0 14px 34px rgba(43, 31, 16, 0.12);
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */
body {
  background-color: var(--cream);
  color: var(--ink);
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--brand-green-dark);
}

a {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.logo-header {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(43, 31, 16, 0.06);
}

.logo-header .logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.logo-header .search-box .search-form button {
  background-color: var(--brand-green);
}

.logo-header .search-box .search-form button:hover {
  background-color: var(--brand-gold);
}

/* Category / main menu bar (background comes from DB menu_color) */
.categories_title {
  background-color: var(--brand-green);
}

.categories_menu_inner > ul > li > a,
.categories_menu_inner > ul > li > .link-area > span > a,
.categories_menu_inner > ul > li > .link-area a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.categories_menu_inner > ul > li > a:hover,
.categories_menu_inner > ul > li > .link-area > span > a:hover,
.categories_mega_menu li a:hover {
  color: var(--brand-gold) !important;
}

nav .menu li a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

nav .menu li a:hover {
  color: var(--brand-gold) !important;
}

/* ---------------------------------------------------------------------- */
/* Section titles                                                         */
/* ---------------------------------------------------------------------- */
.section-top .section-title {
  font-weight: 700;
  color: var(--brand-green-dark);
  position: relative;
  padding-bottom: 12px;
}

.section-top .section-title::after {
  background-color: var(--brand-gold) !important;
}

/* ---------------------------------------------------------------------- */
/* Product cards                                                          */
/* ---------------------------------------------------------------------- */
.trending .item,
.categori-item .item,
.sub-categori .right-area .categori-item-area .item,
.flash-deals .flas-deal-slider .item {
  background-color: var(--paper);
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(43, 31, 16, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.trending .item:hover,
.categori-item .item:hover,
.sub-categori .right-area .categori-item-area .item:hover,
.flash-deals .flas-deal-slider .item:hover {
  box-shadow: var(--soft-shadow);
  transform: translateY(-3px);
}

/* Gap between cards inside the owl sliders (Featured / Flash Deal) */
.trending .item,
.flash-deals .flas-deal-slider .item {
  display: block;
  margin: 6px 9px;
}

.trending .item .info .price,
.categori-item .item .info .price,
.sub-categori .right-area .categori-item-area .item .info .price,
.flash-deals .flas-deal-slider .item .price .new-price,
.product-details-page .right-area .product-info .product-price .price {
  color: var(--brand-green) !important;
  font-weight: 700;
}

/* Sale / discount badges */
.trending .item .item-img .sale,
.trending .item .item-img .discount,
.categori-item .item .item-img .sale,
.categori-item .item .item-img .discount,
.sub-categori .right-area .categori-item-area .item .item-img .sale,
.sub-categori .right-area .categori-item-area .item .item-img .discount,
.flash-deals .flas-deal-slider .item .item-img .discount {
  background-color: var(--brand-gold) !important;
  color: #ffffff !important;
}

.trending .item .item-img .sale::before,
.trending .item .item-img .discount::before,
.categori-item .item .item-img .sale::before,
.categori-item .item .item-img .discount::before,
.sub-categori .right-area .categori-item-area .item .item-img .sale::before,
.sub-categori .right-area .categori-item-area .item .item-img .discount::before,
.flash-deals .flas-deal-slider .item .item-img .discount::before {
  border-bottom-color: var(--brand-gold) !important;
}

/* ---------------------------------------------------------------------- */
/* Buttons: Add To Cart / Buy Now / Subscribe                             */
/* ---------------------------------------------------------------------- */
.add-to-cart-btn,
.item .add-to-cart-btn,
.mybtn1,
.mybtn2,
.order-box .order-btn,
.login-btn,
.login-area .submit-btn,
.contact-us .left-area .contact-form .submit-btn,
.sub-categori .modal .contact-form .submit-btn,
.message-modal .modal .contact-form .submit-btn,
#product-details-tab #comment-area .write-comment-area .submit-btn,
#product-details-tab #replay-area .write-comment-area .submit-btn,
.product-details-page #coment-area .write-comment-area .submit-btn,
a.sell-btn,
.subscribePreloader__text {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: #ffffff !important;
  border-radius: 6px;
  box-shadow: var(--soft-shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.add-to-cart-btn:hover,
.item .add-to-cart-btn:hover,
.mybtn1:hover,
.mybtn2:hover,
.order-box .order-btn:hover,
.login-btn:hover,
.login-area .submit-btn:hover,
.contact-us .left-area .contact-form .submit-btn:hover,
#product-details-tab #comment-area .write-comment-area .submit-btn:hover,
#product-details-tab #replay-area .write-comment-area .submit-btn:hover,
a.sell-btn:hover,
.subscribePreloader__text:hover {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(184, 135, 52, 0.25);
}

.product-details-page .right-area .product-info .info-meta-3 .meta-list li.addtocart a {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  border-radius: 6px;
}

.product-details-page .right-area .product-info .info-meta-3 .meta-list li.addtocart a:hover {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.footer {
  background-color: var(--brand-green-dark);
}

.footer .footer-widget .title {
  color: var(--cream);
}

.footer .footer-info-area .text p {
  color: var(--cream) !important;
}

.footer .footer-widget ul li a,
.footer .footer-widget ul li a i,
.info-link-widget .link-list li a,
.info-link-widget .link-list li a i,
.footer .recent-post-widget .post-list li .post .post-details .post-title,
.footer .recent-post-widget .post-list li .post .post-details .date {
  color: var(--cream);
}

.footer .footer-widget ul li a:hover,
.info-link-widget .link-list li a:hover,
.info-link-widget .link-list li a:hover i {
  color: var(--brand-gold) !important;
}

.footer .fotter-social-links ul li a {
  background-color: rgba(247, 240, 228, 0.12);
  color: var(--cream);
}

.footer .fotter-social-links ul li a:hover {
  background-color: var(--brand-gold) !important;
  color: #ffffff !important;
}

/* Footer logo chip so a dark/brown-text logo reads on the dark-green footer */
.footer .footer-info-area .footer-logo {
  display: inline-block;
  background-color: var(--cream);
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: var(--soft-shadow);
}

.footer .footer-info-area .footer-logo img {
  max-width: 160px;
  max-height: 44px;
  object-fit: contain;
}

/* Copyright bar */
.footer .copy-bg {
  background-color: var(--brand-green-dark);
  border-top: 1px solid rgba(247, 240, 228, 0.15);
}

.footer .copy-bg .content .content p {
  color: var(--cream) !important;
}

.footer .copy-bg .content .content a {
  color: var(--brand-gold) !important;
}

/* ============================================================
   Clickable hero slides (Habooba) — image-only banners
   ============================================================ */
.intro-content { position: relative; }
.habooba-slide-link { position: absolute; inset: 0; z-index: 6; display: block; }

/* ============================================================
   Featured category cards (Habooba)
   ============================================================ */
.slider-buttom-category .single-category {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper, #fffaf2);
  border: 1px solid var(--line, #dfd1bd);
  border-radius: 10px; padding: 14px 16px; min-height: 94px;
  box-shadow: 0 6px 18px rgba(43,31,16,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.slider-buttom-category .single-category:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(43,31,16,.14);
  border-color: var(--brand-gold, #b88734);
}
.slider-buttom-category .single-category .left .title {
  color: var(--brand-green-dark, #123c29); font-weight: 700; font-size: 16px; margin: 0 0 4px;
}
.slider-buttom-category .single-category .left .count {
  color: var(--muted, #6e655a); font-size: 12px; margin: 0;
}
.slider-buttom-category .single-category .right { flex: 0 0 auto; }
.slider-buttom-category .single-category .right img {
  width: 68px; height: 68px; object-fit: cover; border-radius: 8px; display: block;
}
.slider-buttom-category .sc-common-padding { margin-bottom: 16px; }
.slider-buttom-category .row { justify-content: center; }

/* ============================================================
   Button hierarchy: Add To Cart = primary (solid green),
   Buy Now = secondary (ghost outline -> gold on hover)
   ============================================================ */
.add-to-cart-btn.add-to-cart-quick,
.item .add-to-cart-btn.add-to-cart-quick {
  background-color: transparent !important;
  border: 1px solid var(--brand-green) !important;
  color: var(--brand-green) !important;
  box-shadow: none !important;
}
.add-to-cart-btn.add-to-cart-quick:hover,
.item .add-to-cart-btn.add-to-cart-quick:hover {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #17251e !important;
}

/* Buy Now: text only (no cart icon) */
.add-to-cart-btn.add-to-cart-quick i { display: none; }

/* Subtle separator between product image and details */
.trending .item .info,
.categori-item .item .info,
.sub-categori .right-area .categori-item-area .item .info,
.flash-deals .flas-deal-slider .item .info {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* Footer contact-details widget */
.footer .contact-widget .contact-list { list-style: none; padding: 0; margin: 0; }
.footer .contact-widget .contact-list li {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 13px; color: rgba(255,255,255,.82);
  font-size: 14px; line-height: 1.55;
}
.footer .contact-widget .contact-list li i {
  color: var(--brand-gold, #b88734); margin-top: 3px; flex: 0 0 auto; width: 16px; text-align: center;
}
.footer .contact-widget .contact-list li a { color: rgba(255,255,255,.82); transition: color .18s ease; }
.footer .contact-widget .contact-list li a:hover { color: var(--brand-gold, #b88734); }

/* Hero slide text (admin-driven): keep legible over photography */
.intro-content .slider-content .title,
.intro-content .slider-content .subtitle,
.intro-content .slider-content .text {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.intro-content .slider-content .subtitle { letter-spacing: .12em; text-transform: uppercase; }

/* Scrim behind hero copy — only on slides that carry text */
.intro-content.has-copy::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,60,41,.78) 0%, rgba(18,60,41,.50) 32%, rgba(18,60,41,0) 64%);
}
.intro-content.has-copy .container { position: relative; z-index: 2; }
.intro-content .slider-content .title { line-height: 1.12; margin-bottom: 14px; }
.intro-content .slider-content .subtitle { margin-bottom: 10px; }
.intro-content .slider-content .text { max-width: 520px; line-height: 1.6; margin-bottom: 22px; }

/* "Our Products" full-catalog grid (not a carousel).
   Uses CSS grid so the outer cards sit flush with the section title/underline
   instead of being inset by Bootstrap's column padding. */
.our-products .container > .row + .row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-left: -15px;
  margin-right: -15px;
}
.our-products .op-col { display: flex; padding: 0; margin: 0; }
.our-products .op-col > .item { margin: 0 !important; width: 100%; }

@media (max-width: 1199.98px) {
  .our-products .container > .row + .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .our-products .container > .row + .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .our-products .container > .row + .row { gap: 14px; }
}

/* Breathing room below the product grid (it butted straight into the
   dark services strip, which read as a collision). */
.our-products { padding-bottom: 56px; }
@media (max-width: 767.98px) {
  .our-products { padding-bottom: 36px; }
}

/* ============================================================
   Brand preloader — CSS spinner (replaces the legacy purple/pink GIF)
   ============================================================ */
#preloader.preloader {
  background: var(--cream, #f7f0e4) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* main.js hides the preloader by adding .hide — guarantee it regardless
   of whether the theme still ships a .hide utility. */
#preloader.hide { display: none !important; }

.hb-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(29, 91, 59, 0.16);
  border-top-color: var(--brand-green, #1d5b3b);
  border-right-color: var(--brand-gold, #b88734);
  animation: hb-spin 0.9s linear infinite;
  will-change: transform;
}
@keyframes hb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hb-spinner { animation-duration: 2.4s; }
}

/* Legacy GIF overlay loaders (.gocover on contact/product forms,
   #ajaxLoader on category filtering). Drop the GIF but keep the dark
   translucent backdrop from their inline background-color, and draw the
   brand spinner via ::after. */
/* NOTE: never set `display` here. These overlays are shown/hidden by the
   theme (e.g. `.categori-item-area .ajax-loader { display: none }` plus
   jQuery show/fadeOut). An #id selector here would outrank that and pin
   them permanently visible. Only the background image is overridden, and
   the spinner is centred with offsets (not transform, which the spin
   animation already uses). */
.gocover,
.ajax-loader,
#ajaxLoader {
  background-image: none !important;
}
.gocover::after,
.ajax-loader::after,
#ajaxLoader::after {
  content: "";
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
  border-right-color: var(--brand-gold, #b88734);
  animation: hb-spin 0.9s linear infinite;
}

/* Spinners that sit inline in content (homepage #extraData, modals) */
#extraData .hb-spinner,
.submit-loader .hb-spinner { margin: 28px auto; }

/* Category listing grid: match the homepage "Our Products" 24px rhythm.
   The theme puts .remove-padding (padding:0) on the product columns, so the
   cards butt together. Restore 12px gutters (=24px between cards) and pull
   the row by the same amount so the outer cards stay flush with the column. */
#ajaxContent { margin-left: -12px; margin-right: -12px; }
#ajaxContent > .remove-padding {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}

/* Category page: title on the left, sort control on the right */
.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.category-head .category-title {
  margin: 0;
  font-weight: 700;
  color: var(--brand-green-dark, #123c29);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
}
.category-head .item-filter { margin-bottom: 0; }
.category-head .item-filter .filter-list { float: none; margin-bottom: 0; }
@media (max-width: 575.98px) {
  .category-head { gap: 10px; }
}

/* Header alignment: the theme hardcodes padding-top:35px on the search
   column to fake vertical centring against the original (taller) logo.
   Our logo is capped at 48px, so that offset pushed the search bar out of
   line. Drop the magic offset and centre the row properly instead. */
.logo-header .row { align-items: center; }
.logo-header .row > [class*="col-"] { padding-top: 0; padding-bottom: 0; }
.logo-header { padding-top: 16px; padding-bottom: 16px; }

/* Retail pack sizes: keep product names clean and make the available
   variants scannable without turning every option into a heavy badge. */
.habooba-product-sizes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: 24px;
  margin: 4px 0 10px;
  color: #62675f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.habooba-product-sizes span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.habooba-product-sizes span + span::before {
  content: "";
  width: 1px;
  height: 12px;
  margin: 0 10px;
  background: rgba(184, 135, 52, 0.55);
}
.item.list-group-item .habooba-product-sizes {
  justify-content: flex-start;
}

/* Keep current and previous prices on one line. Long product names retain
   the theme's fixed two-line space, so every size row stays aligned. */
.item .info .price {
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@media (max-width: 575.98px) {
  .item .info {
    padding-left: 10px;
    padding-right: 10px;
  }
  .item .info .price {
    font-size: 16px !important;
  }
  .habooba-product-sizes {
    font-size: 11px;
  }
  .habooba-product-sizes span + span::before {
    margin: 0 6px;
  }
}

/* Checkout selects do not inherit the theme's 10px input margin. Keep the
   delivery/pickup row separated from the name and phone fields below it. */
.checkout-area .billing-address .checkout-select-field {
  padding-bottom: 10px;
}

/* About page: an editorial reading width and deliberate type hierarchy.
   CMS content previously inherited the theme's display-size h2 and was
   stretched across the full container, making the page difficult to scan. */
.about--about {
  padding: clamp(52px, 6vw, 84px) 0 clamp(72px, 8vw, 112px);
}
.about--about .about-info {
  max-width: 960px;
  margin: 0 auto;
}
.about--about .about-info > .title {
  position: relative;
  margin: 0 0 32px;
  padding-bottom: 20px;
  color: var(--brand-green-dark, #123c29);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.about--about .about-info > .title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 54px;
  height: 3px;
  background: var(--brand-gold, #b88734);
}
.about--about .habooba-about-copy {
  color: #27372f;
  font-size: 17px;
  line-height: 1.78;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
.about--about .habooba-about-copy > p {
  max-width: 72ch;
  margin: 0;
  color: #47554e;
  font-size: 17px;
  line-height: 1.78;
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
.about--about .habooba-about-copy > p:first-child {
  max-width: 68ch;
  color: #24372e;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.7;
}
.about--about .habooba-about-copy > p:first-child strong {
  color: var(--brand-green-dark, #123c29);
  font-weight: 700;
}
.about--about .habooba-about-copy h2 {
  max-width: 24ch;
  margin: 50px 0 14px;
  color: var(--brand-green-dark, #123c29);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.about--about .habooba-about-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 30px;
  max-width: 900px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.about--about .habooba-about-copy li {
  position: relative;
  padding: 14px 16px 14px 30px;
  border-left: 2px solid rgba(184, 135, 52, 0.55);
  color: #47554e;
  background: rgba(255, 255, 255, 0.34);
  font-size: 15px;
  line-height: 1.6;
}
.about--about .habooba-about-copy li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-green, #17613f);
}
.about--about .habooba-about-copy li strong {
  color: var(--brand-green-dark, #123c29);
  font-weight: 700;
}
.about--about .habooba-about-copy > p:last-child {
  margin-top: 50px;
  padding: 22px 26px;
  border-left: 3px solid var(--brand-gold, #b88734);
  color: var(--brand-green-dark, #123c29);
  background: rgba(255, 255, 255, 0.42);
  font-size: 18px;
}

@media (max-width: 767.98px) {
  .about--about .about-info > .title {
    margin-bottom: 26px;
  }
  .about--about .habooba-about-copy h2 {
    margin-top: 40px;
  }
  .about--about .habooba-about-copy ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .about--about .habooba-about-copy > p,
  .about--about .habooba-about-copy > p:first-child {
    font-size: 16px;
    line-height: 1.72;
  }
  .about--about .habooba-about-copy > p:last-child {
    margin-top: 40px;
    padding: 18px 20px;
  }
}