/* HydraTag override stylesheet, restoration of the original website (2 October 2026).
   Loaded AFTER the untouched original stylesheet (home.css on the homepage and guides,
   webstore.css on the Pro page). It only adds what the originals lacked: keyboard focus and
   skip link, a small-screen Menu button, the disabled coming-soon state, honest captions,
   the FAQ accordion without the old cart script, the guide pages, and reduced motion.
   It defines no new palette; every colour comes from the original :root variables. */

/* ---------- Accessibility basics ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -200px;
  z-index: 2000;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  background: var(--gray-900);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }
:focus-visible { outline: 3px solid var(--aqua-600); outline-offset: 3px; }
main:focus { outline: none; }
[id] { scroll-margin-top: 90px; }
img { max-width: 100%; height: auto; }
.nav-links a[aria-current="page"] { color: var(--aqua-600); }

/* ---------- Small-screen menu (the original only shrank the link row) ---------- */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-container { flex-wrap: wrap; }
  .nav-links { flex-wrap: wrap; }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--white);
    color: var(--gray-900);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }
  .nav-toggle-bars {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .js .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0.25rem;
  }
  .js .site-nav.is-open .nav-links { display: flex; }
  .js .nav-links a {
    display: block;
    padding: 0.75rem 0;
    border-top: 1px solid var(--gray-200);
    font-size: 1rem;
  }
}

/* ---------- Homepage additions ---------- */
.hero-note {
  max-width: 640px;
  margin: 1.5rem auto 0;
  font-size: 1rem;
  color: #666;
}

/* ---------- Pro page additions (original webstore.css has no .btn) ---------- */
.page-store .btn {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.page-store .btn-primary {
  background: linear-gradient(135deg, var(--aqua-500), var(--aqua-700));
  color: white;
}
.page-store .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.page-store .btn-secondary {
  background: var(--white);
  color: var(--aqua-600);
  border: 2px solid var(--aqua-600);
}
.page-store .btn-secondary:hover { background: var(--aqua-50); }
.page-store .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-offer {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gray-900);
}
.hero-media-wrapper .hero-fallback { height: 100%; }

.product-card { text-align: left; }
.product-term { margin: 0; font-size: 0.95rem; color: #666; }
.product-price-container .product-price { margin-bottom: 0.25rem; }
.buy-now-btn[disabled] {
  background: var(--gray-200);
  color: #666;
  box-shadow: none;
  cursor: not-allowed;
}
.buy-now-btn[disabled]:hover {
  transform: none;
  box-shadow: none;
  background: var(--gray-200);
}
.purchase-status {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
}
.free-app-link {
  font-size: 0.95rem;
  color: var(--aqua-600);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.free-app-link:hover { color: var(--aqua-700); text-decoration: underline; }

.section-note {
  max-width: 720px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: #666;
}
.section-note a,
.returns-info a,
.includes-text a {
  color: var(--aqua-600);
  font-weight: 600;
  text-decoration: none;
}
.section-note a:hover,
.returns-info a:hover,
.includes-text a:hover { color: var(--aqua-700); text-decoration: underline; }
.bottle-tag {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--aqua-700);
}
.includes-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
}
.includes-text p { margin-top: 1rem; color: #666; }
.shipping-info p + p,
.returns-info p + p { margin-top: 0.75rem; }

/* FAQ accordion: the original look (question row with a + icon) using details/summary, so it
   opens and closes with the keyboard and without the retired cart script. */
details.faq-item > summary { list-style: none; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary.faq-question h3 { margin: 0; }
details.faq-item[open] .faq-icon { transform: rotate(45deg); }
details.faq-item .faq-answer { max-height: none; padding-bottom: 1.5rem; }

/* Store footer: the original centred footer with a link row */
.page-store .footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}
.page-store .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
.page-store .footer-links a:hover { color: var(--aqua-500); }

/* ---------- Guides (original nav, container widths and aqua links) ---------- */
.footer-section a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer-section a:hover { color: var(--aqua-500); }
.guide {
  max-width: 800px;
  margin: 73px auto 0;
  padding: 4rem 1.5rem;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #666;
}
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.crumbs a { color: var(--aqua-600); font-weight: 500; text-decoration: none; }
.crumbs a:hover { color: var(--aqua-700); text-decoration: underline; }
.prose h1 {
  margin: 1rem 0 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
}
.prose .lead { margin-bottom: 2rem; font-size: 1.25rem; color: #666; }
.prose h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}
.prose p,
.prose ol,
.prose ul { margin-bottom: 1.25rem; line-height: 1.7; color: #444; }
.prose ol,
.prose ul { padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--gray-900); }
.prose a { color: var(--aqua-600); font-weight: 600; text-decoration: none; }
.prose a:hover { color: var(--aqua-700); text-decoration: underline; }
.table-wrap {
  margin: 1.5rem 0 2rem;
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}
.table-wrap table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.95rem; }
.table-wrap th,
.table-wrap td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  vertical-align: top;
}
.table-wrap thead th { background: var(--gray-50); font-weight: 700; color: var(--gray-900); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.notice {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--aqua-600);
  border-radius: 0 12px 12px 0;
  background: var(--aqua-50);
  color: var(--gray-900);
}
.guide-updated {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.9rem;
  color: #888;
}
.guide-more h2 { margin: 3rem 0 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--gray-900); }
.guide-more ul { list-style: none; }
.guide-more li a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-900);
  font-weight: 600;
  text-decoration: none;
}
.guide-more li a:hover { color: var(--aqua-600); }
.guide-list { list-style: none; margin-top: 2rem; border-top: 1px solid var(--gray-200); }
.guide-link {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-900);
  text-decoration: none;
}
.guide-title { display: block; margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; }
.guide-link:hover .guide-title { color: var(--aqua-600); }
.guide-desc { display: block; color: #666; }

/* Contextual guide links inside the original FAQ, hero note and includes copy */
.faq-item p a,
.hero-note a,
.guide-intro a,
.guide-more p a {
  color: var(--aqua-600);
  font-weight: 600;
  text-decoration: none;
}
.faq-item p a:hover,
.hero-note a:hover,
.guide-intro a:hover,
.guide-more p a:hover { color: var(--aqua-700); text-decoration: underline; }
.includes-text p + p { margin-top: 0.5rem; font-size: 0.9rem; }
.crumbs span[aria-current="page"] { color: var(--gray-900); font-weight: 500; }
.guide-intro p { line-height: 1.7; color: #444; }
.guide-more p { margin-top: 1rem; }

/* Guide index: two groups (free app / included sticker and delivery) */
.guide-group { margin-top: 2.5rem; }
.guide-group h2 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}
.guide-group > p { line-height: 1.6; color: #666; }
.guide-group .guide-list { margin-top: 1rem; }

@media (max-width: 768px) {
  .prose h1 { font-size: 2rem; }
  .guide { padding: 3rem 1.5rem; }
}

/* ---------- Reduced motion (the original homepage sheet had none) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-glow { animation: none; }
  .btn-primary:hover,
  .product-card:hover { transform: none; }
}