/* =============================================================================
   BagBliss — site-wide overrides
   -----------------------------------------------------------------------------
   Yeh file theme.css ke BAAD load hoti hai (functions/enqueue/styles.php mein
   'nova-zurix-theme' par depend karti hai). layout.css theme.css se PEHLE aati
   hai, is liye wahan likhe overrides haar jate the — is liye yeh alag file hai.

   Rang theme ke apne CSS variables se aate hain, hard-code nahi.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   WooCommerce notices
   Theme "added to cart" wale message ko #3adb76 (bhadkeela green) deti thi,
   jo ek elegant bag store par bilkul ajeeb lagta hai. Yahan usay brand ke
   mutabiq saaf box bana diya hai.
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0 0 32px;
  padding: 18px 26px;
  border: 1px solid var(--site-border-color);
  border-left: 3px solid var(--site-heading-color);
  border-radius: 0;
  background: var(--site-bg-color);
  color: var(--site-heading-color);
  font-family: var(--site-main-font);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}

/* success (added to cart) — accent rang sirf patti aur tick par */
.woocommerce-message {
  border-left-color: var(--site-accent-color);
}

.woocommerce-error {
  border-left-color: #D3341F;
}

/* theme ka icon-font wala tick hata kar apna saaf tick */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: "";
  position: static;
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  padding: 0;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.woocommerce-message::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE5922' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.woocommerce-info::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE5922' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3341F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16h.01'/%3E%3C/svg%3E");
}

.woocommerce-message p,
.woocommerce-info p,
.woocommerce-error p,
.woocommerce-error li {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  padding: 0;
  color: inherit;
}

/* "View cart" / "Continue shopping" button */
.woocommerce-message .button,
.woocommerce-info .button {
  flex: 0 0 auto;
  order: 9;
  height: 42px;
  margin: 0 0 0 auto;
  padding: 0 22px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--site-heading-color) !important;
  border-radius: var(--site-button-radius);
  background: transparent;
  color: var(--site-heading-color) !important;
  font-family: var(--site-main-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background: var(--site-heading-color);
  color: var(--site-bg-color) !important;
  border-color: var(--site-heading-color) !important;
}

