/* ==========================================================================
   Category Page Redesign — CoversCenter
   Targets .category-cms with cc- prefixed wrapper classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables
   -------------------------------------------------------------------------- */
:root {
  --cc-popular-color: #dc2626;
  --cc-popular-bg: #fee2e2;
  --cc-premium-color: #16a34a;
  --cc-premium-bg: #dcfce7;
  --cc-deluxe-color: #2563eb;
  --cc-deluxe-bg: #dbeafe;
  --cc-satin-color: #18181b;
  --cc-satin-bg: #e5e7eb;
  --cc-basic-color: #ea580c;
  --cc-basic-bg: #fed7aa;
  --cc-radius: 12px;
  --cc-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --cc-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.14);
  --cc-sidebar-width: 300px;
}

/* --------------------------------------------------------------------------
   2. Page Grid Layout
   -------------------------------------------------------------------------- */
.cc-page-grid {
  display: grid;
  grid-template-columns: var(--cc-sidebar-width) 1fr;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */
.cc-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Override Page Builder inline 50/50 flex columns inside sidebar */
.cc-sidebar .pagebuilder-column-line {
  flex-direction: column !important;
  gap: 20px;
}

.cc-sidebar .pagebuilder-column-line > [data-content-type="column"],
.cc-sidebar .pagebuilder-column-line > .pagebuilder-column {
  width: 100% !important;
  flex-basis: 100% !important;
}

/* Override Page Builder bg-color-sec inside sidebar */
.cc-sidebar .bg-color-sec {
  background: transparent !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   4. Sidebar — Vehicle Selector (.search-category-form)
   -------------------------------------------------------------------------- */
.cc-sidebar .search-category-form {
  background: #dc2626 !important;
  border-radius: var(--cc-radius);
  padding: 24px 20px !important;
  color: #fff;
}

.cc-sidebar .search-category-form h2,
.cc-sidebar .search-category-form h3,
.cc-sidebar .search-category-form .title,
.cc-sidebar .search-category-form label {
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  text-align: center;
}

.cc-sidebar .search-category-form select,
.cc-sidebar .search-category-form .form-control {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  background: #fff;
  color: #333;
  appearance: auto;
}

.cc-sidebar .search-category-form button,
.cc-sidebar .search-category-form input[type="submit"],
.cc-sidebar .search-category-form .btn {
  width: 100%;
  background: #000 !important;
  color: #fff !important;
  border: none;
  border-radius: 6px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}

.cc-sidebar .search-category-form button:hover,
.cc-sidebar .search-category-form input[type="submit"]:hover,
.cc-sidebar .search-category-form .btn:hover {
  background: #222 !important;
}

/* --------------------------------------------------------------------------
   5. Sidebar — Image Card (.category-headerimg)
   -------------------------------------------------------------------------- */
.cc-sidebar .category-headerimg {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--cc-radius);
  padding: 16px;
  text-align: center;
  overflow: hidden;
}

.cc-sidebar .category-headerimg img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}

