/* v14: the pages added after v13, and the fixes from the visitor test (docs/ux/acceptance-v6.md).
   Loaded last. Uses only v13's colors, fonts, arches and spacing. */

/* hooks for the decorative art that comes later: every section is a positioning box */
[data-art]{position:relative}

/* things that need JavaScript stay hidden without it */
html:not(.js) [data-open-search],html:not(.js) [data-findnum]{display:none !important}

/* ---------- header ---------- */
/* a thin row above the header on computers: place, phone number as text, help pages, language */
.util{display:none}
@media (min-width:900px){
  .util{display:block;border-bottom:1px solid rgba(232,184,106,.18);font-size:15px;color:var(--on-soft)}
  .top .util .wrap,.top.scrolled .util .wrap{min-height:46px;gap:24px;padding-top:4px;padding-bottom:4px}
  .util .where{margin-right:auto}
  .util a{text-decoration:none;color:var(--on-soft)}
  .util a:hover,.util a[aria-current]{color:var(--gold)}
  .util .tel{color:var(--on)}
  .util .tel b{color:var(--gold);font-weight:700;letter-spacing:.02em}
  .util-links{display:flex;gap:20px}
  .util .lang{font-size:14px}
  .util .lang a{padding:6px 14px;color:var(--gold)}
  .util .lang a[aria-current]{color:var(--deep)}
}
/* six occasion links need room: below 1100px the Menu button stays */
@media (min-width:900px) and (max-width:1099px){
  .top nav.links{display:none}
  details.menu{display:block}
  .util-links{display:none}
}
.util a,.util span{white-space:nowrap}
@media (min-width:1100px){.top nav.links{gap:20px}}

/* phone menu: the help pages and Call and Text under the occasions */
.menupanel{max-height:calc(100vh - 140px);overflow:auto}
.menu-sub{display:grid;margin-top:8px}
.menupanel .menu-sub a{font-family:'Be Vietnam Pro',sans-serif;font-size:20px;font-weight:600;text-transform:none;min-height:56px;align-items:center;padding:10px 0}
.menupanel a[aria-current]{color:var(--gold)}
.menu-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.menupanel .menu-acts a{border-bottom:0;font:700 18px/1.2 'Be Vietnam Pro',sans-serif;text-transform:none;padding:12px 16px;justify-content:center}