/* theme ke andar links (jaise "View Cart" jo button na ho) */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) {
  color: var(--site-accent-color) !important;
  border-bottom-color: var(--site-accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   MEDIA QUERIES — hamesha aakhir mein
   ========================================================================== */

@media (max-width: 640px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    flex-wrap: wrap;
    padding: 16px 18px;
    font-size: 13px;
  }

  .woocommerce-message .button,
  .woocommerce-info .button {
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------------
   Header ka account dropdown — mobile par poora page side mein scroll ho raha tha
   -----------------------------------------------------------------------------
   Dropdown position:absolute; left:-80px; width:200px par hai. Chhoti screen par
   uska dayan kinara viewport se ~18px bahar nikal jata tha, jis se poore document
   ka scrollWidth barh jata tha. Browser mein naap kar tasdeeq ki: is rule ke
   bagair 390px par scrollWidth 408 tha, is ke saath theek 390 ho jata hai.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .kitify-menu-account__box .sub-menu,
  .kitify-menu-account .sub-menu {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 24px);
  }
}

/* -----------------------------------------------------------------------------
   Shop archive toolbar — chhoti screen par bahar nikal raha tha
   -----------------------------------------------------------------------------
   Toolbar (Filters / Show 12-15-30 / Default sorting) flex-wrap: nowrap par thi.
   360px par bachon ki kul chaurai ~404px thi jabke bar sirf 310px, is liye
   sorting dropdown 69px bahar nikal jata tha. Naap kar tasdeeq ki: is ke bagair
   scrollWidth 429 tha, is ke saath theek 360.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .woocommerce-archive-toolbar {
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: 12px;
  }

  .woocommerce-archive-toolbar > * {
    min-width: 0;
  }

  .woocommerce-archive-toolbar .woocommerce-ordering {
    flex: 1 1 100%;
  }

  .woocommerce-archive-toolbar .woocommerce-ordering select,
  .woocommerce-archive-toolbar .woocommerce-ordering .select2-container {
    width: 100%;
    max-width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   Home page ka header — logo theek beech mein, menu logo par na charhe
   -----------------------------------------------------------------------------
   Home ka header alag hai (Elementor template 254): [menu] [logo] [icons].
   Designer ne 45% / 20% / 45% rakha tha, yaani logo beech mein. Masla yeh tha
   ke menu ko 550px chahiye aur 45% column chhota parta tha, to menu logo par
   charh jata tha. Pehle hal (1.0.9) ne menu ko apni chaurai de di — overlap
   khatam hua magar logo beech se hat gaya (naapa: 1440px par 200px daayen,
   1280px par 60px baayen).
   Naya hal (1.1.3): dono taraf ke columns BARABAR (flex 1 1 0) aur logo apni
   chaurai — is se logo har width par theek beech mein. Kitify ka menu 1279px
   tak hamburger hai (data-mobile-breakpoint=1279); poora menu 1280px se upar
   aata hai, is liye 1280–1599 mein menu items thore paas kiye taake aadhi jagah
   mein fit hon (naapa: 1280px par ~418px chahiye, ~435px milta hai).
   `:not(.kitify-active--mbmenu)` — hamburger wala mobile panel na chhuein.
   NOTE: IDs template 254 ki hain — header dobara banaya to naapna parega.
   Doosra header (1171) theek hai, usay chhua nahi.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .elementor-location-header .elementor-element-44aa7b1e,
  .elementor-location-header .elementor-element-2026d7bf {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
  }

  .elementor-location-header .elementor-element-2026d7bf {
    justify-content: flex-end !important;
  }

  .elementor-location-header .elementor-element-3c1272fc {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  body .elementor-254 .elementor-element.elementor-element-55faa16 .kitify-nova-menu:not(.kitify-active--mbmenu) .main-navigation .nav-menu > li > a {
    font-size: 15px;
  }

  body .elementor-254 .elementor-element.elementor-element-55faa16 .kitify-nova-menu:not(.kitify-active--mbmenu) .main-navigation .nav-menu > li > a > span {
    padding-left: 9px;
    padding-right: 9px;
  }
}

@media (min-width: 1440px) and (max-width: 1599px) {
  body .elementor-254 .elementor-element.elementor-element-55faa16 .kitify-nova-menu:not(.kitify-active--mbmenu) .main-navigation .nav-menu > li > a > span {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* -----------------------------------------------------------------------------
   Cart page par "VIEW CART" button chhupao
   Notice shop/product page par queue hoti hai. Agar customer notice dikhne se
   pehle cart par pahunch jaye to woh wahan render hoti hai — aur tab button
   customer ko usi page par bulata hai jahan woh pehle se khara hai.
   Yeh rule 640px wale media query ke BAAD hai — jaan-boojh kar. Media query
   specificity nahi barhata, is liye baad wala base rule har width par jeetta
   hai; warna mobile par width:100% wala rule chal jata.
   -------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce-message .button.wc-forward {
  display: none !important;
}


/* -----------------------------------------------------------------------------
   .bb-seo — Order Tracking, Contact Us, FAQs aur About Us par SEO content ka
   text-editor block. Elementor text-editor ke andar khula HTML hai (h2, p, ul,
   .bb-gal tasveerain), is liye theme ka 16px/0-margin h2 yahan kaafi nahi.
   -------------------------------------------------------------------------- */
.bb-seo {
  color: #5b5b5b;
  font-size: 16px;
  line-height: 1.7;
}

.bb-seo h2 {
  margin: 40px 0 14px;
  color: #111;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
}

.bb-seo h2:first-child {
  margin-top: 0;
}

.bb-seo p {
  margin: 0 0 14px;
}

.bb-seo ul {
  margin: 0 0 18px;
  padding-left: 20px;
  list-style: disc;
}

.bb-seo li {
  margin: 0 0 6px;
}

.bb-seo a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bb-seo strong {
  color: #111;
}

.bb-seo .bb-gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.bb-seo .bb-gal figure {
  margin: 0;
}

.bb-seo .bb-gal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 767px) {
  .bb-seo .bb-gal {
    grid-template-columns: repeat(2, 1fr);
  }
}