@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=Quicksand:wght@400;500;600;700&display=swap');

:root{
  --bg: #FBF5FA;
  --bg-deep: #F3E6F5;
  --panel: #FFFFFF;
  --panel-2: #FDF8FC;
  --ink: #3C2E45;
  --ink-soft: #7C6B84;
  --accent: #E0B0FF;
  --accent-deep: #9B5DE5;
  --accent-ink: #4A2E63;
  --rose: #F6C9DC;
  --gold: #D9B26A;
  --line: #E9D9EE;
  --danger: #C6577A;
  --ok: #6FA98A;
  --shadow: 222 40% 40%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #221826; --bg-deep: #2C1F32; --panel: #2B1E31; --panel-2: #33243A;
    --ink: #F3E9F6; --ink-soft: #C6AFCE; --accent: #C98BEF; --accent-deep: #E0B0FF;
    --accent-ink: #F3E9F6; --rose: #C98CA6; --gold: #E2C285; --line: #453249;
    --danger: #E38AA4; --ok: #8CC8A9;
  }
}
:root[data-theme="dark"]{
  --bg: #221826; --bg-deep: #2C1F32; --panel: #2B1E31; --panel-2: #33243A;
  --ink: #F3E9F6; --ink-soft: #C6AFCE; --accent: #C98BEF; --accent-deep: #E0B0FF;
  --accent-ink: #F3E9F6; --rose: #C98CA6; --gold: #E2C285; --line: #453249;
  --danger: #E38AA4; --ok: #8CC8A9;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(ellipse 120% 80% at 50% -10%, var(--bg-deep), var(--bg) 60%);
  color: var(--ink);
  font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;}
}
img{max-width:100%; display:block;}
button{ font-family:inherit; }

h1,h2,h3{ font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-wrap: balance; margin: 0; color: var(--ink); }
.label{ font-family:'Quicksand', sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); }

.petal-field{ position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petal{ position:absolute; top:-8%; opacity:0.5; animation: fall linear infinite; }
@keyframes fall{ 0%{ transform: translateY(0) translateX(0) rotate(0deg); } 100%{ transform: translateY(112vh) translateX(20px) rotate(300deg); } }

header{ position: relative; z-index: 2; text-align:center; padding: 4.5rem 1.5rem 3rem; }
.crest{ margin: 0 auto 1.1rem; display:block; width:58px; height:58px; }
.wordmark{ font-size: clamp(2.4rem, 6.5vw, 4rem); font-style: italic; }
.wordmark .bang{ font-style: normal; color: var(--accent-deep); }
.tagline{ margin-top: 0.75rem; color: var(--ink-soft); font-size: 1.02rem; }
.tagline em{ color: var(--accent-deep); font-style: italic; font-family:'Cormorant Garamond', serif; }
.divider{ width: 110px; height: 1px; margin: 1.9rem auto 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); }