/* ---------- bottom bar: the Call button carries the number (problem 15) ---------- */
.bar .btn{white-space:normal;padding:8px 10px;gap:8px}
.bar .bl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.bar .bl small{font-size:14px;font-weight:600;white-space:nowrap}
.bar{transition:transform .45s var(--ease)}
.bar.away{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* ---------- footer: every page, the number, the hours ---------- */
footer.deep{padding:56px 0 140px;font-size:18px}
footer .wrap.foot{display:grid;gap:34px;justify-content:stretch}
.f-name b{display:block;font-family:var(--disp);font-weight:800;font-size:40px;line-height:1;text-transform:uppercase;color:var(--gold)}
.f-name>span{display:block;margin-top:8px;color:var(--on-soft)}
.f-links{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.f-links a{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--on);border-bottom:1px solid rgba(232,184,106,.14)}
.f-links a:hover{color:var(--gold)}
.f-reach{display:grid;gap:6px;color:var(--on-soft)}
.f-reach .f-phone{font-family:var(--disp);font-weight:800;font-size:38px;line-height:1.1;color:var(--gold);text-decoration:none}
footer .wrap.f-base{margin-top:34px;padding-top:18px;border-top:1px solid rgba(232,184,106,.18);font-size:16px}
@media (min-width:900px){
  footer.deep{padding:80px 0 48px}
  footer .wrap.foot{grid-template-columns:1fr 1.6fr 1fr;align-items:start}
  .f-links{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- the big phone number never runs off the screen at large text (problem 1) ---------- */
.contact .phone{font-size:clamp(44px,13vw,128px);overflow-wrap:anywhere}

/* ---------- page heads ---------- */
/* Vietnamese marks above and below the capitals need more room when a heading wraps */
.pagehero h1{line-height:.94}
.head h2,.grouphead h2,.day h2,.mc-head h2{line-height:1}
html[lang=vi] .pagehero h1{line-height:1}
html[lang=vi] .head h2,html[lang=vi] .grouphead h2,html[lang=vi] .day h2{line-height:1.04}
.pagehero h1 .gloss{line-height:1.3}
.pagehero h1.long{font-size:clamp(56px,15vw,124px)}
.pagehero .tap{font-size:17px;color:var(--on-soft);margin:18px 0 0;max-width:52ch}
.pagehero .acts,.band .acts,.far .acts,.contact .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pagehero .from{display:block}
.more{display:inline-flex;align-items:center;min-height:48px;margin-top:14px;font-weight:700;color:var(--ochre-ink);text-decoration:underline;text-decoration-thickness:1.5px}
.deep .more{color:var(--gold)}
.more::after{content:"";width:9px;height:9px;margin-left:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.after-steps{margin:28px 0 0}
.urgent .deliver{margin:12px 0 0;color:var(--on-soft);font-size:17px}
.off{margin:14px 0 0;color:var(--on-soft);font-size:17px}

/* the "about these flowers" paragraph at the end of a catalog */
.about{max-width:62ch;margin:56px 0 0;color:var(--ink-soft);font-size:19px}
.deep .about{color:var(--on-soft)}
.groupnote{margin:-12px 0 24px;color:var(--ink-soft);font-size:17px}
/* the ribbon names were removed: one quiet line under a design's price, and once above the sympathy catalog */
.names-note{margin:0 0 32px;max-width:62ch}
.pagehero .names-removed{display:block;margin-top:6px;font-size:16px;color:var(--on-soft);max-width:44ch}

/* ---------- dates and short facts as ruled rows, never cards ---------- */
.dates{display:grid;margin:26px 0 0;max-width:640px}
.dates div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 18px;padding:14px 0;border-bottom:1px solid rgba(232,184,106,.28)}
.dates div:first-child{border-top:1px solid rgba(232,184,106,.28)}
.dates dt{font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-soft)}
.dates dd{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(26px,6vw,38px);line-height:1.05;color:var(--gold);overflow-wrap:anywhere}
.dates .fill{font-family:inherit}

/* a deep band of facts and buttons, closing each occasion page */
.band .band-grid,.band-grid{display:grid;gap:8px}
.band .head{margin-bottom:22px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:30px;max-width:56ch}
.ticks li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;background:var(--ochre);transform:rotate(45deg)}
.band .ticks li{font-size:20px}
.ticks.ink li{color:var(--ink)}
@media (min-width:900px){
  .band-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .band-grid>.head{margin:0}
}

/* ---------- weddings ---------- */
.makes{margin:0;display:grid}
.makes div{padding:20px 0;border-bottom:1px solid var(--cream2)}
.makes div:first-child{padding-top:0}
.makes dt{font-family:var(--disp);font-weight:800;font-size:clamp(30px,7vw,42px);line-height:1;text-transform:uppercase;color:var(--deep)}
.makes dt .gloss{display:block;font-family:'Be Vietnam Pro',sans-serif;font-size:17px;text-transform:none;color:var(--ochre-ink);margin-top:6px;line-height:1.3}
.makes dd{margin:8px 0 0;color:var(--ink-soft)}
.more-photos{color:var(--ink-soft);margin:40px 0 22px;max-width:46ch}
.cat.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.makes-grid{display:grid}
@media (min-width:900px){
  .makes-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .more-photos{margin-top:0}
  .cat.two{gap:40px 28px}
}

/* ---------- Tết: ordering from out of town ---------- */
.far-p{font-size:20px;max-width:56ch}
@media (min-width:900px){.far-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px}.far-grid>.head{margin:0}}

/* ---------- Mother's Day and Vu Lan: the two dated days ---------- */
.days{display:grid;gap:48px}
.day h2{font-size:clamp(44px,10vw,72px);color:var(--deep)}
.day .when{margin:10px 0 18px;font-weight:700;color:var(--ochre-ink);font-size:20px}
.day .ticks li{color:var(--ink)}
@media (min-width:900px){.days{grid-template-columns:1fr 1fr;gap:72px}}

