/* =============================================================
   DHProduct — UI Polish Layer  (loaded site-wide)
   Fixes the inconsistencies that made pages feel "elomelo":
   uneven section spacing, mismatched product cards, per-section
   inline-styled quick-buy buttons, and non-responsive grids.
   Home-only rules are scoped under `body.home`; the card / grid /
   button / badge rules are global so Shop, Category, Single-Product
   and Cart cross-sells all share one consistent look.
   Kept as a standalone file so the minified build never strips it.
   ============================================================= */

/* ===========================================================
   LAYOUT  — remove the permanent left sidebar; make the whole
   site single-column & full-width. Categories now live in an
   off-canvas drawer opened by the header hamburger (☰) or the
   "All Categories" button. Clean homepage like modern stores.
   =========================================================== */
.dhp-wrapper {
  grid-template-areas:
    "header"
    "catbar"
    "main"
    "mobile-nav" !important;
  grid-template-columns: 1fr !important;
  min-width: 0;
}

/* ---- Kill horizontal scroll on mobile ----
   The cart drawer + category sidebar are position:fixed and park OFF-SCREEN
   to the side when closed (right:-100% / left:-360px). Fixed elements still
   stretch the document's scroll width, so phones could side-scroll into empty
   space. Clip the viewport horizontally. `clip` is used first because it does
   NOT turn the page into a vertical scroll-container (so the sticky header
   keeps working); `hidden` is the fallback for older engines. */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* ---- Brand colour = the LOGO's leaf-green + gold, so the storefront body
   (product cards, prices, "Add to Cart", accents) matches the green header
   instead of the old neon-green. Scoped to the shopfront (home + WooCommerce
   pages) — dashboards/admin keep their own accent. ---- */
body.home,
body.woocommerce,
body.woocommerce-page,
body.archive.woocommerce,
body.single-product {
  --dp-primary:        #4e8b1e !important;
  --dp-primary-light:  #6aa62e !important;
  --dp-primary-dark:   #356312 !important;
  --dp-secondary:      #d89513 !important;
  --dp-secondary-light:#eaa62b !important;
  --dp-secondary-dark: #b5790c !important;
  --dp-neon-green:     #4e8b1e !important;
  --dp-on-primary:     #ffffff !important;
  --dp-on-secondary:   #3a2600 !important;
}

/* sidebar → fixed slide-in drawer on ALL breakpoints
   (uses `left` rather than transform — more reliable across renderers) */
.dhp-sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -360px !important;
  height: 100vh !important;
  width: min(88vw, 330px) !important;
  transform: none !important;
  transition: left .3s cubic-bezier(.4,0,.2,1) !important;
  z-index: var(--dp-z-modal) !important;
  box-shadow: 8px 0 40px rgba(0,0,0,.35);
  padding-top: 8px !important;
}
.dhp-sidebar.mobile-open,
.dhp-sidebar.dhp-sidebar--open { left: 0 !important; }

/* dark scrim behind the open drawer */
.dhp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: calc(var(--dp-z-modal) - 1);
}
.dhp-drawer-overlay.active { opacity: 1; visibility: visible; }

/* close (X) button injected at the top of the drawer */
.dhp-drawer-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: var(--dp-surface-alt);
  color: var(--dp-text);
  font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
}
.dhp-drawer-close:hover { background: var(--dp-primary); color: var(--dp-on-primary,#fff); }

/* keep the ☰ hamburger visible on every screen size (it was mobile-only) */
#dhp-menu-toggle { display: inline-flex !important; }

body.dhp-drawer-open { overflow: hidden; }

/* Spin-to-Win removed per request */
#dhp-spin-trigger, #dhp-spin-modal { display: none !important; }

/* ===========================================================
   HEADER  — search trigger (pill) + full-screen search popup
   =========================================================== */
.dhp-search-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 460px;
  height: 42px;
  padding: 0 16px !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-full) !important;
  background: var(--dp-surface-alt) !important;
  color: var(--dp-text-muted) !important;
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--dp-transition-fast);
}
.dhp-search-trigger:hover { border-color: var(--dp-primary) !important; color: var(--dp-text) !important; }
.dhp-search-trigger__label { font-weight: 500; }
@media (max-width: 640px) {
  .dhp-search-trigger { flex: 0 0 42px; width: 42px; max-width: 42px; justify-content: center; padding: 0 !important; }
  .dhp-search-trigger__label { display: none; }
}

