:root {
  --primary-color: #723988;
  --secondary-color: #c6168d;
  --light-gray: #f5f5f5;
  --dark-gray: #393b40;
  --gray: #3f454f;
  --blue: #4462e4;
  --blue-active: #2f51e1;
  --hover-color: #3a59e2;
  --black: #07090f;
  --white: #f5f7fa;
  --off-white: #e2e8f0;
}

body {
  background-color: var(--light-gray);
  color: var(--dark-gray);
  font-family: 'Poppins', Arial, sans-serif;
}

/* Home page */

.hero-section {
  background: linear-gradient(135deg, #23272b 0%);
  color: white;
  padding: 100px 0;
  text-align: center;
}

.hero-section h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.hero-section p {
  font-size: 1.25rem;
  opacity: 0.95;
  max-width: 700px;
  margin: 0 auto;
}

.category-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 3rem;
}

.feature-box {
  background: white;
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  height: 100%;
  transition: transform 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-5px);
}

.feature-box i {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.feature-box h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.why-dell-section {
  background: var(--light-gray);
  padding: 80px 0;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.75rem;
  }
}

/* Computers and Monitors category pages */
.form-check-input:hover {
  border-color: var(--primary-color);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(0, 125, 184, 0.25);
  border-color: var(--primary-color);
}

.card-img {
  height: 250px;
  object-fit: contain !important;
  background: var(--light-gray);
  padding: 1rem;
}

.loader-wrapper {
  width: 100%;
  height: auto;
  padding: 20px 0;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 30px;
  height: 30px;
  border: 4px solid #ccc;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0;
}

.loader-text {
  margin-top: 12px;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: var(--primary-color);
  animation: loader-inner 2s infinite ease-in;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.category-btn.active {
  background-color: var(--dark-gray) !important;
  color: white !important;
}

.category-btn:hover {
  background-color: var(--primary-color);
  color: var(--light-gray);
}

.category-scrollbar.grabbing {
  cursor: grabbing;
}

.category-scrollbar button:focus,
.category-scrollbar button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.filter-collapse {
  overflow: hidden;
  transition: height 0.25s ease;
}

.filter-group.is-closed .filter-collapse {
  height: 0;
}

.filter-group.is-closed .filter-options {
  margin-top: 0 !important;
}

.filter-options {
  margin-top: 0.5rem;
}

.filter-group > button {
  color: var(--primary-color) !important;
}

.filter-group > button i,
.filter-group > button span {
  color: var(--primary-color) !important;
}

.btn-dell {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-dell:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 118, 206, 0.3);
}

.btn-link {
  color: var(--primary-color);
}

.btn-link:hover {
  color: var(--hover-color);
}

