/* Fleur de sel lesson. All rules scoped under .fds-* */
.fds-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fds-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* 0. the pond, full stage */
.fds-full { position: relative; flex: 1; width: 100%; min-height: 240px; padding: 8px 16px 16px; display: flex; }
.fds-full .fds-pond { flex: 1; width: 100%; height: 100%; min-height: 220px; border-radius: 22px; }
.fds-sun { position: absolute; top: -6px; right: 22px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #ffe08a 0 45%, rgba(255,201,77,.45) 46%, rgba(255,201,77,0) 70%); pointer-events: none; }
.fds-pond { display: block; touch-action: none; }

/* 1. cross-section */
.fds-cut { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.fds-clay { fill: #8a6a4d; }
.fds-water { fill: #6f9aa9; opacity: .9; }
.fds-bottom rect { fill: #b9b4ab; opacity: 0; transition: opacity .6s; }
.fds-s1 .fds-bottom rect { opacity: 1; }
.fds-bottom rect:nth-child(2n) { transition-delay: .3s; }
.fds-sinkers rect { fill: #e6e2da; opacity: 0; }
.fds-s1 .fds-sinkers rect { animation: fdsSink 1.6s ease-in both; }
@keyframes fdsSink { 0% { opacity: 0; translate: 0 -14px; } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 50px; } }
.fds-crust rect { fill: #fff; opacity: 0; transition: opacity .5s; }
.fds-s2 .fds-crust rect { opacity: 1; }
.fds-crust rect:nth-child(3n) { transition-delay: .2s; }
.fds-crust rect:nth-child(3n+1) { transition-delay: .4s; }
.fds-lb { font: 800 13px var(--sans); text-anchor: middle; opacity: 0; transition: opacity .5s; }
.fds-lb-top { fill: #fff; }
.fds-lb-bot { fill: #e2d6c8; }
.fds-s1 .fds-lb-bot, .fds-s2 .fds-lb-top { opacity: 1; }

/* 2. the rake */
.fds-rakesc .fds-pond { width: 100%; max-width: 360px; height: 250px; border-radius: 20px; }
.fds-basket { display: flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--dim); font: 600 13px var(--sans); }
.fds-basket b { font: 800 18px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.fds-basket.pop { animation: fdsPop .25s ease-out; }
@keyframes fdsPop { 50% { scale: 1.12; } }
.fds-gust .fds-pond { animation: fdsShake .5s ease-in-out 2; }
@keyframes fdsShake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

/* 3. the afternoons */
.fds-days { width: 100%; }
.fds-days .choice svg { width: 64px; height: 54px; }

/* 4. a kilo and the price */
.fds-kilo { position: relative; width: 100%; max-width: 340px; }
.fds-kilo img { display: block; width: 100%; }
.fds-kg { position: absolute; right: 6px; bottom: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(20,16,32,.82); border: 1px solid var(--gold); text-align: center; }
.fds-kg b { display: block; font: 800 17px var(--sans); color: var(--gold); }
.fds-kg span { font: 600 12px var(--sans); color: var(--dim); }
.fds-tins { display: flex; justify-content: center; gap: 26px; }
.fds-tin { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; }
.fds-can { position: relative; width: 74px; height: 84px; border-radius: 10px 10px 14px 14px; background: linear-gradient(90deg, #cfd6e2, #f4f6fa 40%, #b8c0cd); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.fds-can i { position: absolute; left: 8px; right: 8px; top: 22px; height: 34px; border-radius: 6px; background: #3b6fd0; }
.fds-fleur .fds-can { background: linear-gradient(90deg, #d9c39d, #f7ead2 40%, #bfa47a); }
.fds-fleur .fds-can i { background: radial-gradient(circle at 30% 40%, #fff 0 2px, transparent 3px) 0 0 / 8px 8px, #7a5a3a; }
.fds-tin b { margin-top: 6px; font: 800 14px var(--sans); color: var(--text); }
.fds-g { font: 600 12.5px var(--sans); color: var(--dim); }
.fds-price { font: 800 24px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.fds-fleur.lit .fds-price { color: var(--gold); }
.fds-one { animation: fdsPop .4s ease-out; }

/* 5. soup and tomato */
.fds-dishes { display: flex; justify-content: center; gap: 14px; width: 100%; }
.fds-dish { position: relative; width: 148px; padding: 6px 4px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--text); }
.fds-dish:disabled { cursor: default; color: var(--text); opacity: 1; }
.fds-dish img { width: 128px; height: 124px; object-fit: contain; }
.fds-dish b { font: 800 14px var(--sans); }
.fds-pinch { position: absolute; left: 4px; right: 4px; top: 6px; height: 124px; pointer-events: none; }
.fds-pinch i { position: absolute; width: 7px; height: 7px; border-radius: 1.5px; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.8); transition: opacity 1.2s, scale 1.2s; }
.fds-dish.melt .fds-pinch i { opacity: 0; scale: .2; }
.fds-dish.glint .fds-pinch i { animation: fdsGlint 1s ease-in-out 2; }
@keyframes fdsGlint { 50% { box-shadow: 0 0 10px #fff, 0 0 2px #fff; scale: 1.25; } }

/* 7. Portugal */
.fds-story { width: 100%; max-width: 360px; margin: 0; }
.fds-story img { display: block; width: 100%; border-radius: 14px; }
.fds-story figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }

@media (max-height: 700px) {
  .fds-rakesc .fds-pond { height: 210px; }
  .fds-cut { max-width: 300px; }
  .fds-dish img { width: 112px; height: 104px; }
  .fds-pinch { height: 104px; }
  .fds-kilo, .fds-story { max-width: 290px; }
}