[hidden]{display:none !important}

:root{
  --surface:#fff8f2;
  --surface-container:#f5ede4;
  --surface-container-low:#faf2ea;
  --surface-container-high:#efe7de;
  --on-surface:#1e1b16;
  --on-surface-variant:#7a7469;
  --outline:#e9e3d8;
  --primary:#1f4d3a;
  --primary-hover:#163b2c;
  --on-primary:#ffffff;
  --secondary:#d9734e;
  --secondary-wash:rgba(217,115,78,0.12);
  --surface-elevated:#ffffff;
  --shadow-ambient:0 4px 20px -2px rgba(30,27,22,0.04), 0 2px 6px -1px rgba(30,27,22,0.02);
  --shadow-float:0 12px 36px -4px rgba(30,27,22,0.08), 0 4px 12px -2px rgba(30,27,22,0.03);
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'DM Sans', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--font-body);
  min-height:100vh;
}

a{color:inherit}

/* ---- Nav ---- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2rem 3rem 0;
  max-width:1360px;
  margin:0 auto;
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
  text-decoration:none;
}
.logo-mark{
  width:28px;height:28px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark svg{width:20px;height:20px}
.logo-word{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--on-surface);
}
.nav-links{
  display:flex;
  gap:2.25rem;
}
.nav-links a{
  text-decoration:none;
  font-size:0.9375rem;
  color:var(--on-surface);
}
.nav-links a:hover{color:var(--primary)}

/* ---- Hero layout ---- */
.hero{
  max-width:1360px;
  margin:0 auto;
  padding:3.5rem 3rem 4rem;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:3rem;
  align-items:start;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:var(--surface-container-high);
  border-radius:9999px;
  padding:0.4rem 0.9rem;
  font-size:0.8125rem;
  font-weight:500;
  color:var(--on-surface);
  margin-bottom:1.75rem;
}
.dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--secondary);
  flex:none;
}

.hero-copy h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:3.25rem;
  line-height:1.15;
  letter-spacing:-0.015em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
.hero-copy h1 em{
  color:var(--primary);
  font-style:italic;
}

.lede{
  font-size:1.125rem;
  line-height:1.6;
  color:var(--on-surface-variant);
  max-width:34rem;
  margin:0 0 2rem;
}

.feature-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1.75rem;
  padding:0;
  margin:0 0 3rem;
}
.feature-list li{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.9375rem;
  font-weight:500;
}
.feature-icon{
  width:34px;height:34px;
  border-radius:50%;
  background:var(--surface-container-high);
  display:flex;align-items:center;justify-content:center;
  font-size:0.9375rem;
  flex:none;
}

/* ---- Product cards ---- */
.card-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.product-card{
  background:var(--surface-elevated);
  border:1px solid var(--outline);
  border-radius:20px;
  box-shadow:var(--shadow-ambient);
  overflow:hidden;
  transition:transform 0.2s ease;
}
.card-tilt-left{transform:rotate(-2deg)}
.card-tilt-right{transform:rotate(2deg)}
.card-featured{
  transform:translateY(-14px);
  box-shadow:var(--shadow-float);
}
.product-card:hover{transform:translateY(-4px) rotate(0deg)}

