/* Product-first storefront, v7. Movement never blocks navigation or reading. */
:root{--flow-ease:cubic-bezier(.22,.68,.18,1);--flow-header:88px;--flow-nav:58px}
html{scroll-padding-top:calc(var(--flow-header) + var(--flow-nav) + 20px)}
body.flow-home .top{position:sticky;top:0;z-index:30;background:var(--cream);border-bottom:1px solid var(--line);padding-top:16px;padding-bottom:16px;min-height:88px}
.flow-nav{position:sticky;top:var(--flow-header);z-index:29;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;background:var(--cream);border-bottom:1px solid var(--line);padding:6px var(--space)}
.flow-nav>a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700;transition:background .2s,color .2s;white-space:nowrap}
.flow-nav>a[aria-current]{background:var(--purple);color:white}
.flow-nav>a:hover{background:var(--lavender);color:var(--ink)}


.flow-featured{background:var(--yellow);padding:46px var(--space) 74px;border-radius:0 0 48px 48px;overflow:clip}
.flow-intro{display:grid;grid-template-columns:1.45fr 1fr;gap:40px;align-items:end;margin-bottom:38px}
.flow-intro .eyebrow{font-size:11px;margin-bottom:19px}
.flow-intro h1{font-size:clamp(44px,5.5vw,80px);line-height:1;letter-spacing:-.055em}
.flow-intro-side{justify-self:end;max-width:330px;padding-bottom:5px;position:relative}
.flow-intro-side>p{font-size:16px;line-height:1.6;margin-bottom:15px}
.flow-star{position:absolute;right:4px;top:-72px;font-size:66px;line-height:1;color:var(--purple);transform:rotate(15deg)}
.shelf-caption{display:flex;align-items:baseline;gap:18px;margin-bottom:20px}
.shelf-caption h2{font-size:25px;letter-spacing:-.03em}.shelf-caption>p{font-size:13px}.shelf-caption>span{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.1em}
.flow-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.flow-shelf .card{display:flex;flex-direction:column;min-width:0;background:var(--cream);border-radius:22px;overflow:hidden;box-shadow:0 3px 0 #25242312;transition:transform .25s var(--flow-ease),box-shadow .25s}
.flow-shelf .product-link{display:flex;flex-direction:column;flex:1;min-width:0}
.flow-shelf .card-photo{aspect-ratio:1.55;border-radius:0;overflow:hidden}
.flow-shelf .card-photo>img{height:100%;width:100%;object-fit:cover;transition:transform .6s var(--flow-ease)}
.flow-shelf .card-content{display:flex;flex-direction:column;flex:1;padding:20px 22px 0}
.flow-shelf .card-meta{margin:0 0 10px;font-size:11px}
.flow-shelf .card h3{font-size:clamp(23px,2.2vw,31px);margin-bottom:12px;line-height:1.07}
.flow-shelf .card-content>p:not(.card-meta){font-size:13px;line-height:1.65;margin-bottom:17px}
.flow-shelf .card-bottom{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:8px}
.flow-shelf .card-bottom .text-link{display:none}
.flow-shelf .money{font-size:30px}
.flow-shelf .card-actions{padding:17px 22px 22px;margin:0;gap:12px;display:flex;align-items:center;border:0}
.flow-shelf .card-actions .btn{flex:1;min-height:44px;padding:10px 15px;font-size:12px;border:1px solid var(--purple);color:var(--purple);background:transparent;box-shadow:none}
.flow-shelf .card-actions .save-product{min-width:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:50%;justify-content:center}
.flow-shelf .save-product>span{display:none}
.flow-shelf .photo-tag{top:12px;left:12px;padding:8px 10px;background:var(--cream);border-radius:10px;max-width:130px}
.flow-shelf .photo-tag .brand-logo{width:90px;max-width:90px}.flow-shelf .photo-tag .brand-logo img{max-height:28px;object-fit:contain}.flow-shelf .photo-tag .brand-logo small{font-size:6px;letter-spacing:.1em}
.flow-shelf .photo-arrow{right:12px;bottom:12px;width:34px;height:34px;font-size:20px}
.flow-shelf .reference-label{font-size:10px}
.flow-interlude{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;padding:68px var(--space);min-height:430px;overflow:clip}
.flow-unfold{background:var(--lavender);margin-top:28px;border-radius:48px;min-height:460px}
.flow-scene-copy{position:relative;z-index:2;max-width:610px}
.flow-scene-copy .eyebrow{font-size:11px;margin-bottom:21px}.flow-scene-copy h2{font-size:clamp(43px,5.1vw,73px)}
.flow-scene-copy>p:not(.eyebrow){margin:22px 0;font-size:16px}
.flow-scene-copy .btn{font-size:13px;min-height:48px;gap:24px;padding:14px 23px;border-radius:999px}
.unfold-art{height:325px;position:relative;max-width:530px;width:100%;justify-self:center}
.orbit{position:absolute;border:1px solid #5c397c30;border-radius:50%;width:430px;height:230px;top:52px;left:0;transform:rotate(-28deg)}
.orbit-two{transform:rotate(28deg)}
.flow-ticket{width:77%;max-width:380px;padding:26px;border-radius:16px;position:absolute;box-shadow:0 16px 30px #2c154321}
.flow-ticket>span{font-size:9px;letter-spacing:.12em;font-weight:700}.flow-ticket>b{display:block;font-family:var(--display);font-size:clamp(27px,3.3vw,44px);line-height:1;letter-spacing:-.03em;margin:20px 0}
.ticket-back{background:var(--coral);top:10px;left:0;transform:rotate(-12deg);color:var(--ink)}
.ticket-back>i{position:absolute;bottom:23px;right:25px;font-size:46px;font-style:normal;color:var(--purple)}
.ticket-front{background:var(--purple);color:var(--cream);right:0;bottom:0;transform:rotate(8deg)}
.ticket-front>div{border-top:1px solid #ffffff65;padding-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:10px}
.ticket-front i{font-size:25px;font-style:normal}.ticket-spark{position:absolute;color:var(--purple);line-height:1;font-size:58px}.spark-one{right:8px;top:-20px;transform:rotate(18deg)}.spark-two{left:-24px;bottom:10px;font-size:75px}
.flow-relax{padding-top:84px;padding-bottom:84px}.flow-relax .section-heading{align-items:end;margin-bottom:35px}.flow-relax h2{font-size:clamp(41px,4.8vw,66px)}
.flow-section-aside{font-size:15px;line-height:1.65}.flow-section-aside p{margin-bottom:15px}.flow-section-aside .text-link{font-size:13px}
.flow-relax .card{border:1px solid var(--line);box-shadow:none}.flow-relax .card-photo{aspect-ratio:1.4}
.flow-night{background:var(--olive);color:var(--cream);min-height:490px;border-radius:48px;margin-bottom:24px;gap:8%}
.flow-night h2 em{color:var(--soft-yellow)}.flow-night h2{font-size:clamp(43px,4.5vw,67px)}
.night-window{position:relative;transform:rotate(3deg);width:100%;max-width:530px;justify-self:end}
.night-window>img{height:330px;object-fit:cover;border-radius:160px 160px 22px 22px;object-position:60% center}.night-window figcaption{font-size:11px;padding:13px 8px 0;color:var(--cream)}
.night-spark{position:absolute;right:5%;top:25px;color:var(--yellow);font-size:65px;z-index:1;transform:rotate(12deg)}
.flow-home .catalogue{padding-top:70px}.flow-home .catalogue .section-heading h2{font-size:clamp(44px,5vw,72px)}
.flow-home .catalogue-note{font-size:11px;max-width:95ch}
.flow-home .catalogue .cards .card{transition:transform .25s var(--flow-ease)}
.flow-home .brand-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:150px}
.flow-home .gifting{padding-top:70px;padding-bottom:70px}.flow-home .gift-photo img{max-height:360px}
.flow-home .gift-confidence{padding-top:28px;padding-bottom:28px}
.flow-home .top nav a{font-size:13px}.flow-home .top .cart-link{min-height:46px}
.flow-home .kind-filters button,.flow-home .gift-select-trigger{transition:background .2s,box-shadow .2s}
.product-story{margin:24px 0 28px;max-width:64ch}
.product-story p{font-size:17px;line-height:1.68;margin:0;color:var(--ink)}
.product-story p+p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-weight:600}
@media(hover:hover) and (pointer:fine){
  .flow-shelf .card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #25242315}
  .flow-shelf .card:hover .card-photo>img{transform:scale(1.035)}
  .flow-shelf .card-actions .btn:hover{background:var(--purple);color:white}
}
/* One short entrance per scene, no endless motion or scroll interception. */
@media(prefers-reduced-motion:no-preference){
  .flow-motion .flow-card.flow-enter{animation:flow-arrive .55s var(--flow-ease) both;animation-delay:calc(var(--card-order,0)*75ms)}
  .flow-motion .flow-unfold.scene-enter .ticket-back{animation:ticket-back 1.15s var(--flow-ease) both}
  .flow-motion .flow-unfold.scene-enter .ticket-front{animation:ticket-front 1.15s var(--flow-ease) .08s both}
  .flow-motion .flow-unfold.scene-enter .ticket-spark{animation:spark-pop .9s var(--flow-ease) .25s both}
  .flow-motion .flow-night.scene-enter .night-window{animation:night-open 1.15s var(--flow-ease) both}
  .flow-motion .flow-night.scene-enter .night-spark{animation:spark-pop .9s var(--flow-ease) .3s both}
  .flow-motion .flow-scene-copy.flow-enter{animation:flow-arrive .6s var(--flow-ease) both}
  @keyframes flow-arrive{from{opacity:.25;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
  @keyframes ticket-back{from{opacity:.4;transform:translate(45px,50px) rotate(0deg)}to{opacity:1;transform:translate(0,0) rotate(-12deg)}}
  @keyframes ticket-front{from{opacity:.4;transform:translate(-40px,-10px) rotate(-5deg) scale(.93)}to{opacity:1;transform:translate(0,0) rotate(8deg) scale(1)}}
  @keyframes spark-pop{from{opacity:0;scale:.4;rotate:-50deg}to{opacity:1;scale:1;rotate:0deg}}
  @keyframes night-open{from{opacity:.4;transform:translateY(22px) rotate(-2deg);clip-path:inset(8% 12% round 130px 130px 22px 22px)}to{opacity:1;transform:translateY(0) rotate(3deg);clip-path:inset(0 round 0)}}
}
.flow-home.motion-off *,.flow-home.motion-off *:before,.flow-home.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html:has(.motion-off){scroll-behavior:auto}
@media(min-width:1600px){.flow-featured,.flow-interlude,.flow-nav{padding-left:max(var(--space),calc((100vw - 1440px)/2));padding-right:max(var(--space),calc((100vw - 1440px)/2))}}
@media(max-width:1000px){.flow-intro h1{font-size:57px}.flow-shelf{gap:16px}.flow-shelf .card-content{padding:17px 16px 0}.flow-shelf .card-actions{padding:14px 16px 18px}.flow-shelf .card h3{font-size:25px}.flow-interlude{gap:4%;padding-top:60px;padding-bottom:60px}.flow-scene-copy h2{font-size:49px}.flow-ticket{width:87%;padding:20px}.unfold-art{height:300px}.orbit{width:340px}.flow-ticket>b{font-size:35px}.night-window>img{height:300px}}
@media(max-width:700px){
  :root{--flow-header:74px;--flow-nav:56px}
  body.flow-home .top{min-height:74px;padding-top:12px;padding-bottom:12px}
  .flow-nav{justify-content:space-between;gap:3px;padding:5px 12px}
  .flow-nav>a{padding:8px 12px;font-size:11px}
  .flow-featured{padding:29px 22px 40px;border-radius:0 0 30px 30px}
  .flow-intro{display:block;margin-bottom:28px}.flow-intro h1{font-size:clamp(43px,10.7vw,66px)}.flow-intro .eyebrow{font-size:9px;letter-spacing:.07em;margin-bottom:17px}
  .flow-intro-side{max-width:none;width:100%;justify-self:stretch;text-align:left;margin-top:20px;padding:0}.flow-intro-side>p{font-size:14px;margin-bottom:10px}.flow-intro-side .text-link{font-size:12px}.flow-star{display:none}
  .shelf-caption{gap:10px;margin-bottom:17px}.shelf-caption h2{font-size:24px}.shelf-caption>p{font-size:11px;max-width:15ch;line-height:1.3}.shelf-caption>span{font-size:10px}
  .flow-shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;align-items:stretch;margin:0 -22px;padding:0 22px 16px;scroll-padding-inline:22px;scrollbar-width:thin;scrollbar-color:var(--purple) transparent}
  .flow-shelf .card{flex:0 0 84%;scroll-snap-align:start;max-width:370px}.flow-shelf .card-photo{aspect-ratio:1.55}
  .flow-shelf .card h3{font-size:28px}.flow-shelf .card-content{padding:17px 19px 0}.flow-shelf .card-content>p:not(.card-meta){font-size:13px;line-height:1.5}.flow-shelf .card-actions{padding:15px 19px 20px}
  .flow-shelf .money{font-size:28px}.flow-shelf .card-actions .btn{font-size:13px}.flow-shelf .card-meta{font-size:10px}.flow-shelf .photo-tag .brand-logo{width:82px}
  .flow-interlude{grid-template-columns:1fr;padding:43px 24px;gap:36px;border-radius:30px;min-height:0}
  .flow-unfold{margin-top:18px}.flow-scene-copy h2{font-size:clamp(43px,10.5vw,64px)}.flow-scene-copy .eyebrow{font-size:9px;margin-bottom:19px}.flow-scene-copy>p:not(.eyebrow){font-size:14px;margin:20px 0}
  .flow-scene-copy .btn{font-size:12px;padding:12px 18px}.unfold-art{height:265px;max-width:390px;width:94%}.flow-ticket{width:80%;padding:20px}.flow-ticket>b{font-size:33px;margin:16px 0}.flow-ticket>span{font-size:8px}.ticket-front>div{font-size:9px}
  .orbit{width:310px;height:180px;left:-15px;top:40px}.spark-one{right:0;top:0;font-size:45px}.spark-two{left:-12px;font-size:49px}
  .flow-relax{padding:55px 22px 42px}.flow-relax h2{font-size:44px}.flow-section-aside{margin-top:22px;font-size:14px}.flow-section-aside p{margin-bottom:10px}.flow-relax .section-heading{margin-bottom:27px}
  .night-window{max-width:400px;justify-self:center;width:95%}.night-window>img{height:250px;border-radius:125px 125px 17px 17px}.night-window figcaption{font-size:10px}.night-spark{font-size:47px;right:23px;top:auto;bottom:270px}.flow-night{gap:27px;margin-bottom:0}
  .flow-home .catalogue{padding-top:55px}.flow-home .catalogue .section-heading h2{font-size:48px}.flow-home .gift-confidence{padding:24px;flex-direction:column;align-items:start;gap:15px}
  .flow-home .brand-strip{scroll-margin-top:145px}.flow-home .gifting{padding:55px 22px}.flow-home .gift-photo img{max-height:310px}
}
@media(max-width:360px){.flow-nav>a{padding:8px;font-size:10px}.flow-featured,.flow-relax{padding-left:18px;padding-right:18px}.flow-shelf{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-padding-inline:18px}.flow-intro h1{font-size:40px}.flow-star{display:none}.flow-scene-copy h2,.flow-relax h2{font-size:39px}.flow-ticket>b{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flow-home *,.flow-home *:before,.flow-home *:after{animation:none!important;transition:none!important}}
