/* Kawaii Desk Dreams — Neocities Mini Site
   Safe + cozy + pastel ✨ */

/* ---------- Theme ---------- */
:root{
  --bg1:#fff7fb;
  --bg2:#ffeaf5;
  --card:#ffffffcc;
  --stroke:#f7c6dc;
  --text:#5a3d55;
  --muted:#7a5b73;
  --pink:#ff78b4;
  --pink2:#ff9ecb;
  --purple:#c89bff;
  --shadow: 0 10px 30px rgba(255, 120, 180, .18);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: ui-rounded, "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, #ffe6f3 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 30%, #efe3ff 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100vh;
  line-height:1.5;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Layout ---------- */
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 16px 48px;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 4px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
}

.mini img{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
  border: 2px solid var(--stroke);
  box-shadow: var(--shadow);
}

.title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.title strong{
  font-size: 1.05rem;
  letter-spacing:.2px;
}
.title span{
  font-size:.88rem;
  color: var(--muted);
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: #ffffffa8;
  border: 2px solid var(--stroke);
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(255,120,180,.12);
  font-weight:700;
  font-size:.92rem;
}
.nav a:hover{ background:#fff; text-decoration:none; }
.nav a.active{
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  color:#fff;
  border-color:#ff6faf;
}

/* ---------- Hero ---------- */
.hero{
  padding: 18px;
  border-radius: var(--radius);
  border: 2px solid var(--stroke);
  background: linear-gradient(135deg, #ffffffcc, #fff4faee);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,120,180,.18) 0 120px, transparent 121px),
    radial-gradient(circle at 85% 30%, rgba(200,155,255,.16) 0 140px, transparent 141px);
  transform: rotate(10deg);
}
.hero > *{ position:relative; z-index:1; }

.h1{
  margin:12px 0 8px;
  font-size: 2rem;
  line-height:1.15;
}

.tagline{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
}

.logo-card{
  border-radius: var(--radius);
  border: 2px solid var(--stroke);
  background: #ffffffb8;
  box-shadow: 0 10px 24px rgba(255,120,180,.10);
  padding: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.logo-card img{
  width: min(420px, 100%);
  height: auto;
  display:block;
}

@media(min-width: 860px){
  .hero-grid{
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
  }
}

/* ---------- Stickers + sparkle field (simple, safe) ---------- */
.sparkle-field{ display:none; }
.stickers{ display:none; }

/* ---------- Pills ---------- */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: #ffffffa8;
  border: 2px solid var(--stroke);
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(255,120,180,.12);
  font-weight:800;
  font-size:.92rem;
}

/* ---------- Buttons / actions ---------- */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight:900;
  border: 2px solid var(--stroke);
  background: #fff;
  box-shadow: 0 10px 20px rgba(255,120,180,.14);
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }

.btn.primary{
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  color:#fff;
  border-color: #ff6faf;
}

/* ---------- Sections ---------- */
.section{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 2px solid var(--stroke);
  background: var(--card);
  box-shadow: 0 10px 24px rgba(255,120,180,.10);
}

.section h2{
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.section p{
  margin: 0 0 10px;
  color: var(--muted);
}

.kawaii-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.kawaii-list li{ margin: 6px 0; }

/* ---------- FAQ ---------- */
.faq details{
  border: 2px dashed #ffd1e6;
  border-radius: 16px;
  background:#fff;
  padding: 10px 12px;
  margin-top: 10px;
}
.faq summary{
  cursor:pointer;
  font-weight:900;
}
.faq p{
  margin: 8px 0 0;
  color: var(--muted);
}

/* ================================
   Footer (Jelly social icons)
   ================================ */

.footer{
  margin-top: 2.5rem;
  padding: 1.75rem 1rem 1.25rem;
  text-align: center;
}

.footer-note{
  font-weight: 800;
  color: var(--muted);
}

/* icon row container */
.footer .iconRow{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1rem;
}

/* links around each icon */
.footer .icon{
  display: inline-block;
  text-decoration: none;
}

/* IMPORTANT: prevent giant images */
.footer .iconRow{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;              /* tighter */
  margin-top: 1rem;
}

/* Bigger icons */
.footer .icon img.jelly{
  width: 110px;           /* bigger */
  height: auto;
  display:block;
  object-fit: contain;
  transition: transform .12s ease, filter .12s ease;
}

/* Optional: reduce “extra padding look” by scaling slightly */
.footer .icon{
  line-height: 0;
}

.footer .icon:hover img.jelly,
.footer .icon:focus-visible img.jelly{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(255,120,180,.22));
}
.footer .icon:hover img.jelly{
  transform: translateY(-3px) scale(1.05);
}
.footer .iconRow{
  gap: 8px;
}


/* Mobile tweak */
@media (max-width: 520px){
  .footer .icon img.jelly{ width: 92px; }
}


/* gentle hover */
.footer .icon:hover img.jelly,
.footer .icon:focus-visible img.jelly{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(255,120,180,.22));
}


