/* ================================================================
   PREMIUMLED.LV — JoomShopping UI + Brand Color
   020 — 20260614_1925
   Created from scratch (no prior custom.css existed).
   Brand: gold #f5a800 | hover #e09400 | active #c98200
   Availability: green #e8f5e2 / #2a7a14 / #b8e0a8
   ================================================================ */

/* ---- CSS VARIABLES ---- */
:root {
  --pl-primary: #f5a800;
  --pl-hover:   #e09400;
  --pl-active:  #c98200;
  --pl-light:   #e8f5f5;
  --pl-border:  #f5d080;
  --pl-text:    #222222;
  --pl-muted:   #6b7280;
}

/* ---- NAVIGATION active/hover ---- */
#sp-nav .sp-megamenu-parent > li.active > a,
#sp-nav .sp-megamenu-parent > li > a:hover,
#sp-nav .sp-megamenu-parent > li > a:focus,
.sp-menu-item.active > a,
.nav.menu > li.active > a {
  color: var(--pl-primary) !important;
}
.offcanvas-menu .sp-megamenu-parent li.active > a,
.offcanvas-menu ul li a:hover {
  color: var(--pl-primary) !important;
  background: var(--pl-light) !important;
}

/* ---- SHOP LINK HOVER ---- */
.jshop a:hover, .jshop a:focus,
.productfull a:hover, .productfull a:focus,
.jshop_list_product a:hover, .jshop_list_product a:focus {
  color: var(--pl-primary);
}

