/* ==========================================================================
   BizSheba Shop — Main Stylesheet
   Primary: #14b8a6 | Dark: #1e293b | Light: #f1f5f9
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --bs-primary:      #14b8a6;
  --bs-primary-dk:   #0d9488;
  --bs-accent:       #f97316;
  --bs-dark:         #1e293b;
  --bs-mid:          #64748b;
  --bs-light:        #f1f5f9;
  --bs-border:       #e2e8f0;
  --bs-white:        #ffffff;
  --bs-radius:       8px;
  --bs-shadow:       0 2px 8px rgba(0,0,0,.08);
  --bs-shadow-md:    0 4px 16px rgba(0,0,0,.12);
  --bs-transition:   .2s ease;
  --bs-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-container:    1200px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--bs-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bs-dark);
  background: var(--bs-white);
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--bs-primary); text-decoration: none; transition: color var(--bs-transition); }
a:hover { color: var(--bs-primary-dk); }

ul, ol { list-style: none; }

/* ---------- Utility ---------- */
.bsshop-container { max-width: var(--bs-container); margin: 0 auto; padding: 0 1rem; }
.bsshop-section   { padding: 3rem 0; }
.bsshop-section-title {
  font-size: 1.75rem; font-weight: 700; color: var(--bs-dark);
  text-align: center; margin-bottom: 2rem;
}
.bsshop-section-title span { color: var(--bs-primary); }
.bsshop-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: var(--bs-radius);
  font-weight: 600; font-size: .95rem; cursor: pointer;
  border: 2px solid transparent; transition: var(--bs-transition);
}
.bsshop-btn-primary  { background: var(--bs-primary); color: var(--bs-white); border-color: var(--bs-primary); }
.bsshop-btn-primary:hover { background: var(--bs-primary-dk); border-color: var(--bs-primary-dk); color: var(--bs-white); }
.bsshop-btn-outline  { background: transparent; color: var(--bs-primary); border-color: var(--bs-primary); }
.bsshop-btn-outline:hover { background: var(--bs-primary); color: var(--bs-white); }
.bsshop-btn-whatsapp { background: #25d366; color: var(--bs-white); border-color: #25d366; }
.bsshop-btn-whatsapp:hover { background: #1ebe57; border-color: #1ebe57; color: var(--bs-white); }
.bsshop-badge {
  display: inline-block; padding: .25rem .6rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600;
}
.bsshop-badge-primary { background: var(--bs-primary); color: var(--bs-white); }
.bsshop-badge-accent  { background: var(--bs-accent);  color: var(--bs-white); }

/* ---------- Header ---------- */
.bsshop-header {
  background: var(--bs-white); border-bottom: 1px solid var(--bs-border);
  position: sticky; top: 0; z-index: 100; box-shadow: var(--bs-shadow);
}
.bsshop-header-inner {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 0; flex-wrap: wrap;
}
.bsshop-logo { flex-shrink: 0; }
.bsshop-logo img { height: 44px; width: auto; }
.bsshop-logo-text {
  font-size: 1.3rem; font-weight: 800; color: var(--bs-dark); line-height: 1.1;
}
.bsshop-logo-text span { color: var(--bs-primary); }
.bsshop-logo-sub { font-size: .65rem; color: var(--bs-mid); font-weight: 400; }
.bsshop-header-search {
  flex: 1; min-width: 180px;
}
.bsshop-search-form { display: flex; border: 2px solid var(--bs-border); border-radius: var(--bs-radius); overflow: hidden; }
.bsshop-search-form input {
  flex: 1; padding: .5rem .75rem; border: none; outline: none;
  font-size: .875rem; font-family: var(--bs-font);
}
.bsshop-search-form button {
  padding: .5rem .875rem; background: var(--bs-primary); color: var(--bs-white);
  border: none; cursor: pointer; font-size: .9rem;
}
.bsshop-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Icon-only action buttons in header */
.bsshop-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.05rem; color: var(--bs-dark);
  background: none; border: none; cursor: pointer;
  transition: background var(--bs-transition), color var(--bs-transition);
  text-decoration: none; position: relative;
}
.bsshop-icon-btn:hover { background: var(--bs-light); color: var(--bs-primary); }
.bsshop-icon-wa { color: #25d366 !important; }
.bsshop-icon-wa:hover { background: #e8fdf0 !important; }

.bsshop-cart-icon {
  position: relative; color: var(--bs-dark); font-size: 1.05rem;
}
.bsshop-cart-icon .bsshop-cart-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--bs-accent); color: var(--bs-white);
  font-size: .6rem; font-weight: 700; border-radius: 50%;
  min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  padding: 0 2px; line-height: 1;
}

/* ---------- Navigation ---------- */
.bsshop-nav { background: var(--bs-primary); }
.bsshop-nav-inner { display: flex; align-items: center; gap: 0; overflow-x: auto; }
.bsshop-nav a {
  display: block; padding: .65rem 1.1rem; color: rgba(255,255,255,.9);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  transition: background var(--bs-transition);
}
.bsshop-nav a:hover, .bsshop-nav a.current { background: rgba(0,0,0,.15); color: var(--bs-white); }
.bsshop-nav-menu { display: flex; }

/* ---------- Mobile Menu Toggle ---------- */
.bsshop-menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 1.4rem; color: var(--bs-dark); padding: .25rem;
}

