/* =====================================================================
   Primebazar premium storefront theme (version 5)
   Loaded after main.css / custom.css. Only restyles - no markup changes.
   Palette: emerald #008534 · deep #005f25 · gold #c9a227 · ivory #fafaf7
   ===================================================================== */

:root {
  --pb-emerald: #008534;
  --pb-emerald-600: #00732d;
  --pb-emerald-700: #005f25;
  --pb-emerald-50: #eaf5ee;
  --pb-gold: #c9a227;
  --pb-gold-light: #e5c158;
  --pb-gold-ink: #8a6d12;
  --pb-night: #0c1d15;
  --pb-ink: #141a17;
  --pb-graphite: #5f6763;
  --pb-muted: #8b928e;
  --pb-hairline: #e7e9e4;
  --pb-ivory: #fafaf7;
  --pb-radius: 14px;
  --pb-radius-sm: 10px;
  --pb-shadow: 0 1px 2px rgba(12, 29, 21, .04), 0 6px 18px rgba(12, 29, 21, .05);
  --pb-shadow-lg: 0 2px 6px rgba(12, 29, 21, .05), 0 22px 48px rgba(12, 29, 21, .11);
  --pb-ease: cubic-bezier(.2, .8, .2, 1);
  --pb-header-shift: 0px;
}