.dhp-search-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: var(--dp-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(60px, 12vh, 140px) 16px 16px;
}
.dhp-search-popup.active { opacity: 1; visibility: visible; }
.dhp-search-popup__panel {
  width: min(680px, 100%);
  transform: translateY(-14px);
  transition: transform .25s ease;
}
.dhp-search-popup.active .dhp-search-popup__panel { transform: translateY(0); }
.dhp-search-popup .dhp-search { position: relative; width: 100%; }
.dhp-search-popup .dhp-search__input {
  width: 100%;
  height: 56px;
  padding: 0 52px 0 48px;
  border-radius: var(--dp-radius);
  border: 1px solid var(--dp-border-strong);
  background: var(--dp-surface);
  color: var(--dp-text);
  font-size: 1.05rem;
  box-shadow: var(--dp-shadow-card);
}
.dhp-search-popup .dhp-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--dp-text-muted); }
.dhp-search-popup__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--dp-surface-alt); color: var(--dp-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.dhp-search-popup__close:hover { background: var(--dp-primary); color: var(--dp-on-primary,#fff); }
.dhp-search-popup .dhp-search__results { position: static; margin-top: 10px; max-height: 60vh; overflow-y: auto; }

/* dark / light toggle button */
.dhp-darklight-toggle { font-size: 1rem; }

/* ===========================================================
   HOME-ONLY  — section rhythm + headers (scoped to front page)
   =========================================================== */
body.home .dhp-section {
  margin-top: clamp(28px, 5vw, 56px) !important;
  margin-bottom: 0 !important;
}
body.home .dhp-section:first-of-type { margin-top: clamp(20px, 3vw, 32px) !important; }
body.home .dhp-promo-cards-section,
body.home .dhp-countdown-strip,
body.home .dhp-campaign-banner,
body.home .dhp-promo-banners { margin-top: clamp(16px, 3vw, 28px) !important; margin-bottom: 0 !important; }

body.home .dhp-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--dp-space-lg);
  padding-bottom: var(--dp-space-sm);
  border-bottom: 1px solid var(--dp-border);
}
body.home .dhp-section__title {
  font-family: var(--dp-font-display, inherit);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.home .dhp-section__header .dhp-btn--sm { flex-shrink: 0; white-space: nowrap; }

/* ===========================================================
   GLOBAL  — product grid, responsive on every listing page
   =========================================================== */
.dhp-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}
/* keep a sensible column count even inside a sidebar layout */
@media (min-width: 561px) and (max-width: 1024px) {
  .dhp-product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
/* mobile — always 2 across like Chaldal / Meena Bazar (never 1-up) */
@media (max-width: 560px) {
  .dhp-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
}

/* ===========================================================
   GLOBAL  — product card: uniform height & baseline alignment
   =========================================================== */
.dhp-card {
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.4vw, 16px) !important;
}
.dhp-card__img-wrap { margin-bottom: 12px; }
.dhp-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  font-size: 0.92rem;
  line-height: 1.3;
  margin-bottom: 6px;
}
.dhp-card__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  margin-top: auto;                 /* pin price + actions to the card bottom */
}
.dhp-card__price { font-weight: 800; font-size: 1.05rem; color: var(--dp-primary); }
.dhp-card__price-old { font-size: 0.82rem; color: var(--dp-text-muted); text-decoration: line-through; }

/* ===========================================================
   GLOBAL  — action row: matched button heights + one quick-buy
   =========================================================== */
.dhp-card .dhp-add-to-cart {
  height: 40px;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 6px;
  padding: 0 10px !important;
}
.dhp-quick-buy-btn {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--dp-radius-sm) !important;
  background: linear-gradient(135deg, var(--dp-secondary), var(--dp-secondary-dark)) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: var(--dp-transition-fast);
}
.dhp-quick-buy-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.dhp-quick-buy-btn:disabled { opacity: .45; cursor: not-allowed; }
.dhp-card .dhp-qty { height: 40px; }

/* ===========================================================
   SINGLE PRODUCT — 2-column layout (was missing entirely, so the
   gallery + info stacked full-width and looked broken). Gallery
   left, info right on desktop; stacked on mobile; sticky gallery.
   =========================================================== */
.dhp-product-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (min-width: 993px) {
  .dhp-product-single__layout .dhp-product-gallery {
    position: sticky;
    top: calc(var(--dp-header-height, 70px) + 16px);
  }
}
@media (max-width: 992px) {
  .dhp-product-single__layout { grid-template-columns: 1fr; gap: 20px; }
}
.dhp-product-gallery__main-img { width: 100%; height: auto; border-radius: var(--dp-radius); }
.dhp-product-single__info { min-width: 0; }