/* ---------- Hero ---------- */
.bsshop-hero {
  background: linear-gradient(135deg, var(--bs-dark) 0%, #0f3460 100%);
  color: var(--bs-white); padding: 3.5rem 0;
  position: relative; overflow: hidden;
}
.bsshop-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2314b8a6' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}
.bsshop-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.bsshop-hero-content { flex: 1; min-width: 260px; }
.bsshop-hero-badge { margin-bottom: .75rem; }
.bsshop-hero h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.bsshop-hero h1 span { color: var(--bs-primary); }
.bsshop-hero p { color: rgba(255,255,255,.75); margin-bottom: 1.5rem; font-size: 1.05rem; }
.bsshop-hero-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.bsshop-hero-image { flex: 1; min-width: 220px; text-align: center; }
.bsshop-hero-image img { border-radius: var(--bs-radius); box-shadow: var(--bs-shadow-md); }

/* ---------- Section header (title + subtitle) ---------- */
.bsshop-section-header { text-align: center; margin-bottom: 2rem; }
.bsshop-section-sub {
  font-size: .95rem; color: var(--bs-mid); margin-top: .35rem;
}

/* ---------- Categories Grid ---------- */
.bsshop-categories { background: #f0f3f8; }
.bsshop-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
}
.bsshop-cat-card {
  background: var(--bs-white);
  border-radius: 12px;
  padding: 1.4rem .75rem 1.1rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform var(--bs-transition), box-shadow var(--bs-transition), border-color var(--bs-transition);
  border: 1.5px solid #e8ecf3;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit;
}
.bsshop-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  border-color: var(--bs-primary);
}
.bsshop-cat-icon-wrap {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .85rem;
}
.bsshop-cat-icon-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  filter: none;
}
/* FA icon fallback: dark outline look */
.bsshop-cat-icon-wrap i {
  font-size: 2.4rem;
  color: var(--bs-dark);
  line-height: 1;
}
.bsshop-cat-card h3 {
  font-size: .82rem; font-weight: 600;
  color: var(--bs-dark); line-height: 1.35;
  margin: 0;
}
.bsshop-cat-count-label {
  font-size: .7rem; color: var(--bs-mid);
  margin-top: .3rem; display: block;
}