main{ position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 0 1.25rem 6rem; }
.intro{ text-align:center; max-width: 62ch; margin: 0 auto 3rem; color: var(--ink-soft); line-height: 1.7; font-size: 1rem; }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1.1rem; }
.card{
  background: var(--panel); border:1px solid var(--line); border-radius: 20px; overflow:hidden;
  cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover{ box-shadow: 0 16px 34px -18px hsl(var(--shadow)/0.4); transform: translateY(-3px); border-color: var(--accent); }
.card-cover{ aspect-ratio: 4/3; width:100%; object-fit:cover; background: linear-gradient(135deg, var(--bg-deep), var(--rose)); }
.card-cover.placeholder{ display:flex; align-items:center; justify-content:center; }
.card-body{ padding: 0.95rem 1.05rem 1.1rem; }
.card-body .brand{ display:block; font-size:0.64rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:0.15rem; }
.card-body .name{ font-size:1.2rem; line-height:1.25; }
.card-body .count{ margin-top:0.4rem; font-size:0.78rem; color: var(--ink-soft); }

.modal-scrim{ position:fixed; inset:0; background: rgba(30,16,36,0.45); backdrop-filter: blur(2px); z-index: 50; display:flex; align-items:flex-start; justify-content:center; padding: 4vh 1rem; overflow-y:auto; }
.modal-scrim[hidden]{ display:none; }
.modal{ background: var(--panel); border-radius: 24px; max-width: 640px; width:100%; padding: 1.6rem 1.6rem 1.9rem; position:relative; border:1px solid var(--line); }
.modal-close{ position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal h2{ font-size:1.7rem; padding-right:2.2rem; }
.modal .brand{ display:block; font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--accent-deep); margin-bottom:0.3rem; }

.product-row{ display:flex; gap:0.85rem; align-items:center; padding:0.7rem 0; border-bottom:1px solid var(--line); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; color:inherit; font:inherit; }
.product-row:last-child{ border-bottom:none; }
.product-thumb{ width:52px; height:52px; border-radius:12px; object-fit:cover; background: var(--bg-deep); flex-shrink:0; }
.product-thumb.placeholder{ display:flex; align-items:center; justify-content:center; color: var(--rose); font-size:1.1rem; }
.product-row .pname{ flex:1; font-size:1rem; display:flex; flex-direction:column; gap:0.1rem; }
.product-row .pcount{ font-size:0.76rem; color: var(--ink-soft); font-style:italic; font-family:'Cormorant Garamond',serif; }
.pprice{ font-size:0.8rem; font-weight:700; color: var(--accent-deep); }
.pprice-lg{ font-size:1.05rem; font-weight:700; color: var(--accent-deep); margin-top:0.3rem; }

.lightbox-img{ width:100%; border-radius:16px; aspect-ratio: 1/1; object-fit:cover; background: var(--bg-deep); }
.lightbox-nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0.9rem; }
.lb-btn{ border:1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius:50%; width:38px; height:38px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lb-btn:disabled{ opacity:0.35; cursor:default; }
.lb-dots{ display:flex; gap:0.35rem; flex-wrap:wrap; justify-content:center; }
.lb-dot{ width:7px; height:7px; border-radius:50%; background: var(--line); }
.lb-dot.active{ background: var(--accent-deep); }

footer{ position:relative; z-index:2; text-align:center; padding: 3rem 1.5rem 4rem; color: var(--ink-soft); font-size:0.88rem; }
footer .fnote{ margin-top:0.6rem; font-size:0.8rem; }
.foot-line{ width:60px;height:1px;margin:0 auto 1.4rem; background: linear-gradient(90deg, transparent, var(--accent), transparent); }

.contact-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem; margin: 1.1rem 0 1.4rem; }
.contact-pill{
  display:inline-flex; align-items:center; gap:0.5rem;
  background: var(--panel); border:1px solid var(--line); border-radius:999px;
  padding: 0.5rem 1.05rem; color: var(--ink); text-decoration:none; font-weight:600; font-size:0.86rem;
  transition: border-color .2s ease, transform .2s ease;
}
.contact-pill:hover{ border-color: var(--accent); transform: translateY(-2px); }
.contact-pill svg{ flex-shrink:0; color: var(--accent-deep); }

/* ---- admin ---- */
.admin-top{ display:flex; align-items:center; gap:1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line); background: var(--panel); flex-wrap:wrap; position:sticky; top:0; z-index:10; }
.admin-top h2{ font-size:1.4rem; flex:1; }
.admin-body{ flex:1; padding: 1.3rem; max-width: 1100px; margin:0 auto; width:100%; }

