/* ZuShop — public styles */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  background: linear-gradient(165deg,#fdf8f3 0%,#fdeef4 45%,#f3eefb 100%);
  color: #3a2230;
  min-height: 100vh;
}
.zser { font-family: 'Cormorant Garamond', serif; }
a { color: inherit; text-decoration: none; }

/* header */
.zhead {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 32px; border-bottom:1px solid rgba(230,205,222,.4);
  background:rgba(253,248,243,.85); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:50;
}
.zlogo { display:flex; align-items:center; gap:12px; }
.zlogo .mark { font-size:24px; }
.zlogo .name { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:#5a3548; line-height:1; }
.zlogo .tag { font-size:9px; color:#b09098; letter-spacing:3px; text-transform:uppercase; }
.znav { display:flex; gap:20px; align-items:center; }
.znav a { font-size:13px; color:#9a7080; transition:color .2s; }
.znav a:hover { color:#c07cc0; }

.zwrap { max-width:1040px; margin:0 auto; padding:36px 20px; }

/* forms */
.zlabel { font-size:9px; color:#b09090; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:7px; font-weight:500; }
.zinput {
  width:100%; padding:13px 16px; border:1.5px solid #ecdde3; border-radius:12px;
  font-size:14px; font-family:'Be Vietnam Pro',sans-serif; background:rgba(255,255,255,.85);
  color:#4a3340; outline:none; transition:.2s; box-sizing:border-box;
}
.zinput:focus { border-color:#d49ad4; box-shadow:0 0 0 3px rgba(212,154,212,.14); }
textarea.zinput { resize:vertical; min-height:80px; }

.zbtn { padding:12px 26px; border:none; border-radius:50px; font-family:'Be Vietnam Pro',sans-serif;
  cursor:pointer; font-size:14px; transition:.22s; letter-spacing:.4px; font-weight:500; }
.zbtn-primary { background:linear-gradient(135deg,#ec9bb3,#b88ce0); color:#fff; box-shadow:0 4px 18px rgba(184,140,224,.3); }
.zbtn-primary:hover { transform:translateY(-2px); box-shadow:0 7px 24px rgba(184,140,224,.42); }
.zbtn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.zbtn-ghost { background:#fff; border:1.5px solid #ecdde3; color:#9a7888; }
.zbtn-ghost:hover { border-color:#d49ad4; color:#c07cc0; }

.zcardbox { background:rgba(255,255,255,.9); border-radius:24px; padding:32px;
  box-shadow:0 10px 44px rgba(180,100,160,.09); border:1px solid rgba(230,205,222,.5); }

/* hero */
.zhero { text-align:center; margin-bottom:42px; }
.zhero .ey { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:#c0a0b0; margin-bottom:12px; }
.zhero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,5vw,50px); color:#3a2230; font-weight:500; line-height:1.12; margin:0 0 12px; }
.zhero h1 em { color:#b07ce8; }
.zhero p { font-size:14px; color:#9a7880; max-width:430px; margin:0 auto; line-height:1.9; }

/* flower grid */
.zgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:11px; }
.zft { border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .2s,box-shadow .2s;
  background:#fff; border:1px solid rgba(230,210,225,.5); }
.zft:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(150,100,140,.12); }
.zft .meta { padding:6px 9px 8px; }
.zft .fn { font-family:'Cormorant Garamond',serif; font-size:13px; color:#4a2838; font-style:italic; font-weight:600; line-height:1.1; }
.zft .fm { font-size:9px; color:#9a8090; margin-top:1px; }
.zft.sel { outline:3px solid #d49ad4; outline-offset:2px; }

/* card result */
.zcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; justify-items:center; margin-bottom:26px; }
.zcw { cursor:pointer; transition:transform .2s,opacity .2s; border-radius:14px; width:100%; max-width:300px; }
.zcw:hover { transform:translateY(-3px); }
.zcw.sel { outline:3px solid #d49ad4; outline-offset:5px; }
.zgcard { width:100%; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 10px 38px rgba(120,80,110,.16); }
.zgcard .illu { position:relative; width:100%; }
.zgcard .msg { position:relative; padding:24px 20px 28px; background:#fffdf9; text-align:center; }
.zgcard .occ { font-size:.66rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; font-weight:500; }
.zgcard .wish { font-family:'Cormorant Garamond',serif; font-size:1.12rem; font-style:italic; line-height:1.6; font-weight:500; color:#43323c; }
.zgcard .rcp { font-size:.9rem; font-style:italic; color:#9a7888; margin-top:10px; }

.zflash { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.zflash.ok { background:#e8f6ec; color:#1a7a3a; }
.zflash.err { background:#fbeaea; color:#b32020; }

.zspin { width:48px; height:48px; position:relative; margin:60px auto; }
.zspin span { position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%;
  transform-origin:50% 50%; animation:zsp 1.6s linear infinite; }
@keyframes zsp { 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }
.zfoot { text-align:center; padding:24px; color:#c0a8b8; font-size:11px; letter-spacing:2.5px; font-family:'Cormorant Garamond',serif; font-style:italic; }

/* ===== v2: chips ===== */
.chipgroup { margin-bottom:18px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  padding:8px 16px; border:1.5px solid #ecdde3; border-radius:50px; background:#fff;
  font-family:'Be Vietnam Pro',sans-serif; font-size:13px; color:#7a5868; cursor:pointer; transition:.18s;
}
.chip:hover { border-color:#d49ad4; color:#c07cc0; }
.chip.on { background:linear-gradient(135deg,#f9a8d4,#c084fc); color:#fff; border-color:transparent; }
.chip-special { border-style:dashed; border-color:#d4b8e0; color:#a878c0; }
.chip-special.on { background:linear-gradient(135deg,#c8a0e8,#9a7cd0); }

/* layout style switcher */
.lstyle { padding:6px 14px; border:1.5px solid #ecdde3; border-radius:50px; background:#fff;
  font-family:'Be Vietnam Pro',sans-serif; font-size:12px; color:#7a5868; cursor:pointer; transition:.18s; }
.lstyle:hover { border-color:#d49ad4; }
.lstyle.on { background:#3a2230; color:#fff; border-color:transparent; }

details summary { list-style:none; }
details summary::-webkit-details-marker { display:none; }