/* ---------- Product Cards ---------- */
.bsshop-products-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem;
}
.bsshop-product-card {
  background: var(--bs-white); border-radius: var(--bs-radius);
  box-shadow: var(--bs-shadow); overflow: hidden;
  transition: transform var(--bs-transition), box-shadow var(--bs-transition);
  display: flex; flex-direction: column;
}
.bsshop-product-card:hover { transform: translateY(-2px); box-shadow: var(--bs-shadow-md); }
.bsshop-product-img {
  position: relative; overflow: hidden; aspect-ratio: 4/3;
  background: var(--bs-light);
}
.bsshop-product-img img { width: 100%; height: 100%; object-fit: contain; padding: .4rem; transition: transform .3s ease; }
.bsshop-product-card:hover .bsshop-product-img img { transform: scale(1.04); }
.bsshop-product-badges { position: absolute; top: .35rem; left: .35rem; display: flex; flex-direction: column; gap: .2rem; }
.bsshop-product-body { padding: .75rem; flex: 1; display: flex; flex-direction: column; }
.bsshop-product-cat { font-size: .7rem; color: var(--bs-mid); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .04em; }
.bsshop-product-title { font-size: .85rem; font-weight: 600; color: var(--bs-dark); margin-bottom: .4rem; line-height: 1.3; }
.bsshop-product-price { font-size: 1rem; font-weight: 700; color: var(--bs-primary); margin-bottom: .6rem; }
.bsshop-product-price del { font-size: .8rem; color: var(--bs-mid); font-weight: 400; margin-right: .25rem; }
.bsshop-product-footer { margin-top: auto; display: flex; gap: .4rem; }
.bsshop-product-footer .bsshop-btn { flex: 1; justify-content: center; padding: .45rem .5rem; font-size: .8rem; }

/* ---------- Why Us ---------- */
.bsshop-why-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem;
}
.bsshop-why-card {
  text-align: center; padding: 1.5rem 1rem; border-radius: var(--bs-radius);
  background: var(--bs-white); box-shadow: var(--bs-shadow);
}
.bsshop-why-card i { font-size: 2.2rem; color: var(--bs-primary); margin-bottom: .75rem; }
.bsshop-why-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.bsshop-why-card p { font-size: .875rem; color: var(--bs-mid); }

/* ---------- WhatsApp CTA ---------- */
.bsshop-wa-cta {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  color: var(--bs-white); text-align: center; padding: 3rem 1rem;
}
.bsshop-wa-cta h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.bsshop-wa-cta p { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.bsshop-footer { background: var(--bs-dark); color: rgba(255,255,255,.75); }
.bsshop-footer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem; padding: 3rem 0 2rem;
}
.bsshop-footer h4 { color: var(--bs-white); font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.bsshop-footer a { color: rgba(255,255,255,.65); font-size: .875rem; }
.bsshop-footer a:hover { color: var(--bs-primary); }
.bsshop-footer ul li { margin-bottom: .5rem; }
.bsshop-footer-logo-text { font-size: 1.4rem; font-weight: 800; color: var(--bs-white); }
.bsshop-footer-logo-text span { color: var(--bs-primary); }
.bsshop-footer-desc { font-size: .875rem; margin: .5rem 0 1rem; }
.bsshop-footer-bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.25rem 0; text-align: center; font-size: .8rem;
}

/* ---------- Shop / Archive ---------- */
.bsshop-shop-layout { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem 0; }
.bsshop-sidebar {
  width: 240px; flex-shrink: 0; background: var(--bs-white);
  border-radius: var(--bs-radius); box-shadow: var(--bs-shadow); padding: 1.25rem;
}
.bsshop-sidebar h3 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--bs-primary); }
.bsshop-sidebar ul li { margin-bottom: .4rem; }
.bsshop-sidebar ul li a { color: var(--bs-dark); font-size: .9rem; display: flex; justify-content: space-between; }
.bsshop-sidebar ul li a:hover { color: var(--bs-primary); }
.bsshop-sidebar ul li a span { color: var(--bs-mid); font-size: .8rem; }
.bsshop-shop-main { flex: 1; min-width: 0; }
.bsshop-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem;
}
.bsshop-shop-toolbar p { font-size: .875rem; color: var(--bs-mid); }
.bsshop-shop-toolbar select {
  padding: .4rem .75rem; border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius); font-size: .875rem; font-family: var(--bs-font);
}
.bsshop-pagination { display: flex; gap: .5rem; margin-top: 2rem; justify-content: center; }
.bsshop-pagination a, .bsshop-pagination span {
  padding: .5rem .85rem; border-radius: var(--bs-radius);
  border: 1px solid var(--bs-border); font-size: .875rem; color: var(--bs-dark);
}
.bsshop-pagination a:hover, .bsshop-pagination .current {
  background: var(--bs-primary); color: var(--bs-white); border-color: var(--bs-primary);
}

