/* NS Store Product Visual + Dark Mode v1
   Scope: product/category listing and product detail only.
   Does NOT target header, cart header, account menu, top menu or footer. */

:root {
  --ns-blue: #1f6fb2;
  --ns-green: #6BAA3A;
  --ns-orange: #E8460A;
  --ns-yellow: #F0B429;
  --ns-text: #1a2332;
  --ns-muted: #6b7280;
  --ns-line: #e5e9ef;
  --ns-card: #ffffff;
  --ns-dark-bg: #0d1117;
  --ns-dark-card: #161b22;
  --ns-dark-card-2: #1c2330;
  --ns-dark-line: #30363d;
  --ns-dark-text: #f0f6ff;
  --ns-dark-muted: #9aa4b2;
}

/* =========================================================
   1) BUTTONS: modernize only product/card buttons
   ========================================================= */
body#category .product-container .functional-buttons,
body#product .product-container .functional-buttons {
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-content: center !important;
  clear: both !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body#category .product-container .functional-buttons .cart,
body#product .product-container .functional-buttons .cart,
body#category .product-container .functional-buttons .view,
body#product .product-container .functional-buttons .view {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body#category .product-container .ajax_add_to_cart_button,
body#category .product-container .lnk_view,
body#category .product-container .button,
body#category .product-container .btn,
body#product .product-container .ajax_add_to_cart_button,
body#product .product-container .lnk_view,
body#product .product-container .button,
body#product .product-container .btn {
  min-height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  white-space: normal !important;
  text-transform: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease !important;
}

body#category .product-container .ajax_add_to_cart_button,
body#product .product-container .ajax_add_to_cart_button {
  background: linear-gradient(135deg, var(--ns-green), #5a9430) !important;
  color: #fff !important;
  border-color: rgba(107,170,58,.9) !important;
}

body#category .product-container .view .button,
body#category .product-container .view .btn,
body#product .product-container .view .button,
body#product .product-container .view .btn {
  background: #f7fafc !important;
  color: #1f6fb2 !important;
  border-color: #d6e0ea !important;
}

body#category .product-container .ajax_add_to_cart_button:hover,
body#product .product-container .ajax_add_to_cart_button:hover,
body#category .product-container .view .button:hover,
body#category .product-container .view .btn:hover,
body#product .product-container .view .button:hover,
body#product .product-container .view .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}

body#product #add_to_cart,
body#product #add_to_cart.buttons_bottom_block {
  display: block !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

body#product #add_to_cart button.exclusive,
body#product #add_to_cart .exclusive,
body#product .box-cart-bottom button[name="Submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(107,170,58,.95) !important;
  background: linear-gradient(135deg, var(--ns-green), #4f8f2f) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
  box-shadow: 0 12px 24px rgba(107,170,58,.22) !important;
}

body#product #add_to_cart button.exclusive:hover,
body#product #add_to_cart .exclusive:hover,
body#product .box-cart-bottom button[name="Submit"]:hover {
  background: linear-gradient(135deg, #77b946, #4b852b) !important;
  box-shadow: 0 14px 28px rgba(107,170,58,.28) !important;
}

/* =========================================================
   2) CARD LAYOUT: prevent button overlap with descriptions
   ========================================================= */
body#category .product-container.product-block,
body#product .product-container.product-block {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 360px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--ns-line) !important;
  background: var(--ns-card) !important;
}

body#category .product-container .right-block,
body#product .product-container .right-block {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 12px 12px 14px !important;
  background: transparent !important;
}

body#category .product-container .product-meta,
body#product .product-container .product-meta {
  flex: 1 1 auto !important;
  min-height: 118px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#category .product-container h5.name,
body#product .product-container h5.name {
  min-height: 40px !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}

body#category .product-container .product-name,
body#product .product-container .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--ns-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  min-height: 32px !important;
}

body#category .product-container .product-desc,
body#product .product-container .product-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--ns-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  min-height: 34px !important;
  max-height: 38px !important;
  margin: 0 !important;
}

body#category .product-container .left-block,
body#product .product-container .left-block {
  flex: 0 0 auto !important;
  background: #fff !important;
}

body#category .product-container .product-image-container,
body#product .product-container .product-image-container {
  border: 0 !important;
  background: #fff !important;
}

/* Avoid old hover overlay covering text/buttons */
body#category .product-container .action,
body#product .product-container .action {
  pointer-events: none !important;
}
body#category .product-container .action .quick-view,
body#product .product-container .action .quick-view {
  pointer-events: auto !important;
}

/* =========================================================
   3) PRODUCT DETAIL: visual structure + dark mode
   ========================================================= */