/* ===========================================================
   GLOBAL  — badges: one consistent pill
   =========================================================== */
.dhp-card__badge {
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: var(--dp-radius-full);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 2;
}

/* ===========================================================
   GLOBAL  — small-screen tidy-ups
   =========================================================== */
@media (max-width: 560px) {
  .dhp-card__name { font-size: 0.82rem; min-height: 2.4em; }
  .dhp-card__price { font-size: 0.95rem; }
  .dhp-card .dhp-add-to-cart span { display: none; }  /* icon-only add btn on mobile */
  .dhp-card .dhp-add-to-cart { padding: 0 !important; }
  body.home .dhp-section__title { font-size: 1.05rem; }
}

/* ===========================================================
   HEADER — one uniform control size + overflow-proof mobile
   Every clickable header item shares the SAME 44px height and
   pill shape, so the top bar reads as one even row. On phones
   the non-essential controls fall away so it can never overflow
   (keeps: ☰  logo  search  cart  account — like Chaldal/Foodpanda).
   =========================================================== */
.dhp-header { flex-wrap: nowrap; }

/* Header + category bar content aligned to the SAME max-width as the page
   sections, so the logo lines up with a section's left edge and the account
   icon with its right edge (the bar background still spans full width). */
.dhp-header {
  padding-left: max(14px, calc((100% - var(--dp-max-width, 1400px)) / 2)) !important;
  padding-right: max(14px, calc((100% - var(--dp-max-width, 1400px)) / 2)) !important;
}
.dhp-catbar__inner {
  max-width: var(--dp-max-width, 1400px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  width: 100%;
}

.dhp-header__btn,
.dhp-header .dhp-lang-toggle,
.dhp-header #dhp-header-corporate-toggle,
.dhp-header .dhp-darklight-toggle,
.dhp-header #dhp-user-toggle,
.dhp-header #dhp-cart-toggle,
.dhp-header #dhp-wishlist-btn,
.dhp-header #dhp-menu-toggle {
  height: 44px !important;
  min-width: 44px;
  border-radius: var(--dp-radius-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .82rem;
  line-height: 1;
  margin: 0 !important;                       /* kill the ad-hoc inline margins on lang / B2B toggles */
}
/* icon-only buttons are perfect 44×44 squares-turned-circles */
.dhp-header__btn:not(.dhp-search-trigger) { width: 44px; padding: 0 !important; }
/* text pills (lang / B2B) keep the same height but auto width */
.dhp-header .dhp-lang-toggle,
.dhp-header #dhp-header-corporate-toggle { width: auto; padding: 0 12px !important; }
.dhp-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.dhp-header__user-menu > .dhp-header__btn { width: 44px; }

/* the search pill sits between logo and actions, flexes to fill */
.dhp-header .dhp-search-trigger { height: 44px !important; }

/* ---- Mobile: shed non-essential controls so the bar always fits ---- */
@media (max-width: 768px) {
  .dhp-header { padding: 0 12px !important; gap: 8px !important; }
  .dhp-header__location { display: none !important; }         /* delivery-area lives in the drawer on mobile */
  .dhp-header .dhp-lang-toggle,
  .dhp-header #dhp-header-corporate-toggle { display: none !important; }
  .dhp-header__btn,
  .dhp-header #dhp-menu-toggle,
  .dhp-header #dhp-cart-toggle,
  .dhp-header #dhp-user-toggle { height: 40px !important; min-width: 40px; width: 40px; }
}
@media (max-width: 560px) {
  .dhp-header .dhp-darklight-toggle,
  .dhp-header #dhp-wishlist-btn { display: none !important; }  /* keep only ☰ logo search cart account */
  .dhp-header__actions { gap: 6px; }
  .dhp-header__logo img { max-height: 38px !important; }
}

/* ===========================================================
   HERO — line the 2-column banner up with the category menu
   (same max-width container, centered) instead of full-bleed,
   and keep it neatly proportioned under the header on mobile.
   =========================================================== */
body.home .dhp-hero--split {
  max-width: var(--dp-max-width, 1280px);
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 900px) {
  body.home .dhp-hero--split { padding: 12px 0; gap: 12px; }
}
@media (max-width: 560px) {
  body.home .dhp-hero--split { padding: 8px 0; }
  body.home .dhp-hero--split .dhp-hero__slide,
  body.home .dhp-hero--split .dhp-hero__slider { min-height: 240px; }
}