/* ---------- Typography & canvas ---------- */
body,
button, input, select, textarea,
.btn, .form--control, .title, p, a, li, span, label, td, th {
  font-family: 'Manrope', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  background: var(--pb-ivory);
  color: var(--pb-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', 'Poppins', system-ui, sans-serif;
  color: var(--pb-ink);
  letter-spacing: -.015em;
}

::selection { background: var(--pb-emerald); color: #fff; }

a { transition: color .2s var(--pb-ease); }

/* =====================================================================
   HEADER - compact on desktop, hides on scroll down, returns on scroll up
   ===================================================================== */
.header-area {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 991;
  background: rgba(255, 255, 255, .96) !important;
  transition: transform .38s var(--pb-ease), box-shadow .3s var(--pb-ease);
  will-change: transform;
}

.header-area.active {
  animation: none !important;
  box-shadow: 0 8px 28px rgba(12, 29, 21, .08);
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .header-area.active {
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
  }
}

.header-area.pb-header-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   The jolt at ~180px (fixed in 8.1)

   The shop's own script adds `.active` at 180px, and on that class the
   template hides the top strip while version 5 also shrank the logo and the
   padding - together about 62px. The header is sticky, so losing 62px of it
   drags every row below up the screen mid-scroll. Measured: asking for 260px
   landed at 198px.

   Animating the collapse only spreads the same 62px over a third of a second,
   so the height does not change at all any more. The header still slides out
   of the way on scroll down, which is the point of it; it simply keeps one
   height while it is on screen.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Only where the strip is shown in the first place - the template hides it
     on a phone, and that must stay hidden. */
  .header-area.active .header-top {
    display: block !important;   /* beats the template's display: none */
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-area { transition: none !important; }
}

/* Top strip */
.header-top {
  background: var(--pb-night) !important;
  border-bottom: 0 !important;
}

.header-top,
.header-top a,
.header-top span,
.header-top .select-item,
.header-top button {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 12.5px;
  letter-spacing: .01em;
}

.header-top a:hover { color: var(--pb-gold-light) !important; }

.header-top .user-account {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
  line-height: 1.4;
  transition: border-color .2s var(--pb-ease), background-color .2s var(--pb-ease);
}

.header-top .user-account:hover {
  border-color: var(--pb-gold-light) !important;
  background: rgba(255, 255, 255, .06) !important;
}

.header-top .user-account i,
.header-top .user-account .icon { color: var(--pb-gold-light) !important; background: transparent !important; }

/* the account dropdown opens on a white panel: keep its text dark */
.header-top .before-dropdown-menu a,
.header-top .before-dropdown-menu span,
.header-top .before-dropdown-menu i,
.header-top .login-user-menu a,
.header-top .login-user-menu small {
  color: var(--pb-ink) !important;
}

.header-top .login-user-menu a:hover,
.header-top .login-user-menu a.active { color: var(--pb-emerald-700) !important; }

.header-top .header-top-wrap { min-height: 34px; }

/* Middle: logo + search */
.header-middle {
  border-bottom: 1px solid var(--pb-hairline);
}

.header-wrapper .logo img {
  width: auto !important;
  object-fit: contain;
  transition: max-height .3s var(--pb-ease);
}

@media (min-width: 992px) {
  .header-middle { padding: 10px 0 !important; }
  .header-wrapper .logo img { max-height: 58px !important; max-width: 230px !important; }
}

@media (max-width: 991px) {
  .header-middle { padding: 8px 0 !important; }
  .header-wrapper .logo img { max-height: 42px !important; max-width: 170px !important; }
}

.header-search-form .form--control,
.header-form-group .form--control {
  height: 46px;
  border-radius: 999px !important;
  border: 1px solid var(--pb-hairline) !important;
  background: #f3f4f0 !important;
  padding-left: 22px !important;
  font-size: 14px;
  transition: background-color .25s var(--pb-ease), border-color .25s var(--pb-ease), box-shadow .25s var(--pb-ease);
}

.header-search-form .form--control:focus,
.header-form-group .form--control:focus {
  background: #fff !important;
  border-color: var(--pb-emerald) !important;
  box-shadow: 0 0 0 4px rgba(0, 133, 52, .12) !important;
}

.header-search-btn {
  color: var(--pb-emerald) !important;
}

.header-middle .ecommerce__icon,
.header-middle .ecommerce i {
  color: var(--pb-ink);
  transition: color .2s var(--pb-ease), transform .2s var(--pb-ease);
}

.header-middle .ecommerce:hover i { color: var(--pb-emerald); transform: translateY(-1px); }

.ecommerce__is,
.cartItemCount.ecommerce__is {
  background: var(--pb-gold) !important;
  color: var(--pb-night) !important;
  font-weight: 800;
  box-shadow: 0 0 0 2px #fff;
}

/* Bottom: navigation bar */
.header-bottom {
  background: linear-gradient(90deg, var(--pb-emerald-700) 0%, var(--pb-emerald) 55%, #07903b 100%) !important;
  position: relative;
}

.header-bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(229, 193, 88, .75), transparent);
  pointer-events: none;
}

@media (min-width: 992px) {
  .header-bottom-wrapper { min-height: 48px; }
  .header-bottom .view-category,
  .header-bottom .menu-category-btn { min-height: 48px; }
}

.header-bottom .view-category,
.header-bottom .menu-category-btn {
  background: rgba(0, 0, 0, .18) !important;
  font-weight: 700;
  letter-spacing: .01em;
}

.header-bottom .nav-link,
.header-bottom .main-menu a,
.header-bottom ul li a {
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
}

@media (min-width: 992px) {
  .header-bottom .main-menu > li > a::after,
  .header-bottom .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--pb-gold-light);
    transition: left .28s var(--pb-ease), right .28s var(--pb-ease);
  }
  .header-bottom .main-menu > li > a:hover::after,
  .header-bottom .nav-menu > li > a:hover::after { left: 12px; right: 12px; }
}

.header-bottom .cart-button {
  background: rgba(0, 0, 0, .2) !important;
  border-radius: 12px !important;
  margin: 4px 0;
}

/* Account dropdown */
.before-dropdown-menu,
.login-user-menu {
  border-radius: 14px !important;
  border: 1px solid var(--pb-hairline);
  box-shadow: var(--pb-shadow-lg) !important;
  overflow: hidden;
}

.login-user-menu li a {
  border-radius: 8px;
  transition: background-color .2s var(--pb-ease), color .2s var(--pb-ease);
}

.login-user-menu li a:hover,
.login-user-menu li a.active {
  background: var(--pb-emerald-50) !important;
  color: var(--pb-emerald-700) !important;
}

