/* Base styles */
body {
  background-color: #121212;
  color: white;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0px;
  padding-top: 0px;
  text-align: center;
  /* Smoothly transition background and text colours when switching themes */
  transition: background-color 0.8s ease, color 0.8s ease;
}

/* Header styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #3b005a;
  padding: 20px;
  border-bottom: 2px solid #444;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.intro {
  padding: 40px 20px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.intro h2 {
  font-size: 1.75rem;
  color: #d9b3ff;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px #000;
}

.intro p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

header h1 {
  font-size: 2.5rem;
  margin: 0;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000,
               -2px 2px 0 #000, 2px 2px 0 #000;
}

header p {
  margin: 5px 0 15px;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
}

/* Navigation */
.nav-links {
  font-size: 1.1rem;
  margin-top: 10px;
}

.nav-links a {
  color: #d9b3ff;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000;
}

.nav-links a:hover {
  text-decoration: underline;
}

main {
  padding: 150px 30px 50px; /* increased top padding for fixed header */
}


/* Homepage Headline Improvements */
.homepage-headline {
  font-size: 2rem;
  color: #d9b3ff;
  margin-bottom: 10px;
  text-shadow: 2px 2px 5px #000;
  text-transform: none;  /* override all caps */
}

.homepage-subtext {
  font-size: 1.2rem;
  color: #eee;
  margin-bottom: 25px;
  font-style: italic;
  text-shadow: 1px 1px 3px #000;
}