/* ---------- Single Product ---------- */
.bsshop-single-product { padding: 2rem 0; }
.bsshop-product-layout { display: flex; gap: 2rem; flex-wrap: wrap; }
.bsshop-product-gallery { flex: 1; min-width: 260px; }
.bsshop-product-info { flex: 1; min-width: 260px; }
.bsshop-product-summary-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; line-height: 1.3; }
.bsshop-product-summary-price { font-size: 1.6rem; font-weight: 800; color: var(--bs-primary); margin-bottom: 1rem; }
.bsshop-product-summary-price del { font-size: 1rem; color: var(--bs-mid); font-weight: 400; }
.bsshop-product-summary-price ins { text-decoration: none; }
.bsshop-product-summary-short { color: var(--bs-mid); margin-bottom: 1.25rem; font-size: .95rem; }
.bsshop-product-atc { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.bsshop-product-atc .quantity input {
  width: 70px; padding: .65rem .5rem; border: 2px solid var(--bs-border);
  border-radius: var(--bs-radius); text-align: center; font-size: 1rem;
  font-family: var(--bs-font);
}
.bsshop-product-atc .single_add_to_cart_button {
  background: var(--bs-primary); color: var(--bs-white); border: none;
  padding: .75rem 1.5rem; border-radius: var(--bs-radius); font-weight: 700;
  font-size: 1rem; cursor: pointer; transition: background var(--bs-transition);
}
.bsshop-product-atc .single_add_to_cart_button:hover { background: var(--bs-primary-dk); }
.bsshop-product-specs { background: var(--bs-light); border-radius: var(--bs-radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.bsshop-product-specs h4 { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.bsshop-product-specs table { width: 100%; font-size: .875rem; }
.bsshop-product-specs table tr td:first-child { font-weight: 600; width: 40%; padding: .3rem 0; color: var(--bs-dark); }
.bsshop-product-specs table tr td:last-child  { color: var(--bs-mid); }
.bsshop-product-meta-row { font-size: .8rem; color: var(--bs-mid); margin-top: 1rem; }
.bsshop-product-tabs { margin-top: 2rem; }
.bsshop-tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--bs-border); margin-bottom: 1.5rem; }
.bsshop-tab-nav a {
  padding: .65rem 1.25rem; font-size: .9rem; font-weight: 600;
  color: var(--bs-mid); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.bsshop-tab-nav a.active, .bsshop-tab-nav a:hover { color: var(--bs-primary); border-color: var(--bs-primary); }

/* ---------- Cart ---------- */
.bsshop-cart-wrap { padding: 2rem 0; }
.bsshop-cart-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.bsshop-cart-table th {
  background: var(--bs-light); padding: .75rem 1rem; text-align: left;
  font-size: .875rem; font-weight: 700; color: var(--bs-dark);
  border-bottom: 2px solid var(--bs-border);
}
.bsshop-cart-table td { padding: 1rem; border-bottom: 1px solid var(--bs-border); vertical-align: middle; }
.bsshop-cart-table td.product-thumbnail img { width: 70px; border-radius: var(--bs-radius); }
.bsshop-cart-totals {
  margin-left: auto; max-width: 360px;
  background: var(--bs-light); border-radius: var(--bs-radius); padding: 1.5rem;
}
.bsshop-cart-totals h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.bsshop-cart-totals table { width: 100%; }
.bsshop-cart-totals td { padding: .5rem 0; font-size: .9rem; }
.bsshop-cart-totals .order-total td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--bs-border); padding-top: .75rem; }

/* ---------- Checkout ---------- */
.bsshop-checkout-wrap { padding: 2rem 0; }
.bsshop-checkout-inner { display: flex; gap: 2rem; flex-wrap: wrap; }
.bsshop-checkout-form { flex: 1; min-width: 280px; }
.bsshop-checkout-summary { width: 340px; flex-shrink: 0; }
.bsshop-form-row { margin-bottom: 1rem; }
.bsshop-form-row label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.bsshop-form-row input,
.bsshop-form-row select,
.bsshop-form-row textarea {
  width: 100%; padding: .65rem .875rem; border: 2px solid var(--bs-border);
  border-radius: var(--bs-radius); font-size: .9rem; font-family: var(--bs-font);
  transition: border-color var(--bs-transition); outline: none;
}
.bsshop-form-row input:focus,
.bsshop-form-row select:focus,
.bsshop-form-row textarea:focus { border-color: var(--bs-primary); }
.bsshop-checkout-order {
  background: var(--bs-light); border-radius: var(--bs-radius); padding: 1.25rem;
  position: sticky; top: 90px;
}
.bsshop-checkout-order h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.bsshop-checkout-order table { width: 100%; font-size: .875rem; }
.bsshop-checkout-order td { padding: .4rem 0; }
.bsshop-checkout-order .order-total td { font-weight: 700; border-top: 2px solid var(--bs-border); padding-top: .75rem; }
.bsshop-section-heading { font-size: 1.15rem; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--bs-primary); }
.bsshop-form-half { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- WooCommerce Notices ---------- */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  padding: 1rem 1.25rem; border-radius: var(--bs-radius); margin-bottom: 1rem;
  font-size: .9rem; list-style: none;
}
.woocommerce-message { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.woocommerce-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.woocommerce-info    { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }
.woocommerce-message a.button, .woocommerce-error a.button { font-weight: 600; color: inherit; text-decoration: underline; }

/* ---------- Breadcrumb ---------- */
.bsshop-breadcrumb { padding: .75rem 0; font-size: .8rem; color: var(--bs-mid); border-bottom: 1px solid var(--bs-border); }
.bsshop-breadcrumb a { color: var(--bs-mid); }
.bsshop-breadcrumb a:hover { color: var(--bs-primary); }
.bsshop-breadcrumb span { margin: 0 .4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  /* Header: logo+actions on one row, search drops below */
  .bsshop-header-inner { flex-wrap: wrap; gap: .4rem; }
  .bsshop-logo { order: 1; }
  .bsshop-header-actions { order: 2; margin-left: auto; }
  .bsshop-menu-toggle { order: 0; }
  .bsshop-header-search {
    order: 3; width: 100%; flex: none;
    display: none; /* hidden until search toggle clicked */
  }
  .bsshop-header-search.is-open { display: block; }

  .bsshop-cat-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; }
  .bsshop-shop-layout { flex-direction: column; }
  .bsshop-sidebar { width: 100%; }
  .bsshop-product-layout { flex-direction: column; }
  .bsshop-checkout-inner { flex-direction: column; }
  .bsshop-checkout-summary { width: 100%; }
  .bsshop-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .bsshop-hero { padding: 2rem 0; }
  .bsshop-form-half { grid-template-columns: 1fr; }
  .bsshop-menu-toggle { display: block; }
  .bsshop-nav-menu { display: none; flex-direction: column; width: 100%; }
  .bsshop-nav-menu.is-open { display: flex; }
  .bsshop-nav-inner { flex-wrap: wrap; justify-content: flex-end; }
  .bsshop-cart-table thead { display: none; }
  .bsshop-cart-table td { display: block; border: none; padding: .5rem 1rem; }
  .bsshop-cart-table td::before { content: attr(data-label); font-weight: 700; display: inline-block; width: 90px; }
  .bsshop-cart-table tr { border-bottom: 2px solid var(--bs-border); margin-bottom: .5rem; display: block; }

  /* Smaller product grid on tablet */
  .bsshop-products-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
}