/* ---------- How to order ---------- */
.info{display:grid;gap:30px}
.info-b{padding-top:22px;border-top:2px solid var(--deep)}
.h3,.info-b h3{font-family:var(--disp);font-weight:800;font-size:clamp(30px,6.5vw,40px);line-height:1;text-transform:uppercase;color:var(--deep);margin:0 0 14px}
.h3 .gloss,.info-b h3 .gloss{display:block;font-family:'Be Vietnam Pro',sans-serif;font-size:17px;text-transform:none;color:var(--ochre-ink);margin-top:6px;line-height:1.3}
.h3.on{color:var(--gold);margin-top:40px}
.on-soft{color:var(--on-soft)}
.info-b p{color:var(--ink-soft);margin:0}
.two-up{display:grid;gap:56px;margin-top:64px}
.rows{margin:0}
.rows div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid #DCCDAE}
.rows dt a{font-weight:700;color:var(--deep);text-decoration-thickness:1px}
.rows dd{margin:0;color:var(--ink-soft)}
.bubble-l{margin:26px 0 8px;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre-ink)}
.bubble{display:inline-block;margin:0;max-width:34ch;padding:14px 18px;border-radius:20px 20px 20px 6px;background:var(--deep);color:var(--on);box-shadow:0 10px 24px rgba(31,58,64,.18)}
.reply{color:var(--ink-soft);margin:14px 0 0}
.contact .else{max-width:52ch;margin:16px auto 0}
@media (min-width:900px){
  .info{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  .two-up{grid-template-columns:1fr 1fr;gap:72px}
}

/* ---------- sympathy guide ---------- */
.rows-t{display:grid}
.rows-t .row{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:18px 0;border-bottom:1px solid #DCCDAE;align-items:baseline}
.rows-t .row:first-child{border-top:1px solid #DCCDAE}
.r-name{text-decoration:none}
.r-name b{font-family:var(--disp);font-weight:800;font-size:clamp(28px,6.4vw,38px);line-height:1;text-transform:uppercase;color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.r-name .gloss{display:block;color:var(--ochre-ink);font-size:17px;margin-top:4px}
.r-who{grid-column:1/-1;color:var(--ink-soft)}
.r-amt{grid-column:2;grid-row:1;font-weight:700;color:var(--ochre-ink);white-space:nowrap}
@media (min-width:900px){
  .rows-t .row{grid-template-columns:2fr 3fr auto}
  .r-who{grid-column:auto}
  .r-amt{grid-column:3}
}
.ribbons{margin:0;display:grid;gap:0}
.ribbons div{padding:18px 0;border-bottom:1px solid #DCCDAE}
.ribbons dt{font-family:var(--disp);font-weight:800;font-size:clamp(30px,7vw,46px);line-height:1.05;text-transform:uppercase;color:var(--deep)}
.ribbons dd{margin:6px 0 0;color:var(--ink-soft)}
.ribbons.small dt{font-size:clamp(24px,5.4vw,30px)}
@media (min-width:900px){.ribbons:not(.small){grid-template-columns:1fr 1fr;column-gap:64px}}

/* ---------- contact page ---------- */
.pagehero.contact{text-align:left}
.pagehero.contact .lead{font-size:22px;color:var(--on);margin:22px 0 0}
.pagehero.contact .phone{margin:6px 0 0}
.pagehero.contact .acts{justify-content:flex-start}
.hours{margin:18px 0 0;color:var(--on-soft)}
.form{display:grid;gap:18px;max-width:620px}
.form label{display:grid;gap:8px;font-weight:600;color:var(--deep)}
.form label>span{display:block}
.form label small{font-weight:400;color:var(--ink-soft)}
.form input,.form textarea{width:100%;min-height:56px;font:500 19px/1.4 'Be Vietnam Pro',sans-serif;padding:12px 16px;border:2px solid var(--deep);border-radius:12px;background:#FFFDF8;color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:#6E6253}
.form input:focus,.form textarea:focus{outline:3px solid var(--ochre);outline-offset:2px}
.form .btn{justify-self:start}
.form .reply{margin:0}

/* ---------- not found ---------- */
.findnum{margin-top:26px;max-width:520px}
.findnum label{display:block;font-weight:600;margin-bottom:10px}
.findrow{display:flex;flex-wrap:wrap;gap:10px}
.findrow input{flex:1 1 160px;min-height:56px;font:600 22px 'Be Vietnam Pro',sans-serif;padding:10px 16px;border:2px solid var(--gold);border-radius:12px;background:var(--cream);color:var(--ink);text-transform:uppercase}
.findrow input::placeholder{text-transform:none;color:#6E6253}
.nomatch{margin:12px 0 0;color:var(--on)}
.golist{display:grid}
.golist a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 18px;min-height:64px;padding:16px 0;border-bottom:1px solid #DCCDAE;text-decoration:none}
.golist b{font-family:var(--disp);font-weight:800;font-size:clamp(30px,7vw,44px);line-height:1;text-transform:uppercase;color:var(--deep)}
.golist .gloss{display:block;color:var(--ochre-ink);font-size:17px;margin-top:4px}
.golist a:hover b{color:var(--ochre-ink)}
@media (min-width:900px){.golist{grid-template-columns:1fr 1fr;column-gap:64px}}

/* ---------- photo viewer: where and when, and room to scroll at large text (problems 7 and 8) ---------- */
.lightbox{overflow-y:auto}
.lightbox .lb-where{color:var(--on-soft);font-size:16px;max-width:40ch;margin:6px auto 0}
.lightbox .lb-price{font-weight:700}
.lightbox .lb-nr:not([hidden]){display:block;color:var(--on-soft);font-size:16px;max-width:40ch;margin:4px auto 0}

/* catalog rows on a computer: when 3 across would leave one design alone on the last row
   (4, 7 or 10 designs), use 4 across instead */
@media (min-width:900px){
}

/* large text (150 to 200 percent): long button labels wrap instead of pushing the page sideways (problem 1) */
main .btn{white-space:normal;text-align:center;max-width:100%}
@media (max-width:899px){.band-grid,.far-grid,.makes-grid{grid-template-columns:minmax(0,1fr)}}
.dates dd{max-width:100%}
@media (max-width:340px){
  .menucard{padding:40px 20px 30px}
  .pr-row{grid-template-columns:minmax(0,1fr)}
  .pr-row .amt{white-space:normal}
}
.rows-t .row{grid-template-columns:minmax(0,1fr) auto}
.r-amt{white-space:normal;text-align:right;max-width:12ch}
@media (min-width:900px){.rows-t .row{grid-template-columns:2fr 3fr auto}.r-amt{max-width:none}}
/* the price menu tilts as it slides in; keep its corners from widening the page while it moves */
#prices{overflow-x:clip}
/* 200 percent text on a small phone (about 195px of layout width) */
.f-links{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.f-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.form{grid-template-columns:minmax(0,1fr)}
.findrow input,.form input{min-width:0}
@media (max-width:260px){
  .mark svg{display:none}
  .top .wrap{flex-wrap:wrap;padding:0 14px}
  .lang-phone{padding:0 14px 12px}
  .wrap{padding:0 14px}
  .f-links{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:260px){
  h1,h2,h3,p,li,.num,.r-name b,.golist b,.makes dt,.ribbons dt{overflow-wrap:anywhere}
  .head h2,.grouphead h2,.mc-head h2,.day h2{font-size:34px}
  .pagehero h1,.pagehero h1.long{font-size:48px}
}
.typejump a{max-width:100%}
@media (max-width:260px){.cat .what,.cat .amt,.strip figcaption span,dd{overflow-wrap:anywhere}}
@media (max-width:239px){.cat,.cat.two,.strip,.occasions{grid-template-columns:minmax(0,1fr)}}