.text-primary {
  color: var(--primary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.category-list {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
  margin-bottom: 0;
}

.category-link {
  text-decoration: none;
  color: #454545;
  font-weight: 500;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s ease-in-out;
  padding-bottom: 6px;
  font-size: 0.9rem;
}

.category-icon {
  font-size: 20px;
  margin-bottom: 4px;
  transition: color 0.25s ease-in-out;
  vertical-align: middle;
  margin-right: 4px;
}

.category-link:hover .category-icon,
.category-link.active .category-icon {
  color: var(--primary-color);
}

.category-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  border-radius: 1px;
  transition: all 0.25s ease-in-out;
  transform: translateX(-50%);
}

.category-link:hover::after,
.category-link.active::after {
  width: 100%;
}

.category-link:hover,
.category-link.active {
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .category-list {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .category-list::-webkit-scrollbar {
    display: none;
  }

  .category-list li {
    flex: 0 0 auto;
  }
}

/* quote request | shipping | contact bootstrap5 css start */
/* full width top menu used in virtual graffiti repo - quote req | contact | shipping */
.topmenu-fullwidth {
  padding-left: 0;
  padding-right: 0;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

@media (min-width: 768px) {
  .topmenu-fullwidth {
    margin-left: -3rem;
    margin-right: -3rem;
  }
}

.container h1,
.container h2,
.content a {
  color: var(--primary-color);
}

.bootstrap5-scope .container {
  width: 100%;
  overflow-x: hidden;
}

.bootstrap5-scope > .container {
  max-width: none;
}

.bootstrap5-scope .well {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
}

.bootstrap5-scope h1 {
  font-weight: 700;
  margin-bottom: 1rem;
}

.bootstrap5-scope .bootstrap-5-container {
  margin-top: 2.5rem;
  padding: 0 1rem 1rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.bootstrap5-scope .btn {
  padding: 0.375rem 0.75rem !important;
}

.vendorLogo {
  float: right;
  margin: 2px;
  text-align: right;
}

.content .delivery-banner {
  border-radius: 10px;
  background-color: var(--primary-color);
}

.content h1,
.content h2,
.content h3,
.content h4 {
  color: var(--primary-color);
  font-family: inherit;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 12px;
}

.content html {
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  .content .product-tab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
  }

  .content .product-tab .nav-link {
    flex: 0 0 auto;
  }

  .content .product-tab::-webkit-scrollbar {
    display: none;
  }
}

.smallHeaderText {
  font-size: 1.1rem;
  color: #333;
  font-weight: 400;
  display: block;
  margin-top: 4px;
}

/* quote request | shipping | contact bootstrap5 css end */

.btn-primary {
  background-color: var(--primary-color) !important;
  border-radius: 8px;
}

.btn-primary:hover {
  background-color: var(--hover-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 118, 206, 0.3);
}

.card {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 30px rgba(0, 118, 206, 0.15);
}

.card.no-hover:hover {
  border-color: #e0e0e0;
  box-shadow: none;
}

.card-img-top {
  height: 200px;
  object-fit: contain;
  padding: 1rem;
  background-color: #f8f9fa;
}

.card-body {
  padding: 1.5rem !important;
}

.card-title {
  color: var(--primary-color);
  font-weight: 700;
}

.btn {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-success {
  --bs-btn-bg: var(--primary-color) !important;
  --bs-btn-border-color: var(--primary-color) !important;
  --bs-btn-hover-bg: var(--hover-color) !important;
  --bs-btn-hover-border-color: var(--hover-color) !important;
  color: var(--white);
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-success:hover {
  background-color: var(--hover-color);
  color: var(--white);
}

.btn:focus,
.btn:focus-visible,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

.hover-lift {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.container-fluid hr {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
  opacity: 0.25 !important;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  font-size: 0.9rem;
  color: #6c757d;
  padding: 8px 15px;
  border-radius: 4px;
}

.breadcrumb li a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb li a:hover {
  color: var(--hover-color);
}

.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  content: '/\00a0';
  padding: 0 5px;
  color: #cccccc;
}
.breadcrumb > .active {
  color: #999999;
}

/* ---------------------- */
/* Product Page CSS Start */
/* ---------------------- */

/* Similar Products start */

.card-icon {
  font-size: 60px;
  margin-bottom: 8px;
  transition: color 0.25s ease-in-out;
}

.product-container .similar-products-section {
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  padding: 4rem 0;
}

.product-container .container {
  padding: 0 1.5rem;
}

.product-container .section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.product-container .badge {
  display: inline-block;
  padding: 6px 14px;
  background: #dbeafe;
  color: var(--primary-color);
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Up to 3 cards per row. The page sets --related-columns inline from
   product_grid_columns() so 5 cards fall as 3 + 2, with the short row centred. */
.product-container .similar-product-grid {
  --related-columns: 3;
  --related-gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--related-gap);
}

.product-container .similar-product-grid > .product-card {
  flex: 0 1 calc((100% - (var(--related-columns) - 1) * var(--related-gap)) / var(--related-columns));
  /* The card's own "margin: 0 auto" would eat the line's leftover space and beat
     justify-content, spreading a short last row apart. Let the grid centre it. */
  margin-left: 0;
  margin-right: 0;
}

/* Category buttons, shown only for the categorised layout */
.product-container .related-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 2rem;
  padding: 6px;
  background: rgba(241, 245, 249, 0.7);
  border-radius: 16px;
  width: fit-content;
  max-width: 100%;
}

.product-container .related-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.25s;
}

.product-container .related-tab-btn:hover {
  color: var(--primary-color);
}

.product-container .related-tab-btn.active {
  background: var(--white);
  color: var(--primary-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.product-container .related-tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--primary-color);
  font-size: 0.7rem;
  font-weight: 600;
}

.product-container .related-panel {
  display: none;
}

.product-container .related-panel.is-active {
  display: block;
}

.product-container .product-card {
  background: var(--white);
  border-radius: 1.5rem;
  border: 1px solid var(--off-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.product-container .product-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
}

.product-container .product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f1f5f9;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-container .product-image img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s;
  display: block;
}

.product-container .product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-container .popular-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary-color);
  color: var(--white);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-container .product-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-container .product-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.25rem;
}

.product-container .product-sku {
  font-size: 0.75rem;
  color: var(--gray);
  font-family: monospace;
  margin-bottom: 0.75rem;
}

/* Takes the space the spec list used to hold, keeping the footer bottom-aligned */
.product-container .product-card-description {
  font-size: 0.875rem;
  color: var(--gray);
  margin: 0 0 1rem 0;
  flex: 1;
}

.product-container .product-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  flex: 1;
}