.main-image {
  width: 75%;
  max-width: 700px;
  height: auto;
  margin: 20px auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Fancy heading and tagline */
.fancy-heading {
  font-size: 2.4rem;
  color: #d9b3ff;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px #000;
}

.tagline {
  font-size: 1.5rem;
  margin-bottom: 25px;
  text-shadow: 1px 1px 3px #000;
}

/* Highlight card */
.highlight-card {
  background-color: #1e1e1e;
  padding: 25px;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.highlight-card p {
  font-size: 1.1rem;
}

.fuel-checklist {
  list-style: none;
  padding-left: 0;
  font-size: 1.1rem;
  line-height: 1.7;
}

.fuel-checklist li {
  margin-bottom: 8px;
  padding-left: 25px;
  line-height: 1.8;
  position: relative;
}

.fuel-checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #bf9fff;
  font-weight: bold;
}

.fuel-checklist li:hover {
  color: #fff;
  text-shadow: 0 0 5px #bf9fff;
}

/* Before/After Section */
.before-after-section {
  padding: 60px 20px;
  background-color: #1a1a1a;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

.before-after-section h4 {
  font-size: 1rem;
  color: #ccc;
  margin: 10px 0;
}

.img-slider-case {
  margin: 40px auto;
  max-width: 600px;
  text-align: center;
}

img-comparison-slider.comparison-box {
  width: 300px;
  height: 533px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  --divider-color: #bf9fff;
  --default-handle-width: 100px;
}

img-comparison-slider.comparison-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Source Section */
.source-section {
  padding: 60px 20px;
  background: linear-gradient(to bottom, #1e1e1e, #121212);
  border-top: 2px solid #444;
}


.source-section h2 {
  font-size: 1.5rem;
  color: #d9b3ff;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px #000;
}

.source-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

.source-text {
  flex: 1 1 400px;
  text-align: left;
}

.source-list {
  list-style: none;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.source-list li {
  position: relative;
  background-color: #2a2a2a;
  border-left: 4px solid #bf9fff;
  padding: 12px 20px 12px 40px;
  border-radius: 8px;
  color: #f0f0f0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.source-list li::before {
  content: "-";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #bf9fff;
  font-size: 1.2rem;
}

/* Fuel thumbnail size */
.fuel-thumbnail {
  width: 45%;
  max-width: 300px;
  height: auto;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}

/* Image container for thumbnails */
.source-images {
  flex: 1 1 400px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* Footer */
footer {
  padding: 15px;
  background-color: #3b005a;
  border-top: 2px solid #444;
  font-size: 1rem;
  color: #ccc;
  text-shadow: 1px 1px 3px #000;
}

/* Services layout (re-added) */
.services-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.service-block {
  flex: 1 1 500px;
  background-color: #1e1e1e;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  text-align: left;
  min-width: 300px;
}

.service-block h2 {
  font-size: 1.6rem;
  color: white;
  margin-bottom: 15px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
}

.service-block p {
  font-size: 1.05rem;
  margin-bottom: 15px;
}

.service-block ul {
  list-style: disc inside;
  font-size: 1.05rem;
  padding-left: 20px;
}

.service-block li {
  margin-bottom: 8px;
}

details {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 15px;
}

details summary {
  font-weight: bold;
  font-size: 1.1rem;
  color: #d9b3ff;
  cursor: pointer;
  margin-bottom: 10px;
}

details[open] summary {
  color: #f2d9ff;
}

.extras h3 {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #d9b3ff;
}

/* Responsive layout */
@media (max-width: 768px) {
  .source-content {
    flex-direction: column;
    gap: 30px;
  }

  .source-images {
    justify-content: center;
  }

  .fuel-thumbnail {
    width: 90%;
  }

  .services-columns {
    flex-direction: column;
    align-items: stretch;
  }

  .compliance-flex {
    flex-direction: column;
    align-items: center;
  }

  .compliance-image {
    width: 90%;
  }
}

/* Animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flex layout for compliance section */
.compliance-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Text column */
.compliance-text {
  flex: 1 1 450px;
}

/* Styled compliance list */
.compliance-list {
  list-style: none;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.9;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.compliance-list li {
  background-color: #2a2a2a;
  border-left: 5px solid #bf9fff;
  padding: 15px 20px 15px 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  position: relative;
  color: #f8f8f8;
}

.compliance-list li::before {
  content: "✔";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #bf9fff;
  font-size: 1.2rem;
}


/* Scale up compliance images */
.compliance-image {
  width: 100%;
  max-width: 375px;  /* was 300px */
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}


/* Section subheading style */
.section-subheading {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: #d9b3ff;
  text-shadow: 1px 1px 3px #000;
  text-align: center;
}

/* Compliance card styling */
.compliance-card {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 10px;
  margin: 10px;
  max-width: 360px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compliance-card img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.image-caption {
  font-size: 0.95rem;
  color: #ccc;
  margin-top: 8px;
  text-align: center;
}

/* Add hover effect to compliance list */
.compliance-list li {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.compliance-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(191, 159, 255, 0.4);
}




.merged-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
  text-align: left;
}

.merged-columns ul {
  list-style: none;
  padding: 0;
  font-size: 1.1rem;
  max-width: 400px;
}

.merged-columns li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.merged-columns li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #bf9fff;
  font-weight: bold;
}


.homepage-lead {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 30px;
  color: #f8f8f8;
  text-shadow: 1px 1px 3px #000;
  text-align: center;
  padding: 15px;
  margin-top: 28px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(191, 159, 255, 0.3);
}

.homepage-lead p {
  margin: 8px 0;
}

.homepage-lead strong {
  color: #d9b3ff;
}


@keyframes blurSlideReveal {
  0% {
    opacity: 0;
    transform: translateY(-40px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}



.homepage-lead.cool-entrance {
  animation: blurSlideReveal 1s ease-out both;
}

.call-link {
  color: #bf9fff;
  font-weight: bold;
  text-decoration: none;
}

.call-link:hover {
  text-decoration: underline;
}

.underlined-call {
  text-decoration: underline;
}

a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
}





/* -------- Order / Product Grid -------- */
.product-grid {
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 20px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* === Clickable Product Cards and Hidden Grid Descriptions === */
/* When viewing products in the order grid, the entire card (except the gallery
   and controls) should act like a link to a detailed product page. A hover
   affordance and pointer cursor indicate the interactivity. */
.product-card.is-clickable {
  cursor: pointer;
}
.product-card.is-clickable:hover {
  /* subtle highlight on hover */
  box-shadow: 0 0 16px rgba(191, 159, 255, 0.45);
}

/* In light mode, provide a visible hover glow on clickable product cards. */
/* The base light-theme card shadow is very subtle, so on hover we apply */
/* a stronger purple-tinted glow to clearly indicate interactivity. */
:root[data-theme="light"] .product-card.is-clickable:hover {
  box-shadow: 0 0 18px rgba(59, 0, 90, 0.35) !important;
}

/* Remove the short description in the product grid; full details will be shown
   on the dedicated product page. Target only cards within the grid so that
   descriptions remain visible when a product is viewed individually. 
(NOTE: I commented it out so that it can appear in both order.html and product.html*/

/*.product-grid .product-desc {
  display: none;
}*/ 

.product-card {
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-media {
  padding: 16px 16px 0;
}

.product-gallery {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}

.product-gallery .product-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.product-gallery .hidden {
  display: none;
}

.thumb-row {
  display: flex;
  gap: 10px;
  padding: 12px 0 0;
  flex-wrap: wrap;
  justify-content: center;
}

.thumb-row .thumb {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.8;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.thumb-row .thumb:hover { transform: translateY(-2px); opacity: 1; }
.thumb-row .thumb.active { border-color: #bf9fff; opacity: 1; }

.product-info {
  padding: 16px;
  text-align: left;
}

.product-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: #fff;
}

.product-desc {
  margin: 0 0 14px;
  color: #ddd;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #d9b3ff;
}

.btn-primary {
  padding: 10px 14px;
  background: #3b005a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(191,159,255,0.3);
}
.btn-primary:hover { filter: brightness(1.1); }

/* -------- Lightbox (image viewer) -------- */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(2px);
}

.lightbox-body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.lightbox-image {
  max-width: 92vw;
  max-height: 82vh;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}

.lightbox-arrow.left { left: 20px; }
.lightbox-arrow.right { right: 20px; }
.lightbox-arrow:hover,
.lightbox-close:hover { background: rgba(0,0,0,0.65); }

.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #eee;
  background: rgba(0,0,0,0.45);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 0.95rem;
}

/* Responsive tweak */
@media (max-width: 520px) {
  .product-gallery .product-image { height: 220px; }
  .thumb-row .thumb { width: 56px; height: 56px; }
}




/* ===== Order Page Layout ===== */
.order-layout {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr; /* single column when cart is off-canvas */
  align-items: start;
}

/* ===== Cart Sidebar ===== */
.cart-sidebar {
  position: sticky;
  top: 1200px; /* sits below your fixed header (adjust if needed) */
  padding-top: 25px; /* extra space inside the cart */
  background: #1e1e1e;
  border-left: 2px solid #333;
  border-radius: 12px;
  color: #f8f8f8;
  box-shadow: 0 0 16px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

.cart-side-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #333;
}
.cart-side-icon {
  width: 28px; height: 28px;
  fill: #d9b3ff;
}
.cart-side-titles h3 {
  margin: 0; line-height: 1.1; font-size: 1.15rem;
}
.cart-side-titles small { color: #bbb; }

.cart-side-body {
  overflow: auto;
  padding: 12px 14px 0;
  flex: 1 1 auto;
}

.cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  background: #2a2a2a;
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.35);
}
.cart-item img {
  width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
}
.cart-item .ci-title { margin: 0 0 3px; font-weight: 700; }
.cart-item .ci-sku   { margin: 0; font-size: 0.85rem; color: #bbb; }
.cart-item .ci-price { margin: 4px 0 0; font-weight: 700; color: #d9b3ff; }

.cart-item .ci-actions {
  display: grid; gap: 8px; justify-items: end;
}
.cart-remove {
  background: transparent;
  border: 1px solid #555;
  color: #ddd;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
}
.cart-remove:hover { background: #3a3a3a; }

/* Stepper inside cart */
.ci-stepper {
  display: inline-flex;
  align-items: center;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  overflow: hidden;
}
.ci-stepper .btn {
  width: 30px; height: 30px;
  border: none;
  background: #3b005a;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.ci-stepper input {
  width: 44px; height: 30px;
  background: transparent;
  border: none;
  color: #fff;
  text-align: center;
}

/* Sidebar footer */
.cart-side-footer {
  border-top: 1px solid #333;
  padding: 12px 16px 16px;
}
.cart-side-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.cart-side-actions {
  display: flex; gap: 10px;
}
.btn-secondary {
  padding: 10px 14px;
  background: transparent;
  color: #fff;
  border: 1px solid #555;
  border-radius: 10px;
  cursor: pointer;
}
.btn-secondary:hover { background: #3a3a3a; }

/* Product card stepper (on product tiles) */
.qty-and-add { display: flex; gap: 10px; align-items: center; }
.qty-stepper {
  display: inline-flex; align-items: center;
  background: #2a2a2a; border: 1px solid #444; border-radius: 10px; overflow: hidden;
}
.qty-btn {
  width: 32px; height: 36px; border: none; background: #3b005a; color: #fff; font-weight: 800; cursor: pointer;
}
.qty-input {
  width: 52px; height: 36px;
  background: transparent; border: none; color: #fff; text-align: center;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Responsive: stack cart below products on narrow screens */
@media (max-width: 900px) {
  .order-layout { grid-template-columns: 1fr; }
  .cart-sidebar { position: static; max-height: none; }
}



/* Ensure cart icon never blows up (applies to <img> or <svg>) */
.cart-side-icon {
  width: 28px;
  height: 28px;
  display: inline-block;     /* works for img & svg */
  object-fit: contain;       /* keeps <img> from stretching */
}




/* ===== Checkout Panel ===== */
.checkout-panel {
  max-width: 1100px;
  margin: 40px auto 70px;
  padding: 60px;
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(0,0,0,0.45);
}
.checkout-title { margin: 0 0 16px; color: #d9b3ff; }

.checkout-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 12px;
}
.checkout-grid label span,
.checkout-notes span { display: block; margin-bottom: 6px; color: #ccc; font-size: 0.95rem; }
.checkout-grid input,
.checkout-grid select,
.checkout-notes textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #444;
  background: #2a2a2a; color: #fff;
}


.checkout-notes {
  display: block;
  margin-top: 20px;   /* space above Notes */
  margin-bottom: 20px; /* space below Notes */
}



.checkout-summary {
  margin-top: 16px; 
  background: #2a2a2a; 
  border-radius: 10px; 
  padding: 14px;
}
.checkout-lines { 
  list-style: none; 
  padding: 0; 
  margin: 10px 0; 
  display: grid; 
  gap: 8px; 
}
.checkout-lines li { 
  display: flex; 
  justify-content: space-between; 
  gap: 10px; 
}
.checkout-totals { 
  display: flex; 
  justify-content: flex-end; 
  margin-top: 8px; 
}
.checkout-totals div { 
  display: flex; 
  gap: 16px; 
  align-items: baseline; 
}
.checkout-actions { 
  margin-top: 16px; 
  display: flex; 
  gap: 12px; 
  align-items: center; 
}
.checkout-hint { 
  color: #bbb; 
}
.checkout-empty { text-align: center; color: #ccc; }



/* Make all sizing inside the checkout panel predictable */
.checkout-panel, 
.checkout-panel * , 
.checkout-panel *::before, 
.checkout-panel *::after {
  box-sizing: border-box;
}

/* Ensure each field stacks label + control with spacing */
.checkout-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;            /* space between the label <span> and the input */
}

/* Comfortable control heights and readable line-height */
.checkout-grid input,
.checkout-grid select,
.checkout-notes textarea {
  min-height: 44px;    /* good tap target */
  line-height: 1.3;
}

/* Give the grid a bit more breathing room */
.checkout-grid {
  gap: 16px;           /* row + column gap */
}

/* On wider screens, force sane column widths so items don't cram */
@media (min-width: 900px) {
  .checkout-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }
}




/* ===== Theme Toggle (UI) ===== */
.theme-toggle {
  --tt-h: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.theme-toggle .tt-track {
  position: relative;
  width: 64px; height: var(--tt-h);
  border-radius: 999px;
  background: linear-gradient(#63a7c9, #3c7b95); /* day-ish */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
.theme-toggle .tt-sun,
.theme-toggle .tt-moon {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 14px; line-height: 1;
  opacity: .9; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.theme-toggle .tt-sun  { left: 10px; }
.theme-toggle .tt-moon { right: 10px; }
.theme-toggle .tt-knob {
  position: absolute; top: 3px; left: 3px;
  width: calc(var(--tt-h) - 6px); height: calc(var(--tt-h) - 6px);
  border-radius: 50%;
  background: #ffd85a; /* sun knob */
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .25s ease, background .25s ease;
}
/* when light mode, knob to the right & night track */
[data-theme="light"] .theme-toggle .tt-track {
  background: linear-gradient(#0b2a40, #081d2b);
}
[data-theme="light"] .theme-toggle .tt-knob {
  transform: translateX(36px);
  background: #dfe7ff; /* moon knob */
}

/* ===== Theming: keep your current design as DARK defaults ===== */
/* DARK (current) uses your existing colors, so we don't change them here. */

/* LIGHT: targeted overrides so you don’t have to rewrite your whole CSS */
:root[data-theme="light"] body {
  background: #f6f7fb;
  color: #111;
}
:root[data-theme="light"] header,
:root[data-theme="light"] footer {
  background: #3b005a; /* keep your purple brand */
  color: #fff;
  border-color: #d7d7e0;
}
/*:root[data-theme="light"] .nav-links a { color: #3b005a; }
:root[data-theme="light"] .nav-links a:hover { text-decoration: underline; } */

/* Cards / panels used across the site */
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .highlight-card,
:root[data-theme="light"] .compliance-card,
:root[data-theme="light"] .checkout-panel,
:root[data-theme="light"] .cart-sidebar,
:root[data-theme="light"] .source-list li {
  background: #ffffff;
  color: #111;
  box-shadow: 0 0 12px rgba(0,0,0,.08);
  border-color: #e7e7ef;
}

/* Product bits */
:root[data-theme="light"] .product-gallery { background: #f0f2f7; }
:root[data-theme="light"] .product-price  { color: #3b005a; } /* keep purple accent */
:root[data-theme="light"] .product-desc   { color: #444; }

/* Buttons: keep purple for primary; soften secondary */
:root[data-theme="light"] .btn-primary {
  background: #3b005a; color: #fff;
}
:root[data-theme="light"] .btn-secondary {
  border-color: #bbb; color: #222;
}
:root[data-theme="light"] .btn-secondary:hover {
  background: #f3f3f7;
}

/* Cart item rows */
:root[data-theme="light"] .cart-item { background: #fafafa; }
:root[data-theme="light"] .ci-price  { color: #3b005a; }

/* Lightbox */
:root[data-theme="light"] .lightbox-backdrop { background: rgba(0,0,0,.5); }

/* Checkout form controls */
:root[data-theme="light"] .checkout-grid input,
:root[data-theme="light"] .checkout-grid select,
:root[data-theme="light"] .checkout-notes textarea {
  background: #fff; color: #111; border-color: #cfd3e1;
}
:root[data-theme="light"] .checkout-summary { background: #fbfbfe; }

/* Light mode: remove fuzzy text shadows on subtotal rows */
:root[data-theme="light"] .cart-side-row span,
:root[data-theme="light"] .cart-side-row .cart-subtotal,
:root[data-theme="light"] .checkout-totals span,
:root[data-theme="light"] .checkout-totals strong,
:root[data-theme="light"] #checkout-subtotal {
  text-shadow: none !important;
  color: #111; /* ensure crisp dark text */
}

/* === PDP gallery: make main image fill like order grid === */
#product-page .product-gallery {
  /* Remove default padding and background so the image can fill */
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

/* Main image fills the box; same feel as order cards */
#product-page .product-gallery .product-image {
  width: 100% !important;
  height: 280px !important;     /* match height of order page cards */
  object-fit: cover !important; /* crop rather than letterbox */
  display: block;
}

/* Thumbnails: square, cover-fit, no inner padding */
#product-page .thumb-row .thumb {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Cart: give a touch more room below fixed header */
.cart-sidebar {
  top: 140px !important;        /* previously 120px; adjust for better visibility */
  max-height: calc(100vh - 160px) !important; /* ensure the sidebar fits within viewport */
}

/* Keep the subtotal/actions pinned inside the sidebar scroll area */
.cart-side-footer {
  position: sticky;
  bottom: 0;
  background: #1e1e1e;  /* same as sidebar background */
  padding-top: 16px;     /* provide breathing room above the subtotal */
  border-top: 1px solid #333;
}

/* Override PDP gallery and thumbnail styling to match order page */
#product-page .product-gallery {
  /* Remove default grid and padding; show image as full-height cover */
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
#product-page .product-gallery .product-image {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block !important;
}
#product-page .thumb-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  width: auto;
  padding-top: 12px;
}
#product-page .thumb-row .thumb {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
}

/* Override PDP layout to match order grid: place gallery above info */
#product-page .product-card {
  /* Use flexbox like the order page instead of a two-column grid */
  display: flex !important;
  flex-direction: column !important;
}
#product-page .product-media {
  /* Stack gallery and thumbnails vertically */
  display: block !important;
  padding: 16px 16px 0 !important;
}



/* Dividers/borders reused throughout */
/* ---------------------------------------------------------------------------
 * Light mode overrides for panels and the before/after section.
 * In the original CSS this block contained an extra closing brace that broke
 * the scope of subsequent rules, causing light styles to leak into dark mode.
 * The corrected block below ensures only the specified elements are affected
 * when the data-theme is "light".
 */
:root[data-theme="light"] .cart-sidebar,
:root[data-theme="light"] .source-section,
:root[data-theme="light"] .before-after-section {
  /* Override dark backgrounds with a light panel and border */
  background-color: #ffffff;
  border-color: #e2e2ee;
}

:root[data-theme="light"] .before-after-section h1,
:root[data-theme="light"] .before-after-section h2,
:root[data-theme="light"] .before-after-section h3,
:root[data-theme="light"] .before-after-section h4,
:root[data-theme="light"] .before-after-section p {
  /* Ensure headings and text remain dark on the light panel */
  color: #111;
}

/* Accents that were #bf9fff (lavender glow) can stay or shift slightly */
:root[data-theme="light"] .thumb-row .thumb.active,
:root[data-theme="light"] .compliance-list li { border-left-color: #bf9fff; }

/*
 * In light mode we want previously light‑colored text from the dark theme to
 * become dark for better readability. Elements such as image captions,
 * subheadlines, compliance list items and other lead text use very light
 * grays in dark mode (#eee, #ccc, #f8f8f8). When switching to light mode
 * these colors are too faint on a pale background, so we explicitly set
 * darker values here. These overrides target only the specific elements
 * rather than global colors, preserving your purple accent colors (#d9b3ff,
 * #bf9fff) and other branding hues.
 */
:root[data-theme="light"] .homepage-subtext {
  color: #444;
}

:root[data-theme="light"] .before-after-section h4 {
  color: #444;
}

:root[data-theme="light"] .image-caption {
  color: #666;
}

:root[data-theme="light"] .compliance-list li {
      /*
       * In light mode the compliance list items were difficult to read because
       * the original dark backgrounds were retained from the dark theme.  The
       * text color was already set to a dark gray (#333), which provided very
       * little contrast against the dark background.  To improve legibility
       * we're giving these list items a white background and retaining the
       * existing lavender border accent.  The darker text remains so the
       * content reads clearly on the light backdrop.
       */
      background-color: #ffffff;
      color: #333;
      box-shadow: 0 0 12px rgba(0,0,0,.08);
}

:root[data-theme="light"] .homepage-lead {
  color: #222;
}

/* Ensure service blocks use a light background and dark text in light mode.  The original
 * design kept the same dark panel for service cards across both themes, which led to poor
 * contrast on a pale page.  Override the panel and its headings for light mode. */
:root[data-theme="light"] .service-block,
:root[data-theme="light"] .service-block details,
:root[data-theme="light"] .service-block summary {
  background-color: #ffffff;
  color: #111;
}
:root[data-theme="light"] .service-block h2,
:root[data-theme="light"] .service-block p,
:root[data-theme="light"] .service-block li {
  color: #111;
  text-shadow: none;
}

/* Make the "details" disclosure panels in the Services page match the light card.
 * Without this override the summary text remained purple with a dark shadow, which
 * appeared fuzzy against a white card. */
:root[data-theme="light"] details {
  background-color: #ffffff;
  color: #3b005a;
  border: 1px solid #e2e2ee;
}
:root[data-theme="light"] details summary {
  color: #3b005a;
  text-shadow: none;
}

/* Product names should be dark in light mode; the original CSS used white text which
 * rendered invisible on a white product card. */
:root[data-theme="light"] .product-title {
  color: #111;
}

/* In light mode the secondary button (used for the Clear Cart control) uses a mid‑gray
 * text colour which blends into the purple cart panel.  Make the Clear Cart button text
 * and border use the brand purple for clear contrast. */
:root[data-theme="light"] .btn-secondary.cart-clear {
  color: #3b005a;
  border-color: #3b005a;
}

/* Reduce or invert heavy dark drop shadows on headings and lead text when in light mode.
 * Dark text shadows on coloured text produce a blurry look on a light background.  Swap
 * them for a soft white glow or remove them entirely for crisp, legible type. */
:root[data-theme="light"] .homepage-headline,
:root[data-theme="light"] .homepage-subtext,
:root[data-theme="light"] .fancy-heading,
:root[data-theme="light"] .tagline,
:root[data-theme="light"] .section-subheading {
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
}

/* Remove text shadows from generic paragraphs within intros and call‑outs on light pages
 * to prevent fuzzy edges. */
:root[data-theme="light"] .intro p,
:root[data-theme="light"] .homepage-lead,
:root[data-theme="light"] .highlight-card p,
:root[data-theme="light"] .source-section p,
:root[data-theme="light"] .before-after-section p,
:root[data-theme="light"] .compliance-text p {
  text-shadow: none;
}

/* Fuel page top section (source-section) should have a white backdrop in light mode.  The
 * dark gradient used in the default theme made the callout look like a dark strip on
 * an otherwise light page.  Override the background and border colours here, and
 * ensure all headings and paragraphs inside use dark text without shadows. */
:root[data-theme="light"] .source-section {
  background: #ffffff;
  border-top: 2px solid #e2e2ee;
  border-bottom: 2px solid #e2e2ee;
}
:root[data-theme="light"] .source-section h2,
:root[data-theme="light"] .source-section h3,
:root[data-theme="light"] .source-section p {
  color: #111;
  text-shadow: none;
}
:root[data-theme="light"] .source-list li {
  background-color: #ffffff;
  color: #111;
  border-left-color: #bf9fff;
  box-shadow: 0 0 12px rgba(0,0,0,.08);
}

/* Ensure the cart sidebar and its sub-sections adopt a light appearance in light mode.  Some
 * earlier rules were nested incorrectly which left the sidebar dark purple, causing
 * controls such as the Clear Cart button to disappear.  These overrides force a white
 * backdrop with dark text. */
:root[data-theme="light"] .cart-sidebar,
:root[data-theme="light"] .cart-side-header,
:root[data-theme="light"] .cart-side-body,
:root[data-theme="light"] .cart-side-footer {
  background-color: #ffffff !important;
  color: #111 !important;
  border-color: #e2e2ee;
}

/* Accent colours within the cart header on light backgrounds */
:root[data-theme="light"] .cart-side-titles h3 {
  color: #3b005a;
}
:root[data-theme="light"] .cart-side-titles small {
  color: #666;
}

/* Style the Clear Cart button so it is visible against the light panel.  Provide a
 * pale background with a purple border and text. */
:root[data-theme="light"] .btn-secondary.cart-clear {
  background-color: #f3ebff;
  color: #3b005a;
  border-color: #3b005a;
}
:root[data-theme="light"] .btn-secondary.cart-clear:hover {
  background-color: #e6d3ff;
}

/* Darken light gray helper text in the checkout panel when in light mode.  The base
 * styles use very light grays (#ccc–#bbb) which are hard to read on pale backgrounds. */
:root[data-theme="light"] .checkout-grid label span,
:root[data-theme="light"] .checkout-notes span,
:root[data-theme="light"] .checkout-hint,
:root[data-theme="light"] .checkout-empty {
  color: #444;
}

/* Add a dark outline to the Checkout heading while keeping its light purple colour.  The
 * multiple shadows simulate a stroke around each glyph without requiring WebKit-specific
 * properties. */
:root[data-theme="light"] .checkout-title {
  color: #d9b3ff;
  text-shadow: -1px -1px 0 #3b005a,
               1px -1px 0 #3b005a,
              -1px  1px 0 #3b005a,
               1px  1px 0 #3b005a;
}

/* Darken the SKU/secondary text used in checkout summaries.  Without this the default
 * colour from the cart item style (#bbb) bled through, resulting in very faint gray
 * identifiers on a white background. */
:root[data-theme="light"] .ci-sku {
  color: #666;
}

/* Override hardcoded light gray colours for product SKUs in the checkout summary.  The
 * summary is built with inline styles (color:#bbb) so we need to use !important to
 * ensure our darker colour takes precedence in light mode. */
:root[data-theme="light"] #checkout-lines small {
  color: #666 !important;
}

/* As a safety net, also darken any small print within the checkout panel.  Inline
 * styles set on elements like <small style="color:#bbb"> can otherwise override
 * our theme colours; using !important here ensures the darker shade wins. */
:root[data-theme="light"] .checkout-panel small {
  color: #666 !important;
}

/* Fallback: apply the darker small text colour via html[data-theme] to ensure it
 * overrides inline styles.  Some browsers give inline styles higher priority
 * than attribute selectors on :root, so we repeat the rule here with a
 * stronger selector. */
html[data-theme="light"] .checkout-panel small {
  color: #666 !important;
}

/* Finally, as a catch‑all for any remaining small-print elements that may come from
 * inline styles, darken all <small> text in light mode.  This prevents faint
 * grey text from appearing across various components such as order summaries. */
:root[data-theme="light"] small {
  /* Use our brand purple for small print in light mode so that inline colours
   * like #bbb are completely overridden and the text stands out clearly. */
  color: #3b005a !important;
}




/* Position theme toggle and cart button neatly in the header */
.theme-toggle-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* push to right */
  gap: 12px;                   /* space between buttons */
  padding-top: 12px;           /* space above */
  padding-right: 16px;         /* space from edge */
}

.theme-toggle {
  margin: 0;
}

/* Cart button styling */
.cart-button {
  position: relative;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit; /* inherit text color to allow theme switching */
}

.cart-button:hover {
  opacity: 0.9;
}

/* Cart icon inside header */
.cart-button .cart-icon {
  width: 28px;
  height: 28px;
  display: block;
  fill: currentColor;
}

/* Badge showing number of items */
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background-color: #9d4edd; /* accent color for badge */
  border-radius: 9999px;
  font-weight: 700;
}

/* Hide badge when there are no items */
.cart-count.hidden {
  display: none;
}

/* ========= Cart Panel (overlay + slide-out) ========= */
.cart-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.cart-panel.open {
  display: block;
}

/* Dark overlay behind cart */
.cart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* Override default sidebar positioning for slide-out */
.cart-panel .cart-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 380px;
  width: 90%;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  box-shadow: -4px 0 12px rgba(0,0,0,0.5);
}

/* When panel is open, slide the sidebar into view */
.cart-panel.open .cart-sidebar {
  transform: translateX(0);
}



/* Make the knob/track reflect state even if page CSS hasn't switched yet */
.theme-toggle.is-light .tt-knob { transform: translateX(36px); background: #dfe7ff; }
.theme-toggle.is-light .tt-track { background: linear-gradient(#0b2a40, #081d2b); }







/* -------- For Mobile -------- */
@media (max-width: 768px) {
  /* Header cleanup */
  header {
    padding: 15px 10px;
  }

  header h1 {
    font-size: 1.4rem;
    line-height: 1.3;
    word-break: break-word;
    margin-bottom: 5px;
  }

  header p {
    font-size: 0.9rem;
    padding: 0 10px;
    line-height: 1.4;
  }

  .nav-links {
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    margin-top: 5px;
  }

  .nav-links a {
    margin: 4px 6px;
  }

  /* Fix for body padding to avoid huge gap */
  body {
    padding-top: 0px;
  }

  /* Make main titles readable */
  .fancy-heading {
    font-size: 1.5rem;
    padding: 0 15px;
    word-break: break-word;
  }

  .tagline {
    font-size: 1rem;
    padding: 0 15px;
    word-break: break-word;
  }

  /* Ensure body paragraphs have breathing room */
  .intro p,
  main p {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 15px;
    text-align: left;
  }
  
  .homepage-lead {
    margin-top: 60px; /* Pushes it down below the fixed header */
    padding-top: 26px;
  }

  
  .homepage-headline {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 0 15px;
    word-break: break-word;
  }

  .homepage-subtext {
    font-size: 1rem;
    padding: 0 15px;
    line-height: 1.4;
    margin-bottom: 15px;
    word-break: break-word;
  }

  .intro p {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 15px;
    text-align: center;
  }

  .main-image {
    width: 90%;
    max-width: 400px;
  }
  
  
  
  /* Avoid full-width content blocks */
  .highlight-card {
    max-width: 90%;
    padding: 20px;
  }

  /* Smaller comparison sliders */
  img-comparison-slider.comparison-box {
    width: 90vw;
    height: calc(90vw * 16 / 9);
  }

  /* Footer font size */
  footer {
    font-size: 0.85rem;
    padding: 15px 10px;
  }
  
  /* Reduce image slider size on mobile */
  .img-slider-case {
    max-width: 75%; /* shrink to 75% of container */
  }

  img-comparison-slider.comparison-box {
    width: 225px;  /* 75% of 300px */
    height: 400px; /* roughly 75% of 533px */
  }
  
  .homepage-lead {
    margin-top: 60px; /* Pushes it down below the fixed header */
    padding-top: 20px;
  }
  
  
  /* ================= MOBILE FRIENDLY OVERRIDES ================= */
  /* General: stop any accidental horizontal scrolling */
  html, body { overflow-x: hidden; }

  /* Let the nav wrap nicely on small screens */
  .nav-links { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px 10px; 
    justify-content: center; 
  }

  /* Stack layout: products above cart on phones */
  @media (max-width: 900px) {
    .order-layout {
      grid-template-columns: 1fr;     /* single column */
      gap: 16px;
      padding: 0 12px;                /* a bit tighter padding */
    }
    .cart-sidebar {
      position: static;               /* no sticky on mobile */
      max-height: none;
    }
  }

  /* Product grid: one product per row */
  @media (max-width: 900px) {
    .product-grid {
      grid-template-columns: 1fr;     /* single column */
      gap: 16px;
      max-width: 680px;               /* keep a comfortable line length */
      margin: 0 auto;
    }
  }

  /* Gallery: make images fully responsive, no fixed heights */
  @media (max-width: 900px) {
    .product-gallery { cursor: zoom-in; }
    .product-gallery .product-image:not(.hidden) {
      width: 100%;
      height: auto;                   /* let height follow width */
      max-height: none;
      display: block;
    }
    /* keep thumbs tidy */
    .thumb-row { justify-content: center; gap: 8px; }
    .thumb-row .thumb { width: 56px; height: 56px; }
  }

  /* Typography & controls: bigger tap targets */
  @media (max-width: 900px) {
    .product-title { font-size: 1.15rem; }
    .product-desc  { font-size: 0.98rem; }
    .product-price { font-size: 1.1rem; }

    .qty-and-add { gap: 8px; }
    .qty-stepper { border-radius: 12px; }
    .qty-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    .qty-input { width: 60px; height: 40px; font-size: 1rem; }

    .btn-primary, .btn-secondary {
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 1rem;
    }
  }

  /* Cart list readability on small screens */
  @media (max-width: 900px) {
    .cart-item {
      grid-template-columns: 56px 1fr;   /* move actions below on wrap */
      gap: 10px;
    }
    .cart-item .ci-actions {
      grid-column: 1 / -1;               /* full width row */
      justify-items: stretch;
    }
    .ci-stepper { justify-self: start; }
  }

  /* Extra-small phones tweaks */
  @media (max-width: 480px) {
    .thumb-row .thumb { width: 50px; height: 50px; }
    .qty-input { width: 56px; }
  }

  
  
}




/* Thank-you page action buttons */
.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.thanks-actions a {
  flex: 1 1 auto;
  text-align: center;
  min-width: 140px; /* keep buttons from squishing too small */
}
@media (max-width: 480px) {
  .thanks-actions {
    flex-direction: column;
    align-items: stretch;
  }
}




/* === Ensure light mode wins, regardless of earlier rules === */
html[data-theme="light"] body { 
  background: #f6f7fb !important; 
  color: #111 !important; 
}

/* --------------------------------------------------------------------------
 * Custom theme switcher styling
 * Based on the code from https://codepen.io/jamiewilsonict/pen/LYKGjdb.
 * This section defines the animated sun/moon toggle along with cloud and
 * star elements.  The `.night-theme` class toggled on the button drives
 * the day/night visuals.  Colours are controlled via CSS variables.
 */
.theme-switcher-grid {
  --bg-color-light: #f0f0e8;
  --bg-color-dark: #1c2135;
  --border-color-light: #1c2135;
  --border-color-dark: #f0f0e8;
  --sun-color: #fabc1c;
  --moon-color: #fffdf2;
  --day-bg-color: #0dbdf6;
  --night-bg-color: #272a30;
  --cloud-color: #fffdf2;
  --star-color: #fffdf2;

  display: grid;
  grid-template-columns: repeat(54, 1px);
  grid-template-rows: repeat(24, 1px);
  gap: 0;
  position: relative;
  background-color: var(--day-bg-color);
  border-radius: 49px;
  border: 1px solid var(--border-color-light);
  cursor: pointer;
  transition: background-color 0.8s ease, border-color 0.8s ease;
  appearance: none;
  padding: 0;
}

.theme-switcher-grid.night-theme {
  background-color: var(--night-bg-color);
  border-color: var(--border-color-dark);
}

.theme-switcher-grid .sun {
  background-color: var(--sun-color);
  grid-column: 3 / 23;
  grid-row: 3 / 23;
  border-radius: 50%;
  transition: grid-column 0.8s ease, background-color 0.8s ease;
  height: 20px;
}

.theme-switcher-grid.night-theme .sun {
  grid-column: 33 / 53;
  background-color: var(--moon-color);
}

.theme-switcher-grid .moon-overlay {
  position: absolute;
  border-radius: 50%;
  transition: left 0.8s ease, background-color 0.8s ease;
  z-index: 1;
  background-color: var(--day-bg-color);
}

.theme-switcher-grid.night-theme .moon-overlay {
  display: block;
  left: calc(28 / 54 * 100%);
  top: calc(4 / 29 * 100%);
  width: 18px;
  height: 18px;
  background-color: var(--night-bg-color);
}

.theme-switcher-grid .cloud-ball {
  background-color: var(--cloud-color);
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  transition: all 0.8s ease;
  z-index: 2;
}

.theme-switcher-grid #ball1 { top: calc((8 / 24) * 100%); left: calc((12 / 54) * 100%); }
.theme-switcher-grid #ball2 { top: calc((8 / 24) * 100%); left: calc((17 / 54) * 100%); }
.theme-switcher-grid #ball3 { top: calc((8 / 24) * 100%); left: calc((22 / 54) * 100%); }
.theme-switcher-grid #ball4 { top: calc((6 / 24) * 100%); left: calc((17 / 54) * 100%); }

.theme-switcher-grid.night-theme #ball1 {
  top: calc((16 / 24) * 100%);
  left: calc((16 / 54) * 100%);
  width: 2px;
  height: 2px;
}
.theme-switcher-grid.night-theme #ball2 {
  top: calc((3 / 24) * 100%);
  left: calc((22 / 54) * 100%);
  width: 2px;
  height: 2px;
}
.theme-switcher-grid.night-theme #ball3 {
  top: calc((10 / 24) * 100%);
  left: calc((29 / 54) * 100%);
  width: 2px;
  height: 2px;
}
.theme-switcher-grid.night-theme #ball4 {
  top: calc((5 / 24) * 100%);
  left: calc((34 / 54) * 100%);
  width: 2px;
  height: 2px;
}

.theme-switcher-grid .star {
  background-color: var(--star-color);
  width: 1px;
  height: 1px;
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s ease;
  border-radius: 50%;
}

.theme-switcher-grid #star1 { top: calc((7 / 24) * 100%);  left: calc((10 / 54) * 100%);  }
.theme-switcher-grid #star2 { top: calc((9 / 24) * 100%);  left: calc((16 / 54) * 100%);  }
.theme-switcher-grid #star3 { top: calc((13 / 24) * 100%); left: calc((23 / 54) * 100%); }
.theme-switcher-grid #star4 { top: calc((18 / 24) * 100%); left: calc((29 / 54) * 100%); }

.theme-switcher-grid.night-theme #star1,
.theme-switcher-grid.night-theme #star2,
.theme-switcher-grid.night-theme #star3,
.theme-switcher-grid.night-theme #star4 {
  opacity: 1;
}






/* ====================== PDP Amazon-style media layout (scoped) ====================== */

/* Put media left, info right */
#product-page .product-card {
  display: grid;
  grid-template-columns: minmax(280px, 560px) 1fr;
  gap: 28px;
  align-items: start;
}

/* Inside the media column: left = vertical thumbs, right = main image */
#product-page .product-media {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
}

/* Vertical thumbnail rail */
#product-page .thumb-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding-right: 4px;            /* space for scrollbar */
}

/* Thumbnails: square tiles, show full image, no crop  */
#product-page .thumb-row .thumb {
  width: 88px;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;      /* ensure full image is visible */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 6px;
  opacity: 0.95;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#product-page .thumb-row .thumb:hover { transform: translateY(-2px); }
#product-page .thumb-row .thumb.active {
  border-color: #9d6dff;
  box-shadow: 0 0 0 3px rgba(157,109,255,.15);
}

/* Main gallery: padded box, contain image, no cropping */
#product-page .product-gallery {
  display: grid;
  place-items: center;
  background: #f7f7fb;
  border: 1px solid #e3e3ea;
  border-radius: 14px;
  padding: 12px;
  min-height: clamp(280px, 56vh, 640px);
  /* keep width reasonable on big monitors */
  max-width: 100%;
}
#product-page .product-gallery .product-image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain !important;      /* full image visible */
  display: block;
}

/* Ensure hidden product images remain hidden.
   More specific rules elsewhere set display:block on product images,
   which can override the base `.hidden` style. These rules restore
   `display:none` for any image with the `.hidden` class so only one
   image shows at a time on both the grid and the product page. */
.product-gallery .product-image.hidden { display: none !important; }
#product-page .product-gallery .product-image.hidden { display: none !important; }

/* Light mode polish (if using data-theme switching) */
:root[data-theme="light"] #product-page .product-gallery { background:#fafaff; border-color:#e7e0f7; }
:root[data-theme="light"] #product-page .thumb-row .thumb { border-color:#e1d9f7; }

/* ========================== Responsive adjustments ========================== */

/* Tablet & down: shrink thumbs slightly */
@media (max-width: 1100px) {
  #product-page .thumb-row .thumb { width: 78px; }
}

/* Mobile: stack main image above, make thumbs a horizontal scroller like Amazon */
@media (max-width: 780px) {
  #product-page .product-card { grid-template-columns: 1fr; }
  #product-page .product-media {
    grid-template-columns: 1fr;       /* single column */
    gap: 10px;
  }
  #product-page .thumb-row {
    flex-direction: row;               /* horizontal strip */
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    gap: 10px;
  }
  #product-page .thumb-row .thumb { width: 72px; }
}

/* Very small phones */
@media (max-width: 420px) {
  #product-page .thumb-row .thumb { width: 64px; }
}





/* Canonical thumbnail styling shared by grid and PDP */
.product-grid .thumb,
#product-page .thumb-row .thumb {
  width: 72px;              /* match grid size */
  height: 72px;             /* square shape */
  display: block;
  object-fit: cover;        /* same crop behavior as grid */
  border-radius: 12px;      /* same rounding as grid */
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  padding: 0;               /* remove PDP’s extra padding so shapes match */
}

