/* ============ Color Palette (soft pinks/whites + soft yellow) ============ */
:root{
  --pink-50:#FFF1F5;   /* very soft pink background */
  --pink-100:#FCE7F3;  /* section backgrounds */
  --pink-300:#F9A8D4;  /* accents */
  --pink-400:#F472B6;  /* headings accents (sparingly) */
  --white-soft:#FFFBFE;/* creamy soft white */
  --text:#4A4A4A;
  --muted:#7a7a7a;
  --yellow:#FDE68A;    /* soft yellow for buttons */
  --yellow-ink:#6B5E00;/* readable on soft yellow */
  --shadow:0 10px 25px rgba(249,168,212,.25);

  /* banner video */
  --banner-h:220px;
  --banner-h-sm:150px;
}

/* ===================== Base ===================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--pink-50);
  line-height:1.6;
}
.container{width:min(1100px,92%);margin-inline:auto}
.section-title{
  font-size:clamp(1.5rem,1.2rem + 2vw,2.2rem);
  color:var(--pink-400);
  margin:0 0 1rem;
}
.small{font-size:.9rem;color:var(--muted)}

/* ===================== Header (logo left, menu centered at bottom) ===================== */
.site-header{
  position:relative;                  /* not sticky */
  height:var(--banner-h);
  display:flex;
  align-items:center;
  background:var(--white-soft);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* video + overlay fill header */
.header-video,
.header-overlay{
  position:absolute; inset:0; width:100%; height:100%;
}
.header-video{
  object-fit:cover;
  object-position:50% 35%;
  filter:saturate(1.25) contrast(1.08) brightness(1.06);
  z-index:0;
}
.header-overlay{
  z-index:1;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,.55)),
    linear-gradient(to bottom, rgba(249,168,212,.14), rgba(249,168,212,.08));
}

/* content layer */
.header-centered{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:1rem;
  height:100%;
  width:100%;
  padding:.8rem 0;
}

/* logo left */
.logo{
  height:160px; width:auto; object-fit:contain;
  padding:.35rem .8rem;
  border-radius:16px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

/* keep the content aligned to the left inside the container */
.header-centered .logo{ margin-left: 12.0rem; }

/* nav centered horizontally at the bottom of the HEADER (not next to logo) */
.nav-centered{
  position:absolute;
  left:50%;
  bottom:12px;                        /* move up/down if you want */
  transform:translateX(-50%);
  display:flex; gap:1.2rem;
  padding:.4rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.nav-centered a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  padding:.5rem 1rem;
  transition:color .2s ease;
}
.nav-centered a:hover{ color:var(--pink-400) }

/* responsive header */
@media (max-width:900px){ .logo{height:130px} }
@media (max-width:720px){
  .site-header{ height:var(--banner-h-sm) }

  .header-centered .logo{
    height:100px;
    margin-left: 0 !important;
    margin-right: 0;
    display:block;
    margin-inline:auto;
  }

  .nav-centered{
    bottom:8px;
    gap:.9rem;
    padding:.35rem .7rem;
  }
}

/* motion preference */
@media (prefers-reduced-motion:reduce){
  .header-video{display:none}
  .header-overlay{background:rgba(255,255,255,.85)}
}

/* ===================== Carousel ===================== */
.carousel{position:relative;overflow:hidden;background:var(--pink-100)}
.carousel-track{display:flex;transition:transform 600ms ease}
.slide{min-width:100%;height:clamp(220px,40vw,520px)}
.slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.carousel-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:.5rem}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:none;background:#e6c5d7;cursor:pointer}
.carousel-dots button[aria-selected="true"]{background:var(--pink-300)}

