/* ============================================================
   Premium Shop UI - additive overrides on top of style.css.
   Nothing here is removed/edited in style.css itself.
   ============================================================ */

/* ---- Sidebar shell ---- */
.sidebar-area {
  width: 100%;
  background: transparent;
}
.sidebar-area .widget {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  padding: 24px;
  margin-bottom: 24px;
  transition: box-shadow .3s;
}
.sidebar-area .widget:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, .1);
}

/* ---- Search box ---- */
.shop-search-box {
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.shop-search-box input {
  flex: 1;
  border: 1px solid #eee;
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 0 16px;
  height: 48px;
  font-size: 14px;
}
.shop-search-btn {
  width: 52px;
  border: none;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  cursor: pointer;
  transition: .3s;
}
.shop-search-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* ---- Category accordion tree ---- */
.cat-tree, .cat-tree-children, .checkbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tree-item {
  border-bottom: 1px solid #f1f1f1;
}
.cat-tree-item:last-child { border-bottom: none; }
.cat-tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.cat-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14.5px;
  flex: 1;
  margin: 0;
}
/* style.css hides every input[type=checkbox] globally and expects a
   ~label:before sibling to draw a custom box - our markup wraps the
   input inside the label instead, so that replacement box never
   appears and the checkbox is just invisible. Draw our own round
   checkbox directly on the input instead of fighting that pattern. */
.cat-checkbox input[type="checkbox"],
.checkbox-list input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .2s, background-color .2s;
}
.cat-checkbox input[type="checkbox"]:checked,
.checkbox-list input[type="checkbox"]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.cat-checkbox input[type="checkbox"]:checked::after,
.checkbox-list input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cat-count { color: #999; font-size: 13px; }
.cat-toggle {
  border: none;
  background: #f3f4f6;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .25s;
}
.cat-tree-item.open > .cat-tree-row .cat-toggle,
.cat-tree-item.open > .cat-tree-row .cat-toggle i {
  transform: rotate(180deg);
}
.cat-tree-children {
  padding-left: 20px;
  border-left: 2px solid #eef2ff;
  margin-left: 4px;
}
.checkbox-list li { padding: 6px 0; }

/* ---- Apply / Reset buttons ---- */
.filters-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.apply-filters-btn {
  flex: 1;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-align: center;
  justify-content: center;
}
.apply-filters-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a) !important;
}
.reset-filters-btn {
  flex: 1;
  background: #111 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-align: center;
  justify-content: center;
}
.reset-filters-btn:hover { background: #333 !important; }

/* ---- Mobile filter trigger ---- */
.mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 8px;
  border: none;
  background: #111;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
}

