/* ============================================================
   PRODUCT DETAIL PAGE – Scoped Styles (rp- prefix)
   Vanilla CSS – No frameworks
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-size: 16px;}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1e293b;
  background: #f8fafc;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

.rp-hidden { display: none !important; }

:root {
  --clr-purple: #673191;
  --clr-cyan: #27C4F3;
  --clr-teal: #36ACA0;
  --clr-orange: #F05A27;
  --clr-yellow: #F8CE0A;
 
}

/* ---------- Container ---------- */
.rp-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- HEADER ---------- */
.rp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}
.rp-header-nav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.rp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.rp-header-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.rp-desktop-menu {
  display: none;
  align-items: center;
  gap: 32px;
}
.rp-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rp-nav-link:hover { color: #09C3F4; }
.rp-nav-dropdown { position: relative; }
.rp-chevron { transition: transform 0.2s; }
.rp-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
  z-index: 50;
}
.rp-nav-dropdown:hover .rp-dropdown-panel { display: block; }
.rp-nav-dropdown:hover .rp-chevron { transform: rotate(180deg); }
.rp-dropdown-panel > div,
.rp-dropdown-panel {
  min-width: 200px;
}
.rp-dropdown-panel::before {
  content: '';
  display: block;
}
.rp-dropdown-link {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  transition: all 0.15s;
  white-space: nowrap;
}
.rp-dropdown-link:first-child {
  border-radius: 8px 8px 0 0;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
.rp-dropdown-link:last-child {
  border-radius: 0 0 8px 8px;
  border-bottom: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
.rp-dropdown-link:not(:first-child):not(:last-child) {
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
.rp-dropdown-link:hover {
  color: #09C3F4;
  background: #f8fafc;
}
.rp-mobile-menu-btn {
  display: flex;
  padding: 8px;
  border-radius: 8px;
}
.rp-mobile-menu-btn:hover { background: #f1f5f9; }
.rp-mobile-menu {
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.rp-mobile-menu-inner { padding: 16px 0; }
.rp-mobile-nav-link {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  border-radius: 8px;
  transition: all 0.15s;
}
.rp-mobile-nav-link:hover { color: #09C3F4; background: #f8fafc; }

@media (min-width: 1024px) {
  .rp-desktop-menu { display: flex; }
  .rp-mobile-menu-btn { display: none; }
}

/* ---------- BREADCRUMB ---------- */
.rp-breadcrumb-bar {
  border-bottom: 1px solid #e2e8f0;
  background: rgba(241, 245, 249, 0.3);
}
.rp-breadcrumb {
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

@media(min-width: 992px){
  .rp-breadcrumb {
      padding: 100px 0 16px 0;
    }
}

.rp-breadcrumb a { transition: color 0.2s; }
.rp-breadcrumb a:hover { color: #1e293b; }
.rp-breadcrumb span:last-child { color: #1e293b; }

/* ---------- PRODUCT HERO ---------- */
.rp-product-hero {
  background: #fff;
  padding: 40px 0 56px;
}
.rp-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
.rp-hero-image {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}
.rp-hero-image img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-fit: contain;
  aspect-ratio: 1/1;
}
.rp-product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  border: 1px solid;
}

/* Right info panel – Option B */
.rp-hero-info {
  background: #f1f5f9;
  border-left: 4px solid #27C4F3;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rp-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.rp-cat-icon {
  height: 32px;
  width: 32px;
  object-fit: contain;
}
.rp-title-row h1 {
  font-weight: 700;
  font-size: 28px;
  color: #0f172a;
  line-height: 1.2;
}
.rp-brand-label {
  font-size: 14px;
  color: #64748b;
}
.rp-specs {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  padding-top: 16px;
  margin-bottom: 16px;
}
.rp-specs:empty { display: none; }
.rp-general-info {
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
}
.rp-general-info h2 {
  font-weight: 600;
  font-size: 14px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.rp-general-info p {
  color: #334155;
  font-size: 15px;
  line-height: 1.7;
}

/* Quick Nav Pictograms */
.rp-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  margin-top: auto;
}
.rp-nav-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  text-align: center;
  transition: all 0.2s;
}
.rp-nav-grid a:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.rp-nav-grid a img,
.rp-nav-grid a svg {
  height: 40px;
  width: 40px;
  object-fit: contain;
  transition: transform 0.2s;
}
.rp-nav-grid a:hover img,
.rp-nav-grid a:hover svg { transform: scale(1.1); }
.rp-nav-grid a span {
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  line-height: 1.3;
  transition: color 0.2s;
}
.rp-nav-grid a:hover span { color: #0f172a; }

@media (min-width: 640px) {
  .rp-nav-grid { grid-template-columns: repeat(6, 1fr); }
  .rp-nav-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1024px) {
  .rp-hero-grid { grid-template-columns: 1fr 1fr; }
  .rp-hero-image { border-radius: 16px 0 0 16px; }
  /* .rp-hero-image img { aspect-ratio: auto; } */
  .rp-hero-info {
    border-radius: 0 16px 16px 0;
    padding: 32px;
  }
  /* .rp-title-row h1 { font-size: 36px; } */
  .rp-product-hero { padding: 56px 0; }
}

/* ---------- ACCORDION SECTION ---------- */
.rp-accordion-section {
  background: #fff;
  padding: 32px 0 48px;
}
.rp-accordion { display: flex; flex-direction: column; gap: 16px; }

.rp-accordion-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
  overflow: hidden;
  scroll-margin-top: 96px;
}
.rp-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}
.rp-accordion-trigger:hover { background: #fafbfc; }
.rp-accordion-trigger-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rp-accordion-trigger-left img,
.rp-accordion-trigger-left svg {
  height: 28px;
  width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.rp-accordion-trigger h2 {
  font-weight: 600;
  font-size: 20px;
  color: #0f172a;
}
.rp-accordion-chevron {
  transition: transform 0.3s ease;
  color: #94a3b8;
  flex-shrink: 0;
}
.rp-accordion-item[data-open="true"] .rp-accordion-chevron {
  transform: rotate(180deg);
}
.rp-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.rp-accordion-item[data-open="true"] .rp-accordion-content {
  /* max-height: 600px; */
  max-height: 100%;
  padding: 0 16px 16px;
}
.rp-accordion-inner {
  padding-left: 40px;
  border-left: 2px solid;
}
.rp-accordion-inner p,
.rp-accordion-inner ul {
  color: #64748b;
  line-height: 1.7;
  font-size: 15px;
}
.rp-accordion-inner ul { display: flex; flex-direction: column; gap: 8px; padding-left: 10px; }
.rp-accordion-inner li {
  display: block;
  position: relative;
  padding-left: 14px;
}
.rp-accordion-inner li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  position: absolute;
  left: 0;
  top: 13px;
}

/* li that contains a nested ul: dot sits a bit lower due to line height */
.rp-accordion-inner li:has(> ul)::before {
  top: 13px;
}

/* Nested ul */
.rp-accordion-inner li > ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 4px;
}
.rp-accordion-inner li > ul li::before {
  width: 5px;
  height: 5px;
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  margin-top: 0;
  top: 13px;
}

/* same element has data-color */
.rp-accordion-inner[data-color="cyan"] li::before {
  background: #09C3F4;
}

.rp-accordion-inner[data-color="orange"] li::before {
  background: #F05A27;
}

.rp-accordion-inner[data-color="yellow"] li::before {
  background: #F8CE0A;
}

.rp-accordion-inner[data-color="teal"] li::before {
  background: #36ACA0;
}

.rp-accordion-inner[data-color="purple"] li::before {
  background: #673191;
}

.rp-accordion-inner[data-color="primary"] li::before {
  background: #64748b;
}

.rp-accordion-inner .rp-specs-label {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}
.rp-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rp-tag {
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
}

/* Accordion border-left colors per section */
.rp-accordion-inner[data-color="purple"] { border-left-color: rgba(103,49,145,0.2); }
.rp-accordion-inner[data-color="cyan"]   { border-left-color: rgba(39,196,243,0.2); }
.rp-accordion-inner[data-color="teal"]   { border-left-color: rgba(54,172,160,0.2); }
.rp-accordion-inner[data-color="orange"] { border-left-color: rgba(240,90,39,0.2); }
.rp-accordion-inner[data-color="yellow"] { border-left-color: rgba(248,206,10,0.2); }
.rp-accordion-inner[data-color="red"]    { border-left-color: rgba(229,57,53,0.2); }
.rp-accordion-inner li[data-color="teal"]::before { background: #36ACA0; }

/* ---------- ICON FILTERS (for PNG icons only) ---------- */
img.icon-filter-purple { filter: invert(21%) sepia(55%) saturate(2140%) hue-rotate(257deg) brightness(88%) contrast(92%); }
img.icon-filter-cyan   { filter: invert(66%) sepia(76%) saturate(1046%) hue-rotate(163deg) brightness(101%) contrast(91%); }
img.icon-filter-teal   { filter: invert(64%) sepia(18%) saturate(1091%) hue-rotate(130deg) brightness(93%) contrast(86%); }
img.icon-filter-orange { filter: invert(44%) sepia(68%) saturate(2124%) hue-rotate(355deg) brightness(100%) contrast(91%); }
img.icon-filter-yellow { filter: invert(80%) sepia(81%) saturate(1034%) hue-rotate(9deg) brightness(104%) contrast(94%); }

/* ---------- RELATED PRODUCTS ---------- */
.rp-related-section {
  border-top: 1px solid #e2e8f0;
  background: rgba(241, 245, 249, 0.2);
  padding: 48px 0;
}
.rp-related-section h2 {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 32px;
  color: #0f172a;
}
/* ---------- PRODUCT GRID ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- PRODUCT CARD (Option B) ---------- */
.product-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 10px 30px -8px hsla(220, 25%, 15%, 0.12);
  /* border-left: 4px solid var(--clr-cyan); */
  transition: all 0.5s;
  opacity: 0;
  transform: translateY(16px);
}

.product-card[data-color="cyan"] {
  border-left: 4px solid var(--clr-cyan);
}

.product-card[data-color="orange"] {
  border-left: 4px solid var(--clr-orange);
}

.product-card[data-color="yellow"] {
  border-left: 4px solid var(--clr-yellow);
}

.product-card[data-color="teal"] {
  border-left: 4px solid var(--clr-teal);
}

.product-card[data-color="purple"] {
  border-left: 4px solid var(--clr-purple);
}

.product-card[data-color="primary"] {
  border-left: 4px solid #999;
}

.product-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.product-card:hover {
  box-shadow: 0 20px 50px -12px hsla(220, 25%, 15%, 0.2);
  transform: translateY(-4px);
}

/* Left border colors per category */
.product-card[data-cat="medicines"] {
  border-left-color: var(--clr-cyan);
}

.product-card[data-cat="supplements"] {
  border-left-color: var(--clr-orange);
}

.product-card[data-cat="canoil"] {
  border-left-color: var(--clr-yellow);
}

.product-card[data-cat="cosmetics"] {
  border-left-color: var(--clr-purple);
}

.product-card[data-cat="healthaid"] {
  border-left-color: var(--clr-teal);
}

.product-card[data-cat="prescription"] {
  border-left-color: var(--clr-purple);
}

.card-image-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
    object-fit: contain;
    background-color: white;
  transition: transform 0.7s;
}

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

/* Badge – solid rounded-lg, uppercase */
.card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px -4px hsla(0, 0%, 0%, 0.2);
}

.card-badge[data-cat="medicines"] {
  background: var(--clr-cyan);
}

.card-badge[data-cat="supplements"] {
  background: var(--clr-orange);
}

.card-badge[data-cat="canoil"] {
  background: #836B00;
}

.card-badge[data-cat="cosmetics"] {
  background: var(--clr-purple);
}

.card-badge[data-cat="healthaid"] {
  background: var(--clr-teal);
}

.card-badge[data-cat="prescription"] {
  background: var(--clr-purple);
}

/* Content area – slate-100 tinted background */
.card-content {
  padding: 1.25rem;
  background: hsl(210, 20%, 96%);
}

/* Title block with icon – bordered bottom */
.card-title-block {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid hsl(210, 15%, 88%);
}
@media(min-width: 1024px){
  .card-title-block{
    height: 100px;
  }
}

.card-icon-wrap {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon-wrap img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.card-title-block h3 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: hsl(215, 25%, 15%);
}

.card-title-block .card-subtitle {
  font-size: 0.75rem;
  color: hsl(215, 10%, 50%);
  margin-top: 0.25rem;
}

/* Icon background colors per category */
.card-icon-wrap[data-cat="medicines"] {
  background: hsla(193, 90%, 55%, 0.1);
}

.card-icon-wrap[data-cat="supplements"] {
  background: hsla(16, 87%, 55%, 0.1);
}

.card-icon-wrap[data-cat="canoil"] {
  background: hsla(48, 93%, 50%, 0.15);
}

.card-icon-wrap[data-cat="cosmetics"] {
  background: hsla(270, 50%, 38%, 0.1);
}

.card-icon-wrap[data-cat="healthaid"] {
  background: hsla(172, 52%, 44%, 0.1);
}

.card-icon-wrap[data-cat="prescription"] {
  background: hsla(270, 50%, 38%, 0.1);
}

/* Description block – bordered bottom */
.card-desc-block {
  padding: 1rem 0;
  border-bottom: 1px solid hsl(210, 15%, 88%);
}

.card-desc {
  font-size: 0.875rem;
  color: hsl(215, 10%, 40%);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  margin: 0;
}

/* CTA block */
.card-cta-block {
  padding-top: 1rem;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--clr-cta);
  color: #fff;
  transition: all 0.3s;
  text-decoration: none;
}

.card-cta:hover {
  background: var(--clr-cta-hover);
  box-shadow: 0 8px 24px -8px hsla(197, 93%, 50%, 0.3);
  color: #fff;
}
.card-cta:focus {
  background: var(--clr-cta-hover);
  box-shadow: 0 8px 24px -8px hsla(197, 93%, 50%, 0.3);
  color: #fff;
}

.card-cta svg {
  transition: transform 0.3s;
}

.card-cta:hover svg {
  transform: translateX(4px);
}

/* ---------- BACK SECTION ---------- */
.rp-back-section { padding: 32px 0; }
.rp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 14px;
  transition: color 0.2s;
}
.rp-back-link:hover { color: #0f172a; }

/* ---------- FOOTER ---------- */
.rp-footer { background: #1a1a2e; color: #fff; }
.rp-footer-disclaimer { border-bottom: 1px solid rgba(255,255,255,0.1); }
.rp-disclaimer-box {
  padding: 24px;
  margin: 32px 0;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
}
.rp-disclaimer-box p {
  font-size: 13px;
  color: #334155;
  line-height: 1.7;
}
.rp-disclaimer-box strong { color: #334155; }
.rp-footer-main { padding: 64px 0; }
.rp-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .rp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .rp-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.rp-footer-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 24px;
}
.rp-footer-desc {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 360px;
}
.rp-footer-contacts { display: flex; flex-direction: column; gap: 12px; }
.rp-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}
.rp-footer-contact-item:hover { color: #fff; }
.rp-footer-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.rp-footer-col h4 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 20px;
}
.rp-footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.rp-footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}
.rp-footer-col a:hover { color: #09C3F4; }
.rp-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.rp-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
}
@media (min-width: 640px) {
  .rp-footer-bottom-inner { flex-direction: row; }
}
.rp-footer-bottom p {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}
.rp-social-links { display: flex; gap: 12px; }
.rp-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  transition: all 0.2s;
}
.rp-social-btn:hover {
  background: #09C3F4;
  border-color: #09C3F4;
  transform: translateY(-2px);
}