.product-container .product-specs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.product-container .check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.product-container .product-footer {
  margin-top: auto;
}

.product-container .price-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 500;
}

.product-container .price {
  font-weight: 700;
  color: var(--black);
}

.product-container .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  background: var(--black);
  color: var(--white);
  transition: all 0.3s ease;
}

.product-container .btn:hover {
  background: var(--primary-color);
  color: var(--white);
}
/* Similar Products end */

/* Contact Start */
.product-container .contact-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a);
  padding: 5rem 0;
}

.product-container .cta-container {
  max-width: 1150px;
  margin: auto;
  padding: 0 1.5rem;
}

.product-container .cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 992px) {
  .product-container .cta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

/* Title */
.product-container .cta-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}

@media (min-width: 992px) {
  .product-container .cta-title {
    font-size: 3.2rem;
  }
}

/* Info rows */
.product-container .info-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--off-white);
  margin-bottom: 1rem;
}

.product-container .info-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-container .info-icon i {
  font-size: 1.1rem;
  color: var(--primary-color);
}

/* Buttons */
.product-container .cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 576px) {
  .product-container .cta-buttons {
    flex-direction: row;
  }
}

.product-container .btn-primary,
.product-container .btn-outline {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.product-container .btn-outline {
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.product-container .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Contact Card */
.product-container .contact-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 25px;
}

.product-container .card-header {
  text-align: center;
}

.product-container .card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom right, var(--hover-color), var(--primary-color));
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 0 25px rgba(33, 183, 166, 0.35);
}

.product-container .card-icon i {
  font-size: 2rem;
  color: var(--white);
}

.product-container .card-header h3 {
  color: white;
  font-size: 1.8rem;
}

.product-container .card-header p {
  color: #94a3b8;
}

.product-container .call-box,
.product-container .email-box {
  display: block;
  padding: 1.5rem;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.3s;
}

.product-container .call-box {
  background: linear-gradient(to right, var(--primary-color), var(--hover-color));
  margin-bottom: 1rem;
}

.product-container .call-box:hover {
  background: linear-gradient(to right, var(--hover-color), var(--primary-color));
}

.product-container .email-box {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.product-container .email-box:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.product-container .small-label {
  color: #cbd5e1;
  font-size: 0.9rem;
}

.product-container .call-number {
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
}

.product-container .email-address {
  font-size: 1.2rem;
  color: var(--white);
}

.product-container .fade-left,
.product-container .fade-right {
  opacity: 0;
}

.product-container .fade-left {
  transform: translateX(-30px);
  animation: fadeInLeft 0.8s forwards 0.2s;
}

.product-container .fade-right {
  transform: translateX(30px);
  animation: fadeInRight 0.8s forwards 0.4s;
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Contact End */

/* Product Tabs Section wrapper: "max-w-7xl mx-auto px-6" are Tailwind-style
   names left over from the original markup with no matching CSS anywhere on
   the site, so the tab content had no width cap or side padding at all. */
.product-container .max-w-7xl {
  max-width: 1280px;
}

.product-container .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.product-container .px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.product-container .title-lg {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--black);
  padding-top: 5px;
}

.product-container .subtitle-lg {
  font-size: 1.125rem;
  color: var(--gray);
  max-width: 600px;
  margin: auto;
  padding-bottom: 5px;
}

.product-container .tabs-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-top: 20px;
}