.card-photo{
  aspect-ratio:1/1;
  position:relative;
  background-size:cover;
  background-position:center;
  padding:0.85rem;
}
.photo-florist{background:linear-gradient(145deg,#e9e1d1,#c9bd9e 60%,#8f8a6a)}
.photo-bakery{background:linear-gradient(145deg,#e6c9a0,#c98a4d 55%,#7a4a24)}
.photo-ceramics{background:linear-gradient(145deg,#ece6dc,#cfc6b4 60%,#a69c86)}

.card-tag{
  display:inline-block;
  background:rgba(255,255,255,0.92);
  color:var(--on-surface);
  font-size:0.75rem;
  font-weight:600;
  padding:0.3rem 0.7rem;
  border-radius:9999px;
}
.card-tag-dark{
  background:var(--primary);
  color:#fff;
}

.card-body{
  padding:1rem 1.1rem 1.2rem;
}
.card-body h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.0625rem;
  margin:0 0 0.2rem;
  display:flex;
  align-items:baseline;
  gap:0.5rem;
}
.card-body p{
  margin:0;
  font-size:0.8125rem;
  color:var(--on-surface-variant);
}
.price{
  color:var(--secondary);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.8125rem;
}

/* ---- Auth panel ---- */
.auth-panel{
  display:flex;
  justify-content:center;
}
.auth-card{
  position:relative;
  width:100%;
  max-width:26rem;
  background:var(--surface-elevated);
  border-radius:24px;
  box-shadow:var(--shadow-float);
  padding:2.75rem 2.25rem 2.25rem;
}
.auth-badge{
  position:absolute;
  top:-18px;
  right:28px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--secondary-wash);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}

.auth-card h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.75rem;
  letter-spacing:-0.01em;
  margin:0 0 0.35rem;
}
.auth-sub{
  color:var(--on-surface-variant);
  font-size:0.9375rem;
  margin:0 0 1.75rem;
}

.oauth-row{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-bottom:0.5rem;
}
.btn-oauth{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  width:100%;
  height:48px;
  border-radius:9999px;
  border:1.5px solid var(--outline);
  background:var(--surface-elevated);
  color:var(--on-surface);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.875rem;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.btn-oauth:hover{background:var(--surface-container-low);border-color:#d9d2c5}
.btn-oauth svg{width:18px;height:18px;flex:none}

.divider{
  display:flex;
  align-items:center;
  gap:0.9rem;
  color:var(--on-surface-variant);
  font-size:0.75rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  margin:1.5rem 0;
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--outline);
}

.field{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  margin-bottom:1.1rem;
}
.field label{
  font-size:0.8125rem;
  font-weight:600;
}
.field input{
  height:44px;
  border-radius:12px;
  border:1px solid var(--outline);
  background:var(--surface-container-low);
  padding:0 1rem;
  font-family:var(--font-body);
  font-size:0.9375rem;
  color:var(--on-surface);
  outline:none;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
  width:100%;
}
.field input::placeholder{color:var(--on-surface-variant)}
.field input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 1.5px var(--primary);
}
.field input:invalid:not(:placeholder-shown){
  border-color:#ba1a1a;
}

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0.25rem 0 1.5rem;
  font-size:0.8125rem;
}
.remember{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--on-surface-variant);
}
.remember input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:var(--primary);
  border-radius:6px;
  margin:0;
}

.btn-primary{
  width:100%;
  height:48px;
  border:none;
  border-radius:9999px;
  background:var(--primary);
  color:var(--on-primary);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9375rem;
  letter-spacing:0.01em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  transition:background 0.15s ease, transform 0.08s ease;
}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{transform:scale(0.98)}
.btn-primary svg{width:16px;height:16px;transition:transform 0.15s ease}
.btn-primary:hover svg{transform:translateX(2px)}

.form-message{
  margin:0.9rem 0 0;
  font-size:0.8125rem;
  text-align:center;
}
.form-message.success{color:var(--primary)}
.form-message.error{color:#ba1a1a}

.notice{
  display:flex;
  gap:0.6rem;
  align-items:flex-start;
  background:var(--secondary-wash);
  border-radius:14px;
  padding:0.85rem 1rem;
  margin-top:1.5rem;
}
.notice-icon{font-size:0.9rem;line-height:1.4}
.notice p{
  margin:0;
  font-size:0.8125rem;
  line-height:1.45;
  color:var(--on-surface);
}

.terms{
  text-align:center;
  margin:1rem 0 0;
  font-size:0.75rem;
  color:var(--on-surface-variant);
  line-height:1.6;
}
.link{
  color:var(--primary);
  text-decoration:underline;
  font-weight:500;
}
.link-strong{font-weight:600}

.switch{
  text-align:center;
  margin-top:1.25rem;
  font-size:0.875rem;
  color:var(--on-surface-variant);
}

/* ---- Footer ---- */
.site-footer{
  max-width:1360px;
  margin:0 auto;
  padding:1.5rem 3rem 2.5rem;
  display:flex;
  justify-content:space-between;
  font-size:0.8125rem;
  color:var(--on-surface-variant);
}
.footer-right{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.dot-dark{background:var(--primary)}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .auth-panel{justify-content:flex-start}
  .auth-card{max-width:28rem}
}
@media (max-width:640px){
  .nav{padding:1.5rem 1.25rem 0}
  .nav-links{display:none}
  .hero{padding:2.5rem 1.25rem 3rem;gap:2.5rem}
  .hero-copy h1{font-size:2.25rem}
  .card-row{grid-template-columns:1fr;gap:1.25rem}
  .card-tilt-left,.card-tilt-right,.card-featured{transform:none}
  .site-footer{flex-direction:column;gap:0.5rem;padding:1.5rem 1.25rem 2rem}
}