/* ---------- Badge Colors ---------- */
.rp-badge-cyan {
  background: rgba(39,196,243,0.1);
  color: #09C3F4;
  border-color: rgba(39,196,243,0.3);
}
.rp-badge-orange {
  background: rgba(240,90,39,0.1);
  color: #F05A27;
  border-color: rgba(240,90,39,0.3);
}
.rp-badge-yellow {
  background: rgba(248,206,10,0.15);
  color: #836B00;
  border-color: rgba(248,206,10,0.3);
}
.rp-badge-purple {
  background: rgba(103,49,145,0.1);
  color: #673191;
  border-color: rgba(103,49,145,0.3);
}
.rp-badge-teal {
  background: rgba(54,172,160,0.1);
  color: #36ACA0;
  border-color: rgba(54,172,160,0.3);
}

.site-top{
  display: none;
}
.breadcrumb{
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6{
  margin: 0;
}

/* =========================================================
   CATEGORY COLOR SYSTEM
   Applies only to:
   - main single badge: .category-badge
   - related product badge: .product-badge
   - tags: .product-tag
   ========================================================= */

/* =========================
   CYAN
   ========================= */
.inner-scope .category-badge[data-color="cyan"],
.inner-scope .product-badge[data-color="cyan"],
.inner-scope .product-tag[data-color="cyan"] {
  background: hsla(175, 60%, 35%, 0.1);
  color: hsl(175, 60%, 35%);
  border-color: hsla(175, 60%, 35%, 0.3);
}

/* =========================
   ORANGE
   ========================= */
.inner-scope .category-badge[data-color="orange"],
.inner-scope .product-badge[data-color="orange"],
.inner-scope .product-tag[data-color="orange"] {
  background: hsla(38, 85%, 55%, 0.1);
  color: hsl(38, 85%, 55%);
  border-color: hsla(38, 85%, 55%, 0.3);
}

/* =========================
   YELLOW
   ========================= */
.inner-scope .category-badge[data-color="yellow"],
.inner-scope .product-badge[data-color="yellow"],
.inner-scope .product-tag[data-color="yellow"] {
  background: hsla(45, 95%, 55%, 0.1);
  color: hsl(45, 95%, 55%);
  border-color: hsla(45, 95%, 55%, 0.3);
}

/* =========================
   PURPLE
   ========================= */
.inner-scope .category-badge[data-color="purple"],
.inner-scope .product-badge[data-color="purple"],
.inner-scope .product-tag[data-color="purple"] {
  background: hsla(260, 50%, 50%, 0.1);
  color: hsl(260, 50%, 50%);
  border-color: hsla(260, 50%, 50%, 0.3);
}

/* =========================
   TEAL
   ========================= */
.inner-scope .category-badge[data-color="teal"],
.inner-scope .product-badge[data-color="teal"],
.inner-scope .product-tag[data-color="teal"] {
  background: hsla(190, 50%, 40%, 0.1);
  color: hsl(190, 50%, 40%);
  border-color: hsla(190, 50%, 40%, 0.3);
}

/* =========================
   PRIMARY / FALLBACK
   ========================= */
.inner-scope .category-badge[data-color="primary"],
.inner-scope .product-badge[data-color="primary"],
.inner-scope .product-tag[data-color="primary"] {
  background: rgba(0, 0, 0, 0.05);
  color: #333;
  border-color: rgba(0, 0, 0, 0.12);
}

.single-products .detail-content table td{
  /* border: 1px solid var(--border); */
  border: 1px solid #e2e8f0;
  padding: 10px 15px;
  font-size: 16px;
        line-height: 1.4;
        color: #4d4d4f;
}
.single-products .detail-content table tr{
  /* border: 1px solid var(--border); */
  border: 1px solid #e2e8f0;
  padding: 10px 15px;
  font-size: 16px;
        line-height: 1.4;
        color: #4d4d4f;
}
.single-products .detail-content table{
  margin-bottom: 20px;
  
}


.rp-nav-grid img[class*="icon-filter-"],
.rp-accordion-trigger-left img[class*="icon-filter-"] {
  display: block;
}

/* SVG inline icons */
.rp-nav-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.rp-nav-svg-icon svg {
  width: 28px;
  height: 28px;
}
.rp-nav-svg-icon.icon-filter-orange,
.rp-nav-card:hover .rp-nav-svg-icon.icon-filter-orange,
.rp-accordion-trigger-left .rp-nav-svg-icon.icon-filter-orange { color: #f07a27 !important; }
.rp-nav-svg-icon.icon-filter-yellow,
.rp-nav-card:hover .rp-nav-svg-icon.icon-filter-yellow,
.rp-accordion-trigger-left .rp-nav-svg-icon.icon-filter-yellow { color: #f8ce0a !important; }
.rp-nav-svg-icon.icon-filter-cyan,
.rp-nav-card:hover .rp-nav-svg-icon.icon-filter-cyan,
.rp-accordion-trigger-left .rp-nav-svg-icon.icon-filter-cyan   { color: #22b8cf !important; }
.rp-nav-svg-icon.icon-filter-red,
.rp-nav-card:hover .rp-nav-svg-icon.icon-filter-red,
.rp-accordion-trigger-left .rp-nav-svg-icon.icon-filter-red    { color: #E53935 !important; }

/* Accordion left border colors */
/* .rp-accordion-inner[data-color="purple"] {
  border-left: 2px solid #7c3aed;
}

.rp-accordion-inner[data-color="cyan"] {
  border-left: 2px solid #06b6d4;
}

.rp-accordion-inner[data-color="teal"] {
  border-left: 2px solid #14b8a6;
}

.rp-accordion-inner[data-color="orange"] {
  border-left: 2px solid #f97316;
}

.rp-accordion-inner[data-color="yellow"] {
  border-left: 2px solid #eab308;
} */


/* =========================================
   RELATED PRODUCT COLOR FIXES
   Use data-color, not old data-cat names
   ========================================= */

/* Card left border by color */
.product-card[data-color="cyan"] {
  border-left-color: #09C3F4;
}

.product-card[data-color="orange"] {
  border-left-color: #F05A27;
}

.product-card[data-color="yellow"] {
  border-left-color: #F8CE0A;
}

.product-card[data-color="teal"] {
  border-left-color: #36ACA0;
}

.product-card[data-color="purple"] {
  border-left-color: #673191;
}

.product-card[data-color="primary"] {
  border-left-color: #94a3b8;
}

/* Badge by color */
.card-badge[data-color="cyan"],
.related-card-badge[data-color="cyan"] {
  background: #09C3F4;
  color: #fff;
}

.card-badge[data-color="orange"],
.related-card-badge[data-color="orange"] {
  background: #F05A27;
  color: #fff;
}

.card-badge[data-color="yellow"],
.related-card-badge[data-color="yellow"] {
  background: #836B00;
  color: #fff;
}

.card-badge[data-color="teal"],
.related-card-badge[data-color="teal"] {
  background: #36ACA0;
  color: #fff;
}

.card-badge[data-color="purple"],
.related-card-badge[data-color="purple"] {
  background: #673191;
  color: #fff;
}

.card-badge[data-color="primary"],
.related-card-badge[data-color="primary"] {
  background: #64748b;
  color: #fff;
}

/* Icon box background by color */
.card-icon-wrap[data-color="cyan"],
.related-card-icon[data-color="cyan"] {
  background: rgba(9, 195, 244, 0.12);
}

.card-icon-wrap[data-color="orange"],
.related-card-icon[data-color="orange"] {
  background: rgba(240, 90, 39, 0.12);
}

.card-icon-wrap[data-color="yellow"],
.related-card-icon[data-color="yellow"] {
  background: rgba(248, 206, 10, 0.18);
}

.card-icon-wrap[data-color="teal"],
.related-card-icon[data-color="teal"] {
  background: rgba(54, 172, 160, 0.12);
}

.card-icon-wrap[data-color="purple"],
.related-card-icon[data-color="purple"] {
  background: rgba(103, 49, 145, 0.12);
}

.card-icon-wrap[data-color="primary"],
.related-card-icon[data-color="primary"] {
  background: rgba(100, 116, 139, 0.12);
}

/* CTA fixes specifically for related cards */
.related-card-cta {
  background: #09C3F4;
  color: #fff;
  border: 1px solid #09C3F4;
}

.related-card-cta:hover,
.related-card-cta:focus {
  background: #08b0dc;
  border-color: #08b0dc;
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(9, 195, 244, 0.3);
}

/* Optional: if you want a disabled/faded look removed */
.related-product-card .card-cta {
  opacity: 1;
}

@media (min-width: 991px) {
    .header #logo {
        position: absolute;
        left: 15px;
        top: 25px;
    }
}