body#product .primary_block,
body#product .pb-left-column .container-left,
body#product .pb-center-column,
body#product .pb-right-column,
body#product .box-info-product,
body#product #image-block,
body#product #views_block,
body#product .tab-content,
body#product .page-product-box,
body#product .page-product-box .rte,
body#product .more_info_block,
body#product .nav-tabs,
body#product #usefull_link_block,
body#product .blockproductscategory,
body#product .products_block,
body#product #productscategory_list .block_content,
body#product #productscategory_list .carousel-inner {
  border-radius: 14px !important;
}

body#product .pb-left-column .container-left,
body#product .pb-center-column,
body#product .box-info-product,
body#product .tab-content,
body#product .page-product-box,
body#product #usefull_link_block,
body#product #productscategory_list .block_content {
  background: #ffffff !important;
  border: 1px solid var(--ns-line) !important;
}

body#product .pb-left-column .container-left { padding: 16px !important; }
body#product .pb-center-column { padding: 18px !important; }
body#product .box-info-product { padding: 16px !important; margin-top: 14px !important; }
body#product #usefull_link_block { padding: 10px 14px !important; margin-top: 12px !important; }
body#product .tab-content { padding: 18px !important; margin-top: 0 !important; }

body#product .pb-center-column h1 {
  color: var(--ns-text) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

body#product #product_reference,
body#product #product_condition,
body#product #short_description_content,
body#product .rte,
body#product .page-product-box,
body#product .tab-content,
body#product #usefull_link_block a {
  color: var(--ns-muted) !important;
}

body#product #product_reference label,
body#product #product_condition label,
body#product .page-subheading,
body#product .productscategory_h3,
body#product .productscategory_h3 span,
body#product .page-product-heading a {
  color: var(--ns-text) !important;
}

body#product .page-subheading,
body#product .productscategory_h3 {
  background: transparent !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin: 24px 0 12px !important;
  padding: 0 !important;
}

body#product .nav-tabs > li > a {
  border-radius: 10px 10px 0 0 !important;
  font-weight: 800 !important;
}

body#product .carousel-control {
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 30px !important;
  background: #ffffff !important;
  border: 1px solid var(--ns-line) !important;
  color: var(--ns-blue) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Hide legacy social/share noise lightly but keep available if theme needs it */
body#product .socialsharing_product .btn {
  border-radius: 10px !important;
  background: #f7fafc !important;
  color: #1f6fb2 !important;
  border-color: #d6e0ea !important;
}

/* Dark selectors: support current dark-mode implementations */
body.dark-mode#product,
body.darkmode--activated#product,
body.darkmode#product,
body.dark-mode#category,
body.darkmode--activated#category,
body.darkmode#category {
  background: var(--ns-dark-bg) !important;
  color: var(--ns-dark-text) !important;
}

body.dark-mode#product #columns,
body.darkmode--activated#product #columns,
body.darkmode#product #columns,
body.dark-mode#category #columns,
body.darkmode--activated#category #columns,
body.darkmode#category #columns {
  background: var(--ns-dark-bg) !important;
}

body.dark-mode#product .breadcrumb,
body.darkmode--activated#product .breadcrumb,
body.darkmode#product .breadcrumb,
body.dark-mode#product #breadcrumb,
body.darkmode--activated#product #breadcrumb,
body.darkmode#product #breadcrumb,
body.dark-mode#category .breadcrumb,
body.darkmode--activated#category .breadcrumb,
body.darkmode#category .breadcrumb,
body.dark-mode#category #breadcrumb,
body.darkmode--activated#category #breadcrumb,
body.darkmode#category #breadcrumb {
  background: var(--ns-dark-card) !important;
  color: var(--ns-dark-muted) !important;
  border-color: var(--ns-dark-line) !important;
}

body.dark-mode#product .breadcrumb a,
body.darkmode--activated#product .breadcrumb a,
body.darkmode#product .breadcrumb a,
body.dark-mode#category .breadcrumb a,
body.darkmode--activated#category .breadcrumb a,
body.darkmode#category .breadcrumb a {
  color: var(--ns-green) !important;
}

