/* FreshyFloral — app-style florist site. Mobile-first; desktop full container ≥1024px */
@font-face{font-family:Kanit;font-weight:300;font-display:swap;src:url(/fonts/kanit-300.woff2) format("woff2")}
@font-face{font-family:Kanit;font-weight:400;font-display:swap;src:url(/fonts/kanit-400.woff2) format("woff2")}
@font-face{font-family:Kanit;font-weight:500;font-display:swap;src:url(/fonts/kanit-500.woff2) format("woff2")}
@font-face{font-family:Kanit;font-weight:600;font-display:swap;src:url(/fonts/kanit-600.woff2) format("woff2")}
:root{
  --wine:#7A1230;--wine-d:#5A0C22;--rose:#C8385A;--cream:#FFFBF8;--blush:#F6E9EA;--line-c:#F0E1E3;
  --ink:#2A1418;--ink-2:#4A363C;--muted:#6E5A60;--gold:#E9B949;--gold-soft:#F6D8A0;--green:#2F6B4F;
  --line:#06C755;--line-d:#05A548;
  --pad:10px;--maxw:1200px;--r:22px;--bnav:84px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Kanit,system-ui,sans-serif;font-weight:400;line-height:1.7;font-size:16px;padding-bottom:var(--bnav)}
img{max-width:100%;height:auto;display:block}
a{color:var(--wine)}a:hover{color:var(--wine-d)}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--wine);color:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.hs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hs::-webkit-scrollbar{display:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.btn:active{transform:scale(.96)}
.btn-line{background:var(--line);color:#fff}.btn-line:hover{background:var(--line-d);color:#fff}
.btn-ghost{background:#fff;color:var(--wine);border:1px solid var(--line-c)}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.btn-block{width:100%}

/* header */
.hd{background:var(--cream);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line-c)}
.hd-in{display:flex;align-items:center;gap:16px;min-height:62px}
.logo img{width:150px;height:auto}
.dnav{display:none}
.hd-line{margin-left:auto}
.hd-area{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding-bottom:8px;line-height:1.3}
.hd-area svg{color:var(--rose);flex:none}

/* crumb */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 10px;padding:0;font-size:13px;color:var(--muted)}
.crumb li+li::before{content:"›";margin-right:4px;color:#C9B3B8}
.crumb a{color:var(--muted);text-decoration:none}

/* home slider */
.slider{margin-top:14px}
.slides{gap:12px}
.slide{flex:0 0 88%;scroll-snap-align:start;position:relative;border-radius:26px;overflow:hidden;background:#3A1520;aspect-ratio:16/10}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,8,18,.8) 0%,rgba(42,8,18,.35) 58%,rgba(42,8,18,0) 85%)}
.slide-txt{position:absolute;z-index:1;left:20px;top:18px;bottom:18px;width:62%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.slide-tag{font-size:12px;font-weight:600;color:var(--ink);background:var(--gold-soft);padding:3px 12px;border-radius:20px}
.slide-t{font-size:clamp(19px,5.2vw,30px);font-weight:600;line-height:1.3;color:#fff}
.slide-btn{background:#fff;color:var(--wine);font-size:14px;font-weight:600;padding:0 16px;min-height:40px;border-radius:20px;display:inline-flex;align-items:center;text-decoration:none}
.dots{display:flex;justify-content:center;margin-top:6px}
.dots button{background:none;border:0;width:28px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dots span{display:block;height:6px;width:6px;border-radius:3px;background:#E3CDD1;transition:all .35s}
.dots [aria-current=true] span{width:24px;background:var(--wine)}
.home-hd{margin:14px 0 6px}
.home-hd h1,.hero2 h1,.art-hd h1{font-size:clamp(24px,6.4vw,38px);font-weight:600;line-height:1.3;color:var(--ink)}
.lead{color:var(--muted);font-size:16px;margin-top:6px}

/* categories circles */
.cats{margin:10px 0 4px}
.cats-row{gap:14px;padding:4px 2px 6px}
.cat{flex:0 0 auto;width:78px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2);font-size:13px;text-align:center;line-height:1.25;scroll-snap-align:start}
.cat-img{width:72px;height:72px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line-c);transition:box-shadow .3s}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat:hover .cat-img{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--rose)}

/* section heads */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.h-sec{font-size:19px;font-weight:600;color:var(--ink)}
.sec-note{font-size:12px;color:var(--muted)}
.more-link{font-size:14px;font-weight:600;text-decoration:none}

/* product grid */
.prods{margin:18px 0 8px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.chip{border:1px solid var(--line-c);background:#fff;border-radius:999px;min-height:42px;padding:0 10px;font-size:14px;cursor:pointer;color:var(--ink-2)}
.chip small{color:var(--muted);font-size:12px}
.chip[aria-pressed=true]{background:var(--wine);border-color:var(--wine);color:#fff}.chip[aria-pressed=true] small{color:#F2CDD6}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.pgrid.hs{display:flex;gap:12px}
.pgrid.hs .pc{flex:0 0 46%;scroll-snap-align:start}
.pc{position:relative;min-width:0}
.pc[hidden]{display:none}
.pc-link{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}
.pc-img{display:block;aspect-ratio:26/27;border-radius:var(--r);overflow:hidden;background:var(--blush)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-img img{transform:scale(1.05)}
.pc-name{font-size:14.5px;font-weight:500;line-height:1.35;padding:2px 44px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pc-price{font-size:13px;font-weight:600;color:var(--wine);padding:0 44px 0 2px}
.pc-add{position:absolute;right:0;bottom:2px;width:40px;height:40px;border-radius:20px;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center}
.pc-add:hover{background:var(--rose);color:#fff}

/* page hero */
.hero2{display:grid;gap:16px;margin-bottom:8px}
.hero2-img{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:var(--blush)}
.hero2-img img{width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;font-size:12.5px;font-weight:600;color:var(--wine);background:var(--blush);padding:2px 12px;border-radius:20px;margin-bottom:8px}
.byline{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted);margin:10px 0}
.byline b{font-weight:500;color:var(--ink-2)}
.hero2-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* order form */
.order{background:#fff;border:1px solid var(--line-c);border-radius:var(--r);padding:16px;margin-top:10px;display:grid;gap:12px}
.order-price{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line-c);padding-bottom:10px}
.order-price span{color:var(--muted);font-size:14px}.order-price b{color:var(--wine);font-weight:600}
.order fieldset{border:0;margin:0;padding:0}
.order legend,.fld>span{font-size:14px;font-weight:500;margin-bottom:6px;display:block;color:var(--ink-2)}
.opt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.opt label{position:relative}
.opt input{position:absolute;opacity:0;inset:0}
.opt span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line-c);border-radius:14px;font-size:14px;cursor:pointer;background:var(--cream)}
.opt input:checked+span{border-color:var(--wine);background:var(--wine);color:#fff}
.opt input:focus-visible+span{outline:3px solid var(--gold)}
.order-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:block}
.fld input,.fld select,.fld textarea{width:100%;min-height:44px;border:1px solid var(--line-c);border-radius:12px;padding:8px 12px;background:var(--cream)}
.order-note{font-size:12.5px;color:var(--muted)}

/* article header */
.art-hd{margin:6px 0 12px}
.art-cover{margin:12px 0 0;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:var(--blush)}
.art-cover img{width:100%;height:100%;object-fit:cover}

/* content */
.content{max-width:780px;margin:0 auto}
.intro{display:grid;gap:14px;margin:18px 0 6px;font-size:16.5px;font-weight:300;line-height:1.9;color:var(--ink-2)}
.intro strong{color:var(--wine)}
.sec{margin-top:30px;display:grid;gap:12px}
.sec h2{font-size:clamp(20px,5vw,26px);font-weight:600;line-height:1.4;color:var(--ink);padding-left:14px;border-left:4px solid var(--rose)}
.sec p{color:var(--ink-2);font-weight:300;line-height:1.85}
.sec strong{color:var(--ink)}
.fig{margin:4px 0;text-align:center}
.fig img{display:inline-block;width:auto;height:auto;max-width:100%;max-height:560px;border-radius:20px;vertical-align:top}
.ul{margin:0;padding-left:22px;color:var(--ink-2);display:grid;gap:6px}
.tbl{overflow-x:auto;border:1px solid var(--line-c);border-radius:16px;background:#fff}
.tbl table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-c);vertical-align:top}
.tbl th{background:var(--blush);font-weight:600;color:var(--wine)}
.tbl tr:last-child td{border-bottom:0}
.faq details{background:#fff;border:1px solid var(--line-c);border-radius:16px;padding:0 16px}
.faq summary{cursor:pointer;font-weight:500;padding:14px 0;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--rose);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 14px;font-weight:300;line-height:1.8}

/* cta */
.cta{display:grid;gap:12px;background:linear-gradient(135deg,var(--wine),#4E0B1F);color:#fff;border-radius:var(--r);padding:18px;margin:22px 0}
.cta p{color:#F6DCE3;font-size:15px}
.cta .cta-h{color:#fff;font-size:18px;font-weight:600;margin-bottom:2px}
.cta .btn{justify-self:start}

/* home story slider */
.story{margin:26px 0 6px}
.story-nav{display:none;gap:6px}
.story-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-c);background:#fff;color:var(--wine);font-size:22px;line-height:1;cursor:pointer}
.story-row{gap:14px;padding:4px 2px 8px;align-items:flex-start}
.story-card{flex:0 0 100%;scroll-snap-align:start;background:#fff;border:1px solid var(--line-c);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(122,18,48,.07)}
.story-img{margin:0;aspect-ratio:16/9;background:var(--blush)}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-body{padding:14px 16px 18px;display:grid;gap:8px;align-content:start}
.story-n{font-size:12px;font-weight:600;color:var(--rose);letter-spacing:.5px}
.story-body h2{font-size:18px;font-weight:600;line-height:1.4;color:var(--ink)}
.story-body p{color:var(--ink-2);font-size:15px;font-weight:300;line-height:1.8}
.story-more summary{list-style:none;cursor:pointer;color:var(--wine);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:4px;min-height:36px}
.story-more summary::-webkit-details-marker{display:none}
.story-more summary::after{content:"↓";transition:transform .3s}
.story-more[open] summary::after{transform:rotate(180deg)}
.story-more[open] summary{margin-bottom:6px}
.story-more p{margin-bottom:8px}
@media (min-width:768px){.story-card{flex-basis:calc(50% - 7px)}.story-nav{display:flex}}
@media (min-width:1024px){.story-card{flex-basis:calc((100% - 28px)/3)}}

/* more categories + articles */
.more{margin:34px 0 10px}
.more-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.mc{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-c);border-radius:16px;padding:8px;text-decoration:none;color:var(--ink-2);font-size:14px;line-height:1.25;min-height:56px}
.mc img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.arts{margin:30px 0 10px}
.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ac{display:flex;flex-direction:column;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--line-c);border-radius:18px;padding:14px;text-decoration:none;min-height:96px}
.ac-t{color:var(--ink);font-weight:500;line-height:1.4}
.ac-m{font-size:13px;color:var(--rose);font-weight:600}
.blog-list{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0}
.bc{display:grid;gap:6px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line-c);border-radius:var(--r);overflow:hidden;padding-bottom:14px}
.bc-img{aspect-ratio:16/10;overflow:hidden;background:var(--blush)}.bc-img img{width:100%;height:100%;object-fit:cover}
.bc-t{font-weight:600;font-size:18px;padding:4px 14px 0;line-height:1.4}
.bc-d{font-size:14px;color:var(--muted);padding:0 14px}

/* footer */
.ft{background:var(--ink);color:#E9D9DC;margin-top:40px;padding:30px 0 10px;font-size:14.5px}
.ft a{color:#F6DCE3;text-decoration:none}.ft a:hover{color:#fff;text-decoration:underline}
.ft-grid{display:grid;gap:22px}
.ft-brand{display:grid;gap:10px;justify-items:start}
.ft-brand img{width:150px}
.ft-note{color:#C9AEB4;font-size:13.5px}
.ft-h{font-weight:600;color:#fff;margin-bottom:6px}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft-col a{display:inline-block;padding:3px 0}
.ft-bottom{border-top:1px solid #4A2E35;margin-top:24px;padding-top:14px;font-size:12.5px;color:#B79AA1;display:grid;gap:6px}

/* bottom nav (mobile) */
.bnav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;height:64px;border-radius:24px;background:var(--ink);box-shadow:0 12px 30px rgba(42,20,24,.28);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 6px}
.bnav a,.bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:52px;border-radius:16px;color:#D9BFC4;text-decoration:none;font-size:11px;background:none;border:0;cursor:pointer;line-height:1.2}
.bnav [aria-current=page]{color:#fff;font-weight:500}
.bnav .bnav-line{color:#7BE3A4;position:relative;justify-content:flex-end;padding-bottom:4px;overflow:visible}
.bnav-line-ic{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--line);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(6,199,85,.4),0 0 0 4px var(--cream)}
.bnav .bnav-line span:last-child{margin-top:auto}

/* sheet */
.sheet{position:fixed;inset:0;z-index:60}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(42,20,24,.45)}
.sheet-card{position:absolute;left:0;right:0;bottom:0;background:var(--cream);border-radius:26px 26px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto;animation:up .3s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet-title{font-weight:600;font-size:18px}
.x{width:44px;height:44px;border-radius:22px;border:1px solid var(--line-c);background:#fff;font-size:24px;line-height:1;cursor:pointer}
.sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sheet-cat{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2);font-size:13.5px;text-align:center}
.sheet-cat img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.sheet-links{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet-links a{display:flex;align-items:center;min-height:44px;padding:0 12px;background:#fff;border:1px solid var(--line-c);border-radius:14px;text-decoration:none;color:var(--ink-2);font-size:14px}

/* home grid scrolls sideways on phones; grids inside article column stay 4-up on desktop */
@media (max-width:767px){.t-home .pgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px}.t-home .pgrid::-webkit-scrollbar{display:none}.t-home .pgrid .pc{flex:0 0 46%;scroll-snap-align:start}}
@media (min-width:1024px){.content .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.content .pgrid.hs .pc{flex-basis:calc((100% - 36px)/4)}}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pc{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ≥768 */
@media (min-width:768px){
  :root{--pad:20px}
  .slide{flex-basis:70%}
  .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pgrid.hs .pc{flex-basis:23%}
  .chips{display:flex;flex-wrap:wrap}
  .chip{padding:0 16px}
  .hero2{grid-template-columns:1.05fr 1fr;align-items:start;gap:28px}
  .art-cover{aspect-ratio:21/9}
  .more-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-blog-hub .blog-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-grid{grid-template-columns:1.4fr repeat(2,1fr)}
  .cta{grid-template-columns:1fr auto;align-items:center}
}
/* ≥1024 desktop */
@media (min-width:1024px){
  body{padding-bottom:0}
  .bnav{display:none}
  .hd-area{display:none}
  .hd-in{min-height:72px}
  .logo img{width:166px}
  .dnav{display:flex;gap:2px;flex-wrap:nowrap;margin-left:8px}
  .dnav a{text-decoration:none;color:var(--ink-2);font-size:14.5px;padding:8px 10px;border-radius:12px;white-space:nowrap}
  .dnav a:hover{background:var(--blush)}
  .dnav a[aria-current=page]{color:var(--wine);background:var(--blush);font-weight:500}
  .slide{flex-basis:calc(50% - 6px);aspect-ratio:16/9}
  .pgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pgrid.hs .pc{flex-basis:calc((100% - 60px)/6)}
  .cats-row{justify-content:center}
  .hero2-img{aspect-ratio:4/3}
  .art-cover{aspect-ratio:21/9}
  .ft-grid{grid-template-columns:1.5fr repeat(4,1fr)}
}
@media (min-width:1360px){.pgrid{grid-template-columns:repeat(7,minmax(0,1fr))}.pgrid.hs .pc{flex-basis:calc((100% - 72px)/7)}.content .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.content .pgrid.hs .pc{flex-basis:calc((100% - 36px)/4)}}