/* Category dropdown / left category menu */
.category-dropdown-menu,
.left-site-category {
  border-radius: 0 0 var(--pb-radius) var(--pb-radius) !important;
  border: 1px solid var(--pb-hairline) !important;
  box-shadow: var(--pb-shadow) !important;
  background: #fff;
}

.left-site-category .nav-link,
.category-dropdown .nav-link {
  transition: color .2s var(--pb-ease), padding-left .25s var(--pb-ease), background-color .2s;
}

.left-site-category .nav-link:hover,
.category-dropdown .nav-link:hover {
  color: var(--pb-emerald) !important;
  padding-left: 22px;
  background: #f6faf7;
}

/* =====================================================================
   HERO
   ===================================================================== */
.slider-wrapper,
.hero-banner,
.hero-banner img,
.banner-slider .slide-item img {
  border-radius: 16px !important;
  overflow: hidden;
}

.hero-slider .owl-nav button {
  width: 42px; height: 42px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--pb-shadow);
  color: var(--pb-ink) !important;
}

/* Banner shows its first slide immediately instead of an empty box while
   the slider script loads (owl-carousel hides everything until then). */
.banner-slider.owl-carousel:not(.owl-loaded) { display: block; }
.banner-slider.owl-carousel:not(.owl-loaded) .slide-item + .slide-item { display: none; }

.banner-slider img,
.hero-banner img {
  height: auto;
  background: #f1f2ee;
}

/* =====================================================================
   IMAGES - never show the "default" picture or a size placeholder.
   While a lazy image waits for its real file (or when a file is missing)
   it stays invisible over a soft shimmer; the real photo fades in.
   ===================================================================== */
img[src$="/assets/images/default.png"],
img[src*="/placeholder-image/"] {
  opacity: 0 !important;
}

img.lazyload,
.owl-lazy {
  transition: opacity .45s var(--pb-ease);
}

.product-thumb:has(img[src$="/assets/images/default.png"]),
.slide-item:has(img[src*="/placeholder-image/"]),
.category-card:has(img[src$="/assets/images/default.png"]),
.brand-card:has(img[src$="/assets/images/default.png"]),
a:has(> img[src$="/assets/images/default.png"]),
div:has(> img.lazyload[src$="/assets/images/default.png"]) {
  background: linear-gradient(100deg, #f1f2ee 30%, #fafaf7 50%, #f1f2ee 70%) !important;
  background-size: 300% 100% !important;
  animation: pb-shimmer 1.4s ease-in-out infinite;
}

/* Real file missing on the server: plain tile, no endless shimmer */
.product-thumb:has(img.pb-img-missing),
a:has(> img.pb-img-missing),
div:has(> img.pb-img-missing) {
  animation: none !important;
  background: #f4f5f1 !important;
}

@keyframes pb-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-thumb:has(img[src$="/assets/images/default.png"]),
  div:has(> img.lazyload[src$="/assets/images/default.png"]) { animation: none; }
}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section-header .title {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pb-ink);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 0;
}

.section-header .title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pb-gold), var(--pb-gold-light));
}

.section-header:not(.left-style) .title::after { left: 50%; transform: translateX(-50%); }

/* =====================================================================
   PRODUCT CARD
   ===================================================================== */
.product-card {
  background: #fff !important;
  border: 1px solid var(--pb-hairline) !important;
  border-radius: var(--pb-radius) !important;
  overflow: hidden;
  transition: transform .38s var(--pb-ease), box-shadow .38s var(--pb-ease), border-color .38s var(--pb-ease);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pb-shadow-lg);
  border-color: rgba(0, 133, 52, .18) !important;
}

.product-card .product-thumb {
  background: #fff;
  overflow: hidden;
}

.product-card .product-thumb img {
  transition: transform .7s var(--pb-ease);
}

.product-card:hover .product-thumb img { transform: scale(1.06); }

.product-card .product-content { padding: 14px 16px 16px; }

.product-card .title,
.product-card .title a {
  font-weight: 600 !important;
  color: var(--pb-ink) !important;
  line-height: 1.4;
}

.product-card .title a:hover { color: var(--pb-emerald) !important; }