body.dark-mode#product .pb-left-column .container-left,
body.darkmode--activated#product .pb-left-column .container-left,
body.darkmode#product .pb-left-column .container-left,
body.dark-mode#product .pb-center-column,
body.darkmode--activated#product .pb-center-column,
body.darkmode#product .pb-center-column,
body.dark-mode#product .box-info-product,
body.darkmode--activated#product .box-info-product,
body.darkmode#product .box-info-product,
body.dark-mode#product .tab-content,
body.darkmode--activated#product .tab-content,
body.darkmode#product .tab-content,
body.dark-mode#product .page-product-box,
body.darkmode--activated#product .page-product-box,
body.darkmode#product .page-product-box,
body.dark-mode#product #usefull_link_block,
body.darkmode--activated#product #usefull_link_block,
body.darkmode#product #usefull_link_block,
body.dark-mode#product #productscategory_list .block_content,
body.darkmode--activated#product #productscategory_list .block_content,
body.darkmode#product #productscategory_list .block_content,
body.dark-mode#product .product-container.product-block,
body.darkmode--activated#product .product-container.product-block,
body.darkmode#product .product-container.product-block,
body.dark-mode#category .product-container.product-block,
body.darkmode--activated#category .product-container.product-block,
body.darkmode#category .product-container.product-block {
  background: var(--ns-dark-card-2) !important;
  border-color: var(--ns-dark-line) !important;
  color: var(--ns-dark-text) !important;
}

body.dark-mode#product #image-block,
body.darkmode--activated#product #image-block,
body.darkmode#product #image-block,
body.dark-mode#product #views_block,
body.darkmode--activated#product #views_block,
body.darkmode#product #views_block,
body.dark-mode#product .product-container .left-block,
body.darkmode--activated#product .product-container .left-block,
body.darkmode#product .product-container .left-block,
body.dark-mode#category .product-container .left-block,
body.darkmode--activated#category .product-container .left-block,
body.darkmode#category .product-container .left-block,
body.dark-mode#product .product-container .product-image-container,
body.darkmode--activated#product .product-container .product-image-container,
body.darkmode#product .product-container .product-image-container,
body.dark-mode#category .product-container .product-image-container,
body.darkmode--activated#category .product-container .product-image-container,
body.darkmode#category .product-container .product-image-container {
  background: #ffffff !important;
}

body.dark-mode#product .pb-center-column h1,
body.darkmode--activated#product .pb-center-column h1,
body.darkmode#product .pb-center-column h1,
body.dark-mode#product .page-subheading,
body.darkmode--activated#product .page-subheading,
body.darkmode#product .page-subheading,
body.dark-mode#product .productscategory_h3,
body.darkmode--activated#product .productscategory_h3,
body.darkmode#product .productscategory_h3,
body.dark-mode#product .productscategory_h3 span,
body.darkmode--activated#product .productscategory_h3 span,
body.darkmode#product .productscategory_h3 span,
body.dark-mode#product .page-product-heading a,
body.darkmode--activated#product .page-product-heading a,
body.darkmode#product .page-product-heading a,
body.dark-mode#product .product-container .product-name,
body.darkmode--activated#product .product-container .product-name,
body.darkmode#product .product-container .product-name,
body.dark-mode#category .product-container .product-name,
body.darkmode--activated#category .product-container .product-name,
body.darkmode#category .product-container .product-name,
body.dark-mode#product #product_reference label,
body.darkmode--activated#product #product_reference label,
body.darkmode#product #product_reference label,
body.dark-mode#product #product_condition label,
body.darkmode--activated#product #product_condition label,
body.darkmode#product #product_condition label {
  color: var(--ns-dark-text) !important;
}

body.dark-mode#product #product_reference,
body.darkmode--activated#product #product_reference,
body.darkmode#product #product_reference,
body.dark-mode#product #product_condition,
body.darkmode--activated#product #product_condition,
body.darkmode#product #product_condition,
body.dark-mode#product #short_description_content,
body.darkmode--activated#product #short_description_content,
body.darkmode#product #short_description_content,
body.dark-mode#product .rte,
body.darkmode--activated#product .rte,
body.darkmode#product .rte,
body.dark-mode#product .product-container .product-desc,
body.darkmode--activated#product .product-container .product-desc,
body.darkmode#product .product-container .product-desc,
body.dark-mode#category .product-container .product-desc,
body.darkmode--activated#category .product-container .product-desc,
body.darkmode#category .product-container .product-desc,
body.dark-mode#product #usefull_link_block a,
body.darkmode--activated#product #usefull_link_block a,
body.darkmode#product #usefull_link_block a {
  color: var(--ns-dark-muted) !important;
}

body.dark-mode#product .nav-tabs,
body.darkmode--activated#product .nav-tabs,
body.darkmode#product .nav-tabs {
  border-color: var(--ns-dark-line) !important;
}
body.dark-mode#product .nav-tabs > li > a,
body.darkmode--activated#product .nav-tabs > li > a,
body.darkmode#product .nav-tabs > li > a {
  background: var(--ns-dark-card) !important;
  color: var(--ns-dark-muted) !important;
  border-color: var(--ns-dark-line) !important;
}
body.dark-mode#product .nav-tabs > li.active > a,
body.darkmode--activated#product .nav-tabs > li.active > a,
body.darkmode#product .nav-tabs > li.active > a {
  background: var(--ns-dark-card-2) !important;
  color: var(--ns-dark-text) !important;
}