/* ==============================
   Contact form (KDD style)
   ============================== */

.contact-form{
  max-width: 520px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea{
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--stroke);
  background: #fff;
  color: var(--text);
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,120,180,.18);
}

.contact-form textarea{
  resize: vertical;
}

.contact-form .btn{
  align-self: flex-start;
}
/* Footer meta text (copyright + contact) */
/* Footer meta text (copyright + contact) */
.footer-meta{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.95;
}

/* Contact Me link — bold + dark pink */
.footer-meta a{
  font-weight: 800;
  color: var(--pink);              /* matches buttons + accents */
  text-decoration: none;
}

/* Soft hover, not shouty */
.footer-meta a:hover{
  color: var(--pink2);
  text-decoration: underline;
}

}

.shop-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: system-ui, sans-serif;
}

.shop-header {
  text-align: center;
  margin-bottom: 3rem;
}

.shop-header h1 {
  font-size: 2.2rem;
  color: #e06aa3;
}

.shop-intro {
  color: #555;
  max-width: 600px;
  margin: 0.5rem auto 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.product-card {
  background: #fff7fb;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.product-card img {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.product-card h2 {
  color: #c94f8a;
  font-size: 1.3rem;
}

.product-desc {
  font-size: 0.95rem;
  color: #555;
  margin: 0.5rem 0 1rem;
}

.delivery-note {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

.delivery-note a {
  color: #c94f8a;
  font-weight: bold;
}

.etsy-note {
  margin-top: 1rem;
}

.etsyshoplink {color: #FF7EB7;
font-weight: bold;
}

/* About page – brand entity styling */
.hero-about .h1{
  font-size: 1.85rem;
}

.about-pill{
  background: linear-gradient(90deg, #ff78b422, #c89bff22);
}

.about-values{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.value-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:#ffffffb8;
  border: 2px solid var(--stroke);
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(255,120,180,.10);
  font-weight: 800;
  color: var(--muted);
}

.logo-caption{
  margin-top: 10px;
  text-align:center;
  font-weight: 800;
  color: var(--muted);
}

/* ==========================
   Mobile nav cleanup
   ========================== */


  .nav a.active{
    padding: 6px 12px;        /* keep active readable but not huge */
  }




  .title strong{
    font-size: .95rem;
  }

  .title span{
    font-size: .75rem;
  }
/* Mobile: make nav wrap look intentional (2 neat rows) */


  .nav{
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 6px 6px;
    justify-content: end;
  }

  .nav a{
    white-space: nowrap;   /* keep “How it works” on one line */
    padding: 6px 10px;
    font-size: .8rem;
  }

  /* Put “How it works” + “FAQ” on row 2 */
  .nav a:nth-child(4){
    grid-column: 2;
  }
  .nav a:nth-child(5){
    grid-column: 3;
  }
/* Mobile: prevent CTA buttons from stretching weirdly */


  .actions .btn{
    flex: 0 0 auto;       /* don't stretch */
    width: auto;          /* size to content */
    white-space: nowrap;  /* keep text on one line */
  }

/* Mobile: stop the CTA buttons from stretching full-width */


  .actions .btn{
    width: fit-content !important;  /* key: content-sized */
    justify-self: start !important; /* key: defeats grid stretch if any */
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}


/* Mobile: make hero CTA buttons equal-width (2-column grid) */


  .hero .actions .btn,
  .hero-about .actions .btn{
    width: 100% !important;     /* fill each grid cell */
    min-width: 0 !important;     /* prevents overflow */
    justify-content: center;     /* centered text */
    white-space: normal !important; /* allow wrap instead of scrolling */
    text-align: center;
    padding: 10px 12px !important;  /* slightly smaller on mobile */
  }
  /* ===== Mobile: make ALL CTA buttons the same width, no horizontal scroll ===== */
@media (max-width: 640px){

  /* Safety: never allow sideways scroll */
  html, body{
    overflow-x: hidden;
  }

  /* Targets your hero CTA area */
  .actions{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .actions .btn{
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;

    /* Make button text wrap instead of forcing the page wide */
    white-space: normal;
    line-height: 1.2;
    padding: 10px 12px;
  }
}

/* ==========================
   Mobile-only hamburger nav
   ========================== */

/* wrapper */
.nav-wrap{ display:block; }

/* desktop pills visible by default */
.nav-desktop{ display:flex; }

/* mobile dropdown hidden by default */
.nav-mobile{ display:none; }

@media (max-width: 640px){
  /* Hide pill nav on mobile */
  .nav-desktop{ display:none; }

  /* Show hamburger */
  .nav-mobile{
    display:block;
    position: relative;
  }

  /* Make the summary look like your pills */
  .hamburger{
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;
    background: #ffffffa8;
    border: 2px solid var(--stroke);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(255,120,180,.12);
    font-weight: 800;
    font-size: .9rem;
  }

  /* Remove default triangle marker */
  .nav-mobile summary::-webkit-details-marker{ display:none; }

  /* Dropdown panel */
  .nav-mobile .menu{
    margin-top: 10px;
    padding: 10px;

    background: #ffffffee;
    border: 2px solid var(--stroke);
    border-radius: 18px;
    box-shadow: var(--shadow);

    display: grid;
    gap: 8px;

    min-width: 220px;
  }

  /* Dropdown links */
  .nav-mobile .menu a{
    display: block;
    padding: 10px 12px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;

    background: #fff;
    border: 2px solid rgba(247,198,220,.8);
  }

  .nav-mobile .menu a:hover{
    background: linear-gradient(90deg, var(--pink), var(--pink2));
    color: #fff;
    border-color: #ff6faf;
    text-decoration: none;
  }
}
/* ==========================
   MOBILE NAV — CONTENT-SIZED PILLS (THE RIGHT WAY)
   ========================== */
@media (max-width: 640px){
  .nav{
    justify-content: flex-start;
  }

  .nav a{
    padding: 6px 9px;
    font-size: .75rem;
    border-width: 1.5px;
  }
}
/* ==================================
   MOBILE NAV — TRUE FIXED PX PILLS
   ================================== */
@media (max-width: 640px){

  /* keep header from doing anything weird */
  .topbar{
    align-items: center;
    gap: 10px;
  }

  /* allow pills to wrap into 2 rows */
  .nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }

  /* force fixed size, override any width:100% elsewhere */
  .nav a{
    width: 78px !important;     /* adjust this number */
    padding: 7px 0 !important;  /* no side padding so width stays true */
    font-size: .76rem !important;
    text-align: center;
    white-space: nowrap;
    flex: 0 0 auto !important;  /* prevent stretching */
  }
}
/* ==========================
   Responsive nav: mobile-only
   ========================== */

/* Desktop default */
.nav-mobile{ display: none; }

/* Mobile behavior */
@media (max-width: 640px){
  .nav-desktop{ display: none; }
  .nav-mobile{ display: block; }

  .nav-mobile summary{
    list-style: none;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffffa8;
    border: 2px solid var(--stroke);
    font-weight: 800;
    font-size: .85rem;
    box-shadow: 0 6px 16px rgba(255,120,180,.12);
  }

  .nav-mobile summary::-webkit-details-marker{
    display: none;
  }

  .nav-mobile-links{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .nav-mobile-links a{
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffffa8;
    border: 2px solid var(--stroke);
    font-weight: 700;
    font-size: .8rem;
    text-align: center;
  }

  .nav-mobile-links a.active{
    background: linear-gradient(90deg, var(--pink), var(--pink2));
    color: #fff;
    border-color: #ff6faf;
  }
}
/* ==========================
   Mobile nav: final polish
   ========================== */
@media (max-width: 640px){

  .nav-mobile-links a{
    min-width: 120px;
    padding: 6px 12px;

    /* 🔑 THIS IS THE FIX */
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: .78rem;
    line-height: 1;
    text-align: center;
  }
}

}
@media (max-width: 640px){
  .nav-mobile-links a.active{
    transform: translateY(-1px);
  }
}
/* ==========================
   Responsive nav (desktop + mobile)
   ========================== */

/* Desktop shows pill row; mobile dropdown hidden */
.nav-mobile{ display: none; }
.nav-desktop{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Mobile: hide desktop pill row, show dropdown */
@media (max-width: 640px){
  .nav-desktop{ display: none; }
  .nav-mobile{ display: block; }

  .nav-mobile summary{
    list-style: none;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffffa8;
    border: 2px solid var(--stroke);
    font-weight: 800;
    font-size: .8rem;
    text-align: center;
    box-shadow: 0 6px 16px rgba(255,120,180,.12);
  }
  .nav-mobile summary::-webkit-details-marker{ display:none; }

  .nav-mobile-links{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  .nav-mobile-links a{
    min-width: 120px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffffa8;
    border: 2px solid var(--stroke);
    font-weight: 700;
    font-size: .78rem;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
  }

  .nav-mobile-links a.active{
    background: linear-gradient(90deg, var(--pink), var(--pink2));
    color:#fff;
    border-color:#ff6faf;
  }
}


/* FORCE: never show hamburger/dropdown on desktop */
@media (min-width: 641px){
  .nav-mobile{ display: none !important; }
  .nav-desktop{ display: flex !important; }
}
/* Mobile only */
@media (max-width: 640px){
  .nav-desktop{ display: none !important; }
  .nav-mobile{ display: block !important; }
}
.nav-mobile summary { list-style: none; }
.nav-mobile summary::-webkit-details-marker { display:none; }

/* About page logo card: center image + caption nicely */
.about-logo-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.about-logo-card img{
  width: min(420px, 100%);
  height: auto;
  display: block;
}

.logo-caption{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
}

/* ==========================
   Mobile footer social icons
   ========================== */
@media (max-width: 640px){

  .footer .iconRow{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 icons per row */
    gap: 10px;
    justify-items: center;
  }

  .footer .icon img.jelly{
    width: 64px;      /* ⬅ smaller but still tappable */
    height: auto;
  }

  /* Email icon centered on its own row */
  .footer .iconRow .icon:last-child{
    grid-column: span 4;
  }
}

/* ==========================
   Mobile footer icons — one row, no scroll
   ========================== */
@media (max-width: 640px){

  .footer .iconRow{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    gap: clamp(4px, 1.2vw, 8px);   /* tight on small screens */
    overflow: hidden;             /* NO scrolling */
    padding: 6px 8px;             /* small edge padding */
  }

  .footer .icon{
    flex: 0 1 auto;               /* allow shrinking */
  }

  .footer .icon img.jelly{
    width: clamp(36px, 10.5vw, 52px);  /* MAGIC: scales with screen width */
    height: auto;
    display: block;
  }
}