.product-container .tabs-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.product-container .tabs-scroll-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-container .product-tabs-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 245, 249, 0.7);
  padding: 6px 14px;
  border-radius: 16px;
  gap: 6px;
}

.product-container .tab-btn {
  padding: 10px 22px;
  border-radius: 12px;
  background: transparent;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.25s;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.product-container .tab-btn.active {
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.product-container .tab-content {
  display: none;
  margin-top: 20px;
}
.product-container .tab-content.active {
  display: block;
}

/* Cards fill the row width for any count up to 4. Above that the page sets
   --overview-columns inline (see product_grid_columns) to spread them over the
   fewest rows, and a short final row stays centred instead of leaving a gap. */
.product-container .overview-grid {
  --overview-columns: 4;
  --overview-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--overview-gap);
  margin: 20px 0 0;
}

.product-container .tab-content {
  padding: 10px 30px;
}

.product-container .overview-card {
  flex: 0 1 calc((100% - (var(--overview-columns) - 1) * var(--overview-gap)) / var(--overview-columns));
  background: linear-gradient(to bottom right, #f8fafc, #ffffff);
  border: 1px solid var(--off-white);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: 0.25s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.product-container .overview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.product-container .overview-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.product-container .overview-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--gray);
  margin-bottom: 0;
}

/* Feature lists inside a card. The card is centre-aligned, so the list is an
   inline-block: the block stays centred while its text reads left-aligned. */
.product-container .overview-card ul {
  display: inline-block;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.product-container .overview-card ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray);
}

.product-container .overview-card ul li + li {
  margin-top: 0.4rem;
}

/* Brand-coloured dot in place of the default marker */
.product-container .overview-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.product-container .feature-icon {
  width: 48px;
  height: 48px;
  background: #dbeafe;
  border-radius: 12px;
  margin: 0 auto 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: var(--primary-color);
}

/* Fallback for an image icon inside the default 48px plate. */
.product-container .feature-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Image icons (the per-product feature PNGs) carry their own colour and shape, so
   they get room to breathe and no tinted plate behind them. The box is sized by
   the artwork rather than fixed to 48px, since these are wider than they are tall. */
.product-container .feature-icon:has(img) {
  width: auto;
  height: 68px;
  background: none;
  border-radius: 0;
}

.product-container .feature-icon:has(img) img {
  max-width: 130px;
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.product-container .spec-table-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-container .spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.product-container .spec-table thead th {
  background: var(--primary-color);
  font-weight: 600;
  color: var(--white);
  padding: 14px 20px;
  text-align: left;
}

.product-container .spec-table th:first-child {
  text-align: left;
}

.product-container .spec-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.product-container .spec-table tbody tr:nth-child(odd) {
  background: var(--white);
}

.product-container .spec-table td {
  padding: 14px 20px;
  color: #1e293b;
}

.product-container .spec-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--gray);
}

.product-container .spec-table td:not(:first-child) {
  color: var(--black);
  font-weight: 500;
  text-align: left;
}

/* Multi-value spec cells (tech_specs groups with more than one entry) */
.product-container .spec-list {
  margin: 0;
  padding-left: 1.1rem;
}

.product-container .spec-list li {
  margin-bottom: 0.35rem;
}

.product-container .spec-list li:last-child {
  margin-bottom: 0;
}

.product-container .docs-grid {
  max-width: 600px;
  margin: auto;
  display: grid;
  gap: 16px;
}

.product-container .doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--off-white);
  background: var(--white);
  border-radius: 16px;
  transition: 0.25s;
  cursor: default; /* only the linked cards below are clickable */
}