.btn{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.86rem; border-radius:12px; border:1px solid var(--line); background: var(--panel-2); color: var(--ink); padding:0.55rem 1rem; cursor:pointer; }
.btn:hover{ border-color: var(--accent); }
.btn.primary{ background: var(--accent-deep); color:#fff; border-color:transparent; }
.btn.primary:hover{ filter:brightness(1.06); }
.btn.danger{ background:transparent; color: var(--danger); border-color: var(--danger); }
.btn.small{ padding:0.35rem 0.7rem; font-size:0.78rem; }
.btn:disabled{ opacity:0.5; cursor:default; }

.admin-status{ font-size:0.82rem; padding:0.2rem 0.6rem; border-radius:999px; }
.admin-status.saving{ color: var(--accent-deep); }
.admin-status.saved{ color: var(--ok); }
.admin-status.error{ color: var(--danger); }

.a-collection{ background: var(--panel); border:1px solid var(--line); border-radius:20px; padding:1.1rem 1.2rem; margin-bottom:1rem; }
.a-row{ display:flex; gap:0.8rem; align-items:flex-start; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:0.3rem; flex:1; min-width:180px; }
.field label{ font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }
.field input[type=text]{ font: inherit; padding:0.5rem 0.7rem; border-radius:10px; border:1px solid var(--line); background: var(--bg); color: var(--ink); }
.field input[type=text]:focus-visible{ outline:2px solid var(--accent-deep); }

.cover-preview{ width:84px; height:84px; border-radius:14px; object-fit:cover; background: var(--bg-deep); flex-shrink:0; }
.cover-preview.placeholder{ display:flex; align-items:center; justify-content:center; color: var(--rose); font-size:1.4rem; }
.file-btn{ position:relative; overflow:hidden; display:inline-flex; }
.file-btn input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.a-products{ margin-top:0.9rem; padding-top:0.9rem; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:0.7rem; }
.a-product{ background: var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:0.75rem 0.85rem; }
.a-photos{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.6rem; }
.a-photo{ position:relative; width:56px; height:56px; }
.a-photo img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.a-photo .rm{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background: var(--danger); color:#fff; border:none; font-size:0.65rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }

.top-actions{ display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }
.size-note{ font-size:0.74rem; color: var(--ink-soft); }

.passgate{ max-width:340px; margin: 12vh auto; background: var(--panel); border:1px solid var(--line); border-radius:20px; padding:1.6rem; text-align:center; }
.passgate input{ width:100%; margin-top:1rem; padding:0.6rem 0.8rem; border-radius:10px; border:1px solid var(--line); font:inherit; text-align:center; background: var(--bg); color: var(--ink); }
.passgate .err{ color: var(--danger); font-size:0.82rem; margin-top:0.6rem; min-height:1.1em; }

.empty-note{ text-align:center; color: var(--ink-soft); padding: 3rem 1rem; }

.admin-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(128px,1fr)); gap: 0.75rem; margin-bottom: 1.4rem; }
.admin-card{ background: var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; }
.admin-card .card-cover{ aspect-ratio: 1/1; }
.admin-card .card-body{ padding: 0.55rem 0.6rem 0.65rem; }
.admin-card .card-body .brand{ font-size:0.56rem !important; }
.admin-card .card-body .name{ font-size:0.86rem; line-height:1.25; }
.admin-card .card-body .count{ font-size:0.68rem !important; }
.admin-card .edit-btn{
  position:absolute; top:0.4rem; right:0.4rem; z-index:1;
  background: var(--accent-deep); color:#fff; border:1px solid transparent; border-radius:999px;
  padding:0.28rem 0.65rem; font-size:0.7rem; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 16px -6px hsl(var(--shadow)/0.6);
}
.admin-card .edit-btn:hover{ filter:brightness(1.08); }
.admin-card.add-card{
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); background:transparent; cursor:pointer; color: var(--ink-soft);
  font-weight:700; font-size:0.82rem; text-align:center; padding:0.6rem;
}
.admin-card.add-card:hover{ border-color: var(--accent); color: var(--accent-deep); }

.admin-modal-scrim{ position:fixed; inset:0; background: rgba(30,16,36,0.45); backdrop-filter: blur(2px); z-index: 50; display:flex; align-items:flex-start; justify-content:center; padding: 4vh 1rem; overflow-y:auto; }
.admin-modal-scrim[hidden]{ display:none; }
.admin-modal{ background: var(--bg); border-radius: 24px; max-width: 620px; width:100%; padding: 1.5rem; position:relative; border:1px solid var(--line); }
.admin-modal-close{ position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }

:focus-visible{ outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 6px; }
[hidden]{ display:none !important; }

@media (max-width: 560px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
}