/* 
   Color Palette 
   Primary Blue: #1591DA
   Dark Neutral: #212322
   Medium Grey: #797B7C
   Off-White: #F3F3F3
   Warm Light Grey: #DBDAD6
   White: #FFFFFF
*/

:root {
  --primary-blue: #1591da;
  --primary-blue-hover: #107bbd; /* Slightly darker for hover */
  --dark-neutral: #212322;
  --medium-grey: #797b7c;
  --off-white: #f3f3f3;
  --warm-light-grey: #dbdad6;
  --white: #ffffff;

  --font-family: "Inter", sans-serif;
  --transition: all 0.3s ease;
  --container-width: 1200px;
  --header-height: 80px;
}

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

html,
body {
  /* overflow-x: hidden; */
  width: 100%;
}

body {
  font-family: var(--font-family);
  color: var(--dark-neutral);
  background-color: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.container {
  max-width: var(--container-width);
  margin: 30px auto;
  padding: 0 20px;
  width: 100%;
}

/* Button Styles */
.btn-primary-nav {
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary-nav:hover {
  background-color: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(21, 145, 218, 0.2);
}

.btn-primary-hero {
  display: inline-block;
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 1rem 2rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(21, 145, 218, 0.3);
}

.btn-primary-hero:hover {
  background-color: var(--primary-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(21, 145, 218, 0.4);
}

/* Header Styles */
.header {
  background-color: var(--white);
  height: var(--header-height);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 50px; /* Bigger logo as requested */
  width: auto;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  color: var(--dark-neutral);
  font-weight: 500;
  font-size: 1rem;
}

.nav-link:hover {
  color: var(--primary-blue);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: var(--dark-neutral);
  border-radius: 2px;
  transition: var(--transition);
}

/* Hero Section */
.hero {
  padding: 20px 0;
  background-color: var(--white);
}

.hero-container {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-content h1 {
  font-size: 3.5rem; /* Larger for the main brand title */
  color: var(
    --primary-blue
  ); /* Using brand color for H1 as it was eyebrow before */
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--dark-neutral);
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.hero-features {
  margin-bottom: 2rem;
}

.hero-features li {
  margin-bottom: 0.8rem;
  color: var(--medium-grey);
  font-size: 1.05rem;
  position: relative;
  padding-left: 1.5rem;
}

.hero-features li::before {
  content: "•";
  color: var(--primary-blue);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.hero-features strong {
  color: var(--dark-neutral);
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 500px;
  position: relative; /* Context for absolute blob */
  z-index: 1;
  overflow: hidden;
}

/* Organic Blob Background SVG */
.hero-blob-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160%; /* Slightly larger to frame the image */
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.hero-img {
  width: 80%;
  height: auto;
  border-radius: 12px;
  /* box-shadow removed as per user previous edit */
}

/* Footer Styles */
.footer {
  background-color: var(--white);
  padding: 60px 0 20px;
  border-top: 1px solid var(--warm-light-grey);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 40px;
}

.footer-brand {
  flex: 1;
  min-width: 250px;
}

.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 20px;
}

.footer-brand p {
  color: var(--medium-grey);
  font-size: 0.95rem;
  max-width: 300px;
}

.footer-links {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-column h3 {
  color: var(--dark-neutral);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column a {
  color: var(--medium-grey);
  font-size: 0.95rem;
}

.footer-column a:hover {
  color: var(--primary-blue);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid #eee;
  text-align: center;
  gap: 20px;
}

.payment-img {
  height: auto;
  width: 900px; /* Increased size for better visibility */
  max-width: 100%;
  object-fit: contain;
}

.copyright {
  color: var(--medium-grey);
  font-size: 0.85rem;
}

/* Mobile Responsiveness */
@media (max-width: 968px) {
  .hero-container {
    flex-direction: column-reverse; /* Stack image on top of text */
    gap: 30px;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-image {
    width: 100%;
    max-width: 400px; /* Limit image size on mobile/tablet */
  }

  .hero-features li {
    text-align: left; /* Keep list points left-aligned for readability */
    display: inline-block; /* Or block, but keeping aligned nicely */
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 15px;
  }

  .logo {
    height: 40px;
  }

  .mobile-menu-btn {
    display: flex;
    z-index: 1001;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    flex-direction: column;
    justify-content: center;
    transition: var(--transition);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    padding: 2rem;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .nav-link {
    font-size: 1.25rem;
  }

  .mobile-menu-btn.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-menu-btn.active .bar:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .hero {
    padding: 40px 0;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  /* Ensure list items are readable */
  .hero-features {
    text-align: left;
  }
}

/* Specifications Section */
.specs-section {
  padding: 20px 0;
  background-color: var(--off-white);
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--dark-neutral);
  margin-bottom: 3rem;
  position: relative;
  padding-bottom: 0;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--primary-blue);
  margin: 1rem auto 0;
  border-radius: 2px;
}

.section-subtitle {
  text-align: center;
  font-size: 1.25rem;
  color: var(--medium-grey);
  margin: -1.5rem auto 3rem;
  font-weight: 500;
  max-width: 800px;
}

.table-wrapper {
  overflow-x: auto; /* Scrollable on small screens */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background-color: var(--white);
  margin-bottom: 3rem;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table th {
  background-color: var(--dark-neutral);
  color: var(--white);
  padding: 1.25rem 1rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.specs-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--warm-light-grey);
  color: var(--dark-neutral);
  font-size: 1rem;
}

.specs-table tr:last-child td {
  border-bottom: none;
}

/* Zebra Striping */
.specs-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.specs-table tbody tr:hover {
  background-color: #f0f8ff; /* Light blue tint on hover */
}

.specs-cta {
  text-align: center;
}

.specs-cta p {
  font-size: 1.25rem;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--primary-blue);
  padding: 0.8rem 2rem;
  border: 2px solid var(--primary-blue);
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background-color: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(21, 145, 218, 0.2);
}

/* Mobile Responsiveness for Table */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

  .specs-table th,
  .specs-table td {
    padding: 1rem 0.75rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 600px) {
  .specs-table thead {
    display: none; /* Hide headers */
  }

  .specs-table,
  .specs-table tbody,
  .specs-table tr,
  .specs-table td {
    display: block;
    width: 100%;
  }

  .specs-table tr {
    margin-bottom: 1.5rem;
    background-color: var(--white);
    border: 1px solid var(--warm-light-grey);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  .specs-table tr:nth-child(even) {
    background-color: var(--white); /* Reset zebra */
  }

  .specs-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }

  .specs-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--dark-neutral);
    text-align: left;
    margin-right: 1rem;
    flex: 1; /* Give label space */
  }
}

/* Product Overview Section */
.overview-section {
  padding: 20px 0;
  background-color: var(--white);
}

.overview-content {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
}

.overview-text {
  flex: 1;
}

.overview-text p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--dark-neutral);
  text-align: justify;
}

.overview-trigger {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f0f8ff;
  border-left: 4px solid var(--primary-blue);
  border-radius: 4px;
}

.trigger-text {
  font-size: 1.25rem !important;
  font-weight: 600;
  color: var(--primary-blue) !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  font-style: italic;
}

.overview-media {
  flex: 1;
  display: flex;
  justify-content: center;
}

.overview-video {
  width: 100%;
  max-width: 550px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: float 4s ease-in-out infinite;
}

@media (max-width: 968px) {
  .overview-content {
    flex-direction: column-reverse; /* Video on top, text below */
    gap: 40px;
  }

  .overview-text p {
    text-align: left;
  }

  .overview-video {
    max-width: 100%;
  }
}

/* Key Features Section */
.features-section {
  padding: 20px 0;
  background-color: var(--off-white);
}

.features-layout {
  display: flex;
  gap: 60px;
  margin-bottom: 4rem;
}

.features-image-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: sticky;
  top: 100px; /* Header height + gap */
  height: fit-content;
  align-self: flex-start; /* CRITICAL: ensures the column doesn't stretch to father's height */
}

.sticky-image-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features-hero-img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  background: white;
  padding: 20px;
}

