/* ===== Titian shared design system ===== */
:root{
  --cream:#F3EDE3; --cream2:#ECE9E3; --paper:#FBF8F3; --ink:#3A2B23; --soft:#6E5238;
  --gold:#8B6A4A; --gold-d:#5A4230; --gold-l:#E5D0A4; --line:#D6C2A8; --muted:#A8967E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.7;font-weight:300}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',serif}
.eyebrow{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--gold-d)}
.btn{display:inline-block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#fff;background:var(--gold);padding:14px 32px;border-radius:2px;cursor:pointer;border:0;transition:.2s}
.btn:hover{background:var(--gold-d)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--gold)}
.btn.ghost:hover{background:var(--gold);color:#fff}
.btn.light{background:#fff;color:var(--ink)}
.btn.block{display:block;width:100%;text-align:center}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
section{position:relative}
@media(max-width:760px){.wrap{padding:0 22px}}

/* announce + nav */
.announce{background:var(--ink);color:#EDE6D4;text-align:center;font-size:11px;letter-spacing:3px;text-transform:uppercase;padding:9px}
.nav{position:sticky;top:0;z-index:60;background:rgba(243,237,227,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:'Cormorant Garamond',serif;letter-spacing:9px;font-size:24px;color:var(--gold-d);font-weight:500}
.menu{display:flex;gap:30px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--soft)}
.menu a{transition:.2s}.menu a:hover{color:var(--gold-d)}
.menu a.on{color:var(--gold-d)}
.navicons{display:flex;gap:20px;font-size:13px;letter-spacing:2px;color:var(--soft)}
@media(max-width:900px){.menu,.navicons{display:none}}

/* breadcrumb */
.crumb{padding:22px 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.crumb a:hover{color:var(--gold-d)}

/* marquee */
.strip{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0}
.strip .track{display:flex;gap:54px;white-space:nowrap;animation:slide 28s linear infinite;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--soft)}
.strip .track span{display:flex;align-items:center;gap:54px}
@keyframes slide{to{transform:translateX(-50%)}}

/* section header */
.shead{text-align:center;max-width:560px;margin:0 auto 52px}
.shead h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:44px;line-height:1.1;margin:14px 0 10px}
.shead p{color:var(--soft);font-size:15px}
.divider{width:54px;height:1px;background:var(--gold);opacity:.6;margin:0 auto}

/* product card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center;transition:.25s;cursor:pointer;display:block}
.card:hover{transform:translateY(-4px);border-color:#B89A6E;box-shadow:0 14px 30px rgba(110,82,56,.08)}
.card .ph{height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.card .ph img{height:255px;width:auto;transition:.4s}
.card:hover .ph img{transform:scale(1.05)}
.card .tagx{position:absolute;top:0;left:0;background:var(--cream2);color:var(--gold-d);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.card .nm{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--ink);margin-top:10px}
.card .meaning{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.card .pr{font-size:14px;color:var(--gold-d);margin-top:10px;letter-spacing:.5px}

/* footer */
.foot{background:var(--cream2);padding:64px 0 28px;font-size:13px;margin-top:0}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:760px){.foot .wrap{grid-template-columns:1fr 1fr}}
.foot .logo{font-size:22px;margin-bottom:12px}
.foot p{color:var(--muted);max-width:260px}
.foot h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.foot ul{list-style:none}.foot li{margin-bottom:9px;color:var(--soft);cursor:pointer}.foot li:hover{color:var(--gold-d)}
.foot .bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:22px;text-align:center;color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}