/* Resources whose link is a real file or URL are wrapped in an anchor. */
.product-container .docs-grid a {
  text-decoration: none;
}

.product-container .docs-grid a .doc-card {
  cursor: pointer;
}

.product-container .doc-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

.product-container .doc-icon {
  /* Fixed basis with no grow/shrink: as a flex item the plate would otherwise give
     up width when a long resource description overflows the line, turning the
     square into a squashed rectangle. */
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: #fee2e2;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #dc2626;
  font-size: 20px;
}

.product-container .doc-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
}

.product-container .doc-meta {
  font-size: 0.8rem;
  color: var(--gray);
}

/* Resource type label.
   Each family below sets one accent, used by both the icon plate and the label, so
   a card needs ONE class plus the label text. Labels sharing a family share a look.
   All text/tint pairs clear WCAG AA (4.5:1) at the label's small bold size.

     class           labels it covers                          icon to use
     is-datasheet    Data Sheet, Reference Document            bi-file-earmark-pdf-fill
     is-guide        Design Guide, Buyer's Guide, User Guide   bi-book-half
     is-report       Report, Trend Report, White Paper, Ebook  bi-file-earmark-bar-graph-fill
     is-casestudy    Case Study                                bi-patch-check-fill
     is-brochure     Solution Brochure, Flyer, Infographic     bi-journal-richtext
     is-webpage      Web Page, Product Page, Blog              bi-globe
     is-webinar      Webinar                                   bi-camera-video-fill
     is-support      FAQ, Warranty                             bi-patch-question-fill

   No class = the red Data Sheet treatment, so untagged cards look unchanged. */
.product-container .doc-card,
.product-container .doc-card.is-datasheet {
  --doc-accent: #b91c1c;
  --doc-accent-bg: #fee2e2;
}

.product-container .doc-card.is-guide {
  --doc-accent: #4338ca;
  --doc-accent-bg: #e0e7ff;
}

.product-container .doc-card.is-report {
  --doc-accent: #0f766e;
  --doc-accent-bg: #ccfbf1;
}

.product-container .doc-card.is-casestudy {
  --doc-accent: #15803d;
  --doc-accent-bg: #dcfce7;
}

.product-container .doc-card.is-brochure {
  --doc-accent: var(--primary-color);
  --doc-accent-bg: #f4e9f8;
}

.product-container .doc-card.is-webpage {
  --doc-accent: #1d4ed8;
  --doc-accent-bg: #dbeafe;
}

.product-container .doc-card.is-webinar {
  --doc-accent: #be185d;
  --doc-accent-bg: #fce7f3;
}

.product-container .doc-card.is-support {
  --doc-accent: #b45309;
  --doc-accent-bg: #fef3c7;
}

.product-container .doc-icon {
  background: var(--doc-accent-bg);
  color: var(--doc-accent);
}

/* Text block takes the slack so the label can sit at the far edge. Targeted this
   way so no card markup needs an extra class. */
.product-container .doc-card > div:not(.doc-icon) {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word; /* an unbroken string can't push the card wider */
}

.product-container .doc-type {
  flex-shrink: 0;
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--doc-accent);
  background: var(--doc-accent-bg);
  color: var(--doc-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .product-container .doc-card {
    flex-wrap: wrap;
  }

  .product-container .doc-type {
    margin-left: 58px; /* clears the icon plate + gap */
  }
}

.product-container .tab-icon svg {
  display: block;
}

/* Narrower viewports override the card width directly: --overview-columns is set
   inline by the page, so a media query cannot win against it. */