.feature-suite-label {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
}

.features-list-col {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.feature-card {
  background-color: var(--white);
  padding: 2.5rem; /* More padding like in screenshot */
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); /* Softer, larger shadow */
  transition: var(--transition);
  border-top: 4px solid transparent;
}

.feature-card:hover {
  transform: translateX(10px); /* Subtle slide in instead of up */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary-blue);
}

.feature-card h3 {
  font-size: 1.1rem;
  color: var(--primary-blue);
  margin-bottom: 0.75rem;
}

.feature-card p {
  font-size: 0.95rem;
  color: var(--medium-grey);
  line-height: 1.5;
}

.features-cta {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.features-cta p {
  font-size: 1.25rem;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* Mobile Responsiveness for Features */
@media (max-width: 968px) {
  .features-layout {
    flex-direction: column;
    gap: 40px;
  }

  .features-image-col {
    position: static;
    width: 100%;
    justify-content: center;
  }
}

/* Material & Build Quality Section */
.build-quality-section {
  padding: 20px 0;
  background-color: var(--white);
}

.build-layout {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
}

.build-content {
  flex: 1;
}

.build-content p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--dark-neutral);
  text-align: justify;
}

.build-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.build-img {
  width: 100%;
  max-width: 550px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.build-img:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.build-cta {
  margin-top: 2.5rem;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #eee;
}

.build-cta p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  font-style: italic;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Mobile Responsiveness for Build Quality */
@media (max-width: 968px) {
  .build-layout {
    flex-direction: column-reverse; /* Image on top, text below on mobile */
    gap: 40px;
  }

  .build-content p {
    text-align: left;
  }

  .build-img {
    max-width: 100%;
  }
}

/* How It Works Section */
.how-it-works-section {
  padding: 20px 0;
  background-color: var(--off-white);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 4rem;
}

.step-card {
  background-color: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.step-image {
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
}

.step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-content {
  padding: 1.5rem;
}

.step-content h3 {
  color: var(--primary-blue);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.step-content p {
  color: var(--medium-grey);
  font-size: 1rem;
  line-height: 1.5;
}

.how-it-works-cta {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.how-it-works-cta p {
  font-size: 1.25rem;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-style: italic;
}

@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile Guide Section */
.mobile-guide-section {
  padding: 20px 0;
  background-color: var(--white);
}

.mobile-guide-layout {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.mobile-guide-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.guide-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.step-icon {
  width: 40px;
  height: 40px;
  background-color: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.step-text h3 {
  font-size: 1.15rem;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.step-text p {
  color: var(--dark-neutral);
  font-size: 1rem;
  line-height: 1.5;
}

.mobile-guide-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mobile-guide-img {
  width: 100%;
  max-width: 350px;
  border-radius: 40px;
  border: 8px solid #333;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.mobile-guide-cta {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--warm-light-grey);
}

.mobile-guide-cta p {
  font-size: 1.25rem;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-style: italic;
}

@media (max-width: 968px) {
  .mobile-guide-layout {
    flex-direction: column-reverse; /* Phone image on top or bottom? Let's keep steps first for readability on mobile guides usually, or image first? Let's do steps top to bottom as user scrolls. Actually, image first is often more engaging. Let's try Image TOP. */
    flex-direction: column;
    gap: 40px;
  }

  .mobile-guide-img {
    max-width: 280px;
  }
}

/* Reviews Section */
.reviews-section {
  padding: 20px 0;
  background-color: var(--off-white);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  margin-bottom: 3rem;
}

.review-card {
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.stars {
  color: #ffc107; /* Star yellow */
  letter-spacing: 2px;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.review-text {
  font-size: 1rem;
  color: var(--dark-neutral);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1; /* Pushes author down */
}

.review-author {
  font-weight: 600;
  color: var(--dark-neutral);
  font-size: 0.95rem;
}

.verified {
  display: inline-block;
  font-weight: 400;
  font-size: 0.8rem;
  color: #2e7d32; /* Verified green */
  background-color: #e8f5e9;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 0.5rem;
}

.reviews-summary {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
}

.reviews-summary p {
  font-size: 1.1rem;
  color: var(--medium-grey);
  line-height: 1.6;
}

.reviews-cta {
  text-align: center;
}

.reviews-cta p {
  font-size: 1.25rem;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing / Special Offer Section */
.pricing-section {
  padding: 20px 0;
  background-color: var(--white);
}

.pricing-intro {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
}

.pricing-intro p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dark-neutral);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 3rem;
}

.pricing-card {
  background-color: var(--white);
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow per image */
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.pricing-card.popular {
  border: 2px solid var(--primary-blue); /* Or red if prefer */
  /* Often popular cards pop out more */
}

/* Ribbons */
.ribbon {
  position: absolute;
  top: 25px;
  right: -30px;
  width: 150px;
  padding: 5px;
  text-align: center;
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  transform: rotate(45deg);
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ribbon.blue {
  background-color: #03a9f4; /* Light Blue */
}

.ribbon.red {
  background-color: #d32f2f; /* Red */
}

.product-title {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1rem;
  font-weight: 700;
  min-height: 50px; /* Align titles */
}

.product-visual {
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.p-img {
  height: 180px;
  width: auto;
  object-fit: contain;
}

.holiday-badge {
  position: absolute;
  bottom: 0;
  right: 10px;
  width: 60px;
  height: 60px;
  background-color: #d32f2f; /* Holiday Red */
  color: var(--white);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transform: rotate(15deg);
}

.price-box {
  margin-bottom: 1rem;
}

.old-price {
  display: block;
  text-decoration: line-through;
  color: var(--medium-grey);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.new-price {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #03a9f4; /* Bright Blue match */
}

.add-cart-btn {
  display: block;
  width: 100%;
  background-color: #d32f2f; /* Red Button */
  color: var(--white);
  border: none;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  text-align: center;
}

.add-cart-btn:hover {
  background-color: #b71c1c;
}

.trust-icons {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.t-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.t-icon img {
  height: 24px;
  width: auto;
  margin-bottom: 5px;
}

.t-icon span {
  font-size: 0.65rem;
  color: #555;
  line-height: 1.1;
}

.pricing-cta {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.pricing-cta p {
  font-size: 1.4rem;
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-style: italic;
}

.pricing-cta small {
  display: block;
  font-size: 1rem;
  color: var(--medium-grey);
}

/* Price Responsive */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr); /* 2x2 on tablet */
  }
}

@media (max-width: 600px) {
  .pricing-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
  }

  .pricing-card {
    padding: 1.5rem;
  }
}

/* Product Selector / Size Guide Section */
.product-selector-section {
  padding: 20px 0;
  background-color: #f9fbff; /* Very light blue tint */
}

.selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.selector-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-image-container {
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.main-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.thumbnails-row {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.thumb {
  width: 70px;
  height: 70px;
  object-fit: contain;
  background-color: var(--white);
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.thumb:hover {
  border-color: #b0bec5;
}

.thumb.active {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(21, 145, 218, 0.2);
}

.selector-details {
  padding-top: 2rem;
}

.detail-title {
  font-size: 2.5rem;
  color: var(--dark-neutral);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.detail-price {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.current-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark-neutral);
}

.original-price {
  font-size: 1.5rem;
  color: var(--medium-grey);
  text-decoration: line-through;
}

.save-badge {
  background-color: #d32f2f;
  color: var(--white);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.detail-form-group {
  margin-bottom: 2rem;
}

.detail-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-neutral);
}

#size-select {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--white);
  color: var(--dark-neutral);
}

#size-select:focus {
  border-color: var(--primary-blue);
  outline: none;
}

.detail-description {
  font-size: 1.1rem;
  color: var(--dark-neutral);
  line-height: 1.6;
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary-blue);
  padding-left: 1rem;
  background-color: rgba(21, 145, 218, 0.05); /* Light blue bg for desc */
  padding: 1rem;
  border-radius: 0 8px 8px 0;
}

.detail-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 2rem;
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 2px solid #ddd;
  border-radius: 6px;
  background-color: var(--white);
}

.qty-btn {
  width: 40px;
  height: 100%;
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--primary-blue);
}

.qty-input {
  width: 50px;
  border: none;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-to-cart-lg {
  flex: 1;
  background-color: #d32f2f;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.add-to-cart-lg:hover {
  background-color: #b71c1c;
}

.detail-trust-badges {
  display: flex;
  gap: 20px;
  margin-bottom: 2rem;
  border-top: 1px solid #eee;
  padding-top: 1.5rem;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.badge-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #03a9f4; /* Blue ring */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}

.badge-circle img {
  height: 24px;
  width: auto;
}

.badge-item span {
  font-size: 0.8rem;
  color: var(--primary-blue);
  font-weight: 600;
  max-width: 80px;
  line-height: 1.2;
}

.selector-trigger p {
  font-size: 1.1rem;
  color: var(--medium-grey);
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 968px) {
  .selector-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .selector-details {
    padding-top: 0;
  }

  .detail-title {
    font-size: 2rem;
  }
}

/* Who Should Buy Section */
.who-should-buy-section {
  padding: 20px 0;
  background-color: var(--white);
  border-top: 1px solid var(--off-white);
}

.who-buy-grid {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
}

.who-buy-content {
  flex: 1;
}

.who-buy-list li {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--medium-grey);
  position: relative;
  padding-left: 2rem;
}

.who-buy-list li::before {
  content: "✓";
  color: var(--primary-blue);
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 2px;
}

.who-buy-list strong {
  color: var(--dark-neutral);
  font-weight: 700;
  font-size: 1.15rem;
}

.who-buy-trigger {
  margin-top: 2.5rem;
  padding: 2rem;
  background-color: #f0f8ff; /* Light blue tint matching theme */
  border-left: 4px solid var(--primary-blue);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.who-buy-trigger p {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 0;
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

.who-buy-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.who-buy-img {
  width: 100%;
  max-width: 550px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsiveness for Who Should Buy */
@media (max-width: 968px) {
  .who-buy-grid {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .who-buy-image {
    width: 100%;
  }

  .who-buy-img-placeholder {
    height: 300px;
  }
}

/* Comparison Table Section */
.comparison-section {
  padding: 20px 0;
  background-color: var(--off-white);
}

.comparison-wrapper {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Stronger shadow for pop */
  border-radius: 12px;
  overflow-x: auto;
  background: white;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px; /* Ensure horizontal scroll on mobile */
}

.comparison-table th {
  background-color: var(--dark-neutral);
  color: var(--white);
  padding: 1.5rem;
  text-align: center;
  font-size: 1.1rem;
  vertical-align: middle;
}

.comparison-table th.feature-col {
  text-align: left;
  width: 25%;
  background-color: #2c2f30; /* Slightly lighter header for differentiation */
}

.comparison-table th.highlight-col {
  background-color: var(--primary-blue);
  position: relative;
  width: 30%;
}

/* Optional: 'Best Choice' Tag */
.comparison-table th.highlight-col::before {
  content: "BEST CHOICE";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #ffcc00;
  color: #333;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: none; /* Can enable if user wants */
}

.th-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.th-logo {
  height: 30px;
  filter: brightness(0) invert(1); /* Make logo white */
}

.comparison-table td {
  padding: 1.25rem;
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  color: var(--dark-neutral);
  vertical-align: middle;
}

.comparison-table td.feature-name {
  text-align: left;
  font-weight: 600;
  color: var(--dark-neutral);
  background-color: #fcfcfc;
}

.comparison-table td.highlight-cell {
  background-color: #f0f9ff; /* Very light blue tint */
  font-weight: 600;
  border-left: 2px solid var(--primary-blue);
  border-right: 2px solid var(--primary-blue);
}

.comparison-table tr:last-child td.highlight-cell {
  border-bottom: 2px solid var(--primary-blue);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.check {
  color: #27ae60;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 4px;
}

.cross {
  color: #e74c3c;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 4px;
}

.comparison-trigger {
  text-align: center;
  margin-top: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.comparison-trigger p {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 2rem;
  font-style: italic;
}

.comp-btn {
  padding: 1rem 3rem;
  font-size: 1.2rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .comparison-table th,
  .comparison-table td {
    padding: 1rem 0.5rem;
    font-size: 0.95rem;
  }

  .th-logo {
    height: 20px;
  }
}

@media (max-width: 600px) {
  .comparison-table thead {
    display: none;
  }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table td {
    display: block;
    width: 100%;
  }

  .comparison-table tr {
    margin-bottom: 2rem;
    border: 1px solid var(--warm-light-grey);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .comparison-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
  }

  .comparison-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--dark-neutral);
    text-align: left;
    margin-right: 1.5rem;
    flex: 1;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .comparison-table td.feature-name {
    background-color: var(--primary-blue);
    color: var(--white);
    justify-content: center;
    text-align: center;
    font-size: 1.1rem;
    padding: 1.25rem;
  }

  .comparison-table td.feature-name::before {
    display: none; /* Don't show "Feature" label on the header cell */
  }

  .comparison-table td.highlight-cell {
    background-color: #f0f9ff;
    border-left: none;
    border-right: none;
  }

  .comparison-wrapper {
    box-shadow: none;
    background: transparent;
    overflow-x: visible;
  }

  .comparison-table {
    min-width: auto;
  }
}

/* Shipping & Returns Section */
.shipping-section {
  padding: 20px 0;
  background-color: var(--white);
  border-top: 1px solid var(--off-white);
}

.shipping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 3rem;
}

.shipping-card {
  background-color: var(--off-white);
  padding: 2.5rem;
  border-radius: 12px;
  text-align: center;
  transition: var(--transition);
  border: 1px solid #eee;
}

.shipping-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-blue);
}

.ship-icon {
  width: 70px;
  height: 70px;
  background-color: var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ship-icon img {
  width: 35px;
  height: auto;
}

.shipping-card h3 {
  color: var(--primary-blue);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.shipping-card p {
  color: var(--dark-neutral);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.ship-list {
  text-align: left;
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--medium-grey);
}

.ship-list li {
  margin-bottom: 0.5rem;
}

.shipping-card small {
  display: block;
  color: #999;
  font-size: 0.85rem;
}

.return-email a {
  color: var(--primary-blue);
  font-weight: 600;
}

.shipping-visual {
  display: flex;
  justify-content: center;
}

.shipping-visual-img {
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.shipping-trigger {
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: #f0f8ff;
  border-left: 4px solid var(--primary-blue);
  border-radius: 8px;
  text-align: center;
}

.shipping-trigger p {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  font-style: italic;
}

.margin-top-2 {
  margin-top: 2rem;
}

/* Mobile Responsiveness for Shipping */
@media (max-width: 768px) {
  .shipping-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Money-Back Guarantee Section */
.guarantee-section {
  padding: 20px 0;
  background-color: #f7f9fa; /* Slight contrast */
  border-top: 1px solid #eee;
}

.guarantee-layout {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.guarantee-icon-large {
  flex: 0 0 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guarantee-icon-large img {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.guarantee-text {
  flex: 1;
}

.lead-text {
  font-size: 1.3rem;
  color: var(--dark-neutral);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.lead-text strong {
  color: var(--primary-blue);
}

.guarantee-text p {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  color: var(--medium-grey);
}

.disclaimer {
  font-size: 0.9rem !important;
  font-style: italic;
  color: #999 !important;
  margin-top: 1.5rem;
}

.guarantee-trigger {
  margin-top: 2rem;
  text-align: left;
}

.guarantee-trigger p {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-neutral);
  margin-bottom: 1rem;
}

/* Mobile Responsiveness for Guarantee */
@media (max-width: 768px) {
  .guarantee-layout {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .guarantee-trigger {
    text-align: center;
  }

  .guarantee-icon-large img {
    max-width: 120px;
  }
}

/* FAQ Section */
.faq-section {
  padding: 20px 0;
  background-color: var(--white);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 3rem;
  align-items: start;
}

.faq-item {
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-color: #ddd;
}

.faq-item h4 {
  font-size: 1.1rem;
  color: var(--primary-blue);
  margin-bottom: 0;
  font-weight: 600;
  position: relative;
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item h4::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-blue);
  transition: transform 0.3s ease;
  line-height: 1;
}

.faq-item.active h4::after {
  content: "-";
}

.faq-item p {
  font-size: 0.95rem;
  color: var(--medium-grey);

  /* Collapsible styles */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: all 0.4s ease-in-out;
}

.faq-item.active p {
  margin-top: 1rem;
  max-height: 500px; /* Arbitrary large height covering most answers */
  opacity: 1;
}

.faq-trigger {
  text-align: center;
  margin-top: 3rem;
  grid-column: 1 / -1;
}

.faq-trigger p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Security Section */
.security-section {
  padding: 20px 0;
  background-color: var(--off-white);
  border-top: 1px solid #eee;
}

.security-layout {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.security-icon img {
  width: 60px;
  height: auto;
}

.security-content h3 {
  color: var(--dark-neutral);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.security-content p {
  color: var(--medium-grey);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.payment-methods-small {
  margin-bottom: 1rem;
}

.payment-methods-small img {
  height: 30px;
  width: auto;
}

.security-trigger p {
  font-size: 1.1rem;
  font-weight: 600;
  color: #27ae60; /* Green for trust */
  font-style: italic;
  margin: 0;
}

/* Mobile Responsiveness for FAQ & Security */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .security-layout {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}

/* Contact Support Section */
.contact-section {
  padding: 20px 0;
  background-color: var(--white);
  border-top: 1px solid #eee;
}

.contact-box {
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
  border: 1px solid #cfe2ff;
  border-radius: 16px;
  padding: 3rem;
  display: flex;
  align-items: center;
  gap: 40px;
}

.contact-text {
  flex: 1;
}

.contact-text p {
  font-size: 1.05rem;
  color: var(--dark-neutral);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.contact-text a:not(.btn-primary-nav) {
  color: var(--primary-blue);
  font-weight: 600;
  text-decoration: underline;
}

.contact-text .btn-primary-nav {
  color: var(--white);
  text-decoration: none;
}

.contact-trigger {
  margin-bottom: 2rem;
}

.contact-trigger p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  font-style: italic;
  margin-bottom: 0;
}

.contact-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.contact-support-img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Last Updated Section */
.last-updated-section {
  padding: 20px 0;
  background-color: #fafafa;
  border-top: 1px solid #eee;
  text-align: center;
}

.last-updated-text {
  font-size: 0.9rem;
  color: var(--medium-grey);
  max-width: 800px;
  margin: 0 auto;
}

.last-updated-text span {
  font-weight: 600;
  color: var(--dark-neutral);
}

/* Mobile Responsiveness for Contact */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .contact-box {
    flex-direction: column-reverse;
    padding: 2rem;
    text-align: center;
    gap: 30px;
  }

  .contact-text h2 {
    text-align: center !important;
  }
}