/* PDP thumbnail row layout */
#product-page .thumb-row {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  width: max-content;
}

/* PDP main image should suggest it can be zoomed */
#product-page .product-gallery .product-image { cursor: zoom-in; }

/* Safety: only the selected image shows */
.product-gallery .product-image.hidden { display: none !important; }
#product-page .product-gallery .product-image.hidden { display: none !important; }

/* ---------------------------------------------------------------------------
 * FINAL overrides for product detail page (PDP)
 * Place these at the very end of the stylesheet so they override any earlier
 * PDP-specific rules.  These styles collapse the Amazon-style two-column
 * layout into a single column like the order grid, and ensure the main
 * product image and thumbnails match the grid styling (no padded boxes,
 * cropped images, horizontal thumb row, etc.).
 */
#product-page .product-card {
  display: flex !important;
  flex-direction: column !important;
}
#product-page .product-media {
  display: block !important;
  padding: 16px 16px 0 !important;
}
#product-page .product-gallery {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: auto !important;
  max-height: none !important;
}
#product-page .product-gallery .product-image {
  width: 100% !important;
  height: 280px !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}
#product-page .thumb-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px 0 0 !important;
}
#product-page .thumb-row .thumb {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  transition: none !important;
}
#product-page .thumb-row .thumb:hover {
  transform: none !important;
}
#product-page .thumb-row .thumb.active {
  border-color: #bf9fff !important;
  box-shadow: 0 0 0 2px rgba(191, 159, 255, 0.25) !important;
}