.cc-sidebar .category-headerimg h2,
.cc-sidebar .category-headerimg h3,
.cc-sidebar .category-headerimg .title {
  font-weight: 800;
  font-size: 15px;
  color: #111;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cc-sidebar .category-headerimg p,
.cc-sidebar .category-headerimg .subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Sidebar — Info Box (Row 2 text block)
   -------------------------------------------------------------------------- */
.cc-sidebar > [data-content-type="row"]:nth-child(2),
.cc-sidebar > div:nth-child(2) .bg-color-sec {
  background: #f3f4f6 !important;
  border-radius: var(--cc-radius);
  padding: 20px !important;
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
}

.cc-sidebar > div:nth-child(2) .bg-color-sec h3,
.cc-sidebar > div:nth-child(2) .bg-color-sec h4,
.cc-sidebar > div:nth-child(2) .bg-color-sec strong {
  color: #111;
  font-weight: 700;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   7. Products Area
   -------------------------------------------------------------------------- */
.cc-products {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   8. Product Card Base (.category-page-Sec)
   -------------------------------------------------------------------------- */
.category-page-Sec {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  border-radius: var(--cc-radius) !important;
  box-shadow: var(--cc-shadow);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  background: #fff;
  border: 2px solid #e5e7eb;
}

.category-page-Sec:hover {
  box-shadow: var(--cc-shadow-hover);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   9. Product Card — Left Column (image, price, CTA)
   -------------------------------------------------------------------------- */
.category-page-Sec > .pagebuilder-column-line {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
}

/* Left part — assumes first column or a wrapper containing image/price */
.category-page-Sec .pagebuilder-column-line > [data-content-type="column"]:first-child,
.category-page-Sec .pagebuilder-column-line > .pagebuilder-column:first-child {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Right part */
.category-page-Sec .pagebuilder-column-line > [data-content-type="column"]:last-child,
.category-page-Sec .pagebuilder-column-line > .pagebuilder-column:last-child,
.category-page-Sec .right-part-outdoor {
  flex: 1 !important;
  max-width: 66.666% !important;
  padding: 20px 24px !important;
}

.right-part-outdoor {
  flex: 1;
  padding: 20px 24px;
}

/* Product image */
.category-page-Sec img.pagebuilder-mobile-hidden,
.category-page-Sec .product-image img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   10. Per-Tier Border Colors
   -------------------------------------------------------------------------- */
.popular_cus.category-page-Sec {
  border-color: var(--cc-popular-bg);
  border-left: 4px solid var(--cc-popular-color);
}

.premium_cus.category-page-Sec {
  border-color: var(--cc-premium-bg);
  border-left: 4px solid var(--cc-premium-color);
}

.deluxe_cus.category-page-Sec {
  border-color: var(--cc-deluxe-bg);
  border-left: 4px solid var(--cc-deluxe-color);
}

.satin_cus.category-page-Sec {
  border-color: var(--cc-satin-bg);
  border-left: 4px solid var(--cc-satin-color);
}

.basic_cus.category-page-Sec {
  border-color: var(--cc-basic-bg);
  border-left: 4px solid var(--cc-basic-color);
}

/* --------------------------------------------------------------------------
   11. Tag Badges (.black-bg-box) — Positioned top-right, pill shape
   -------------------------------------------------------------------------- */
.black-bg-box {
  position: absolute !important;
  top: 12px;
  right: 12px;
  left: auto !important;
  width: auto !important;
  padding: 6px 16px !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff !important;
  text-align: center;
  z-index: 10;
  display: inline-block !important;
}

.popular_cus .black-bg-box {
  background: var(--cc-popular-color) !important;
}

.premium_cus .black-bg-box {
  background: var(--cc-premium-color) !important;
}

.deluxe_cus .black-bg-box {
  background: var(--cc-deluxe-color) !important;
}

.satin_cus .black-bg-box {
  background: var(--cc-satin-color) !important;
}

.basic_cus .black-bg-box {
  background: var(--cc-basic-color) !important;
}

/* --------------------------------------------------------------------------
   12. Star Ratings (.review-list-part)
   -------------------------------------------------------------------------- */
.review-list-part {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-list-part .fa-star {
  color: #facc15;
}

/* --------------------------------------------------------------------------
   13. Price (.price-part-cate)
   -------------------------------------------------------------------------- */
.price-part-cate {
  font-size: 28px !important;
  font-weight: 800;
  color: #16a34a !important;
  margin: 10px 0;
}

.price-part-cate .old-price,
.price-part-cate del {
  font-size: 16px;
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 8px;
}

/* --------------------------------------------------------------------------
   14. CTA Button (.cta-btn-width a)
   -------------------------------------------------------------------------- */
.cta-btn-width {
  width: 100%;
  margin-top: 12px;
}

.cta-btn-width a {
  display: block;
  width: 100%;
  background: #dc2626 !important;
  color: #fff !important;
  text-align: center;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s;
  border: none;
}

.cta-btn-width a:hover {
  background: #b91c1c !important;
  text-decoration: none;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   15. Description (.outdoor-pragraph-secondary)
   -------------------------------------------------------------------------- */
.outdoor-pragraph-secondary {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   16. Promo Banner (.custom-template-free)
   -------------------------------------------------------------------------- */
.custom-template-free {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
}

.custom-template-free img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   17. Free Items List (.list-group-item)
   -------------------------------------------------------------------------- */
.list-group-item {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-group-item .fa-check-circle,
.list-group-item .fa-check {
  color: #16a34a !important;
}

.list-group-item::before {
  display: none;
}

/* --------------------------------------------------------------------------
   18. Product Specs (.product-highlight-short)
   -------------------------------------------------------------------------- */
.product-highlight-short {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}

.product-highlight-short > div,
.product-highlight-short > span,
.product-highlight-short > li,
.product-highlight-short > p {
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: #374151;
}

.product-highlight-short strong,
.product-highlight-short b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   19. Trust Badges (.grid-quick-outdoor / .grid-bg-color)
   -------------------------------------------------------------------------- */
.grid-quick-outdoor {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.grid-bg-color {
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 11px;
  line-height: 1.4;
  color: #374151;
}

.grid-bg-color .fa-check-circle,
.colorgreen.fa.fa-check-circle {
  display: block;
  font-size: 22px;
  color: #16a34a !important;
  margin-bottom: 6px;
}

.grid-bg-color strong,
.grid-bg-color b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   20. Responsive — Tablet (max-width: 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .cc-page-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cc-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .cc-sidebar > div {
    flex: 1 1 48%;
    min-width: 280px;
  }

  .cc-sidebar .pagebuilder-column-line {
    flex-direction: row !important;
  }

  .cc-sidebar .pagebuilder-column-line > [data-content-type="column"],
  .cc-sidebar .pagebuilder-column-line > .pagebuilder-column {
    width: 50% !important;
    flex-basis: 50% !important;
  }
}

/* --------------------------------------------------------------------------
   21. Responsive — Mobile (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cc-page-grid {
    padding: 12px;
    gap: 16px;
  }

  .cc-sidebar {
    flex-direction: column;
  }

  .cc-sidebar > div {
    flex: 1 1 100%;
  }

  .cc-sidebar .pagebuilder-column-line {
    flex-direction: column !important;
  }

  .cc-sidebar .pagebuilder-column-line > [data-content-type="column"],
  .cc-sidebar .pagebuilder-column-line > .pagebuilder-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Product cards stack vertically */
  .category-page-Sec {
    flex-direction: column !important;
  }

  .category-page-Sec > .pagebuilder-column-line {
    flex-direction: column !important;
  }

  .category-page-Sec .pagebuilder-column-line > [data-content-type="column"]:first-child,
  .category-page-Sec .pagebuilder-column-line > .pagebuilder-column:first-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  .category-page-Sec .pagebuilder-column-line > [data-content-type="column"]:last-child,
  .category-page-Sec .pagebuilder-column-line > .pagebuilder-column:last-child,
  .category-page-Sec .right-part-outdoor {
    max-width: 100% !important;
    padding: 16px !important;
  }

  /* Tag badge repositions */
  .black-bg-box {
    top: 8px;
    right: 8px;
    font-size: 11px;
    padding: 4px 12px !important;
  }

  /* Trust badges 2-col on mobile */
  .grid-quick-outdoor {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Specs 1-col on very small screens */
  .product-highlight-short {
    grid-template-columns: 1fr;
  }

  /* Price size adjusts */
  .price-part-cate {
    font-size: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   22. Utility Overrides for Page Builder inline styles
   -------------------------------------------------------------------------- */
.cc-page-grid [data-content-type="row"] {
  margin: 0 !important;
}

.cc-products [data-content-type="row"] {
  padding: 0 !important;
  margin: 0 !important;
}

.cc-products .category-page-Sec [style*="justify-content"] {
  justify-content: flex-start !important;
}

/* Hide any duplicate backgrounds from Page Builder */
.cc-products > div > div[data-content-type="row"] > div {
  background: transparent !important;
}

/* Ensure smooth font rendering */
.cc-page-grid {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default Page Builder row min-height and paddings inside cards */
.category-page-Sec [data-content-type="row"] {
  min-height: auto !important;
}

/* Product Name Heading */
.cc-product-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 0 0 10px 0 !important;
  padding-right: 100px;
  line-height: 1.3;
}

/* Hide sub-heading in tag badge */
.sub-heading-category-s {
  display: none !important;
}

/* Badge paragraph styling (remove default p margins) */
.black-bg-box p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* The product card inner structure needs position relative for absolute badge */
.category-page-Sec > .pagebuilder-column-group:first-child {
  position: absolute !important;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: auto !important;
}

.category-page-Sec > .pagebuilder-column-group:first-child .pagebuilder-column-line {
  width: auto !important;
}

.category-page-Sec > .pagebuilder-column-group:first-child .pagebuilder-column {
  width: auto !important;
  flex: none !important;
}

/* Make the second column-group (actual content) full width */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) {
  width: 100% !important;
}

/* Override Page Builder margin on category-page-Sec */
.category-page-Sec {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Price styling refinements */
.start-pri {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 2px;
}

.price-green-bold {
  font-size: 28px;
  font-weight: 800;
  color: #16a34a;
}

/* Review list part layout fix */
.review-list-part {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.review-list-part .col-left {
  flex: 1;
  min-width: 120px;
}

.review-list-part .col-left ul {
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-list-part .col-left ul li {
  font-size: 12px;
  color: #6b7280;
}

.review-list-part .col-left ul li strong {
  color: #374151;
}

.red-colr-high {
  color: #dc2626 !important;
  font-weight: 700;
}

/* Offer section layout */
.offer-part-p {
  margin: 12px 0;
}

.offer-part-p .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}

.offer-part-p .col-lg-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 4px;
  margin-bottom: 6px;
}

/* Product specs layout fix for the row-based structure */
.product-highlight-short .row {
  display: contents;
}

.product-highlight-short .col-lg-3 {
  display: none;
}

.product-highlight-short .col-lg-9 {
  text-align: left;
}

/* Actually override to make specs 3-col */
.product-highlight-short {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.product-highlight-short > .row {
  display: flex !important;
  flex-direction: column !important;
}

.product-highlight-short > .row .col-lg-3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.product-highlight-short > .row .col-lg-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.product-label-p {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  font-weight: 700;
  margin-bottom: 2px;
}

.product-label-show-p {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

/* Grid badges list fix */
.grid-quick-outdoor ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px;
}

.grid-quick-outdoor ul li {
  list-style: none;
}

.grid-bg-color p {
  margin: 4px 0 0 0 !important;
  font-size: 10px !important;
  font-weight: 700;
  color: #6b7280;
  line-height: 1.3;
}

.grid-bg-color span {
  display: flex;
  justify-content: center;
}

.grid-bg-color .colorgreen {
  width: 32px;
  height: 32px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
}

/* Hide badge containers where the text is hidden */
.grid-bg-color:has(p[style*="display:none"]) {
  display: none !important;
}

/* Fallback for browsers without :has() - hide by matching parent li */
li:has(.grid-bg-color p[style*="display:none"]) {
  display: none !important;
}

/* 30 Day Returns badge label */
.grid-quick-outdoor ul li:last-child .grid-bg-color p {
  display: block !important;
}

/* ==========================================================================
   23. DESIGN MATCH — Visual updates to align with Figma React design
   Higher-specificity overrides for Bootstrap + Page Builder cascade
   ========================================================================== */

/* Card border — full 2px colored border (replacing left-only accent) */
.popular_cus.category-page-Sec {
  border: 2px solid #fecaca !important; /* border-red-200 */
  border-left: 2px solid #fecaca !important;
}
.premium_cus.category-page-Sec {
  border: 2px solid #bbf7d0 !important; /* border-green-200 */
  border-left: 2px solid #bbf7d0 !important;
}
.deluxe_cus.category-page-Sec {
  border: 2px solid #bfdbfe !important; /* border-blue-200 */
  border-left: 2px solid #bfdbfe !important;
}
.satin_cus.category-page-Sec {
  border: 2px solid #e5e7eb !important; /* border-gray-200 */
  border-left: 2px solid #e5e7eb !important;
}
.basic_cus.category-page-Sec {
  border: 2px solid #fed7aa !important; /* border-orange-200 */
  border-left: 2px solid #fed7aa !important;
}

/* Light gray bg on left column area (image + ratings + price + CTA) */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:first-child {
  background: rgba(249, 250, 251, 0.5) !important; /* bg-gray-50/50 */
  border-right: 1px solid #f3f4f6 !important;
}

/* Remove image border box, add multiply blend */
.category-page-Sec figure,
.category-page-Sec figure[data-content-type="image"] {
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  display: block !important;
}

.category-page-Sec figure img,
.category-page-Sec .pagebuilder-mobile-hidden,
.category-page-Sec .pagebuilder-mobile-only {
  border: none !important;
  background: transparent !important;
  mix-blend-mode: multiply;
  max-width: 220px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
  border-radius: 0 !important;
}

/* Freebies — force green bg (override Bootstrap .bg-transparent) */
.category-page-Sec .list-group-item,
.category-page-Sec .list-group-item.bg-transparent,
.offer-part-p .list-group-item,
.offer-part-p .list-group-item.bg-transparent,
li.list-group-item.bg-transparent {
  background: #f0fdf4 !important;
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  color: #166534 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

/* Add check icon before freebie text using span class */
.category-page-Sec .list-group-item .text-blue,
.category-page-Sec .list-group-item span.text-blue {
  color: #16a34a !important;
  font-weight: 700;
  position: relative;
  padding-left: 22px;
}

.category-page-Sec .list-group-item .text-blue::before {
  content: "\f058"; /* fa-check-circle */
  font-family: 'FontAwesome', 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #16a34a;
  font-size: 16px;
}

/* Tag (MOST POPULAR / PREMIUM) — pill with right overhang */
.category-page-Sec .black-bg-box {
  position: absolute !important;
  top: 16px !important;
  right: -2px !important;
  left: auto !important;
  width: auto !important;
  padding: 6px 14px !important;
  border-radius: 20px 0 0 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #fff !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
}

/* Specs section — match Figma gray card */
.product-highlight-short {
  background: #f9fafb !important;
  border: 1px solid #f3f4f6 !important;
  border-radius: 8px !important;
  padding: 14px !important;
  gap: 16px !important;
}

.product-label-p {
  color: #9ca3af !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.product-label-show-p {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Trust badges — match Figma circle-icon style */
.grid-quick-outdoor {
  border-top: 1px solid #f3f4f6 !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
}

.grid-bg-color {
  background: transparent !important;
  padding: 4px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.grid-bg-color .colorgreen,
.grid-bg-color .fa-check-circle.colorgreen {
  width: 36px !important;
  height: 36px !important;
  background: #dcfce7 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 6px !important;
  font-size: 14px !important;
  color: #16a34a !important;
}

.grid-bg-color p {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Description text */
.outdoor-pragraph-secondary p,
.outdoor-pragraph-secondary {
  font-size: 14px !important;
  color: #4b5563 !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* Price section centered, big green */
.price-part-cate {
  text-align: center !important;
  margin: 16px 0 !important;
}

.start-pri {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

.price-green-bold {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #16a34a !important;
  text-align: center !important;
  letter-spacing: -0.5px !important;
}

/* CTA button — full width, refined */
.cta-btn-width {
  width: 100% !important;
  margin-top: 4px !important;
}

.cta-btn-width a {
  display: block !important;
  width: 100% !important;
  background: #dc2626 !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
  transition: all 0.2s !important;
}

.cta-btn-width a:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
  transform: translateY(-1px);
}

/* Promo banner image — clean styling */
.custom-template-free,
.offer-part-p .custom-template-free,
.offer-part-p > .row.custom-template-free {
  margin: 0 0 16px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.custom-template-free img,
.offer-part-p .custom-template-free img {
  width: 100% !important;
  display: block !important;
  border-radius: 8px !important;
}

/* Ensure right column has proper padding and bg-white */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:last-child {
  background: #fff !important;
  padding: 24px !important;
}

/* Left column padding */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:first-child {
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Review-list-part inside left column — proper width */
.category-page-Sec .review-list-part {
  width: 100% !important;
  margin: 12px 0 16px 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.review-list-part .col-left ul li {
  font-size: 12px !important;
}

.review-list-part .col-left ul li strong {
  color: #6b7280 !important;
  font-weight: 500 !important;
}

.review-list-part img {
  height: 12px !important;
  width: auto !important;
}

/* Card overall — softer shadow, rounded corners */
.category-page-Sec {
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  margin-bottom: 24px !important;
}

.category-page-Sec:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px);
}

/* Product name heading — when added via SQL */
.cc-product-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #18181b !important;
  margin: 0 0 12px 0 !important;
  padding-right: 100px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
}

/* ==========================================================================
   24. FIXES — Image duplication and ratings layout
   ========================================================================== */

/* Hide mobile-only image on desktop, hide desktop image on mobile */
.category-page-Sec .pagebuilder-mobile-only,
.category-page-Sec img.pagebuilder-mobile-only {
  display: none !important;
}

@media (max-width: 767px) {
  .category-page-Sec .pagebuilder-mobile-hidden,
  .category-page-Sec img.pagebuilder-mobile-hidden {
    display: none !important;
  }
  .category-page-Sec .pagebuilder-mobile-only,
  .category-page-Sec img.pagebuilder-mobile-only {
    display: block !important;
  }
}

/* Ratings — robust two-column layout that doesn't overlap */
.category-page-Sec .review-list-part {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 16px 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.category-page-Sec .review-list-part .col-left {
  flex: 1 1 calc(50% - 6px) !important;
  min-width: 100px !important;
  max-width: calc(50% - 6px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.category-page-Sec .review-list-part .col-left ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.category-page-Sec .review-list-part .col-left ul li {
  font-size: 11px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.category-page-Sec .review-list-part .col-left ul li strong {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

.category-page-Sec .review-list-part .col-left ul li img {
  height: 10px !important;
  max-height: 10px !important;
  width: auto !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  display: inline-block !important;
  border: none !important;
}

.category-page-Sec .review-list-part .col-left ul li.red-colr-high {
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* ==========================================================================
   25. FIX — Ratings layout: stack vertically to prevent overlap
   ========================================================================== */

/* Force review-list-part to be a single-column vertical stack */
.category-page-Sec .review-list-part {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.category-page-Sec .review-list-part .col-left {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.category-page-Sec .review-list-part .col-left ul {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  gap: 8px !important;
  width: 100% !important;
}

.category-page-Sec .review-list-part .col-left:last-child ul:last-child {
  border-bottom: none !important;
}

.category-page-Sec .review-list-part .col-left ul li {
  font-size: 12px !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  white-space: nowrap !important;
}

.category-page-Sec .review-list-part .col-left ul li strong {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

.category-page-Sec .review-list-part .col-left ul li img {
  height: 12px !important;
  max-height: 12px !important;
  width: auto !important;
  vertical-align: middle !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  border: none !important;
  display: inline-block !important;
}

.category-page-Sec .review-list-part .col-left ul li.red-colr-high {
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* Fix overflow in left column area */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:first-child {
  overflow: visible !important;
  min-width: 0 !important;
}

/* Description block padding */
.right-part-outdoor {
  padding: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   26. FINAL TWEAKS — Trust badge box removal + heading style
   ========================================================================== */

/* Remove white box outlines on trust badges (Figma has plain bg) */
.category-page-Sec .grid-quick-outdoor ul li {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.category-page-Sec .grid-bg-color {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 4px !important;
}

/* Product name heading — once added via SQL it will use this class */
.cc-product-name,
h2.cc-product-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #18181b !important;
  margin: 0 0 14px 0 !important;
  padding-right: 110px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
  font-family: inherit !important;
}

/* Dark promo banner style (replaces image when SQL changes content) */
.cc-promo-banner {
  background: #18181b !important;
  color: #fff !important;
  border-radius: 10px !important;
  border-left: 4px solid #dc2626 !important;
  padding: 14px 18px !important;
  margin: 0 0 20px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.cc-promo-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.cc-promo-free {
  background: #dc2626 !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  transform: skewX(-10deg) !important;
  display: inline-block !important;
  letter-spacing: 0.5px !important;
}

.cc-promo-value {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
}

.cc-promo-amount {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.cc-promo-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  letter-spacing: 1.5px !important;
  margin-top: 2px !important;
  text-transform: uppercase !important;
}

.cc-promo-right {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #d1d5db !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-align: right !important;
  flex: 1 !important;
  min-width: 180px !important;
}

/* ==========================================================================
   27. FIX — Chosen.js dropdown text in sidebar (was white on white)
   ========================================================================== */

/* Override inherited white color on chosen-single text inside red sidebar */
.cc-sidebar .chosen-container,
.cc-sidebar .chosen-container-single,
.cc-sidebar .chosen-container-single .chosen-single,
.cc-sidebar .chosen-container-single .chosen-single span,
.cc-sidebar .chosen-container-single .chosen-default,
.cc-sidebar .chosen-container-single .chosen-default span {
  color: #333 !important;
}

.cc-sidebar .chosen-container-single .chosen-single {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: #111 !important;
}

.cc-sidebar .chosen-container-single .chosen-single span {
  color: #111 !important;
  font-weight: 500 !important;
  line-height: 44px !important;
  margin-right: 26px !important;
}

/* Arrow icon styling */
.cc-sidebar .chosen-container-single .chosen-single div {
  top: 0 !important;
  height: 44px !important;
  width: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cc-sidebar .chosen-container-single .chosen-single div b {
  background-position: 0 13px !important;
}

/* Disabled state — slightly faded */
.cc-sidebar .chosen-container-single.chosen-disabled .chosen-single {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

.cc-sidebar .chosen-container-single.chosen-disabled .chosen-single span {
  color: #6b7280 !important;
}

/* Dropdown when open */
.cc-sidebar .chosen-container .chosen-drop {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px !important;
}

.cc-sidebar .chosen-container .chosen-results li {
  color: #111 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
}

.cc-sidebar .chosen-container .chosen-results li.highlighted {
  background: #dc2626 !important;
  color: #fff !important;
}

.cc-sidebar .chosen-container .chosen-search input {
  color: #111 !important;
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   28. POLISH PASS — Tighten spacing, fix text wrapping, refine details
   ========================================================================== */

/* === Image area: tighter, better proportioned === */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:first-child {
  padding: 28px 24px !important;
  background: #fafafa !important;
  border-right: 1px solid #f3f4f6 !important;
}

.category-page-Sec figure img,
.category-page-Sec .pagebuilder-mobile-hidden,
.category-page-Sec .pagebuilder-mobile-only {
  max-width: 240px !important;
  width: 100% !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)) !important;
  mix-blend-mode: multiply !important;
  padding: 12px !important;
}

.category-page-Sec figure {
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* === Ratings: tighter rhythm === */
.category-page-Sec .review-list-part {
  margin: 18px 0 !important;
  padding: 12px 0 !important;
}

.category-page-Sec .review-list-part .col-left ul {
  padding: 7px 0 !important;
  min-height: 22px !important;
}

.category-page-Sec .review-list-part .col-left ul li {
  font-size: 13px !important;
}

.category-page-Sec .review-list-part .col-left ul li strong {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.category-page-Sec .review-list-part .col-left ul li.red-colr-high {
  font-size: 13px !important;
}

.category-page-Sec .review-list-part .col-left ul li img {
  height: 14px !important;
  max-height: 14px !important;
}

/* === Price section: tighter, cleaner === */
.category-page-Sec .price-part-cate {
  margin: 12px 0 16px 0 !important;
}

.category-page-Sec .start-pri {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

.category-page-Sec .price-green-bold {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
}

/* === CTA Button: cleaner, no harsh shadow === */
.category-page-Sec .cta-btn-width a {
  padding: 14px 20px !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.category-page-Sec .cta-btn-width a:hover {
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

/* === Right column: tighter padding === */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:last-child {
  padding: 28px 28px 24px 28px !important;
}

/* === Product name heading: tighter, refined === */
.cc-product-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 10px 0 !important;
  padding-right: 110px !important;
  line-height: 1.3 !important;
}

/* === Description: tighter line-height, smaller margin === */
.category-page-Sec .outdoor-pragraph-secondary p,
.category-page-Sec .outdoor-pragraph-secondary {
  font-size: 14px !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.category-page-Sec .outdoor-pragraph-secondary p:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* === Promo banner: prevent text wrap, more compact === */
.cc-promo-banner {
  padding: 12px 14px !important;
  margin: 0 0 16px 0 !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.cc-promo-left {
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.cc-promo-free {
  font-size: 18px !important;
  padding: 4px 10px !important;
}

.cc-promo-amount {
  font-size: 20px !important;
}

.cc-promo-label {
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
}

.cc-promo-right {
  font-size: 10px !important;
  letter-spacing: 0.6px !important;
  line-height: 1.4 !important;
  min-width: 0 !important;
  text-align: right !important;
  flex: 1 1 auto !important;
}

/* === Freebies: tighter, smaller === */
.offer-part-p {
  margin: 0 0 16px 0 !important;
}

.category-page-Sec .list-group-item,
.category-page-Sec .list-group-item.bg-transparent,
li.list-group-item.bg-transparent {
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.offer-part-p .col-lg-6 {
  margin-bottom: 8px !important;
}

/* === Specs: prevent ugly text wrap, more compact === */
.product-highlight-short {
  padding: 12px 14px !important;
  margin: 0 0 18px 0 !important;
  gap: 10px !important;
  grid-template-columns: 1fr 1.2fr 0.8fr !important;
}

.product-label-p {
  font-size: 9px !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 3px !important;
}

.product-label-show-p {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* === Trust badges: more compact === */
.grid-quick-outdoor {
  margin-top: 14px !important;
  padding-top: 16px !important;
}

.grid-quick-outdoor ul {
  gap: 6px !important;
}

.category-page-Sec .grid-bg-color {
  padding: 4px 2px !important;
}

.grid-bg-color .colorgreen,
.grid-bg-color .fa-check-circle.colorgreen {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto 4px !important;
  font-size: 12px !important;
}

.grid-bg-color p {
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* === Card overall: cleaner border-radius, less aggressive shadow === */
.category-page-Sec {
  border-radius: 14px !important;
  margin-bottom: 20px !important;
}

/* === Tag pill: slightly smaller, cleaner === */
.category-page-Sec .black-bg-box {
  top: 14px !important;
  padding: 5px 14px !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

/* ==========================================================================
   29. POLISH PASS 2 — Larger fonts, tighter whitespace, more refinement
   ========================================================================== */

/* === Left column: tighter padding === */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:first-child {
  padding: 20px 18px !important;
}

/* === Right column: tighter padding === */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:last-child {
  padding: 22px 24px 20px 24px !important;
}

/* === Image: larger, less margin === */
.category-page-Sec figure {
  margin: 0 0 4px 0 !important;
}

.category-page-Sec figure img,
.category-page-Sec .pagebuilder-mobile-hidden,
.category-page-Sec .pagebuilder-mobile-only {
  max-width: 260px !important;
  padding: 8px !important;
}

/* === Ratings: tighter rhythm, slightly bigger text === */
.category-page-Sec .review-list-part {
  margin: 12px 0 14px 0 !important;
  padding: 10px 0 !important;
}

.category-page-Sec .review-list-part .col-left ul {
  padding: 6px 0 !important;
  min-height: 24px !important;
}

.category-page-Sec .review-list-part .col-left ul li,
.category-page-Sec .review-list-part .col-left ul li strong,
.category-page-Sec .review-list-part .col-left ul li.red-colr-high {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.category-page-Sec .review-list-part .col-left ul li img {
  height: 15px !important;
  max-height: 15px !important;
}

/* === Price section === */
.category-page-Sec .price-part-cate {
  margin: 8px 0 12px 0 !important;
}

.category-page-Sec .start-pri {
  font-size: 13px !important;
}

.category-page-Sec .price-green-bold {
  font-size: 34px !important;
}

/* === CTA button: slightly bigger text === */
.category-page-Sec .cta-btn-width a {
  padding: 13px 20px !important;
  font-size: 14px !important;
  letter-spacing: 1.2px !important;
}

/* === Product heading: bigger, tighter margin === */
.cc-product-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  padding-right: 110px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
}

/* === Description: tighter spacing === */
.category-page-Sec .outdoor-pragraph-secondary p,
.category-page-Sec .outdoor-pragraph-secondary {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
}

/* === Promo banner: slightly bigger text === */
.cc-promo-banner {
  padding: 12px 16px !important;
  margin: 0 0 14px 0 !important;
}

.cc-promo-free {
  font-size: 19px !important;
  padding: 5px 11px !important;
}

.cc-promo-amount {
  font-size: 22px !important;
}

.cc-promo-label {
  font-size: 10px !important;
}

.cc-promo-right {
  font-size: 11px !important;
  letter-spacing: 0.7px !important;
}

/* === Freebies: slightly bigger text, tighter spacing === */
.offer-part-p {
  margin: 0 0 14px 0 !important;
}

.category-page-Sec .list-group-item,
.category-page-Sec .list-group-item.bg-transparent,
li.list-group-item.bg-transparent {
  padding: 9px 12px !important;
  font-size: 13px !important;
}

.offer-part-p .col-lg-6 {
  margin-bottom: 6px !important;
}

/* === Specs: bigger labels, tighter padding === */
.product-highlight-short {
  padding: 12px 14px !important;
  margin: 0 0 14px 0 !important;
  gap: 12px !important;
}

.product-label-p {
  font-size: 10px !important;
  letter-spacing: 0.7px !important;
  margin-bottom: 4px !important;
}

.product-label-show-p {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* === Trust badges: bigger icons and labels, tighter === */
.grid-quick-outdoor {
  margin-top: 10px !important;
  padding-top: 14px !important;
}

.grid-quick-outdoor ul {
  gap: 8px !important;
}

.category-page-Sec .grid-bg-color {
  padding: 4px 2px !important;
}

.grid-bg-color .colorgreen,
.grid-bg-color .fa-check-circle.colorgreen {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto 5px !important;
  font-size: 14px !important;
}

.grid-bg-color p {
  font-size: 11px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;
}

/* === Card overall: tighter bottom margin === */
.category-page-Sec {
  margin-bottom: 18px !important;
}

/* === Tag pill: slightly more prominent === */
.category-page-Sec .black-bg-box {
  top: 12px !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
}

/* === Sidebar: tighten === */
.cc-sidebar .pagebuilder-column-line {
  gap: 0 !important;
}

.cc-sidebar .chosen-container {
  margin-bottom: 8px !important;
}

/* === Final fix: prevent specs wrap, better column ratio === */
.product-highlight-short {
  grid-template-columns: 0.9fr 1.5fr 0.6fr !important;
}

/* Remove white box around image (left column bg shows through better) */
.category-page-Sec figure,
.category-page-Sec figure[data-content-type="image"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.category-page-Sec figure img,
.category-page-Sec .pagebuilder-mobile-hidden,
.category-page-Sec .pagebuilder-mobile-only {
  background: transparent !important;
  padding: 0 !important;
}

/* ==========================================================================
   30. EXACT FIGMA MATCH — Final pass to match design 1:1
   ========================================================================== */

/* === Title: one line, no padding-right === */
.cc-product-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 12px 0 !important;
  padding-right: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
  white-space: normal !important;
}

/* Right column needs space at top for the heading to not overlap with pill */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:last-child {
  padding: 22px 130px 22px 28px !important;
}

/* === Remove description separator line === */
.category-page-Sec .outdoor-pragraph-secondary p,
.category-page-Sec .outdoor-pragraph-secondary {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 18px !important;
}

/* === Ratings: 2x2 grid for middle 4 items, full-width Use & Warranty === */
.category-page-Sec .review-list-part {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "use use"
    "dust coverfit"
    "softness durability"
    "warranty warranty" !important;
  gap: 10px 14px !important;
  padding: 14px 0 !important;
  margin: 14px 0 !important;
}

/* col-left wrappers become invisible to layout (children are grid items) */
.category-page-Sec .review-list-part .col-left {
  display: contents !important;
}

/* First col-left children = Use, Dust, Softness */
.category-page-Sec .review-list-part .col-left:first-child ul:nth-child(1) { grid-area: use !important; }
.category-page-Sec .review-list-part .col-left:first-child ul:nth-child(2) { grid-area: dust !important; }
.category-page-Sec .review-list-part .col-left:first-child ul:nth-child(3) { grid-area: softness !important; }
/* Second col-left children = Cover fit, Durability, Warranty */
.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(1) { grid-area: coverfit !important; }
.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(2) { grid-area: durability !important; }
.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(3) { grid-area: warranty !important; }

/* Use & Warranty rows: horizontal label-value layout (full width) */
.category-page-Sec .review-list-part .col-left ul:nth-child(1),
.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(3) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(3) {
  border-bottom: none !important;
  border-top: 1px solid #f3f4f6 !important;
}

/* Middle 4 items (Dust/Cover fit/Softness/Durability): label on top, stars below */
.category-page-Sec .review-list-part .col-left:first-child ul:nth-child(2),
.category-page-Sec .review-list-part .col-left:first-child ul:nth-child(3),
.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(1),
.category-page-Sec .review-list-part .col-left:last-child ul:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  padding: 0 !important;
  border: none !important;
}

/* Add colon after strong labels */
.category-page-Sec .review-list-part .col-left ul li strong::after {
  content: ":" !important;
}

/* === Trust badges: distinct icons per badge === */
/* Default to check-circle, override per position */

/* 2nd badge: Lifetime Warranty - shield icon */
.grid-quick-outdoor ul li:nth-child(2) .fa.fa-check-circle::before,
.grid-quick-outdoor ul li:nth-child(2) i.fa-check-circle::before {
  content: "\f3ed" !important;  /* fa-shield-alt */
}

/* 3rd badge: Free Shipping - truck icon */
.grid-quick-outdoor ul li:nth-child(3) .fa.fa-check-circle::before,
.grid-quick-outdoor ul li:nth-child(3) i.fa-check-circle::before {
  content: "\f0d1" !important;  /* fa-truck */
}

/* 4th badge: 30 Day Returns - refresh icon */
.grid-quick-outdoor ul li:nth-child(4) .fa.fa-check-circle::before,
.grid-quick-outdoor ul li:nth-child(4) i.fa-check-circle::before {
  content: "\f2f9" !important;  /* fa-redo / refresh */
}

/* Trust badge labels: force 2-line wrap for visual consistency */
.grid-bg-color p {
  max-width: 70px !important;
  margin: 0 auto !important;
  word-spacing: 999px !important;  /* forces each word to its own line */
}

/* === Promo banner polish === */
.cc-promo-banner {
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border-left: 5px solid #dc2626 !important;
}

.cc-promo-free {
  font-size: 20px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
}

.cc-promo-amount {
  font-size: 24px !important;
  font-weight: 900 !important;
}

.cc-promo-label {
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
}

.cc-promo-right {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
}

/* === MOST POPULAR pill: clean rectangle, no overhang === */
.category-page-Sec .black-bg-box {
  top: 14px !important;
  right: 14px !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
}

/* === Image area: bigger, more prominent === */
.category-page-Sec figure img,
.category-page-Sec .pagebuilder-mobile-hidden,
.category-page-Sec .pagebuilder-mobile-only {
  max-width: 280px !important;
}

/* === Card: subtle but visible border === */
.popular_cus.category-page-Sec {
  border: 2px solid #fecaca !important;
}
.premium_cus.category-page-Sec {
  border: 2px solid #bbf7d0 !important;
}
.deluxe_cus.category-page-Sec {
  border: 2px solid #bfdbfe !important;
}
.satin_cus.category-page-Sec {
  border: 2px solid #e5e7eb !important;
}
.basic_cus.category-page-Sec {
  border: 2px solid #fed7aa !important;
}

/* === Specs: cleaner === */
.product-highlight-short {
  background: #f9fafb !important;
  border: 1px solid #f3f4f6 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}

.product-label-p {
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
  color: #9ca3af !important;
  margin-bottom: 6px !important;
}

.product-label-show-p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* ==========================================================================
   31. CRITICAL FIXES from polish pass 30
   ========================================================================== */

/* Restore right column normal padding (was squeezing all content) */
.category-page-Sec > .pagebuilder-column-group:nth-child(2) .pagebuilder-column-line > .pagebuilder-column:last-child {
  padding: 22px 28px 22px 28px !important;
}

/* Title: apply padding-right ONLY to it (not the whole column) */
.cc-product-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 12px 0 !important;
  padding-right: 130px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.4px !important;
}

/* Remove word-spacing hack from trust badges - causes too many side effects */
.grid-bg-color p {
  word-spacing: normal !important;
  max-width: none !important;
}

/* Trust badge labels — use specific line breaks via white-space */
.grid-bg-color p {
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
}

/* Promo banner: fix wrapping of right text */
.cc-promo-banner {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.cc-promo-left {
  flex-shrink: 0 !important;
  min-width: max-content !important;
}

.cc-promo-right {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  text-align: right !important;
  white-space: normal !important;
  word-spacing: normal !important;
  line-height: 1.35 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Freebies: prevent word-by-word wrapping */
.category-page-Sec .list-group-item,
.category-page-Sec .list-group-item.bg-transparent,
li.list-group-item.bg-transparent {
  white-space: normal !important;
  word-spacing: normal !important;
}

/* Specs: prevent text wrapping */
.product-label-show-p {
  white-space: normal !important;
  word-spacing: normal !important;
  line-height: 1.3 !important;
}

/* === Force title to one line === */
.cc-product-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 100px !important;
  font-size: 19px !important;
}

/* === Icon improvements: use proper Font Awesome glyphs === */
/* Default badge keeps check (1st) */

/* 2nd: Lifetime Warranty - shield */
.grid-quick-outdoor ul li:nth-child(2) i.fa.fa-check-circle::before,
.grid-quick-outdoor ul li:nth-child(2) i.fa-check-circle::before {
  content: "\f132" !important;  /* fa-shield (FA4) or shield-alt FA5 */
}

/* 3rd: Free Shipping - truck */
.grid-quick-outdoor ul li:nth-child(3) i.fa.fa-check-circle::before,
.grid-quick-outdoor ul li:nth-child(3) i.fa-check-circle::before {
  content: "\f0d1" !important;  /* fa-truck */
}

/* 4th: 30 Day Returns - history/undo arrow */
.grid-quick-outdoor ul li:nth-child(4) i.fa.fa-check-circle::before,
.grid-quick-outdoor ul li:nth-child(4) i.fa-check-circle::before {
  content: "\f0e2" !important;  /* fa-undo */
}

/* === Title: fit one line, NO ellipsis === */
.cc-product-name {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-right: 90px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 14px !important;
}

/* === Promo banner: force right text to max 2 lines === */
.cc-promo-banner {
  padding: 14px 18px !important;
  gap: 14px !important;
}

/* Make left side more compact */
.cc-promo-left {
  flex-shrink: 0 !important;
  gap: 10px !important;
}

.cc-promo-free {
  font-size: 18px !important;
  padding: 5px 12px !important;
}

.cc-promo-amount {
  font-size: 22px !important;
}

.cc-promo-label {
  font-size: 9px !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}

/* Right text: smaller font, max 2 lines via line-clamp */
.cc-promo-right {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.4 !important;
  text-align: right !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #fff !important;

  /* Force max 2 lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* === FORCE ONE LINE: promo right, freebies, specs values === */

/* Promo banner right: one line, smaller if needed */
.cc-promo-right {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  text-align: right !important;
  overflow: visible !important;
  -webkit-line-clamp: none !important;
  display: block !important;
}

/* Freebies: each item on ONE LINE */
.category-page-Sec .list-group-item,
.category-page-Sec .list-group-item.bg-transparent,
li.list-group-item.bg-transparent {
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Specs values: ONE LINE */
.product-label-show-p {
  white-space: nowrap !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tighter specs grid + smaller label so values fit */
.product-highlight-short {
  grid-template-columns: 1fr 1.4fr 0.7fr !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

.product-label-p {
  font-size: 10px !important;
  white-space: nowrap !important;
}

/* === Promo banner: allow wrap to max 2 lines (not nowrap which overflows) === */
.cc-promo-right {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-align: right !important;
}

/* === Promo banner: give right text more space, fit in 2 lines === */
.cc-promo-banner {
  padding: 12px 16px !important;
  gap: 12px !important;
}

.cc-promo-left {
  flex: 0 0 auto !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 55% !important;
}

.cc-promo-free {
  font-size: 16px !important;
  padding: 4px 10px !important;
}

.cc-promo-amount {
  font-size: 20px !important;
}

.cc-promo-label {
  font-size: 8px !important;
  letter-spacing: 0.8px !important;
}

.cc-promo-right {
  flex: 1 1 45% !important;
  min-width: 0 !important;
  max-width: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.3 !important;
  text-align: right !important;
  white-space: normal !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  -webkit-box-orient: initial !important;
}

/* --------------------------------------------------------------------------
   38. CMS Page List Bullets (P2 polish)
   Why Choose Us section + other CMS bullet lists were rendering as raw text
   because theme reset removed list-style. Restore proper bullets.
   -------------------------------------------------------------------------- */
.cms-home .page-main [data-content-type="text"] ul,
.cms-page-view .page-main [data-content-type="text"] ul {
  list-style: disc outside !important;
  padding-left: 24px !important;
  margin: 8px 0 16px !important;
}
.cms-home .page-main [data-content-type="text"] ul li,
.cms-page-view .page-main [data-content-type="text"] ul li {
  list-style: disc !important;
  display: list-item !important;
  margin-bottom: 4px !important;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   39. PDP DETAILS Heading (P2 polish)
   The red DETAILS button-looking element sits orphaned above the table.
   Style as a proper heading visually connected to the spec table below.
   -------------------------------------------------------------------------- */
.catalog-product-view .product.data.items > .data.item.title > .switch,
.catalog-product-view .product.data.items > .data.item.title {
  background: #1a1a1a !important;
  color: #fff !important;
  display: block !important;
  padding: 14px 24px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 24px 0 0 !important;
  width: 100% !important;
  border: none !important;
}
.catalog-product-view .additional-attributes-wrapper table,
.catalog-product-view #product-attribute-specs-table {
  margin-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
}
/* PDP details anchor cleanup */
.catalog-product-view .product.data.items > .data.item.title > a.switch {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  border: none !important;
  text-decoration: none !important;
}
.catalog-product-view .product.data.items > .data.item.title > a.switch:hover {
  color: #fff !important;
  background: transparent !important;
}
/* PDP title: flex layout to center the inner anchor properly */
.catalog-product-view .product.data.items > .data.item.title {
  min-height: 56px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 24px !important;
  line-height: 1.3 !important;
}
.catalog-product-view .product.data.items > .data.item.title > a.switch {
  display: inline-block !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
   40. Text search grid fallback (P1)
   Template renders cards in .cc-search-grid when the request isn't a
   specific vehicle filter. Comparison table is preserved for vehicle search.
   -------------------------------------------------------------------------- */
.cc-search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 24px 0;
}
.cc-search-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cc-search-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.cc-search-card-img {
  display: block;
  margin: -16px -16px 12px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #f5f5f5;
  aspect-ratio: 4 / 3;
}
.cc-search-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cc-search-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 8px 0;
  min-height: 60px;
}
.cc-search-card-title a {
  color: #18181b;
  text-decoration: none;
}
.cc-search-card-title a:hover {
  color: #dc2626;
}
.cc-search-card-price {
  font-size: 18px;
  font-weight: 700;
  color: #dc2626;
  margin: 8px 0 12px;
}
.cc-search-card-price .price {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.cc-search-card-price .old-price .price {
  color: #999;
  font-size: 13px;
  font-weight: 400;
  text-decoration: line-through;
}
.cc-search-card-btn {
  background: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cc-search-card-btn:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.cc-search-card-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
}
.cc-search-card-link {
  display: block;
  text-align: center;
  color: #18181b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  padding: 10px 16px;
  margin-top: 0;
  background: #fff;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cc-search-card-link:hover {
  color: #dc2626;
  border-color: #dc2626;
  background: #fef2f2;
  text-decoration: none;
}
@media (max-width: 1100px) {
  .cc-search-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cc-search-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cc-search-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   41. Vehicle search table — restore vertical alignment when 5 cols
   -------------------------------------------------------------------------- */
.catalogsearch-result-index .products-table td {
  vertical-align: middle;
}

/* Search card price block tweaks: muted 'Regular Price' label, tighter spacing */
.cc-search-card-price .price-label,
.cc-search-card-price .old-price-text,
.cc-search-card-price .label {
  color: #71717a !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
.cc-search-card-price .old-price {
  margin-top: 4px;
}
.cc-search-card-price .price-box .old-price .price-wrapper .price,
.cc-search-card-price .old-price .price {
  color: #a1a1aa !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}
/* The 'Your save' line — push label muted, amount red bold */
.cc-search-card-price .saving-msg,
.cc-search-card-price .savings,
.cc-search-card-price [class*='save'] {
  color: #18181b !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.cc-search-card-price [class*='save'] .price {
  color: #dc2626 !important;
  font-weight: 700 !important;
}
/* Tighten title min-height and overall spacing */
.cc-search-card-title {
  min-height: 48px !important;
  margin: 8px 0 12px !important;
}
.cc-search-card {
  padding: 14px !important;
}
.cc-search-card-img {
  margin: -14px -14px 8px !important;
  border-radius: 11px 11px 0 0 !important;
}
.cc-search-card-price {
  margin: 4px 0 12px !important;
}

/* ====== MOBILE FIX 2026-05-20: force full-width columns on category pages ====== */
@media (max-width: 767px) {
  /* All PageBuilder columns inside category sections become full-width */
  .category-page-Sec [data-content-type="column"],
  .category-page-Sec .pagebuilder-column {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  /* Force column-lines to stack vertically */
  .category-page-Sec .pagebuilder-column-line,
  .cc-page-grid > * {
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Right-part outdoor card stacks below image */
  .right-part-outdoor,
  .pagebuilder-column.right-part-outdoor {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Sidebar (vehicle picker) stacks under main on small screens */
  .cc-page-grid {
    display: block !important;
  }
  .cc-sidebar {
    margin-bottom: 20px;
  }

  /* Free-bonus banner adapts */
  .black-bg-box {
    font-size: 13px;
    padding: 6px 10px !important;
  }

  /* Product image not too tall */
  .category-page-Sec img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Prevent horizontal scroll on body */
  html, body, .page-wrapper, .page-main {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Tap targets at least 44px (a11y) */
  .add-to-cart-cate,
  .add-cart-quick,
  button.action.tocart,
  .cc-sidebar .smas-button {
    min-height: 44px;
    font-size: 16px;
  }
}

/* Very small viewports: tighten further */
@media (max-width: 480px) {
  .category-page-Sec {
    margin-bottom: 16px;
  }
  .price-part-cate,
  .price-amount-cate {
    font-size: 22px !important;
  }
  .grid-quick-outdoor {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}
/* ====== END MOBILE FIX 2026-05-20 ====== */

/* ====== MOBILE FIX 2026-05-20 v2: tighten chosen.js dropdowns + sidebar overflow ====== */
@media (max-width: 767px) {
  /* Chosen.js plugin enforces inline widths that overflow on mobile */
  .chosen-container,
  .chosen-container.chosen-container-single,
  .chosen-container.chosen-with-drop,
  .chosen-container .chosen-drop,
  .chosen-container .chosen-results,
  .chosen-container input.chosen-search-input,
  .chosen-container .chosen-search input[type="text"],
  .chosen-search input,
  .search-form-cus .chosen-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* SMAS form labels/headings shouldn't have nowrap or fixed width */
  .search_head_cus,
  .form-ln-cus,
  .start-here-cus,
  .start-here-cus h2,
  .start-here-cus h3 {
    max-width: 100% !important;
    width: 100% !important;
    white-space: normal !important;
  }

  /* Sidebar children + sidebar itself fit viewport */
  .cc-sidebar,
  .cc-sidebar > div,
  .cc-sidebar > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box;
  }

  /* Universal column-line fix (was missing :not(:first-child)) */
  .pagebuilder-column-line {
    flex-wrap: wrap !important;
  }
  .pagebuilder-column-line > [data-content-type="column"],
  .pagebuilder-column-line > .pagebuilder-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* All PageBuilder rows/groups fit viewport */
  [data-content-type="row"],
  [data-content-type="column-group"],
  .pagebuilder-column-group,
  [data-element="inner"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Truncate long words/URLs */
  h1, h2, h3, h4, p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}
/* ====== END MOBILE FIX v2 ====== */

/* ====== MOBILE FIX 2026-05-20 v3: allow wrap on titles + badges ====== */
@media (max-width: 767px) {
  /* Product titles MUST wrap on mobile */
  .cc-product-name,
  .right-part-outdoor h1,
  .right-part-outdoor h2,
  .right-part-outdoor h3,
  .right-part-outdoor h4 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Free X badges should wrap their text */
  .free-shipping,
  .free-bonus-item,
  [class*="Free"],
  [class*="free-"] {
    white-space: normal !important;
  }

  /* Any rogue nowrap inside category sections - allow wrapping */
  .category-page-Sec * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .category-page-Sec [style*="nowrap"] {
    white-space: normal !important;
  }
}
/* ====== END MOBILE FIX v3 ====== */

/* ====== MOBILE FIX 2026-05-20 v4: remove padding-right on title (was reserving 100px for badge) ====== */
@media (max-width: 767px) {
  /* Force title to use full column width on mobile */
  h2.cc-product-name,
  .cc-product-name,
  .right-part-outdoor .cc-product-name,
  .right-part-outdoor h2.cc-product-name,
  .right-part-outdoor > .outdoor-pragraph-secondary .cc-product-name {
    padding-right: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The badge that was supposed to fit in the padding area: move it below */
  .black-bg-box,
  .right-part-outdoor .black-bg-box {
    position: static !important;
    display: inline-block;
    margin: 0 0 8px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* Free-X badges - allow wrap, smaller */
  .free-perks,
  .grid-quick-outdoor > div,
  [class*="perks"],
  [class*="badge"] {
    white-space: normal !important;
    font-size: 12px !important;
    word-break: break-word !important;
  }

  /* Specs/icon grid - allow shrink */
  .product-highlight-short,
  .product-highlight-short > div {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}
/* ====== END MOBILE FIX v4 ====== */

/* ====== MOBILE FIX 2026-05-20 v5: bootstrap row negative-margin + offer badges ====== */
@media (max-width: 767px) {
  /* Bootstrap .row inside category page should not have negative margins */
  .category-page-Sec .row,
  .right-part-outdoor .row,
  .outdoor-pragraph-secondary .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .category-page-Sec .row > [class*="col-"],
  .right-part-outdoor .row > [class*="col-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* right-part-outdoor should fit inside its column without overflowing */
  .right-part-outdoor {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* offer-part-p (Free X badges container) */
  .offer-part-p,
  .outdoor-pragraph-secondary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The badges themselves - tighter */
  .col-lg-6 {
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }
}
/* ====== END MOBILE FIX v5 ====== */

/* ====== MOBILE FIX 2026-05-20 v6: stack the offer badges single-column ====== */
@media (max-width: 480px) {
  /* On phone width, the 'Free Storage Bag' style badges go full-width */
  .offer-part-p .row > .col-lg-6,
  .right-part-outdoor .row > .col-lg-6,
  .outdoor-pragraph-secondary .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 6px;
  }
}

@media (max-width: 767px) {
  /* Shrink badge font so 2-col fits on most phones */
  .offer-part-p .row > .col-lg-6,
  .right-part-outdoor .row > .col-lg-6 {
    font-size: 12px !important;
  }
  .offer-part-p .row > .col-lg-6 *,
  .right-part-outdoor .row > .col-lg-6 * {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}
/* ====== END MOBILE FIX v6 ====== */