/* Ensure box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Variables (if not already defined) */
:root {
  --max-width: 1200px;
  --spacers-l24: 24px;
  --spacers-l16: 16px;
  --spacers-l12: 12px;
  --link-color: #1a73e8;
  --primary-color: #333;
  --background-color: #f9fafb;
  --border-color: #e5e7eb;
  --hover-color: #2563eb;
}
.site-main {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
}
.site-main > div > h2 {

    /* keep your caps: */
    width: 100%;
    max-width: var(--max-width);
    box-sizing: border-box;
    
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 350;
    color: var(--primary-color);
    text-transform: uppercase;
    
    /* left align the block and its text: */
    margin: var(--spacers-l24) 0; /* top/bottom spacing, 0 left/right */
    text-align: left;
    padding-left: 1rem;
  }
  

.about-mw-heading {
  padding-left: 0.7rem;
}
@media (max-width: 900px) {
  .content-area {
    width: 100%;       /* full width on mobile */
    padding: 0 1rem;   /* optional side padding */
    margin: auto;
  }

  .about-mw-heading {
    padding-left: 0;   /* remove extra indent */
  }
}

/* Container: remove forced min-height so it grows with content */
.customer-service-container {
  display: flex;
  max-width: var(--max-width);
 
  gap: var(--spacers-l24);
  min-height: auto !important;
}

/* Sidebar unchanged */
.customer-service-nav {
  flex: 0 0 240px;
  background-color: #fff;
  padding: var(--spacers-l24);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border: 1px solid var(--border-color);
}
.customer-service-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: 'inter', sans-serif;
  font-weight: 400;
}
.customer-service-nav li + li {
  margin-top: var(--spacers-l12);
}
.customer-service-nav a {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--primary-color);
  padding: var(--spacers-l12) var(--spacers-l16);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}
.customer-service-nav a:hover {
  background-color: var(--border-color);
  color: var(--hover-color);
}
.customer-service-nav .is-active a {
  color: var(--link-color);
  font-weight: 400;
  background-color: rgba(26, 115, 232, 0.1);
}

/* Content: make it squeezable */
.customer-service-content {
  flex: 1 1 auto;
  min-width: 0; /* Allow shrinking below content width */
  background-color: #fff;
  padding: var(--spacers-l24);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border: 1px solid var(--border-color);
  overflow-wrap: break-word; /* Prevent overflow from long words */
}

/* Mobile dropdown wrapper (injected) */
.cs-mobile-select {
  display: none; /* desktop hidden */
  width: 100%;
  margin-bottom: var(--spacers-l24);
  text-align: center;
}
.cs-mobile-select select {
  width: 100%;
  max-width: 100%;
  padding: var(--spacers-l12);
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--primary-color);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacers-l16) center;
  cursor: pointer;
}
.cs-mobile-select select:focus {
  outline: none;
  border-color: var(--link-color);
  box-shadow: 0 0 0 2px rgba(26,115,232,0.2);
}

/* Responsive: swap sidebar ↔ select on mobile */
@media (max-width: 768px) {
  .customer-service-container {
    flex-direction: column;
  }
  .customer-service-nav {
    display: none !important;
  }
  .cs-mobile-select {
    display: block;
  }
}
/* On desktop ensure select is hidden */
@media (min-width: 769px) {
  .cs-mobile-select {
    display: none;
  }
}

/* FAQ styling (optional) */
.cs-faqs {
  max-width: var(--max-width);
  margin: 0 auto;
}
.cs-faqs details {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: var(--spacers-l16);
  overflow: hidden;
  background-color: #fff;
  transition: background-color 0.3s;
}
.cs-faqs summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacers-l16);
  font-size: 1rem;
  font-weight: 400;
  font-family: 'inter', sans-serif;
  color: var(--primary-color);
  background-color: var(--background-color);
  transition: background-color 0.3s;
}
.cs-faqs summary::-webkit-details-marker {
  display: none;
}
.cs-faqs summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.3s;
  color: var(--primary-color);
}
.cs-faqs details[open] > summary::after {
  content: "−";
}
.cs-faqs summary:hover,
.cs-faqs summary:focus {
  background-color: var(--border-color);
  outline: none;
}
.cs-faqs details > p,
.cs-faqs details > div,
.cs-faqs details > section {
  padding: 0 var(--spacers-l16) var(--spacers-l16);
  color: #444;
  line-height: 1.6;
}
.cs-faqs details > * + * {
  margin-top: var(--spacers-l12);
}
.cs-faqs details[open] {
  background-color: #fdfdfd;
}
@media (max-width: 480px) {
  .cs-faqs summary {
    font-size: 1.1rem;
    padding: var(--spacers-l12);
  }
  .cs-faqs details > p {
    padding: 0 var(--spacers-l12) var(--spacers-l12);
    font-size: 0.95rem;
  }
}
/* Align customer-service area with footer inner width */
.customer-service-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