body.dark-mode#product .carousel-control,
body.darkmode--activated#product .carousel-control,
body.darkmode#product .carousel-control {
  background: var(--ns-dark-card) !important;
  border-color: var(--ns-dark-line) !important;
  color: var(--ns-green) !important;
}

body.dark-mode#product .product-container .functional-buttons,
body.darkmode--activated#product .product-container .functional-buttons,
body.darkmode#product .product-container .functional-buttons,
body.dark-mode#category .product-container .functional-buttons,
body.darkmode--activated#category .product-container .functional-buttons,
body.darkmode#category .product-container .functional-buttons {
  border-top-color: var(--ns-dark-line) !important;
}

body.dark-mode#product .product-container .view .button,
body.darkmode--activated#product .product-container .view .button,
body.darkmode#product .product-container .view .button,
body.dark-mode#category .product-container .view .button,
body.darkmode--activated#category .product-container .view .button,
body.darkmode#category .product-container .view .button {
  background: var(--ns-dark-card) !important;
  color: var(--ns-dark-text) !important;
  border-color: var(--ns-dark-line) !important;
}

body.dark-mode#product .socialsharing_product .btn,
body.darkmode--activated#product .socialsharing_product .btn,
body.darkmode#product .socialsharing_product .btn {
  background: var(--ns-dark-card) !important;
  color: var(--ns-dark-text) !important;
  border-color: var(--ns-dark-line) !important;
}

/* Send to friend modal content */
body.dark-mode#product #send_friend_form,
body.darkmode--activated#product #send_friend_form,
body.darkmode#product #send_friend_form,
body.dark-mode#product #send_friend_form .product,
body.darkmode--activated#product #send_friend_form .product,
body.darkmode#product #send_friend_form .product,
body.dark-mode#product #send_friend_form_content,
body.darkmode--activated#product #send_friend_form_content,
body.darkmode#product #send_friend_form_content {
  background: var(--ns-dark-card-2) !important;
  color: var(--ns-dark-text) !important;
  border-color: var(--ns-dark-line) !important;
}
body.dark-mode#product #send_friend_form label,
body.darkmode--activated#product #send_friend_form label,
body.darkmode#product #send_friend_form label,
body.dark-mode#product #send_friend_form .product_name,
body.darkmode--activated#product #send_friend_form .product_name,
body.darkmode#product #send_friend_form .product_name {
  color: var(--ns-dark-text) !important;
}
body.dark-mode#product #send_friend_form input,
body.darkmode--activated#product #send_friend_form input,
body.darkmode#product #send_friend_form input {
  background: var(--ns-dark-card) !important;
  color: var(--ns-dark-text) !important;
  border-color: var(--ns-dark-line) !important;
}

/* =========================================================
   4) MOBILE/TABLET refinements
   ========================================================= */
@media (max-width: 991px) {
  body#category .product-container.product-block,
  body#product .product-container.product-block {
    min-height: 0 !important;
  }

  body#category .product-container .functional-buttons,
  body#product .product-container .functional-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body#category .product-container .product-meta,
  body#product .product-container .product-meta {
    min-height: 98px !important;
  }

  body#product .pb-left-column .container-left,
  body#product .pb-center-column,
  body#product .box-info-product,
  body#product .tab-content {
    padding: 14px !important;
  }
}

@media (max-width: 767px) {
  body#category .product-container .functional-buttons,
  body#product .product-container .functional-buttons {
    flex-direction: column !important;
  }

  body#category .product-container .functional-buttons .cart,
  body#product .product-container .functional-buttons .cart,
  body#category .product-container .functional-buttons .view,
  body#product .product-container .functional-buttons .view {
    width: 100% !important;
  }

  body#category .product-container .ajax_add_to_cart_button,
  body#category .product-container .view .button,
  body#category .product-container .view .btn,
  body#product .product-container .ajax_add_to_cart_button,
  body#product .product-container .view .button,
  body#product .product-container .view .btn {
    min-height: 42px !important;
    font-size: 13px !important;
  }

  body#product .pb-center-column h1 {
    font-size: 18px !important;
  }

  body#product #add_to_cart button.exclusive,
  body#product #add_to_cart .exclusive,
  body#product .box-cart-bottom button[name="Submit"] {
    min-height: 50px !important;
    font-size: 15px !important;
  }
}