/* ---- Category / quick-filter tabs ---- */
.shop-tabs-wrap {
  margin-bottom: 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.shop-tabs-wrap::-webkit-scrollbar { display: none; }
.shop-tabs {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.shop-tabs li { flex: 0 0 auto; }
.shop-tabs li a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: .25s;
}
.shop-tabs li a:hover { background: #e5e7eb; }
.shop-tabs li.active a {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

/* ---- Toolbar / view toggle ---- */
.view-toggle {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.view-btn {
  border: none;
  background: #fff;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: #666;
}
.view-btn.active {
  background: #2563eb;
  color: #fff;
}
.woocommerce-ordering .orderby {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 8px 16px;
  font-size: 14px;
}

/* ---- Product cards ---- */
.product-style1 {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.product-style1:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}
.product-style1 .product-img {
  position: relative;
  height: 320px;
  overflow: hidden;
}
.product-style1 .product-img img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform .5s, opacity .3s;
}
.product-style1:hover .product-img .primary-img {
  transform: scale(1.08);
}
.product-style1 .post-box {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.product-style1 .post-box li {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  text-transform: uppercase;
}
.badge-hot { background: #1976D2; }
.badge-discount { background: #ef4444; }
.badge-stock { background: #6b7280; }

.product-style1 .product-btns {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .3s, transform .3s;
}
.product-style1:hover .product-btns {
  opacity: 1;
  transform: translateX(0);
}
.product-style1 .product-btns .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .25s;
}
.product-style1 .product-btns .icon-btn:hover {
  background: #2563eb;
  color: #fff;
}
.product-style1 .product-btns .wishlist.active {
  background: #ef4444;
  color: #fff;
}
.product-content .product-category {
  display: block;
  font-size: 13px;
  color: #888;
}
.list-add-to-cart-btn {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ---- List view ---- */
#shop-product-grid.list-view .product-grid-col {
  flex: 0 0 100%;
  max-width: 100%;
}
#shop-product-grid.list-view .product-style1 {
  display: flex;
  flex-direction: row;
}
#shop-product-grid.list-view .product-style1 .product-img {
  flex: 0 0 220px;
  height: 220px;
}
#shop-product-grid.list-view .product-style1 .product-img img {
  height: 220px;
}
#shop-product-grid.list-view .product-content {
  flex: 1;
}

/* ---- Pagination ---- */
.vs-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.vs-pagination ul li a,
.vs-pagination ul li span,
.vs-pagination .pagi-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f3f4f6;
  color: #333;
  transition: .25s;
}
.vs-pagination ul li a:hover,
.vs-pagination .pagi-btn:hover {
  background: #dbeafe;
  color: #2563eb;
}
.vs-pagination ul li a.active {
  background: #2563eb;
  color: #fff;
}

/* ---- Quick view modal ---- */
#quickViewModal { z-index: 100000; }
.quick-view-content { border-radius: 16px; padding: 24px; position: relative; }
.quick-view-content .btn-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background-color: #f3f4f6;
  background-image: none;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transition: background-color .2s;
}
.quick-view-content .btn-close:hover { background-color: #e5e7eb; }
.quick-view-content .btn-close::before,
.quick-view-content .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: #333;
  border-radius: 1px;
}
.quick-view-content .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.quick-view-content .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.quick-view-loading { text-align: center; padding: 60px 0; }
.qv-layout { display: flex; gap: 24px; flex-wrap: wrap; }
.qv-image { flex: 0 0 260px; }
.qv-image img { width: 100%; border-radius: 12px; }
.qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qv-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity: .7; transition: opacity .15s, border-color .15s; }
.qv-thumb:hover { opacity: 1; }
.qv-thumb.active { opacity: 1; border-color: #2563eb; }
.qv-details { flex: 1; min-width: 240px; }
.qv-details h3 { margin-bottom: 8px; padding-right: 30px; }
.qv-price del { color: #999; margin-right: 8px; }
.qv-price ins { color: #2563eb; text-decoration: none; font-weight: 700; }
.qv-details .add-to-cart-btn,
.qv-details .vs-btn { margin-bottom: 10px; }

/* ---- Mini cart empty state ---- */
.mini-cart-empty { padding: 16px; text-align: center; color: #888; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .mobile-filter-btn { display: inline-flex; }

  /* The filters markup uses Bootstrap 5.1+'s offcanvas component
     (data-bs-toggle="offcanvas", .offcanvas-lg, .offcanvas-start),
     but this project ships Bootstrap 5.0.0, which has no Offcanvas
     JS or CSS at all - the button was a dead click. Drive the same
     markup/data attributes with our own slide-in drawer instead of
     upgrading the vendored bootstrap files. See shop-premium.js. */
  .sidebar-area.offcanvas-lg {
    position: fixed;
    top: 0;
    left: 0;
    /* footer.php's .mobile-bottom-nav is a fixed bar at z-index:99999 -
       has to be beaten here or it sits on top of the drawer and hides
       whatever falls in its bottom-60px strip (the Apply/Reset
       buttons). */
    z-index: 100050;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    margin: 0;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
    /* same bottom nav bar again: reserve its height so Apply/Reset
       aren't the last thing jammed against that strip. */
    padding-bottom: calc(20px + 60px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
    box-shadow: 4px 0 20px rgba(0, 0, 0, .15);
  }
  .sidebar-area.offcanvas-lg.show {
    transform: translateX(0);
  }
  .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .offcanvas-header .offcanvas-title { margin: 0; }
}
.offcanvas-backdrop-custom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 100040;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.offcanvas-backdrop-custom.show { opacity: 1; }
body.offcanvas-open { overflow: hidden; }
@media (max-width: 767.98px) {
  #shop-product-grid .product-grid-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .product-style1 .product-img,
  .product-style1 .product-img img {
    height: 220px;
  }

  /* List view forces a fixed 220px image beside the content
     (#shop-product-grid.list-view .product-style1 { flex-direction:
     row }), which leaves so little width for the text column that
     the title (styled at the theme's full h2 size) wraps across
     several lines and spills past the image. Stack it like the grid
     view instead of squeezing two columns into a phone screen. */
  #shop-product-grid.list-view .product-style1 {
    flex-direction: column;
  }
  #shop-product-grid.list-view .product-style1 .product-img {
    flex: 0 0 auto;
    width: 100%;
  }
  #shop-product-grid.list-view .product-style1 .product-img img {
    width: 100%;
  }

  #quickViewModal .modal-dialog {
    margin: 10px;
  }
  #quickViewModal .modal-content {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }
  .quick-view-content { padding: 20px 16px 24px; }
  .qv-details { padding-bottom: 10px; }

  .row > .col-auto:has(> .vs-pagination) {
    max-width: 100%;
  }
  .vs-pagination {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .vs-pagination ul {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}
@media (max-width: 400px) {
  .vs-pagination .pagi-btn,
  .vs-pagination span,
  .vs-pagination a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }
  .vs-pagination .pagi-btn i { font-size: 12px; }
}

/* ---- Live Shiprocket delivery options (cart.php + checkout.php) ---- */
.shipping-widget {
  padding: 14px 0;
  text-align: left;
}
.shipping-check-row {
  display: flex;
  gap: 8px;
}
.shipping-check-row input {
  flex: 1;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
}
.shipping-widget .vs-btn {
  padding: 0 18px;
  height: 44px;
  line-height: 44px;
  white-space: nowrap;
}
.shipping-check-btn-inline { margin-top: 10px; }
.shipping-message {
  margin-top: 8px;
  font-size: 13px;
  color: #b91c1c;
}
.shipping-couriers { margin-top: 12px; }
.shipping-weight {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}
.shipping-courier-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
  font-size: 14px;
}
.shipping-courier-option:last-child { border-bottom: none; }
/* style.css hides every input[type=radio] globally, same fragile
   ~label:before sibling assumption as the category checkboxes above -
   our radio is wrapped inside the label, not a preceding sibling, so
   draw it directly instead. */