.cs-contact-grid {
  display: grid;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-contact-col article {
  display: flex;
  flex-direction: column;
}

.cs-contact-col h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

.cs-contact-col p,
.cs-contact-col address {
  margin: 0 0 1rem;
  line-height: 1.6;
}

.cs-contact-col address a {
  color: inherit;
  text-decoration: none;
}

.cs-contact-col .hours {
  font-style: normal;
  color: #555;
}

/* Utility: visually hide only for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* mobile: stack and hide sidebar as before */
@media (max-width: 768px) {
  .customer-service-container {
    flex-direction: column;
  }
  .customer-service-nav {
    display: none !important;
  }
  .cs-mobile-select {
    display: block;
    width: 100%;
    margin: var(--spacers-l24) 0 0;
    text-align: center;
  }
  .cs-mobile-select select {
    width: 100%;
    padding: var(--spacers-l12);
    /* …your other select styles… */
  }
}
/* 1. Reset defaults inside your contact cols */
.cs-contact-col h3,
.cs-contact-col p {
  margin: 0;
}



/* 4. (Optional) If you want a uniform gap between every element */
.cs-contact-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 1) Base state: hidden & ready to animate */
.cs-faqs .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 1rem;           /* no vertical padding when closed */
}

/* 2) Open state styling */
.cs-faqs details[open] .faq-content {
  /* padding restored */
  padding: 1rem;
  /* max-height will be set via JS */
}
.orders-delivery-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Headings */
.orders-delivery-content h1,
.orders-delivery-content h2 {
  margin: 1.5rem 0 0.75rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Main title slightly larger */
.orders-delivery-content h1 {
  font-size: 2rem;
  margin-top: 0;
}

/* Section titles */
.orders-delivery-content h2 {
  font-size: 1.25rem;
}

/* Paragraphs */
.orders-delivery-content p {
  margin: 0 0 1rem;
}

/* Lists */
.orders-delivery-content ul {
  margin: 0 0 1rem 1.5rem;
  list-style-type: disc;
}
.orders-delivery-content li {
  margin-bottom: 0.5rem;
}
.returns-refunds-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Headings */
.returns-refunds-content h2,
.returns-refunds-content h3 {
  margin: 1.5rem 0 0.75rem;
  font-weight: 400;
  line-height: 1.25;
}

.returns-refunds-content h2 {
  font-size: 1.75rem;
  margin-top: 0;
}

.returns-refunds-content h3 {
  font-size: 1.25rem;
}

/* Paragraphs */
.returns-refunds-content p {
  margin: 0 0 1rem;
}

/* Lists */
.returns-refunds-content ul {
  margin: 0 0 1rem 1.5rem;
  list-style-type: disc;
}

.returns-refunds-content li {
  margin-bottom: 0.5rem;
}

/* Strong text inside list items */
.returns-refunds-content li strong {
  display: block;
  margin-bottom: 0.25rem;
}
.customer-service-content-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  color: #333;
  line-height: 1.6;
  font-family: system-ui, sans-serif;
}

/* Grid setup */
.cs-contact-grid {
  display: grid;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Typography */
.cs-contact-col h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
}

.cs-contact-col p,
.cs-contact-col address {
  margin: 0 0 1rem;
}

/* Hours styling */
.hours {
  font-style: normal;
  color: #555;
}

/* WhatsApp icon sizing */
.whatsapp-icon {
  display: block;
  width: 3.7rem;
  height: 3.7rem;
  transition: transform 0.2s ease;
}

.whatsapp-icon:hover {
  transform: scale(1.05);
}

/* Visually hidden (for screen readers) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}