/* ---- PRODUCT PAGE: add-to-cart button ---- */
.productfull .prod_buttons .buttons .button,
.productfull .prod_buttons button[type='submit'],
.productfull .buttons .button {
  background: var(--pl-primary) !important;
  border-color: var(--pl-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.productfull .prod_buttons .buttons .button:hover,
.productfull .prod_buttons button[type='submit']:hover,
.productfull .buttons .button:hover {
  background: var(--pl-hover) !important;
  border-color: var(--pl-hover) !important;
  color: #fff !important;
}
.productfull .prod_buttons .buttons .button:active,
.productfull .prod_buttons button[type='submit']:active {
  background: var(--pl-active) !important;
  border-color: var(--pl-active) !important;
}

/* ---- CATEGORY / LIST PAGE: addtocart overlay ---- */
.jshop_list_product .list_product .item-wrap .item-image .addtocart,
.lib-item-wrap .item-image .addtocart {
  background: var(--pl-primary) !important;
}
.jshop_list_product .list_product .item-wrap .item-image .addtocart:hover,
.jshop_list_product .list_product .item-wrap:hover .item-image .addtocart {
  background: var(--pl-hover) !important;
}

/* ---- CART NAVIGATION BUTTONS ---- */
.jshop .cart_buttons .btn.btn-arrow-left {
  background: var(--pl-primary) !important;
  border-color: var(--pl-primary) !important;
  color: #fff !important;
}
.jshop .cart_buttons .btn.btn-arrow-left:hover {
  background: var(--pl-hover) !important;
  border-color: var(--pl-hover) !important;
}
.jshop .cart_buttons .btn.btn-arrow-right:hover {
  background: var(--pl-hover) !important;
}

/* ---- CART TABLE HEADER ---- */
table.cart th {
  background: var(--pl-primary) !important;
  color: #fff !important;
}

/* ---- CHECKOUT / CART TABLE BUTTONS ---- */
#sp-component div.jshop table .button,
.jshop_cart .button {
  background: var(--pl-primary) !important;
  border-color: var(--pl-primary) !important;
  color: #fff !important;
}
#sp-component div.jshop table .button:hover,
.jshop_cart .button:hover {
  background: var(--pl-hover) !important;
  border-color: var(--pl-hover) !important;
}

/* ---- BTN-PRIMARY ---- */
.btn-primary, .sppb-btn-primary {
  background-color: var(--pl-primary) !important;
  border-color: var(--pl-primary) !important;
}
.btn-primary:hover, .sppb-btn-primary:hover {
  background-color: var(--pl-hover) !important;
  border-color: var(--pl-hover) !important;
}

/* ---- SEARCH BUTTON ---- */
.sp-module.jshopping-search .mod-shop-search .button {
  background: var(--pl-primary) !important;
  border-color: var(--pl-primary) !important;
  color: #fff !important;
}
.sp-module.jshopping-search .mod-shop-search .button:hover {
  background: var(--pl-hover) !important;
}

/* ---- SHOP INPUT FOCUS ---- */
.jshop input[type='text']:focus,
.jshop input[type='number']:focus,
.jshop input[type='email']:focus,
.jshop select:focus,
.jshop textarea:focus,
.productfull input:focus {
  border-color: var(--pl-primary) !important;
  box-shadow: 0 0 0 3px rgba(245,168,0,0.20) !important;
  outline: none !important;
}

/* ---- PRICE ACCENT ---- */
.jshop_list_product .list_product .item-wrap .item-info .main-price .item-price .price,
.productfull #block_price,
.productfull .jshop_price {
  color: var(--pl-primary) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* ---- TABS active ---- */
.productfull .block-tab .nav-tabs li a:hover,
.jshop_tab ul.nav-tabs > li > a:hover { color: var(--pl-primary) !important; }
.productfull .block-tab .nav-tabs li.active a,
.jshop_tab ul.nav-tabs > li.active > a {
  color: var(--pl-primary) !important;
  border-bottom-color: var(--pl-primary) !important;
}

/* ---- MOBILE: compact quantity + button ---- */
@media (max-width: 767px) {
  .productfull .prod_buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .productfull .prod_buttons .prod_qty {
    flex-basis: 100% !important;
    width: 100% !important;
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }
  .productfull .prod_buttons .prod_qty_input {
    flex: 0 0 64px !important;
    width: 64px !important;
  }
  .productfull .prod_buttons .prod_qty_input input {
    width: 64px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: 15px !important;
    padding: 0 4px !important;
  }
  .productfull .prod_buttons .buttons {
    flex: 1 1 auto !important;
  }
  .productfull .prod_buttons .buttons .button,
  .productfull .prod_buttons button[type='submit'] {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =====================================================================
   PREMIUMLED CLEAN JSHOP UI — 020 — 20260614_1925
   product.php: 196 lines, NO Подробнее button, background-image photos.
   Listing availability already clean single conditional in product.php.
   product_default.php: PHP fix applied (select-mask→div, single avail).
   ===================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 1 — LISTING: EQUAL-HEIGHT FLEX CHAIN
   DOM: .jshop_list_product .list_product .row > .col-md-4 > .product > .item-wrap
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.jshop_list_product .list_product .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
.jshop_list_product .list_product .row > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}
.jshop_list_product .list_product .row > [class*="col-"] > .product {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.jshop_list_product .list_product .row > .clear,
.jshop_list_product .list_product .row > .clear.space {
  flex: 1 0 100% !important;
  width: 100% !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.jshop_list_product .list_product .row > [class*="col-"] .item-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.jshop_list_product .list_product .row > [class*="col-"] .item-image {
  height: 200px !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 2 — LISTING: ITEM-INFO FLEX COLUMN + ORDERED CHILDREN
   Order: title(1) → price(2) → badge(3)
   No Подробнее button in premiumled product.php.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.jshop_list_product .list_product .row > [class*="col-"] .item-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 10px 10px !important;
  align-items: stretch !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.jshop_list_product .list_product .row > [class*="col-"] .item-info > * {
  flex: 0 0 auto !important;
  order: 10 !important;
  width: 100% !important;
}

/* Title: order 1. */
.jshop_list_product .list_product .row > [class*="col-"] .item-info > h3.item-title {
  order: 1 !important;
  min-height: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  border-bottom: none !important;
}

/* Price: order 2 (pulled before availability). */
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .main-price {
  order: 2 !important;
  margin: 0 0 4px 0 !important;
}
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .main-price .price {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Availability badge: order 3, compact pill. */
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .available,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .not_available {
  order: 3 !important;
  width: auto !important;
  max-width: max-content !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 6px 0 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .available {
  background: #e8f5e2 !important;
  color: #2a7a14 !important;
  border: 1px solid #b8e0a8 !important;
}
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .not_available {
  background: #fde8e8 !important;
  color: #b91c1c !important;
  border: 1px solid #f5b8b8 !important;
}

/* Hide irrelevant listing card fields. */
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .price_extra_info,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .manufacturer_name,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .manufacturer_code,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .deliverytime,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .productweight,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .qty_in_stock,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .extra_fields,
.jshop_list_product .list_product .row > [class*="col-"] .item-info > .vendorinfo { display: none !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 3 — PRODUCT PAGE: PRODUCT-INFO FLEX COLUMN + ORDERING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.productfull .product-info {
  display: flex !important;
  flex-direction: column !important;
}
.productfull .product-info > * { order: 10 !important; }
.productfull .product-info > h1.title,
.productfull .product-info > .title             { order: 1 !important; }
.productfull .product-info > .jshop_code_prod   { order: 2 !important; }
.productfull .product-info > .rating            { order: 3 !important; }
.productfull .product-info > .price             { order: 4 !important; margin-bottom: 4px !important; }
.productfull .product-info > #available_now,
.productfull .product-info > .available         { order: 5 !important; margin-bottom: 8px !important; }
.productfull .product-info > #not_available,
.productfull .product-info > .not_available     { order: 5 !important; margin-bottom: 8px !important; }
.productfull .product-info > .qty_in_stock      { order: 5 !important; margin-bottom: 4px !important; }
.productfull .product-info > .jshop_prod_description { order: 6 !important; margin-top: 0 !important; margin-bottom: 8px !important; }
.productfull .product-info > .jshop_prod_attributes  { order: 7 !important; }
.productfull .product-info > .prod_free_attribs      { order: 7 !important; }
.productfull .product-info > .prod_buttons      { order: 8 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 4 — PRODUCT PAGE: AVAILABILITY BADGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.productfull .product-info > .available,
.productfull .product-info > #available_now,
.productfull .product-info > #available_now.available,
.productfull .product-info > .not_available,
.productfull .product-info > #not_available,
.productfull .product-info > #not_available.not_available {
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.productfull .product-info > .available,
.productfull .product-info > #available_now {
  background: #e8f5e2 !important;
  color: #2a7a14 !important;
  border: 1px solid #b8e0a8 !important;
}
.productfull .product-info > .not_available,
.productfull .product-info > #not_available {
  background: #fde8e8 !important;
  color: #b91c1c !important;
  border: 1px solid #f5b8b8 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 5 — PRODUCT PAGE: ATTRIBUTE SELECT (div.attr-select-wrap)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

div.productfull .jshop_prod_attributes .attr-select-wrap {
  display: block !important;
  position: static !important;
  max-width: 360px !important;
  margin-bottom: 8px !important;
}
div.productfull .jshop_prod_attributes .attr-select-wrap select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  background-color: #fff !important;
  padding: 8px 36px 8px 12px !important;
  height: 44px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  color: #222 !important;
  cursor: pointer !important;
  width: 100% !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
div.productfull .jshop_prod_attributes .attr-select-wrap select:focus {
  border-color: var(--pl-primary) !important;
  box-shadow: 0 0 0 3px rgba(245,168,0,0.18) !important;
  outline: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 6 — PRODUCT PAGE: BUY ROW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.productfull .prod_buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 8px !important;
  padding: 0 !important;
  margin-top: 8px !important;
}
.productfull .prod_buttons .prod_qty {
  flex: 0 0 100% !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #444 !important;
  margin-bottom: 6px !important;
}
.productfull .prod_buttons .prod_qty_input {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
}
.productfull .prod_buttons .prod_qty_input input.inputbox {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  width: 64px !important;
  box-sizing: border-box !important;
  padding: 0 6px !important;
  text-align: center !important;
  display: block !important;
  line-height: 44px !important;
  border: 1.5px solid var(--pl-border) !important;
  border-radius: 5px !important;
}
.productfull .prod_buttons .buttons.product-buttons {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
}
.productfull .prod_buttons .buttons.product-buttons button.button,
.productfull .prod_buttons .buttons.product-buttons .btn-buy {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  line-height: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 7 — CART: TABLE + BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.jshop table.cart td { vertical-align: middle !important; padding: 8px !important; }
.jshop table.cart th { padding: 8px !important; font-size: 13px !important; }
#sp-component div.jshop table.cart tbody tr td .inputbox {
  width: 52px !important;
  height: 32px !important;
  text-align: center !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 4px !important;
  padding: 0 4px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}
#sp-component div.jshop table.cart tbody tr td .cart_reload {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  cursor: pointer !important;
  color: #888 !important;
  font-size: 13px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
#sp-component div.jshop table.cart tbody tr td.quantity .data {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
.jshop table.cart td.remove a.button-img {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  min-height: 30px !important;
  background: #fff !important;
  color: #cc2222 !important;
  border: 1.5px solid #cc2222 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.jshop table.cart td.remove a.button-img::before {
  font-size: 11px !important;
  color: #cc2222 !important;
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  display: inline !important;
  margin: 0 !important;
}
.jshop table.cart td.remove a.button-img:hover {
  background: #cc2222 !important;
  color: #fff !important;
}
.jshop table.cart td.remove a.button-img:hover::before { color: #fff !important; }
#sp-component div.jshop table.jshop_subtotal { margin-top: 8px !important; }
#sp-component div.jshop table.jshop_subtotal tr td {
  padding: 8px 12px !important;
  border: 1px solid #e5e7eb !important;
}
.jshop .cart_buttons {
  margin-top: 12px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #e5e7eb !important;
}
.jshop .cart_buttons #checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.jshop .cart_buttons a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
#sp-left.col-lg-3 .sp-column { padding-top: 0 !important; }
#sp-left.col-lg-3 .sp-module { margin-top: 0 !important; padding-top: 0 !important; }
#sp-component.col-lg-9 .sp-column { padding-top: 0 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 8 — MOBILE: CART BUTTONS + TABLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
  .jshop .cart_buttons #checkout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .jshop .cart_buttons #checkout .pull-left,
  .jshop .cart_buttons #checkout .pull-right {
    float: none !important;
    width: 100% !important;
  }
  .jshop .cart_buttons #checkout a.btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .jshop table.cart {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== END PREMIUMLED CLEAN JSHOP UI 020 — 20260614_1925 ===== */