@media (max-width: 900px) {
  .product-container .overview-card {
    flex-basis: calc((100% - var(--overview-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .product-container .overview-card {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  .product-container .similar-product-grid > .product-card {
    flex-basis: calc((100% - var(--related-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .product-container .similar-product-grid > .product-card {
    flex-basis: 100%;
  }
}

.product-container .product-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, #f8fafc, #ffffff, #eff6ff);
}

.product-container .product-section-container {
  max-width: 1280px;
  margin: 0 auto;
}

.product-container .product-grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  .product-container .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
  }
}

.product-container .product-img-card {
  position: relative;
  background: linear-gradient(to bottom right, #ffffff, #f8fafc);
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 8px 60px -15px rgba(0, 0, 0, 0.1);
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-container .product-img-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
  transition: transform 0.4s ease;
}

.product-container .product-img-card:hover img {
  transform: scale(1.08);
}

.product-container .badge-new {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: #10b981;
  color: white;
  padding: 0.3rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.product-container .badge {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
}

.product-container .badge-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.product-container .product-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 1rem;
}

.product-container .product-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  color: var(--gray);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.product-container .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray);
}

.product-container .meta-code {
  background: #f1f5f9;
  padding: 0.25rem 0.5rem;
  font-family: monospace;
  border-radius: 4px;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

.product-container .price-label {
  color: #94a3b8;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.product-container .pricing {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--off-white);
  background: var(--white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  font-family: 'Inter', sans-serif;
}

.product-container .pricing .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0.2rem 1rem;
  /* padding: 0.75rem 1.5rem; */
  align-items: center;
  border-top: 1px solid var(--off-white);
  margin: 0;
}

.product-container .pricing .col-sm-7,
.product-container .pricing .col-sm-3,
.product-container .pricing .col-sm-2 {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.product-container .pricing .col-sm-7 {
  flex: 0 0 58.333%;
  max-width: 58.333%;
}
.product-container .pricing .col-sm-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.product-container .pricing .col-sm-2 {
  flex: 0 0 16.667%;
  max-width: 16.667%;
}

.product-container .pricing .col-sm-7 strong {
  color: var(--black);
  font-weight: 600;
}

.product-container .pricing .col-sm-3 {
  color: var(--gray);
  font-size: 0.875rem;
}

.product-container .pricing .col-sm-3 a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.product-container .pricing .col-sm-3 a:hover {
  color: var(--hover-color);
}

.product-container .pricing .btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.product-container .pricing .btn-primary:hover {
  background-color: var(--hover-color);
}

@media (max-width: 768px) {
  .product-grid {
    margin-left: 30px;
    margin-right: 30px;
  }
  .product-container .pricing {
    margin-left: 30px;
    margin-right: 30px;
  }

  .product-container .pricing .row {
    flex-direction: column;
  }
  .product-container .pricing .col-sm-7,
  .product-container .pricing .col-sm-3,
  .product-container .pricing .col-sm-2 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .product-container .pricing .col-sm-2 {
    text-align: left;
  }
}

.product-container .panel-heading {
  background: var(--primary-color);
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.panel-heading .row {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.panel-heading .row > div:first-child {
  flex: 0 0 auto;
  padding: 0;
}

.panel-heading .row > div:last-child {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin-top: 0.5rem;
}

.panel-heading .input-group-addon {
  margin-top: 10px;
  margin-right: 10px;
}

.panel-search form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-search button {
  padding: 0.25rem 0.75rem;
  height: 32px;
  font-size: 0.875rem;
  border-radius: 4px;
  max-width: 100px;
}

@media (max-width: 767px) {
  .panel-heading .row {
    flex-wrap: nowrap;
  }

  .panel-heading .row > div:last-child {
    margin-top: 0;
  }
  .product-container .panel-heading {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .panel-heading .row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .panel-heading .row > div:first-child {
    text-align: center;
    width: 100%;
  }

  .panel-heading .row > div:last-child {
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }

  .panel-search form {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .panel-search .form-group {
    flex: 1 1 auto;
  }

  .panel-search .input-group {
    width: 100%;
  }

  .panel-search .input-group-addon {
    display: none; /* cleaner on mobile */
  }

  .panel-search input.form-control {
    height: 32px;
    font-size: 0.875rem;
  }

  .panel-search button {
    height: 32px;
    padding: 0 0.75rem;
    white-space: nowrap;
  }
}

.product-container .panel-subheading {
  padding: 0.5rem 1.5rem;
  background: #cccccc;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.product-container .row .col-sm-7 strong {
  font-size: 18px;
}

/* ---------------------- */
/* Product Page CSS End */
/* ---------------------- */