:root{
  --primary: #28a745;
  --primary-dark: #218838;
  --header-bg: black;
  --text-light: gray;
  --text-dark: #111111;
  --muted: #666666;
  --card-bg: #f4f4f4;
  --max-site-width: 1100px;
  --gap: 16px;
  --focus-color: rgba(40,167,69,0.25);
  --focus-offset: 3px;
}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  background:blue;
  color:black;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.container{
  max-width:var(--max-site-width);
  margin:0 auto;
  padding:0 16px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus-visible{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  background:#000;
  color:#fff;
  padding:8px;
  border-radius:4px;
  z-index:9999;
}

/* Header */
.site-header{
  background:blue;
  color:gray;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
}
.logo{max-width:140px;height:auto;}

.menu-toggle{
  margin-left:auto;
  background:none;
  border:0;
  color:gray;
  font-size:22px;
  display:none;
}

.nav{margin-left:auto;}
.nav-list{
  display:flex;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
  align-items:center;
}
.nav-list a,.nav-list button{
  color:gold;
  background:none;
  border:0;
  padding:8px 10px;
  text-decoration:none;
  cursor:pointer;
  font-size:15px;
}
.has-sub{position:relative;}
.sub-menu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  background:blue;
  border:1px solid blue;
  list-style:none;
  padding:6px 0;
  margin:0;
  display:none;
  min-width:180px;
  border-radius:6px;
}
.sub-menu a{display:block;padding:8px 12px;color:gold;}
.has-sub:focus-within .sub-menu,.has-sub:hover .sub-menu{display:block;}

/* Hero */
.hero{padding:28px 0;}
.lead{color:black;margin-top:6px;}
.header-message{
  background:gold;
  padding:10px;
  border:1px solid black;
  border-radius:6px;
  color:black;
  margin-top:12px;
}

/* Carousel */
.carousel{position:relative;margin:24px 0;}
.carousel-viewport{overflow:hidden;}
.carousel-track{
  display:flex;
  gap:var(--gap);
  transition:transform 500ms cubic-bezier(.2,.8,.2,1);
  will-change:transform;
  padding:12px 0;
}
.product{
  background:lightgray;
  border-radius:8px;
  border:1px solid black;
  flex:0 0 calc((100% - (2 * var(--gap))) / 3);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:12px;
  min-width:220px;
}
.product img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:6px;
}
.product-body{
  padding:10px 4px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.product-title{margin:0;font-size:18px;color:var(--text-dark);}
.product-desc{margin:0;color:var(--muted);font-size:14px;}
.product-price{margin:0;font-weight:600;color:var(--text-dark);}

/* PayPal button container */
.paypal-button-container{
  margin-top:auto;
  display:flex;
  justify-content:center;
  gap:8px;
}

/* Carousel buttons */
.carousel-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:gold;
  border:0;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  z-index:10;
}
.carousel-button.prev{left:8px;}
.carousel-button.next{right:8px;}

/* Container layout */
.container.products-section {
  max-width: 1100px;
  margin: 36px auto;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  color: black;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Heading styling */
#templates-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px 0;
  font-size: 20px;
  line-height: 1.15;
  color: black;
}

/* If you keep the <li> inside the H2 (not recommended semantically),
   style it so it looks like an inline label rather than a list item. */
#templates-heading > li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  color: var(black, black);
  font-weight: 600;
  margin: 0;
}

/* Link (Application Download) styling */
#templates-heading a {
  color: black;
  background: linear-gradient(90deg,#60a5fa,#9b6cff);
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid black;
  font-weight: 700;
  transition: all 150ms ease;
}

#templates-heading a:hover,
#templates-heading a:focus {
  color: #041426;
  background: linear-gradient(90deg,#60a5fa,#9b6cff);
  border-color: rgba(255,255,255,0.04);
  box-shadow: 0 8px 24px rgba(9,20,40,0.45);
  outline: none;
}

/* Make heading responsive */
@media (max-width: 700px) {
  #templates-heading { font-size: 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
  #templates-heading > li { width: 100%; justify-content: space-between; }
  #templates-heading a { padding: 8px 12px; }
}

/* Footer */
.site-footer{
  margin-top:auto;
  background:blue;
  color:black;
  padding:16px 0;
}
.footer-inner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.footer-logo{max-width:120px;height:auto;}
.footer-nav a{color:black;margin-left:12px;text-decoration:none;}

/* Responsive */
@media (max-width:900px){
  .product{flex:0 0 calc((100% - var(--gap)) / 2);}
}
@media (max-width:640px){
  .menu-toggle{display:block;}
  .nav{
    position:absolute;
    left:0;
    right:0;
    top:64px;
    background:var(--header-bg);
    display:none;
  }
  .nav.show{display:block;}
  .nav-list{flex-direction:column;gap:0;}
  .nav-list a,.nav-list button{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.03);}
  .product{flex:0 0 90%;margin:0 auto;}
  .carousel-button{display:none;}
}

/* Focus-visible style */
:focus-visible{
  outline:none;
  box-shadow:0 0 var(--focus-offset) var(--focus-color);
  border-radius:4px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .carousel-track{transition:none;}
}

/* Buttons */
button{
  background-color:var(--primary);
  color:black;
  border:1px solid var(--primary-dark);
  padding:10px 15px;
  cursor:pointer;
  border-radius:5px;
  transition:background-color 0.2s, transform 0.15s;
}
button:hover{background-color:green;transform:translateY(-1px);}

/* Variants */
.donate-button{background-color:var(--primary);color:#fff;border:1px solid var(--primary-dark);}
.donate-button1{background-color:lightgray;color:black;border:1px solid black;}



.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.contact-email { display: flex; gap: 8px; align-items: center; font-family: sans-serif; }
.email-link { color: #0070ba; text-decoration: underline; }
.copy-email {
  padding: 6px 10px;
  cursor: pointer;
  border: 1px solid blue;
  background: gold;
  color: blue;
  border-radius: 4px;
}
.copy-feedback { margin-left:8px; color: green; font-size: 0.95rem; }

.product { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.product-media img { display:block; width:100%; height:auto; border-radius:6px; }
.audio-wrapper { margin-top:0.5rem; }
.audio-player { width:100%; display:block; }
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }