/* CELINE — full-stack build. Same look as the static site: pure white,
   wine→black gradient pill buttons, natural image ratios, no crop, no zoom. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#1c1a18;font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #eee}
.head{max-width:1240px;margin:0 auto;padding:18px 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.head nav{display:flex;gap:26px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;flex-wrap:wrap}
.head nav a{padding:6px 0;border-bottom:1px solid transparent}
.head nav a:hover{border-bottom-color:#7a1f2b}
.wordmark{font-size:30px;letter-spacing:.42em;text-indent:.42em;font-weight:400}
.btn{display:inline-block;background:linear-gradient(135deg,#7a1f2b 0%,#4a0d16 48%,#000 100%);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:15px 36px;border-radius:999px;border:0;cursor:pointer}
.btn:hover{opacity:.92}
.btn:disabled{opacity:.5;cursor:default}
.brand{display:flex;align-items:center;gap:14px}
.brand img.logo{width:auto;height:46px}
.footlogo{width:auto;height:130px;margin:0 auto 18px}
.cart-chip{justify-self:end;font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #7a1f2b;color:#7a1f2b;padding:9px 16px;border-radius:999px;background:#fff;white-space:nowrap}
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-8px);background:#1c1a18;color:#fff;padding:13px 26px;border-radius:999px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;z-index:100;box-shadow:0 14px 34px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.menu-btn{display:none}
@media(max-width:700px){.head{padding:14px 12px;position:relative;grid-template-columns:1fr auto 1fr}.head nav{display:none}.head nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:20px 24px 24px;gap:16px;z-index:20}.menu-btn{display:block;background:none;border:0;padding:8px;font-size:28px;line-height:1;color:#1c1a18;cursor:pointer;position:absolute;left:10px;top:50%;transform:translateY(-50%)}.brand{gap:10px}.brand img.logo{height:38px}.wordmark{font-size:22px;letter-spacing:.28em;text-indent:.28em}.hero{padding:48px 20px 64px}.hero h1{font-size:36px;letter-spacing:.22em;text-indent:.22em}}
.hero{background:#fff;text-align:center;padding:64px 20px 80px}
.hero .eyebrow{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:#7a1f2b;margin:0 0 32px}
.hero figure{margin:0 auto;max-width:560px}
.hero img{width:100%;height:auto;border:1px solid #eee}
.hero h1{font-size:clamp(44px,8vw,84px);letter-spacing:.32em;text-indent:.32em;font-weight:400;margin:44px 0 14px}
.hero .cats{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:#7a1f2b;margin:0}
.hero p{max-width:520px;margin:22px auto 0;font-size:19px;line-height:1.7;color:#666}
.hero .btn{margin-top:32px}
.hero .btn + .cats{margin-top:24px}
#checkout-box .pay-panel{background:linear-gradient(135deg,#7a1f2b 0%,#4a0d16 48%,#000 100%);color:#fff;border-radius:16px;padding:22px;margin-top:20px;box-shadow:0 18px 40px rgba(74,13,22,.35)}
#checkout-box .pay-panel label{color:#e8c9c9}
#checkout-box .pay-panel p{color:#f3e2e2}
#checkout-box .pay-panel .btn{background:#fff;color:#4a0d16}
#checkout-box .details-card{background:#f9f1ee;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.14);padding:6px 18px;margin:20px 0}
#checkout-box .details-card td{border-bottom-color:#e8d9d2}
.intro{max-width:760px;margin:0 auto;padding:88px 24px 16px;text-align:center}
.intro h2{font-size:clamp(28px,4vw,42px);font-weight:400;line-height:1.25;margin:0}
.intro p{font-size:18px;line-height:1.7;color:#666;margin:20px 0 0}
.rule{width:56px;height:1px;background:#7a1f2b;margin:0 auto}
.section{max-width:1240px;margin:0 auto;padding:88px 28px}
.section h2{font-size:clamp(26px,3.5vw,38px);font-weight:400;text-align:center;margin:0 0 12px}
.section .sub{text-align:center;color:#666;font-size:17px;line-height:1.6;margin:0 0 56px}
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:64px 56px;align-items:start}
@media(max-width:700px){.editorial{grid-template-columns:1fr;gap:56px}.section{padding:64px 20px}}
.editorial figure{margin:0}
.editorial figcaption,.wide figcaption{margin-top:18px;display:flex;justify-content:space-between;gap:16px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#777}
.editorial figcaption span:last-child{color:#7a1f2b;white-space:nowrap}
.wide{max-width:880px;margin:72px auto 0}
.collection{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.grid{display:grid;grid-template-columns:repeat(3,300px);justify-content:center;gap:72px 48px}
@media(max-width:1060px){.grid{grid-template-columns:repeat(2,300px)}}
@media(max-width:700px){.grid{grid-template-columns:300px;gap:56px}}
.card{margin:0;text-align:center}
.card .frame{background:#fff;border:1px solid #eee;box-shadow:0 14px 34px rgba(0,0,0,.12)}
.card img{width:100%;height:auto}
.card figcaption{margin-top:18px}
.card h3{font-size:19px;font-weight:400;margin:0}
.card p{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#999;margin:10px 0 0}
.card .price{font-family:Arial,Helvetica,sans-serif;font-size:15px;letter-spacing:.06em;text-transform:none;color:#7a1f2b;margin-top:10px}
.videos{display:grid;grid-template-columns:repeat(2,360px);justify-content:center;gap:64px 56px}
@media(max-width:820px){.videos{grid-template-columns:360px}}
.videos figure{margin:0;text-align:center}
.videos video{width:100%;height:auto;background:#fff;border:1px solid #eee}
.videos figcaption{margin-top:18px}
.videos h3{font-size:19px;font-weight:400;margin:0}
.videos p{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#999;margin:10px 0 0}
.card-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:center}
.btn-small{display:inline-block;background:linear-gradient(135deg,#7a1f2b 0%,#4a0d16 48%,#000 100%);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:11px 22px;border-radius:999px;border:0;cursor:pointer}
.btn-outline{background:#fff;border:1px solid #7a1f2b;color:#7a1f2b;font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:11px 22px;border-radius:999px;cursor:pointer}
.order{max-width:640px;margin:0 auto;padding:96px 24px;text-align:center}
.order h2{font-size:clamp(26px,3.5vw,38px);font-weight:400;margin:0}
.order p{font-size:18px;line-height:1.7;color:#777}
footer{border-top:1px solid #eee;padding:48px 24px;text-align:center}
footer .wm{font-size:22px;letter-spacing:.42em;text-indent:.42em}
footer p{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#999}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1080px;margin:0 auto;padding:64px 28px;align-items:start}
@media(max-width:760px){.detail{grid-template-columns:1fr;gap:32px}}
.detail img{border:1px solid #eee}
.detail h1{font-size:clamp(28px,4vw,42px);font-weight:400;margin:0}
.detail .cat{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#7a1f2b;margin:14px 0}
.detail .price{font-size:22px;color:#7a1f2b;margin:18px 0}
.detail p{font-size:17px;line-height:1.7;color:#666}
.qty{display:flex;gap:12px;align-items:center;margin:24px 0}
.qty button{width:40px;height:40px;border:1px solid #eee;background:#fff;font-size:18px;cursor:pointer}
.qty span{min-width:28px;text-align:center;font-size:18px}
.detail .actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cart{max-width:820px;margin:0 auto;padding:64px 28px}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid #eee}
.cart-row img{border:1px solid #eee}
.cart-row h3{margin:0;font-weight:400}
.cart-row p{color:#777;margin:6px 0}
.cart-total{font-size:20px;text-align:right;margin:28px 0}
.note{border:1px solid #eee;border-radius:4px;padding:32px;margin-top:32px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.14)}
.note .btn{width:100%;text-align:center}
.note input{padding:14px;font-size:17px}
.note p{color:#666;line-height:1.7}
input,textarea,select{width:100%;padding:12px;border:1px solid #ddd;background:#fff;font-family:Georgia,serif;font-size:16px}
label{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#777;display:block;margin:16px 0 6px}
.form{max-width:560px;margin:32px auto;padding:64px 36px;background:#fff;border:1px solid #eee;border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.14)}
.form h1{font-weight:400;font-size:32px}
.msg{border:1px solid #eee;padding:14px;margin-top:18px;color:#666;line-height:1.6}
.msg.err{border-color:#7a1f2b;color:#7a1f2b}
/* Chat: full screen, WhatsApp-style. Never a floating bubble. */
.chatpage{max-width:760px;margin:0 auto;padding:24px 16px 40px}
.overlay{position:fixed;inset:0;background:rgba(20,15,15,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:24px 16px;z-index:50;overflow:auto}
.overlay.open{display:flex}
.overlay-panel{background:#fff;border-radius:16px;padding:28px;max-width:480px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.25);margin:auto;position:relative}
.overlay-panel .btn{width:100%;text-align:center}
.overlay-panel .btn-outline{width:100%;text-align:center}
.overlay-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:#777}
.mini-table{width:100%;border-collapse:collapse;margin:16px 0}
.mini-table td{padding:10px 0;border-bottom:1px solid #eee;line-height:1.6}
.mini-table td:first-child{color:#7a1f2b;padding-right:14px;white-space:nowrap}
.chat-fab{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#7a1f2b,#4a0d16 48%,#000);color:#fff;align-items:center;justify-content:center;font-size:24px;box-shadow:0 12px 30px rgba(0,0,0,.20);z-index:40}
.chathead{display:flex;align-items:center;gap:14px;border-bottom:1px solid #eee;padding:12px 0}
.chathead img{width:44px;height:44px}
.chathead h1{font-size:20px;font-weight:400;margin:0}
.chathead p{margin:2px 0 0;color:#777;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.chatlog{border:1px solid #eee;padding:18px;min-height:420px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:78%;padding:10px 14px;border-radius:18px;line-height:1.55;font-size:16px}
.bubble.mine{align-self:flex-end;background:#3d2b1f;color:#fff;border-bottom-right-radius:4px}
.bubble.theirs{align-self:flex-start;background:#161616;color:#fff;border-bottom-left-radius:4px}
.bubble small{display:block;opacity:.7;font-size:11px;margin-top:6px;font-family:Arial,Helvetica,sans-serif}
.bubble img,.bubble audio{max-width:100%}
.chatbox{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.chatbox input[type=text]{flex:1;min-width:200px}
.group-banner{border:1px solid #7a1f2b;padding:18px;margin:24px auto;max-width:760px;text-align:center;display:none}
.group-banner p{color:#666;line-height:1.6}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.tabs button{border:1px solid #ddd;background:#fff;padding:10px 18px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.tabs button.on{border-color:#7a1f2b;color:#7a1f2b}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #eee;padding:10px;text-align:left;font-size:15px;vertical-align:top}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.admin-grid{grid-template-columns:1fr}}