/* ===================== Weekly Specials ===================== */
.weekly{background:var(--white-soft);padding:2.2rem 0 1.5rem;box-shadow:var(--shadow);margin-top:1rem}
.weekly-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.weekly .countdown{margin-left:auto;font-weight:700;color:#9d265f}
.weekly-carousel{margin-top:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.weekly-track{display:flex;gap:.9rem;padding-bottom:.3rem}
.weekly-card{background:var(--white-soft);border-radius:14px;min-width:220px;scroll-snap-align:start;box-shadow:var(--shadow);transition:transform .15s ease}
.weekly-card:hover{transform:translateY(-2px)}
.weekly-card img{width:100%;height:150px;object-fit:cover;display:block;border-top-left-radius:14px;border-top-right-radius:14px}
.weekly-name{margin:.6rem .75rem .8rem;color:#9d265f;font-size:1rem}
@media (min-width:1024px){ .weekly-card{min-width:260px} .weekly-card img{height:170px} }

/* ===================== Category CTA ===================== */
.category-cta{background:var(--white-soft);padding:2.5rem 0 1.5rem;box-shadow:var(--shadow)}
.cta-inner{text-align:center}
.cta-buttons{display:inline-flex;gap:.75rem;flex-wrap:wrap;margin:.75rem 0 0}
.btn{border:none;cursor:pointer;font-weight:600;padding:.7rem 1.1rem;border-radius:999px;transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-yellow{background:var(--yellow);color:var(--yellow-ink);box-shadow:0 6px 18px rgba(253,230,138,.4)}
.btn-outline{background:transparent;border:2px solid var(--pink-300);color:var(--text)}
.btn-soft{background:var(--pink-100);color:var(--text)}
.cta-buttons .btn.active{background:var(--pink-300);color:#fff;box-shadow:0 6px 18px rgba(249,168,212,.4)}

/* ===================== Treats Grid ===================== */
.treats{padding:3rem 0}
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--white-soft);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;height:170px;object-fit:cover;display:block}
.card h3{margin:.9rem .9rem 0;color:#9d265f}
.card p{margin:.4rem .9rem 1rem;color:var(--muted)}
.tag{display:inline-block;margin:0 .9rem 1rem;padding:.2rem .6rem;background:var(--pink-100);color:var(--text);border-radius:999px;font-size:.85rem}

/* ===================== About ===================== */
.about{
  background: var(--white-soft);
  padding: 3rem 0;
}

.about-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); /* text | photo */
  gap: 3rem;
  align-items: flex-start;
}

.about-text p{
  margin: .4rem 0;
}

/* right-side photo column */
.about-photo{
  display: flex;
  justify-content: flex-end;  /* push image toward the right edge */
  align-items: flex-start;
}

.about-photo img{
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* stack on small screens only */
@media (max-width: 768px){
  .about-inner{
    grid-template-columns: 1fr;
  }

  .about-photo{
    justify-content: center;
    margin-top: 1.5rem;
  }
}

/* Shared social card styling */
.social-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
  background: var(--pink-100);
  padding: 1rem 1.2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 420px;
}

.social-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.4;
}

.social-card .tagline {
  color: var(--pink-400);
  font-weight: 600;
}

/* Social icon links (Instagram + Facebook) */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  color: #4A4A4A; /* pastel purple/pink */
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-link:hover {
  transform: scale(1.15);
  color: var(--pink-400);
}

/* Responsive */
@media (max-width: 720px) {
  .social-card {
    flex-direction: column;
    text-align: center;
    max-width: none;
  }
}

/* ===================== Contact / Form ===================== */
.contact{padding:3rem 0}
.form-note{margin-top:.2rem;color:var(--muted)}
.form-grid{display:grid;gap:1rem;margin:1.2rem 0;grid-template-columns:1fr 1fr}
.form-grid label{display:grid;gap:.4rem}
.form-grid input,.form-grid select,.form-grid textarea{border:2px solid #f3cadd;background:#fff;color:var(--text);padding:.7rem .8rem;border-radius:12px;outline:none}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--pink-300);box-shadow:0 0 0 4px rgba(249,168,212,.2)}
.consent{display:flex;align-items:center;gap:.6rem}
.span-2{grid-column:span 2}
@media (max-width:720px){ .form-grid{grid-template-columns:1fr} .span-2{grid-column:auto} }
.form-status{margin-top:.75rem;min-height:1.2em}
.form-hint{font-size:.85rem;color:var(--muted);margin-top:-.2rem}

/* ===================== Footer ===================== */
.site-footer{background:var(--white-soft);padding:1.2rem 0;text-align:center;border-top:1px solid #f1d7e5}

/* === Treat Prices === */
.price {
  font-size: 0.95rem;
  color: #9d265f;
  background: var(--pink-100);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-left: 0.4rem;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(249,168,212,0.2);
}

.card h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Style list inside treat cards */
.card ul {
  margin: 0.4rem 0 1rem 1.2rem;   /* spacing above/below + indent */
  padding: 0;
  color: var(--muted);            /* matches description text */
  font-size: 0.95rem;
  line-height: 1.45;
}

.card ul li {
  margin-bottom: 0.25rem;
}

/* Optional: softer bullet style */
.card ul li::marker {
  color: var(--pink-300);
  font-weight: 600;
}

/* ===================== Christmas Section ===================== */
.christmas {
  background: #F92A53;          /* the red you chose */
  padding: 3rem 0;
  position: relative;
  overflow: hidden;     /* keeps snow inside the red section */
}

/* make text in this section light so it reads on red */
.christmas-title {
  color: #ffffff;
}

.christmas-subtitle {
  color: #FFE5EC;
}

/* reuse the same grid layout via .grid, but tweak cards slightly if needed */
.christmas-card {
  /* cards already use var(--white-soft); this just ensures consistency */
  background: var(--white-soft);
}

/* tags for Christmas items pop a bit more */
.christmas .tag.seasonal {
  background: #F92A53;
  color: #ffffff;
}

/* lists inside Christmas cards inherit same style as other cards */
.christmas .card ul {
  margin: 0.4rem 0 1rem 1.2rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.christmas .card ul li {
  margin-bottom: 0.25rem;
}

.christmas .card ul li::marker {
  color: var(--pink-300);
  font-weight: 600;
}

/* --- Falling Snow Animation --- */
#christmas .snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* can't block clicking */
  overflow: hidden;
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* random horizontal positions */
.snowflake:nth-child(1) { left: 10%; animation-delay: 0s; }
.snowflake:nth-child(2) { left: 20%; animation-delay: 2s; }
.snowflake:nth-child(3) { left: 30%; animation-delay: 4s; }
.snowflake:nth-child(4) { left: 40%; animation-delay: 1s; }
.snowflake:nth-child(5) { left: 50%; animation-delay: 3s; }
.snowflake:nth-child(6) { left: 60%; animation-delay: 5s; }
.snowflake:nth-child(7) { left: 70%; animation-delay: 2.5s; }
.snowflake:nth-child(8) { left: 80%; animation-delay: 1.5s; }
.snowflake:nth-child(9) { left: 90%; animation-delay: 4.5s; }

/* vertical fall */
@keyframes snowflakes-fall {
  0% { top: -10%; }
  100% { top: 100%; }
}

/* side-to-side drifting */
@keyframes snowflakes-shake {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(25px); }
}

/* International Section Styling */
#international {
  background: var(--pink-100);
  padding: 3rem 0;
}

/* Christmas promo image styling */
.christmas-promo {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.christmas-promo img {
  width: 70%;          /* adjust size — smaller but still responsive */
  max-width: 500px;    /* optional limit for large screens */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.christmas-promo-title {
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* ----- Lightbox gallery ----- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;              /* hidden by default */
  z-index: 9999;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.lightbox-content {
  position: relative;
  max-width: min(90vw, 800px);
  max-height: 90vh;
  padding: 1rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 0.75rem;
  object-fit: contain;
}

/* Controls */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox-close {
  top: 0.4rem;
  right: 0.6rem;
}

.lightbox-prev {
  left: 0.3rem;
}

.lightbox-next {
  right: 0.3rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

/* Make buttons a bit smaller on mobile */
@media (max-width: 600px) {
  .lightbox-content {
    padding: 0.75rem;
  }
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
  }
}