@media (max-width: 480px) {
  .bsshop-cat-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .bsshop-cat-card { padding: 1rem .5rem .75rem; }
  .bsshop-cat-icon-wrap { width: 52px; height: 52px; margin-bottom: .6rem; }
  .bsshop-cat-icon-wrap i { font-size: 1.75rem; }
  .bsshop-hero h1 { font-size: 1.4rem; }
  .bsshop-section-title { font-size: 1.3rem; }
  /* 2-column product grid on mobile */
  .bsshop-products-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .bsshop-product-body { padding: .6rem; }
  .bsshop-product-title { font-size: .8rem; }
  .bsshop-product-price { font-size: .9rem; }
  .bsshop-footer-grid { grid-template-columns: 1fr; }
  /* Compact icon buttons on very small screens */
  .bsshop-icon-btn { width: 32px; height: 32px; font-size: .95rem; }
}

/* ==========================================================================
   Fix 1 — Font Awesome icon visibility
   Ensure FA icons are never hidden by theme or plugin resets
   ========================================================================== */
.fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}
/* Prevent WooCommerce or Elementor from stripping icon content */
.bsshop-header i,
.bsshop-nav i,
.bsshop-btn i,
.bsshop-hero i,
.bsshop-cat-icon-wrap i,
.bsshop-why-card i,
.bsshop-footer i,
.bsshop-wa-float i {
  pointer-events: none;
}

/* ==========================================================================
   Fix 2 — Cart icon & live count
   ========================================================================== */
.bsshop-cart-icon {
  position: relative;
  color: var(--bs-dark);
  font-size: 1.3rem;
  padding: .35rem .5rem;
  display: inline-flex;
  align-items: center;
}
.bsshop-cart-icon .bsshop-cart-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--bs-accent);
  color: var(--bs-white);
  font-size: .65rem;
  font-weight: 700;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 3px;
}
/* Hide count badge when zero — still rendered for AJAX to update */
.bsshop-cart-count:empty,
.bsshop-cart-icon .bsshop-cart-count[data-count="0"] { opacity: 0; }

/* Bounce animation on add-to-cart */
@keyframes bsshop-bounce {
  0%,100%{ transform: scale(1);   }
  40%    { transform: scale(1.35);}
  70%    { transform: scale(.9); }
}
.bsshop-bounce { animation: bsshop-bounce .5s ease; }

/* ==========================================================================
   Fix 3 — Elementor compatibility
   Prevent our styles from interfering with Elementor widgets
   ========================================================================== */
.elementor-widget-wrap .bsshop-btn { display: inline-flex; }
.elementor-section { max-width: 100%; }
/* Elementor canvas / full-width: no extra padding from our container */
.elementor-page .bsshop-header { position: relative; }

/* ==========================================================================
   Fix 4 — Mobile search toggle
   ========================================================================== */
/* Search toggle button: visible on mobile, hidden on desktop where bar is always shown */
.bsshop-search-toggle { display: none; }
@media (max-width: 768px) {
  .bsshop-search-toggle { display: inline-flex; }
  /* On desktop, always show search bar */
  .bsshop-header-search { display: block; }
}

/* ==========================================================================
   WooCommerce loop override — force our grid, not WC default float layout
   ========================================================================== */
.bsshop-woo-main ul.products,
.bsshop-products-grid.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 1.25rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.bsshop-woo-main ul.products li.product,
.bsshop-products-grid.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* WC ordering dropdown */
.woocommerce-ordering select {
  padding: .4rem .75rem;
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  font-size: .875rem;
  font-family: var(--bs-font);
  background: var(--bs-white);
}

/* WC quantity input */
.woocommerce .quantity input.qty {
  border: 2px solid var(--bs-border);
  border-radius: var(--bs-radius);
  padding: .6rem .5rem;
  text-align: center;
  font-size: 1rem;
  width: 70px;
}

/* Single product Add to Cart button */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border-radius: var(--bs-radius) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: .75rem 1.5rem !important;
  transition: background var(--bs-transition) !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--bs-primary-dk) !important;
  color: var(--bs-white) !important;
}

/* WC star ratings */
.star-rating span::before { color: var(--bs-accent); }

/* WC notices - already styled but ensure they show above Elementor content */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info { position: relative; z-index: 1; }