/* ==========================================================================
 * Quote-first UI
 * The following styles define the appearance of the quote banner displayed at
 * the top of the order page. They deliberately avoid setting any global page
 * backgrounds so that your dark/light theme switching continues to work.
 * The large top padding prevents the banner from being covered by the fixed
 * header on small screens.
 */
.quote-banner {
  position: relative;
  padding: 72px 16px 14px; /* top pad clears your fixed header */
  border-bottom: 1px solid var(--border, #444);
  background: none;
}
/* Subtle background colours for each theme */
[data-theme="dark"] .quote-banner {
  background-color: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .quote-banner {
  background-color: #fff7e6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.quote-banner .qb-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.qb-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.qb-title {
  margin: 0 0 2px;
  font-size: 1.1rem;
  font-weight: 700;
}
.qb-sub {
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
}
@media (max-width: 680px) {
  .qb-title { font-size: 1rem; }
  .qb-sub { font-size: 0.9rem; }
}

/* Optional: badge on product cards to indicate quote required */
.badge-quote {
  display: inline-block;
  margin: 6px 0 8px;
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.85;
}
[data-theme="dark"] .badge-quote { color: #ffd166; }
[data-theme="light"] .badge-quote { color: #a15c00; }

/* Optional: small note below cart subtotal describing quote process */
.cart-quote-note {
  margin: 8px 0 0;
  font-size: 0.85rem;
  opacity: 0.8;
}



/* Quote Modal */
.quote-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.quote-modal[hidden] {
  display: none;
}

.quote-modal-content {
  background: #1e1e1e;
  color: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.quote-modal-content h2 {
  color: #d9b3ff;
  margin-bottom: 15px;
}

.quote-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}
.quote-close:hover { color: #bf9fff; }

.quote-ok {
  margin-top: 20px;
  padding: 10px 20px;
  background: #3b005a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(191,159,255,0.3);
  transition: background 0.2s ease;
}
.quote-ok:hover {
  background: #5c1a7a;
}




/* ===== Shipping address grid (shows only when "Ship" is selected) ===== */
#shipping-address[hidden] { display: none; }

.address-grid {
  margin-top: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #2a2a2a;
  border: 1px solid #444;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.address-grid legend {
  padding: 0 6px;
  font-weight: 700;
  color: #d9b3ff;
  margin-bottom: 4px;
}

.address-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.address-grid input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #444;
  background: #1e1e1e;
  color: #fff;
}

/* span two columns for the two big address lines on wide screens */
@media (min-width: 900px) {
  .address-grid .address-col-2 {
    grid-column: span 2;
  }
}

/* Light theme overrides */
:root[data-theme="light"] #shipping-address.address-grid {
  background: #ffffff;
  border-color: #e7e7ef;
}
:root[data-theme="light"] #shipping-address.address-grid input {
  background: #fff;
  color: #111;
  border-color: #cfd3e1;
}


/* ===== Fulfillment card radios ===== */
.fulfillment-section { margin-top: 12px; }
.section-subtitle { margin: 0 0 6px; font-size: 1.125rem; }
.section-help { margin: 0 0 12px; opacity: .85; }

.fulfillment-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.card-option {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 2px solid #444;
  background: #1e1e1e;
  color: #fff;
  cursor: pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.card-option:hover { transform: translateY(-1px); }
.card-option[aria-checked="true"] {
  border-color: #a879ff;
  box-shadow: 0 0 0 3px rgba(168,121,255,.25);
}
.card-option .card-title { font-weight: 700; font-size: 1rem; }
.card-option .card-sub { opacity: .9; font-size: .9rem; }

:root[data-theme="light"] .card-option {
  background: #fff;
  color: #111;
  border-color: #ccc;
}
:root[data-theme="light"] .card-option[aria-checked="true"] {
  border-color: #6b4dd6;
  box-shadow: 0 0 0 3px rgba(107,77,214,.2);
}

.card-option { cursor: pointer; }


/* --- Clickability guard for fulfillment cards --- */
.fulfillment-cards { position: relative; z-index: 2; }
.card-option { position: relative; z-index: 3; pointer-events: auto; cursor: pointer; }

/* ==== Quote pricing: hide price amounts ====
   In quote-based flows, we never display per-item or subtotal prices to the user.
   These elements still exist in the DOM for layout consistency but are hidden via CSS.
*/
.cart-subtotal,
#checkout-subtotal {
  display: none !important;
}

/* === Cart Bump Animation ===
   When an item is added to the cart, the cart icon scales up briefly
   to provide visual feedback. The flyToCart() function in script.js
   adds the .cart-bump class to the cart icon, which triggers this
   keyframe animation. */
@keyframes cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-bump {
  animation: cart-bump 0.4s ease;
}

/* --- Header search --- */
.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
}

.search-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid #555;
  background: #2a2a2a;
  cursor: pointer;
}

.search-icon-btn .material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 22px;
  line-height: 1;
}

.search-input {
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width .25s ease, opacity .2s ease;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #555;
  background: #2a2a2a;
  color: #fff;
  padding: 0 12px;
}

/* expanded state toggled by JS */
.search-wrap.is-open .search-input {
  width: min(46vw, 320px);
  opacity: 1;
  pointer-events: auto;
}

/* Suggestion bar */
.search-suggest {
  max-width: 1100px;
  margin: 0 auto 18px;
  padding: 8px 12px;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  color: #ccc;
  text-align: left;
}

/* Hide non-matches */
.product-card.hidden-by-search { display: none; }

/* Light theme adjustments */
:root[data-theme="light"] .search-icon-btn,
:root[data-theme="light"] .search-input {
  background: #fff;
  color: #111;
  border-color: #ccc;
}


.product-info .variant-select { margin-bottom: 12px; }
.product-info label + .variant-select { margin-bottom: 14px; } /* a touch more when there's a label */