.product-card .price,
.product-details .price,
.price {
  color: var(--pb-emerald-700) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.product-card .price del,
.price del {
  color: var(--pb-muted) !important;
  font-weight: 500 !important;
  margin-left: 6px;
  font-size: .86em;
}

.ratings i, .ratings-area i { color: var(--pb-gold) !important; }

.product-card-buttons button,
.product-card-buttons a {
  background: #fff !important;
  color: var(--pb-ink) !important;
  border-radius: 50% !important;
  box-shadow: var(--pb-shadow);
  transition: background-color .2s var(--pb-ease), color .2s var(--pb-ease), transform .2s var(--pb-ease);
}

.product-card-buttons button:hover,
.product-card-buttons a:hover {
  background: var(--pb-emerald) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.add-to-cart-btn,
.product-card .addToCart {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  transition: background-color .25s var(--pb-ease), color .25s var(--pb-ease), box-shadow .25s var(--pb-ease), transform .25s var(--pb-ease);
}

.add-to-cart-btn:hover,
.product-card .addToCart:hover {
  background: var(--pb-emerald) !important;
  border-color: var(--pb-emerald) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 133, 52, .25);
}

.discount-badge,
.product-badge,
.offer-badge,
.badge--base {
  background: linear-gradient(135deg, var(--pb-gold), var(--pb-gold-light)) !important;
  color: var(--pb-night) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
}

/* =====================================================================
   BUTTONS & FORMS
   ===================================================================== */
.btn { border-radius: var(--pb-radius-sm); font-weight: 700; letter-spacing: .01em; }

.btn--base,
.cmn-btn {
  background: linear-gradient(135deg, #009a3d 0%, var(--pb-emerald-700) 100%) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0, 133, 52, .22);
  transition: transform .22s var(--pb-ease), box-shadow .22s var(--pb-ease), filter .22s;
}

.btn--base:hover,
.cmn-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 133, 52, .30);
  filter: brightness(1.04);
  color: #fff !important;
}

.btn--base:active { transform: translateY(0); }

.btn-outline--base {
  border-radius: 12px !important;
  border-color: var(--pb-emerald) !important;
  color: var(--pb-emerald) !important;
}

.btn-outline--base:hover { background: var(--pb-emerald) !important; color: #fff !important; }

.form--control,
.form-control,
.form-select,
.select2-container .select2-selection {
  border-radius: var(--pb-radius-sm) !important;
  border-color: var(--pb-hairline) !important;
  transition: border-color .2s var(--pb-ease), box-shadow .2s var(--pb-ease);
}

.form--control:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--pb-emerald) !important;
  box-shadow: 0 0 0 4px rgba(0, 133, 52, .12) !important;
}

.form-check-input:checked { background-color: var(--pb-emerald) !important; border-color: var(--pb-emerald) !important; }

.form--label, .form-label, label { font-weight: 600; color: #2b332f; }

/* =====================================================================
   CUSTOMER ACCOUNT (dashboard, wallet, orders...)
   ===================================================================== */
.dashboard-sidebar,
.user-sidebar,
.user-profile-sidebar,
.sidebar-menu-wrapper {
  background: #fff;
  border: 1px solid var(--pb-hairline) !important;
  border-radius: 16px !important;
  box-shadow: var(--pb-shadow);
}

.dashboard-sidebar li a,
.user-sidebar li a,
.sidebar-menu-wrapper li a {
  border-radius: 10px;
  transition: background-color .2s var(--pb-ease), color .2s var(--pb-ease);
}

.dashboard-sidebar li a.active,
.dashboard-sidebar li a:hover,
.user-sidebar li a.active,
.user-sidebar li a:hover,
.sidebar-menu-wrapper li a.active,
.sidebar-menu-wrapper li a:hover {
  background: var(--pb-emerald-50);
  color: var(--pb-emerald-700) !important;
}

.card,
.custom--card,
.dashboard-widget,
.order-track-item {
  border: 1px solid var(--pb-hairline) !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: var(--pb-shadow);
}

.card .card-header,
.custom--card .card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--pb-hairline) !important;
}