/* bouquet animation */
@keyframes tgrow{0%{stroke-dashoffset:1}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes tbloom{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
@keyframes tsway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes tdrift{0%{transform:translate(0,0);opacity:0}18%{opacity:.9}100%{transform:translate(var(--dx),-120px);opacity:0}}
.tstem{stroke:#6E5238;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tgrow 2.8s ease-out forwards}
.tflower{transform-box:fill-box;transform-origin:center;opacity:0;animation:tbloom 1.1s ease-out forwards}
.tdot{animation:tdrift linear infinite}
@media(prefers-reduced-motion:reduce){.tstem,.tflower,.tdot,.strip .track{animation:none!important;opacity:1;stroke-dashoffset:0}}

/* ===== page banner (shop / story) ===== */
.banner{position:relative;background:var(--cream2);border-bottom:1px solid var(--line);padding:80px 0;text-align:center;overflow:hidden}
.banner h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:56px;line-height:1.05;margin:14px 0 8px}
.banner p{color:var(--soft);max-width:480px;margin:0 auto;font-size:15px}
.banner .leaf{position:absolute;opacity:.25;pointer-events:none}
@media(max-width:760px){.banner{padding:54px 0}.banner h1{font-size:40px}}

/* ===== shop toolbar ===== */
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:14px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip2{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);background:var(--paper);padding:8px 18px;border-radius:30px;cursor:pointer;transition:.18s}
.chip2:hover{border-color:#B89A6E}
.chip2.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.sortsel{font-family:'Jost';font-size:12px;letter-spacing:1px;color:var(--soft);border:1px solid var(--line);background:var(--paper);padding:9px 16px;border-radius:30px}

/* ===== PDP ===== */
.pdp{padding:40px 0 96px}
.pdp .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:flex-start}
@media(max-width:900px){.pdp .wrap{grid-template-columns:1fr;gap:36px}}
.gallery{position:sticky;top:90px}
.gmain{background:linear-gradient(160deg,#F3EDE3,#ECE9E3);border:1px solid var(--line);border-radius:16px;height:540px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.gmain img{height:430px;width:auto;filter:drop-shadow(0 12px 22px rgba(110,82,56,.16))}
.gmain .badge{position:absolute;top:18px;left:18px;background:rgba(255,253,248,.9);border:1px solid var(--line);border-radius:30px;padding:7px 16px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d)}
.gthumbs{display:flex;gap:12px;margin-top:14px}
.gthumb{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:10px;height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:.18s}
.gthumb:hover{border-color:#B89A6E}
.gthumb.on{border:1.5px solid var(--gold)}
.gthumb img{height:90px;width:auto}
.pinfo .eyebrow{margin-bottom:10px;display:block}
.pinfo h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:46px;line-height:1.06;margin-bottom:6px}
.pinfo .meaning{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.pinfo .price{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--gold-d);margin-bottom:8px}
.pinfo .stars{color:var(--gold);letter-spacing:3px;font-size:13px;margin-bottom:22px}
.pinfo .desc{color:var(--soft);max-width:440px;margin-bottom:26px}
.opt{margin-bottom:24px}
.opt .lbl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.swatches{display:flex;gap:10px}
.sw{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:11px 22px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);cursor:pointer;transition:.18s}
.sw:hover{border-color:#B89A6E}
.sw.on{border:1.5px solid var(--gold);background:#F3EDE3;color:var(--ink)}
.acc{border-top:1px solid var(--line);margin-top:28px}
.acc .item{border-bottom:1px solid var(--line);padding:16px 0}
.acc .q{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);cursor:pointer}
.acc .a{font-size:13px;color:var(--muted);max-width:440px;margin-top:10px;line-height:1.7}

/* ===== story editorial ===== */
.ed{padding:90px 0}
.ed .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ed.flip .txt{order:2}
@media(max-width:820px){.ed .wrap{grid-template-columns:1fr;gap:32px}.ed.flip .txt{order:0}}
.ed h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:40px;line-height:1.12;margin:14px 0 16px}
.ed p{color:var(--soft);margin-bottom:14px;max-width:460px}
.edart{background:linear-gradient(160deg,#F3EDE3,#ECE9E3);border:1px solid var(--line);border-radius:16px;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.edart img{height:340px;width:auto;filter:drop-shadow(0 14px 26px rgba(110,82,56,.16))}
.edart.dark{background:linear-gradient(150deg,#2C211A,#3A2B23)}
.edart.dark img{filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}

/* values row */
.values{background:var(--cream2);padding:80px 0}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
@media(max-width:760px){.vgrid{grid-template-columns:1fr;gap:30px}}
.vcell .vt{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold-d);margin:10px 0 6px}
.vcell .vd{font-size:13px;color:var(--soft);max-width:280px;margin:0 auto}

/* big quote */
.quote{padding:96px 0;text-align:center;background:var(--ink);color:#EDE6D4}
.quote .q{font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1.4;max-width:760px;margin:0 auto;color:#F7F1E0}
.quote .who{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-l);margin-top:22px}