/* Petal Dream · responsive (hero, collection, cards, gift ideas, how-it-works and bar breakpoints live in conversion.css) */
@media (max-width:1180px){
  .a-lantern{right:31vw}
  .occ-tail{left:-24px;top:calc(var(--hdr-h) + 40px);width:100px;opacity:.5;z-index:0}
  .occasions .wrap{position:relative;z-index:1}
  .how-flight{margin-top:84px}
  .nav{display:none}
  .hdr{grid-template-columns:1fr auto}
  .menu-btn{display:block}
}

/* tablet + phone */
@media (max-width:899px){
  :root{--hdr-h:66px}
  .buybar{display:flex}
  /* the announce bar is one static line on phones and tablets: two facts, no rotating text (the third lives in the hero) */
  .announce{padding:0 10px;font-size:13px;letter-spacing:.02em;text-transform:none}
  .announce li:nth-child(3){display:none}
  .announce li+li::before{margin:0 .7em 2px}
  .step{padding:24px 22px 26px}
  .step-art{height:120px}
  .step-art>img{height:96px}
  .how-flight{height:84px;margin:64px 0 12px}
  .a-old{right:-12vw;bottom:-14vh}
  .dove{width:70px;margin:-34px 0 0 -35px}
  .nc-grid{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .nc-copy{display:contents}
  .nc-copy>.label{order:1;align-self:flex-start}
  .nc-copy>.h2{order:2}
  .nc-text{order:3}
  .nc-stage{order:4;min-height:0;margin:18px 0 8px}
  .field-l{order:5}
  .nc-field{order:6}
  .nc-help{order:7}
  .nc-status{order:8}
  .nc-copy>.btn{order:9;align-self:flex-start}
  .namecard,.bespoke,.final{overflow:hidden}
  .bsp-grid,.faq-grid{grid-template-columns:1fr}
  .bsp-grid{gap:20px}
  /* long form behind one button (only when JS runs: without it the form simply shows) */
  .js .bsp-toggle{display:inline-flex;width:100%}
  .js .bsp-shell.is-collapsed,.bsp-toggle[aria-expanded="true"]{display:none}
  .bsp-figure{display:none}
  .faq-side{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .chapter,.chapter.ch-2{grid-template-columns:1fr;gap:18px;text-align:center;justify-items:center}
  .chapter.ch-2 .ch-art{order:0}
  .ch-art{height:clamp(160px,42vw,230px)}
  .ch-num{font-size:60px}
  .ch-3{display:none}   /* repeats the name-card section right above: stacked story is two chapters */
  .ch-text{display:grid;justify-items:center}
  .ch-text>p:not(.ch-place){margin:0 auto}
}
@media (min-width:701px) and (max-width:899px){.final{min-height:0;padding:140px var(--gutter) 100px}}   /* tablets: no screen-high empty band above the closing line */
@media (min-width:700px) and (max-width:899px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .step{padding:22px 14px 24px}
  .step-art{height:auto;min-height:152px;margin-bottom:14px}   /* the chat bubble is taller than the art box: keep it clear of the step numeral */
  .chat{padding:8px}
  .mini-card{width:140px;height:88px}
  .mini-card .hand{font-size:26px}
}

/* phones */
@media (max-width:700px){
  :root{--bar-h:32px;--hdr-h:62px;--display-tracking:.3em;--title-tracking:.14em}
  body{font-size:16px}
  .brand{gap:10px}
  .brand img{width:38px}
  .brand-word{font-size:14px;letter-spacing:.26em}
  .hdr-shop{display:none}
  .hero{padding-top:calc(var(--hdr-h) + 6px);padding-bottom:22px}
  .hero-ctas{flex-direction:column;align-items:stretch;width:min(100%,358px);gap:10px;margin-top:14px}
  /* hero art: far less of it on a phone, and never behind the ladder */
  .a-lilies,.a-bf1,.a-bf2,.a-bf3,.a-hb,.a-lantern{display:none}
  .a-old{right:-17vw;bottom:-11vh;width:40vw;opacity:.5}
  .a-redoute{left:-15vw;bottom:-8vh;width:38vw;opacity:.5}
  .a-leolily{left:-7vw;right:auto;top:calc(var(--hdr-h) + 6vh);width:25vw;opacity:.5}
  .sec-head{gap:14px}
  .h2{font-size:clamp(34px,9.4vw,46px)}
  .lede{font-size:18.5px}
  .occ-tail{display:none}
  .nc-card{width:calc(100% - 16px);aspect-ratio:1.8;margin-inline:auto;padding:14px 20px}
  .nc-for{font-size:28px}
  .nc-seal{right:-2px;bottom:-24px;width:64px}
  .p-incl li,.bsp-direct,.nc-help,.nc-status,.f-note{font-size:16px}
  .p-next{font-size:16px}   /* how ordering works is instruction text, not a caption */
  .p-ship,.col-note{font-size:14px}
  .final .p-next{max-width:19em;margin-inline:auto}
  .bubble{font-size:14px}
  .p-visual figcaption{font-size:12px}
  .bsp-shell{padding:6px;border-radius:28px}
  .bsp-form,.bsp-out{padding:20px 16px;border-radius:23px}
  .nc-bf{display:none}   /* reads as a brown speck at this size */
  .f-row{grid-template-columns:1fr}
  .faq-q{font-size:19px}
  .faq-a p{padding-right:8px}
  .f-lan-l{left:6vw;width:11vw}
  .f-lan-r{right:8vw;width:10vw}
  .f-ch0{left:-6vw;top:25%;width:18vw}
  .f-ch2{right:-7vw;top:25%;width:18vw}
  .f-old{right:-18vw;bottom:-6%;width:44vw;opacity:.7}
  .f-red{left:-16vw;bottom:-4%;width:42vw;opacity:.7}
  .f-az{display:none}
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .foot-nav{grid-template-columns:1fr 1fr;column-gap:16px}
  .foot-brand{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:2px}
  .foot-emblem{grid-row:1/3;width:112px}
  .foot-word{align-self:end}
  .foot-sub{align-self:start}
  .footer{padding-top:44px}
  .nc-status{min-height:0}
  .nc-rose{top:-22px;bottom:auto;width:74px}
  .story{padding-block:60px}
  .story-track{gap:32px}
  .chapter,.chapter.ch-2{gap:10px}
  .ch-title{margin-top:2px}
  .ch-place{margin:8px 0 10px}
  .faq-q{min-height:56px}
  .faq-lead{display:none}
  .final-mark{width:84px}
  .final-inner{gap:14px}
  /* performance on phones: no full-screen noise layer, no blur behind the bars, no drop-shadow filters on big images */
  body::after{display:none}
  .site-header.is-scrolled::before,.menu-open .site-header::before{background:rgba(12,7,9,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .buybar{background:rgba(12,7,9,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .crest-img,.ch-art>img,.occ-art img{filter:none}
}
@media (max-width:480px){
  #bsp-form .btn{white-space:normal;line-height:1.35;text-align:center;letter-spacing:.12em;padding:10px 7px 10px 20px;gap:10px}
  .buybar .btn{letter-spacing:.1em;padding:0 14px}
}
@media (max-width:380px){
  .btn{padding-left:22px;letter-spacing:.16em}
  .sec{padding-block:40px}
  .sec-head{margin-bottom:18px}
  .story{padding-block:48px}
  .foot-emblem{width:92px}
  .foot-word{font-size:16px;letter-spacing:.2em}   /* the letter-spaced wordmark must not push the page wider than a 320px screen */
}

/* phone landscape: crest beside the copy, no ladder (the picker is one tap away) */
@media (max-height:520px) and (orientation:landscape){
  :root{--hdr-h:58px;--bar-h:30px}
  .hero{min-height:0;padding-top:calc(var(--hdr-h) + 14px);padding-bottom:28px}
  .hero-content{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"crest title" "crest promise" "crest ctas" "crest links";column-gap:clamp(20px,4vw,48px);justify-items:start;align-items:center;max-width:860px;text-align:left}
  .hero-crest{grid-area:crest;height:clamp(150px,52vh,240px)}
  .hero-title{grid-area:title}
  .hero-title .wordmark-name{font-size:clamp(26px,4vw,38px);padding-left:0}
  .hero-promise{grid-area:promise;margin-top:10px;font-size:20px;max-width:28em}
  .ladder,.trust-line{display:none}
  .hero .hero-ctas{grid-area:ctas;flex-direction:row;justify-content:flex-start;width:auto;margin-top:12px}
  .hero-links{grid-area:links;justify-content:flex-start}
  .f-ch0,.f-ch2{display:none}
  .a-leolily,.a-hb,.a-bf1,.a-lilies,.a-lantern,.a-bf2{display:none}
  .a-old{right:-17vw;left:auto;bottom:-30vh;width:24vw;opacity:.5}
  .a-redoute{left:-9vw;right:auto;bottom:-22vh;width:22vw;opacity:.55}
  .hero-content{max-width:780px}
  .hero .hero-ctas .btn{--h:48px}
  .story.is-h .ch-art{height:min(56vh,420px)}
  .menu nav{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .menu nav a{padding:8px 0;font-size:26px}
  .buybar{display:none}
  .product{flex-basis:min(86vw,640px)}   /* landscape phones swipe through wide cards: picture left, details right */
  .p-core{flex-direction:row}
  .p-visual{flex:0 0 42%;aspect-ratio:auto}
  .p-incl{display:none}
  .final{padding-block:90px}
}
/* short portrait phones (small iPhones, Android with browser bars): a tighter menu so all six links stay on screen */
@media (max-height:680px) and (orientation:portrait){.menu nav a{padding:8px 0}}

/* reduced motion: static art, no parallax (JS also skips motion) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .type-name::after{display:none}
}