.shipping-courier-option input[type="radio"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}
.shipping-courier-option input[type="radio"]:checked {
  border-color: #2563eb;
}
.shipping-courier-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
}

/* ---- Homepage carousel cards (index.php) ---- */
/* render_product_card_inner() (includes/product-card.php) renders the
   same full card used on the shop grid - rating, author, category,
   title, and an Add To Cart/Read button. The homepage carousels only
   want the compact teaser (image + rating/price + author + title); the
   wishlist/quick-view/cart icons already overlaid on the image cover
   the same actions the category/button block would duplicate, so those
   two stay hidden. The title is intentionally shown (see
   .products-scroll .product-title below) - style.css's fixed card
   height (see .products-scroll .product-style1) was bumped to make
   room for it. */
.products-scroll .product-category,
.products-scroll .add-to-cart-btn,
.products-scroll .list-add-to-cart-btn,
.products-scroll .product-content > a,
.products-scroll .product-content > form {
  display: none;
}

/* Compact, clamped title for the homepage carousels - the shop grid's
   .product-title (style.css) is 20px/line-height:100% with no clamp,
   which would blow past this card's fixed height. Line-clamped to 2
   lines at a fixed height so every card in the horizontal scroll row
   stays the same height regardless of title length. */
.products-scroll .product-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  height: 120px;
  margin: 6px 0 0;
}
/* This file's own .product-style1 .product-img{height:320px} above
   (written for the shop grid, shop.php) has the same specificity as
   style.css's .products-scroll .product-img{height:180px} (written
   for this compact carousel), and since it's declared later in this
   same file it was winning by cascade order alone wherever a card
   carries both classes - i.e. every homepage carousel card, once
   index.php started loading shop-premium.css for the quick-view
   modal. Images were rendering at 320px instead of 180px, blowing
   past the 340px card height and clipping the price row again. One
   extra class of specificity forces the compact height back here
   regardless of source order. */
.products-scroll .product-style1 .product-img,
.products-scroll .product-style1 .product-img img {
  height: 180px;
}