.dashboard-widget { transition: transform .3s var(--pb-ease), box-shadow .3s var(--pb-ease); }
.dashboard-widget:hover { transform: translateY(-2px); box-shadow: var(--pb-shadow-lg); }

/* Tables */
.table--responsive--md thead th,
.custom--table thead th,
.table thead th {
  background: #f6f7f3 !important;
  color: var(--pb-graphite) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--pb-hairline) !important;
}

.custom--table tbody tr:hover,
.table tbody tr:hover { background: #f7fbf8; }

.badge { border-radius: 999px !important; font-weight: 700; letter-spacing: .02em; }

/* Pagination */
.pagination .page-item .page-link {
  border-radius: 10px !important;
  margin: 0 3px;
  border-color: var(--pb-hairline) !important;
  color: var(--pb-ink);
}

.pagination .page-item.active .page-link {
  background: var(--pb-emerald) !important;
  border-color: var(--pb-emerald) !important;
  color: #fff !important;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer,
.footer-section,
.footer-area {
  background: var(--pb-night) !important;
  position: relative;
}

footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pb-gold), transparent);
  opacity: .7;
}

footer .footer-top,
footer .footer-middle,
footer .footer-copyright,
footer .copyright-area {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

footer,
footer p, footer span, footer li, footer a, footer label,
footer .widget-contact, footer .copyright-area {
  color: rgba(255, 255, 255, .72) !important;
}

footer .title,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

footer a:hover { color: var(--pb-gold-light) !important; }

footer .subscribe-form input,
footer .subscribe-form .form--control {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

footer .subscribe-form input::placeholder { color: rgba(255, 255, 255, .5); }

footer .subscribe-btn {
  background: linear-gradient(135deg, var(--pb-gold), var(--pb-gold-light)) !important;
  color: var(--pb-night) !important;
  border-radius: 999px !important;
  font-weight: 800;
}

footer .social-icons a {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: transparent !important;
  border-radius: 50% !important;
  transition: background-color .2s var(--pb-ease), border-color .2s var(--pb-ease), color .2s;
}

footer .social-icons a:hover {
  background: var(--pb-gold) !important;
  border-color: var(--pb-gold) !important;
  color: var(--pb-night) !important;
}

footer .social-icons a:hover i { color: var(--pb-night) !important; }

/* =====================================================================
   MOBILE BOTTOM BAR
   ===================================================================== */
.mobile-menu-icons {
  background: rgba(12, 29, 21, .96) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid rgba(229, 193, 88, .28);
  box-shadow: 0 -8px 24px rgba(12, 29, 21, .18);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-menu-icons a,
.mobile-menu-icons i,
.mobile-menu-icons span,
.mobile-menu-icons button {
  color: rgba(255, 255, 255, .8) !important;
}

.mobile-menu-icons li + li { border-color: rgba(255, 255, 255, .1) !important; }

.mobile-menu-icons a:active i,
.mobile-menu-icons a:hover i,
.mobile-menu-icons a:hover span { color: var(--pb-gold-light) !important; }

/* =====================================================================
   SMALL THINGS
   ===================================================================== */
.scrollToTop {
  background: var(--pb-emerald) !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 24px rgba(0, 133, 52, .3);
}

.cookies-card,
.cookie-card {
  border-radius: 16px !important;
  border: 1px solid var(--pb-hairline);
  box-shadow: var(--pb-shadow-lg) !important;
}

.modal-content {
  border-radius: 16px !important;
  border: 0;
  box-shadow: 0 30px 80px rgba(12, 29, 21, .25);
}

.breadcrumb,
.breadcrumb-area {
  background: transparent !important;
}

img.lazyload,
img.lazyloaded { transition: opacity .35s var(--pb-ease); }

@media (prefers-reduced-motion: reduce) {
  .header-area,
  .product-card,
  .product-card .product-thumb img,
  .btn--base { transition: none !important; }
  .product-card:hover,
  .product-card:hover .product-thumb img { transform: none !important; }
}