/* aircuddle.com, new design (draft 2): calm and guided. A background that breathes, glass surfaces, big serif words, one
   thing per screen; phone first (the dock at the bottom is within reach of the thumb). */
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-latin.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --paper: #f6f2ec; --ink: #16232d; --soft: #56636c; --line: rgba(22, 35, 45, .1);
  --sky: #2b8ccb; --deep: #133b58; --night: #0d1f2f;
  --mint: #cde9dd; --peach: #f6d3c1; --lav: #dcd8f4; --sun: #f4e6bf; --blue: #d4e9f6;
  --breath-1: rgba(212, 233, 246, .7); --breath-2: rgba(43, 140, 203, .18);
  --gift: #c4553b; --gift-soft: rgba(247, 221, 210, .75);
  --glass: rgba(255, 255, 255, .58); --glass-line: rgba(255, 255, 255, .75);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 28px; --dock: 112px;
  /* buttons, chosen answers, switches: the site's colours; the guide and the kit make them pastel (themes below) */
  --btn-bg: #133b58; --btn-ink: #fff; --btn-shadow: rgba(19, 59, 88, .25);
  --on-bg: #133b58; --on-ink: #fff; --on-line: #133b58; --switch-on: #2c8a5b; --bar: #2b8ccb;
  /* one container for the whole site: 1440 px wide at most, the same side margin everywhere */
  --wide: 1440px; --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--text); padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom)); overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, legend { margin: 0; line-height: 1.12; font-weight: 400; }
p { margin: 0 0 .8em; }
em { font-style: italic; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--glass-line); box-shadow: 0 10px 40px rgba(22, 35, 45, .07); }
.muted { color: var(--soft); }
.tiny { font-size: 14px; color: var(--soft); margin-top: 10px; }
.center { text-align: center; display: flex; justify-content: center; gap: 6px; align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.eyebrow { font: 700 13px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 14px; }
.display, .h1 { font: 380 46px/1.04 var(--display); letter-spacing: -.02em; }
.display em, .h1 em, h1 em, legend em { color: var(--sky); font-weight: 340; }
.h1 { margin-bottom: 14px; }
.h2 { font: 400 32px/1.1 var(--display); letter-spacing: -.01em; margin-bottom: 10px; }
.h3 { font: 800 19px/1.2 var(--text); margin: 28px 0 12px; }
.lead { font-size: 19px; color: var(--soft); max-width: 34em; }
.sub { color: var(--soft); margin-bottom: 22px; }
.wrap, .container { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.block { padding-top: 48px; padding-bottom: 8px; }

/* the background that breathes */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55; animation: drift 38s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: radial-gradient(circle, var(--blue) 0, transparent 62%); top: -30vmax; left: -20vmax; }
.aurora i:nth-child(2) { background: radial-gradient(circle, var(--peach) 0, transparent 62%); bottom: -35vmax; right: -25vmax; animation-duration: 46s; }
.aurora i:nth-child(3) { background: radial-gradient(circle, var(--mint) 0, transparent 60%); top: 30%; left: 40%; width: 50vmax; height: 50vmax; animation-duration: 52s; opacity: .45; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.12); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  background: var(--btn-bg); color: var(--btn-ink); font: 800 17px var(--text); text-decoration: none; cursor: pointer; box-shadow: 0 10px 30px var(--btn-shadow); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px var(--btn-shadow); }
.btn-lg { min-height: 62px; padding: 0 34px; font-size: 18px; }
.btn-block { width: 100%; }
.btn-gift { background: var(--gift); color: #fff; box-shadow: 0 10px 30px rgba(196, 85, 59, .28); }
.btn-buy { background: var(--deep); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-text { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; font: 800 17px var(--text); color: var(--ink); text-decoration: none; cursor: pointer; border-bottom: 2px solid var(--sky); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; text-decoration: none; color: var(--deep); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #fff; font: 800 15px var(--text); color: var(--ink); }
.pill .i { width: 18px; height: 18px; }

/* header, draft note, dock */
.draft { margin: 0; text-align: center; font-size: 12px; letter-spacing: .04em; color: var(--soft); padding: 6px 12px 0; }
.top { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter); }
.top .logo { justify-self: start; }
.top::before { content: ""; position: absolute; top: 0; bottom: -34px; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none; transition: opacity .35s;
  background: linear-gradient(rgba(246, 242, 236, .72), rgba(246, 242, 236, .5) 62%, rgba(246, 242, 236, 0));
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); }
/* the home: the header floats over the film, without its band */
.is-home .top { position: fixed; left: 0; right: 0; }
.is-home .top:not(.solid)::before { background: linear-gradient(rgba(246, 242, 236, .45), rgba(246, 242, 236, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.logo img { height: 28px; width: auto; }
.top-links { display: none; }
.top-cart { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--gift); color: #fff; font: 800 12px/20px var(--text); text-align: center; padding: 0 5px; }
.dock { position: fixed; z-index: 50; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 520px); height: 70px;
  display: flex; align-items: center; justify-content: space-around; padding: 0 8px; border-radius: 26px; }
.dock a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; color: var(--soft); text-decoration: none; font: 800 11px var(--text); }
.dock a.on { color: var(--deep); }
.dock .count { top: 0; right: 2px; }
.dock .dock-kit { color: var(--deep); }
.dock .fab { width: 54px; height: 54px; margin: -30px 0 2px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: #fff; box-shadow: 0 10px 24px rgba(19, 59, 88, .35), 0 0 0 5px rgba(255, 255, 255, .7); }
.dock .fab .i { width: 26px; height: 26px; }
.toast { position: fixed; z-index: 60; left: 12px; right: 12px; top: 12px; display: flex; gap: 10px; align-items: center; border-radius: 20px; padding: 14px 18px; font-size: 16px; animation: drop .35s ease-out, out .4s ease-in 4.5s forwards; }
.toast a { margin-left: auto; font-weight: 800; color: var(--deep); }
.toast .i { color: #2c8a5b; }
@keyframes drop { from { transform: translateY(-130%); } }
@keyframes out { to { transform: translateY(-150%); opacity: 0; visibility: hidden; } }

/* the breathing circle */
.breath { position: relative; width: 210px; height: 210px; margin: 0 auto 26px; display: grid; place-items: center; }
.breath span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), var(--breath-1) 45%, var(--breath-2) 75%, transparent 76%);
  animation: breathe 8s ease-in-out infinite; }
.breath span:nth-child(2) { inset: -26px; opacity: .45; animation-delay: .35s; }
.breath span:nth-child(3) { inset: -56px; opacity: .22; animation-delay: .7s; }
.breath em { position: relative; font: italic 340 22px var(--display); color: var(--deep); transition: opacity .8s; }
.breath-s { width: 96px; height: 96px; margin-bottom: 18px; }
.breath-s span:nth-child(2) { inset: -14px; } .breath-s span:nth-child(3) { inset: -28px; }
@keyframes breathe { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .breath span, .aurora i, .bubble, .m-card, .stars { animation: none !important; } }

/* home */
.welcome { min-height: calc(100svh - 90px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 22px 70px; position: relative; }
.welcome h1 { font: 360 52px/1 var(--display); letter-spacing: -.025em; margin-bottom: 18px; }
.welcome .lead { margin: 0 auto 28px; }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scroll-cue { position: absolute; bottom: 18px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--soft); animation: cue 2s infinite; }
@keyframes cue { to { transform: translateY(14px); opacity: 0; } }
.screen { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 72px var(--gutter) 24px; }
.air-screen { display: grid; gap: 28px; align-items: center; }
.air-visual { position: relative; height: 300px; perspective: 900px; }
.slab { position: absolute; left: 8%; right: 8%; height: 70px; border-radius: 22px; transform: rotateX(58deg) rotateZ(-8deg); box-shadow: 0 30px 40px rgba(22, 35, 45, .08); }
.s1 { top: 40px; background: repeating-linear-gradient(90deg, rgba(43, 140, 203, .35) 0 5px, rgba(255, 255, 255, .7) 5px 14px), rgba(255, 255, 255, .5); }
.s2 { top: 120px; background: linear-gradient(120deg, #fffaf2, var(--sun)); }
.s3 { top: 200px; background: linear-gradient(120deg, #e9eef2, #cfd9e1); }
.bubble { position: absolute; bottom: 30px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(43, 140, 203, .5)); opacity: 0; animation: rise 5s ease-in infinite; }
.b1 { left: 14%; } .b2 { left: 24%; animation-delay: 1.2s; } .b3 { left: 34%; animation-delay: 2.6s; } .b4 { left: 45%; animation-delay: .6s; } .b5 { left: 55%; animation-delay: 3.3s; }
.b6 { left: 64%; animation-delay: 1.8s; } .b7 { left: 73%; animation-delay: 4.1s; } .b8 { left: 82%; animation-delay: 2.2s; } .b9 { left: 40%; animation-delay: 3.8s; width: 9px; height: 9px; }
@keyframes rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-270px) scale(1.3); opacity: 0; } }
.big-num { font: 300 120px/.9 var(--display); letter-spacing: -.04em; margin: 0; color: var(--deep); }
.big-num small { font-size: 60px; }
.air-txt h2 { font: 380 34px/1.1 var(--display); margin: 6px 0 16px; }
.air-txt h2 em { color: var(--sky); }
.moments-screen .display { margin-bottom: 26px; }
.m-track { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: -4px calc(-1 * var(--gutter)) -34px; padding: 30px var(--gutter) 56px; scrollbar-width: none; }
.m-track::-webkit-scrollbar { display: none; }
.m-card { position: relative; scroll-snap-align: center; height: 480px; border-radius: 34px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 16px 34px rgba(22, 35, 45, .1); transition: transform .4s; }
.m-card:hover { transform: translateY(-4px); }
.m-photo, .m-photo .ph { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.m-txt { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; border-radius: 24px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.m-txt h3 { font: 400 30px var(--display); }
.m-txt p { font-size: 16px; color: var(--soft); margin: 2px 0 12px; }
.m-card.is-night .ph { background: radial-gradient(circle at 70% 20%, #f7e9b8 0 22px, transparent 23px), radial-gradient(circle at 30% 80%, #22476a, transparent 60%), linear-gradient(170deg, #0d1f2f, #1d3e5e); }
.m-card.is-night .ph-note { background: rgba(255, 255, 255, .14); color: #dfe8f0; }
.m-card.is-night .m-txt { background: rgba(13, 31, 47, .55); color: #fff; }
.m-card.is-night .m-txt p { color: #c8d6e2; }
.seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.seal { min-width: 0; overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; text-align: center; box-shadow: 0 10px 30px rgba(22, 35, 45, .07); }
.seal img { max-height: 42%; max-width: 70%; width: auto; object-fit: contain; }
.seal span { font: 800 11px/1.2 var(--text); color: var(--soft); }
/* the facts of the home: soft colours, an icon, the number big, one line; on the phone the first wide, the other two side by side */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fact { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 18px 18px 20px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 10px 30px rgba(22, 35, 45, .06); }
.fact.tone-sky { background: linear-gradient(150deg, #eef6fc, #dcecf8); } .fact.tone-sage { background: linear-gradient(150deg, #eef7f2, #dbefe3); } .fact.tone-sand { background: linear-gradient(150deg, #fbf5ea, #f4e6cf); }
.fact-bg { position: absolute; z-index: -1; right: -22px; bottom: -26px; width: 128px; height: 128px; fill: none; stroke: var(--deep); stroke-width: 1.2; opacity: .07; }
.fact-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sky); box-shadow: 0 6px 16px rgba(22, 35, 45, .08); margin-bottom: 14px; }
.fact.tone-sage .fact-ico { color: #3b8f70; } .fact.tone-sand .fact-ico { color: #b9853b; }
.fact-num { font: 380 42px/1 var(--display); letter-spacing: -.02em; color: var(--deep); }
.fact-num small { font-size: .6em; margin-left: 2px; }
.fact p { margin: 8px 0 0; color: var(--soft); font-size: 15px; line-height: 1.4; }
.fact p strong { display: block; color: var(--ink); font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.fact-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.fact-wide .fact-ico { grid-row: 1 / 3; margin: 0; width: 56px; height: 56px; }
.fact-wide .fact-num { font-size: 50px; }
.fact-wide p { margin-top: 4px; }
/* the certifications to swipe, faded at the edges */
.cert-rail { margin: 26px calc(-1 * var(--gutter)) 26px; }
.cert-rail-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: 6px var(--gutter) 14px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent); }
.cert-rail-track::-webkit-scrollbar { display: none; }
.cert-tile { flex: none; width: 124px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); text-align: center; }
.cert-tile-logo { width: 124px; height: 104px; border-radius: 24px; background: #fff; display: grid; place-items: center; padding: 16px; box-shadow: 0 8px 22px rgba(22, 35, 45, .07); }
.cert-tile-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; filter: grayscale(1) contrast(1.1); opacity: .75; }
.cert-tile-txt { font: 800 13px/1.3 var(--text); color: var(--soft); }
.cert-tile-italy .cert-tile-logo img { max-height: 72px; filter: none; opacity: 1; }
.cert-tile-italy .cert-tile-txt { color: var(--ink); }
.reviews-ph { margin-top: 12px; border-radius: 24px; padding: 18px 22px; display: flex; gap: 12px; align-items: center; color: var(--soft); font-size: 15px; border-style: dashed; }
.best-screen .lead { margin-bottom: 22px; }
.float-track { display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)) 18px; padding: 8px var(--gutter) 24px; scrollbar-width: none; }
.float-track::-webkit-scrollbar { display: none; }
.float-track > * { scroll-snap-align: start; }
.guide-screen { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 96px; }
.guide-screen .display { margin-bottom: 14px; }
.guide-screen .lead { margin: 0 auto 26px; }
/* the gift button: warm gradient, the gift that sways, a light that passes over it */
.gift-line { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; padding: 10px 14px 10px 10px; min-height: 64px;
  border: 0; border-radius: 999px; cursor: pointer; text-align: left; color: #fff; font-family: var(--text);
  background: linear-gradient(115deg, #c9503a 0%, #e0714f 45%, #f0a07a 100%); box-shadow: 0 14px 30px rgba(196, 85, 59, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .25s, box-shadow .25s; }
.gift-line:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(196, 85, 59, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gift-line:active { transform: scale(.98); }
.gift-line::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: gl-shine 4.5s ease-in-out infinite 1s; }
.gl-ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.gl-ico::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: gl-ring 2.6s ease-out infinite; }
.gl-ico .i { width: 24px; height: 24px; stroke-width: 2; animation: gl-sway 2.6s ease-in-out infinite; transform-origin: 50% 85%; }
.gl-txt { display: grid; line-height: 1.15; }
.gl-txt b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.gl-txt small { font-size: 13px; font-weight: 700; opacity: .9; margin-top: 3px; }
.gl-go { flex: none; width: 34px; height: 34px; margin-left: 6px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #c9503a; transition: transform .25s; }
.gl-go .i { width: 18px; height: 18px; stroke-width: 2.2; }
.gift-line:hover .gl-go { transform: translateX(3px); }
@keyframes gl-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes gl-sway { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-14deg); } 76% { transform: rotate(12deg); } 84% { transform: rotate(-7deg); } 92% { transform: rotate(4deg); } }
@keyframes gl-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.buy-extras > * { justify-self: start; }
@media (max-width: 759px) { .gift-line { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .gift-line::after, .gl-ico::before, .gl-ico .i { animation: none; } }

.row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }

/* product cards */
.card { display: block; border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-line); box-shadow: 0 8px 24px rgba(22, 35, 45, .06); transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22, 35, 45, .09); }
.card-img { position: relative; margin: 10px; aspect-ratio: 1; border-radius: 22px; background: #fff; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.badge { position: absolute; top: 10px; left: 10px; background: var(--deep); color: #fff; font: 800 12px var(--text); padding: 5px 11px; border-radius: 999px; }
.badge-inline { position: static; display: inline-block; margin-bottom: 12px; }
.card { display: flex; flex-direction: column; }
.card-txt { padding: 4px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.card-txt h3 { font: 400 23px/1.1 var(--display); }
.card-txt p { font-size: 15px; color: var(--soft); margin: 6px 0 0; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-txt .price { color: var(--ink); font: 800 18px var(--text); margin-top: auto; padding-top: 10px; min-height: 0; display: block; }
.price small { font-weight: 400; color: var(--soft); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid .card-img { margin: 6px; border-radius: 18px; }
.grid .card-txt { padding: 2px 12px 14px; }
.grid .card-txt h3 { font-size: 19px; }
.grid .card-txt p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); text-decoration: none; font: 800 15px var(--text); }
.chip.on { background: var(--deep); color: #fff; border-color: var(--deep); }
.sticky-chips { position: sticky; top: 66px; z-index: 30; }

/* the photos still to make */
.ph { position: relative; width: 100%; border-radius: var(--r); overflow: hidden; display: flex; align-items: flex-start; }
.ph::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -10%; bottom: -15%; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.ph-real::after { display: none; }
.ph-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-card .ph-real img { object-position: center 30%; }
.m-card.is-night .ph-real { background: var(--night); }
.m-card:has(.ph-real) .m-txt { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 70px 20px 20px; color: #fff;
  background: linear-gradient(rgba(13, 31, 47, 0), rgba(13, 31, 47, .55) 40%, rgba(13, 31, 47, .82)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.m-card:has(.ph-real) .m-txt p { color: rgba(255, 255, 255, .85); }
.ph-sky { background: linear-gradient(150deg, #e3f1fa, #b9dbf0); }
.ph-sage { background: linear-gradient(150deg, #e6f2ec, #bcdccd); }
.ph-sand { background: linear-gradient(150deg, #fbf3e4, #ead6b3); }
.ph-blush { background: linear-gradient(150deg, #fcede6, #f0c9b8); }
.ph-note { position: relative; z-index: 1; display: flex; gap: 8px; align-items: flex-start; margin: 14px; padding: 9px 13px; border-radius: 14px; background: rgba(255, 255, 255, .7); color: var(--soft); font-size: 13px; line-height: 1.35; max-width: 88%; }
.ph-note .i { width: 17px; height: 17px; margin-top: 1px; }

/* the guide */
.is-guide .foot, .is-guide .dock { display: none; }
.is-guide { padding-bottom: 0; }
.guide { max-width: 640px; margin: 0 auto; padding: 0 22px 40px; min-height: calc(100svh - 90px); display: flex; flex-direction: column; }
.guide-bar { display: flex; align-items: center; gap: 14px; padding: 8px 0 18px; }
.guide-back { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--glass); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.guide-progress { flex: 1; height: 6px; border-radius: 3px; background: rgba(22, 35, 45, .08); overflow: hidden; }
.guide-progress span { display: block; height: 100%; width: 0; background: var(--bar); border-radius: 3px; transition: width .5s; }
.step { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.step legend { font: 360 38px/1.08 var(--display); letter-spacing: -.02em; margin: 0 auto 28px; padding: 0; float: left; width: 100%; }
.step legend + * { clear: both; }
.js .step { display: none; margin: auto 0; }
.js .step.on { display: flex; animation: up .5s ease-out; }
@keyframes up { from { opacity: 0; transform: translateY(20px); } }
.big-input { width: 100%; border: 0; border-bottom: 2px solid var(--line); background: transparent; text-align: center; font: 360 36px var(--display); color: var(--ink); padding: 10px 0; margin-bottom: 30px; }
.big-input:focus { outline: none; border-color: var(--sky); }
.step-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; width: 100%; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.tiles-1 { grid-template-columns: 1fr; }
.tile { position: relative; cursor: pointer; }
.tile input { position: absolute; opacity: 0; }
.tile > span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); font: 800 17px var(--text); box-shadow: 0 8px 26px rgba(22, 35, 45, .06); transition: background .2s, color .2s, transform .2s; }
.tile-icon > span { flex-direction: column; min-height: 118px; }
.tile-icon .i { width: 34px; height: 34px; color: var(--sky); }
.tile > span { border: 2px solid transparent; }
.tile input:checked + span { background: var(--on-bg); color: var(--on-ink); border-color: var(--on-line); transform: scale(1.02); }
.tile input:checked + span .i { color: var(--on-ink); }
.tile input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.tile small { font-weight: 400; opacity: .7; }
.tile-wide { grid-column: 1 / -1; }
.tile-wide.tile-icon > span { flex-direction: row; min-height: 72px; }
.hint { color: var(--soft); font-size: 15px; margin-top: 16px; }
.guide-end { margin-top: auto; }
.js .guide-end { display: none; }
.js .guide.ready .guide-end { display: block; animation: up .4s ease-out; }
.err { color: #b42318; font-size: 15px; margin: 8px 0; }

/* the kit */
.kit-head { text-align: center; padding: 20px 22px 10px; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.kit-head .display { margin-bottom: 14px; }
.kit-head .lead { margin: 0 auto 6px; }
.kit { max-width: 720px; margin: 0 auto; padding: 10px 16px 0; }
.kit-group { margin-top: 30px; }
.kit-place { display: flex; gap: 10px; align-items: center; font: 400 28px var(--display); margin: 0 6px 14px; }
.kit-place .i { width: 30px; height: 30px; color: var(--sky); }
.slot { position: relative; border-radius: var(--r); padding: 16px; margin-bottom: 14px; transition: opacity .3s, filter .3s; }
.slot.off .slot-body, .slot.off .slot-alts { opacity: .45; filter: grayscale(.7); }
.slot-title { font: 800 13px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin: 2px 70px 12px 4px; }
.slot-body { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: start; }
.slot-body[hidden] { display: none; }
.slot-img { border-radius: 20px; background: #fff; aspect-ratio: 1; overflow: hidden; }
.slot-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.slot-txt h3 { font: 400 23px/1.1 var(--display); }
.slot-txt p { font-size: 15px; color: var(--soft); margin: 4px 0 10px; line-height: 1.4; }
.slot-price { font-weight: 800; color: var(--ink) !important; font-size: 17px !important; }
.slot-price small { font-weight: 700; color: var(--soft); font-size: 14px; margin-left: 4px; }
.slot-opts { grid-column: 1 / -1; gap: 8px; margin-top: -2px; }
.slot-opts .opt > span:not(.sr) { min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
.slot-opts .opt-swatch .sw { width: 34px; height: 34px; }
.slot-alts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.alt { border: 1px solid var(--line); background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 8px 14px; font: 800 14px var(--text); color: var(--ink); cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.alt small { font-weight: 700; color: var(--sky); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.alt.on { background: var(--on-bg); color: var(--on-ink); border-color: var(--on-line); }
.alt.on small { color: var(--on-ink); opacity: .75; }
.switch { position: absolute; top: 14px; right: 14px; width: 54px; height: 32px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: rgba(22, 35, 45, .15); transition: background .25s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .25s; }
.switch input:checked + span { background: var(--switch-on); }
.switch input:checked + span::after { transform: translateX(22px); }
.is-kit .dock { display: none; }
.kit-total { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 0; padding: 10px 10px 10px 20px; border-radius: 26px; background: rgba(255, 255, 255, .82); }
.kit-total small { display: block; color: var(--soft); font-size: 13px; }
.kit-total b { font: 800 21px var(--text); white-space: nowrap; }
.kit-total .btn { padding: 0 20px; font-size: 16px; }
.kit-gift { text-align: center; padding: 10px 22px 0; }

/* moment */
.scene-wrap { position: relative; display: flex; flex-direction: column; width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter) 0; }
.scene-wrap .spot-cards { order: 2; } .scene-wrap .scene-txt { order: 3; }
.spot-cards .gift-line { margin-top: 16px; }
.scene { position: relative; margin: 0; border-radius: 36px; overflow: hidden; box-shadow: 0 30px 60px rgba(22, 35, 45, .14); }
.scene .ph { border-radius: 0; }
.spot { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.spot span { position: absolute; inset: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .4), 0 4px 14px rgba(0, 0, 0, .2); }
.spot span::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--sky); }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: pulse 2.6s infinite; }
.spot.on span { box-shadow: 0 0 0 9px rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 0, 0, .2); }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.scene-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(13, 31, 47, .65); color: #fff; font-size: 14px; padding: 7px 16px; border-radius: 999px; margin: 0; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.spot-cards { position: relative; z-index: 2; margin: -54px 16px 0; }
.spot-card { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 26px; color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--glass-line); box-shadow: 0 16px 40px rgba(22, 35, 45, .14); }
.spot-card[hidden] { display: none; }
.spot-card img { width: 78px; height: 78px; border-radius: 18px; object-fit: contain; background: #fff; padding: 4px; }
.spot-card span { flex: 1; display: grid; }
.spot-card b { font: 400 21px var(--display); }
.spot-card small { color: var(--soft); font-size: 14px; line-height: 1.3; }
.spot-card em { font-style: normal; font-weight: 800; margin-top: 4px; }
.scene-txt { padding-top: 34px; }
.scene-txt .display { margin-bottom: 14px; }
.moments-s { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 14px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
.moment { position: relative; color: var(--ink); text-decoration: none; }
.moment-txt { padding: 12px 6px 0; }
.moment-txt h3 { font: 400 24px var(--display); }
.moment-txt p { color: var(--soft); font-size: 15px; margin: 2px 0 0; }
.gift-band-in { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border-radius: var(--r); padding: 26px; background: var(--gift-soft); }
.gift-art { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--gift); display: grid; place-items: center; }
.gift-art .i { width: 30px; height: 30px; }

/* the night of "la nanna" */
.is-night { background: var(--night); color: #eef3f7; }
.is-night .aurora { opacity: .5; }
.is-night .aurora i:nth-child(1) { background: radial-gradient(circle, #1f4a70 0, transparent 62%); }
.is-night .aurora i:nth-child(2) { background: radial-gradient(circle, #2b2f5e 0, transparent 62%); }
.is-night .aurora i:nth-child(3) { background: radial-gradient(circle, #163a4d 0, transparent 60%); }
.is-night .top::before { background: linear-gradient(rgba(13, 31, 47, .78), rgba(13, 31, 47, .55) 62%, rgba(13, 31, 47, 0)); }
.is-night .logo img { filter: brightness(0) invert(1); opacity: .92; }
.is-night .top-cart, .is-night .chip:not(.on) { color: #eef3f7; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.is-night .draft, .is-night .lead, .is-night .sub, .is-night .moment-txt p { color: #b9c8d5; }
.is-night .eyebrow, .is-night h1 em { color: #9fd0f0; }
.is-night .scene .ph { background: radial-gradient(circle at 78% 18%, #f6e8b5 0 34px, transparent 35px), radial-gradient(circle at 30% 85%, #24507a, transparent 55%), linear-gradient(175deg, #0b1c2b, #1b3c5c); }
.is-night .scene .ph-note { background: rgba(255, 255, 255, .12); color: #d5e1ea; }
.stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 26% 46%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 14%, #fff, transparent),
  radial-gradient(1px 1px at 58% 38%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 62%, #fff, transparent), radial-gradient(1px 1px at 84% 34%, #fff, transparent), radial-gradient(1px 1px at 90% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 8% 64%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate; opacity: .8; }
@keyframes twinkle { to { opacity: .35; } }
.is-night .h2, .is-night .display { color: #fff; }
.is-night .display em { color: #9fd0f0; }
.is-night .muted, .is-night .lead { color: #b9c8d5; }
.is-night .btn-text { color: #fff; }
.is-night .h-nav button { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.is-night .h-nav button:hover { background: #fff; color: var(--night); }
.is-night .spot-card { background: rgba(255, 255, 255, .94); color: var(--ink); }
.is-night .spot-card small { color: var(--soft); }
.is-night .card { color: var(--ink); }
.scene:has(.ph-real) .stars { display: none; }
.is-night .card { background: rgba(255, 255, 255, .94); }
.buy-bar .btn { padding: 0 18px; font-size: 16px; }
.is-night .foot { background: rgba(255, 255, 255, .05); color: #dfe8ef; border-color: rgba(255, 255, 255, .08); }
.is-night .gift-band-in { background: rgba(247, 221, 210, .12); color: #f6dacd; }

/* product */
.crumbs { font-size: 15px; color: var(--soft); padding: 6px var(--gutter) 0; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; }
.crumbs a { color: var(--soft); }
.pdp { display: grid; gap: 22px; padding-top: 12px; }
.gallery { margin: 0; }
.gallery-frame { border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 8px 26px rgba(22, 35, 45, .07); }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { flex: none; width: 100%; aspect-ratio: 1; object-fit: contain; scroll-snap-align: center; background: #fff; padding: 12px; }
.gallery-dots { display: flex; justify-content: center; gap: 0; padding: 8px 0 0; }
.gallery-dots button { position: relative; width: 16px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gallery-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgba(22, 35, 45, .18); transition: width .3s, background .3s; }
.gallery-dots button:hover::before { background: rgba(22, 35, 45, .4); }
.gallery-dots button.on { width: 30px; } .gallery-dots button.on::before { width: 20px; background: var(--deep); }
.buy h1 { font: 360 42px/1.04 var(--display); letter-spacing: -.02em; }
.buy .lead { margin: 8px 0 12px; font-size: 18px; }
.proof { display: flex; align-items: center; gap: 8px; color: var(--gift); font-size: 15px; font-weight: 800; }
.proof .i { width: 18px; height: 18px; }
.buy-form .price { font: 800 30px var(--text); margin: 8px 0 16px; }
.variants { border: 0; padding: 0; margin: 0 0 14px; }
.variants legend { font: 800 16px var(--text); margin-bottom: 10px; }
.variants legend span { font-weight: 400; color: var(--soft); margin-left: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt > span:not(.sr) { display: inline-flex; align-items: center; min-height: 50px; padding: 0 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); font: 700 16px var(--text); }
.opt input:checked + span { background: var(--on-bg); color: var(--on-ink); box-shadow: inset 0 0 0 2px var(--on-line); }
.opt input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.opt-swatch .sw { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.opt-swatch input:checked + .sw { background: inherit; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--on-line); }
.howto { margin: 18px 0 24px; }
.howto[open] summary { margin-bottom: 14px; }
.buy-extras { display: grid; gap: 16px; margin-top: 18px; }
.buy-extras .gift-line { margin-top: 4px; }
.measure { margin: 0; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 8px 26px rgba(22, 35, 45, .06); }
.measure svg { width: 100%; height: auto; display: block; font-family: var(--text); }
.measure figcaption { color: var(--soft); font-size: 15px; line-height: 1.5; margin-top: 10px; }
.measure figcaption b { color: var(--ink); }
.howto summary, .more summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; align-items: center; gap: 8px; }
.howto summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
.howto p { color: var(--soft); font-size: 16px; margin: 10px 0; }
.buy-bar { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border-radius: 26px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--glass-line); box-shadow: 0 14px 40px rgba(22, 35, 45, .16); }
.buy-bar-price { font: 800 20px var(--text); }
.buy-bar .btn { flex: 1; }
.is-product .dock { display: none; }
.ship-note, .custom { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--soft); }
.custom { align-items: flex-start; border-radius: 20px; padding: 14px 16px; background: var(--glass); border: 1px solid var(--glass-line); }
.buy-form .custom { margin: 0 0 18px; }
.custom b { color: var(--ink); font-weight: 800; }
.custom a { white-space: nowrap; }
.buy-form .twin { margin: 0 0 18px; align-items: center; color: var(--soft); text-decoration: none; }
.twin b { display: block; }
.twin span { flex: 1; }
.twin .i { flex: none; color: var(--sky); }
.twin:hover .twin-go { transform: translateX(3px); }
.twin-go { transition: transform .25s; }
/* a box on the product page (the Top Safe that travels with you) */
.note-box { border-radius: 28px; padding: 22px; background: linear-gradient(150deg, #fbf5ea, #f4e6cf); }
.note-box h2 { display: flex; align-items: center; gap: 14px; font: 700 24px var(--display); margin: 0 0 12px; }
.note-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #b9853b; box-shadow: 0 6px 16px rgba(22, 35, 45, .08); }
.note-ico .i { width: 24px; height: 24px; }
.note-box p { margin: 0; font-size: 17px; color: var(--soft); max-width: 62ch; }
.points { display: grid; gap: 12px; }
.point { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; border-radius: 24px; padding: 18px; background: var(--glass); border: 1px solid var(--glass-line); }
.point .i { grid-row: span 2; width: 32px; height: 32px; color: var(--sky); }
.point span { color: var(--soft); font-size: 16px; }
.certs { display: flex; flex-wrap: wrap; gap: 10px; }
.cert { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 16px; padding: 8px 14px; font: 800 13px var(--text); box-shadow: 0 6px 20px rgba(22, 35, 45, .06); }
.cert img { height: 30px; width: auto; }
.more details { border-top: 1px solid var(--line); padding: 18px 4px; }
.more details:last-child { border-bottom: 1px solid var(--line); }
.more summary { font: 400 23px var(--display); justify-content: space-between; }
.more summary::after { content: "+"; font: 300 28px var(--text); }
.more details[open] summary::after { content: "−"; }
.more p { color: var(--soft); font-size: 17px; margin: 12px 0 0; }

/* cart and checkout */
.cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cart > * { min-width: 0; } /* the row of suggestions scrolls inside, it never widens the page */
.freebar { border-radius: 22px; padding: 14px 18px; margin-bottom: 14px; background: var(--glass); border: 1px solid var(--glass-line); }
.freebar p { margin: 0 0 10px; font-size: 16px; }
.freebar.ok p { margin: 0; color: #2c8a5b; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.freebar-track { height: 8px; border-radius: 4px; background: rgba(22, 35, 45, .08); overflow: hidden; }
.freebar-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--deep)); border-radius: 4px; }
.lines { list-style: none; padding: 0; margin: 0; }
.line { display: grid; grid-template-columns: 86px 1fr auto; gap: 14px; align-items: start; padding: 14px; margin-bottom: 10px; border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-line); }
.line img { width: 86px; height: 86px; border-radius: 18px; object-fit: contain; background: #fff; padding: 4px; }
.line-txt a { color: var(--ink); text-decoration: none; }
.line-txt b { font: 400 21px var(--display); }
.line-txt small { display: block; color: var(--soft); font-size: 15px; }
.qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; background: #fff; border-radius: 999px; }
.qty form { margin: 0; }
.qty button { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.qty .i { width: 18px; height: 18px; }
.qty span { min-width: 22px; text-align: center; font-weight: 800; }
.line-price { font-size: 17px; }
.summary { border-radius: var(--r); padding: 22px; align-self: start; background: rgba(255, 255, 255, .75); border: 1px solid var(--glass-line); box-shadow: 0 14px 40px rgba(22, 35, 45, .08); }
.summary .h3 { margin-top: 0; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 16px 0; font-size: 17px; }
.totals dd { margin: 0; text-align: right; }
.ship-zone { display: flex; gap: 8px; align-items: flex-start; margin: -6px 0 14px; }
.ship-zone .i { flex: none; margin-top: 2px; }
.totals .minus { color: var(--gift); font-weight: 800; }
.totals .tot { font-weight: 800; font-size: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.totals dt.tot { margin-right: -12px; padding-right: 12px; } /* one line over the total, across the gap between the columns */
.gift-inline { background: var(--gift-soft); border-radius: 22px; padding: 16px; margin-bottom: 8px; }
.gift-inline-head { display: flex; gap: 8px; align-items: center; color: var(--gift); }
.gift-inline .muted { font-size: 15px; }
.empty { border-radius: var(--r); padding: 40px 22px; text-align: center; background: var(--glass); border: 1px solid var(--glass-line); }
.notice { display: flex; gap: 10px; align-items: flex-start; background: rgba(212, 233, 246, .8); color: var(--deep); border-radius: 20px; padding: 14px 16px; font-size: 16px; }
.checkout fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.checkout legend { font: 400 26px var(--display); margin-bottom: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; font: 800 14px var(--text); }
.field input { height: 54px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); padding: 0 16px; font: 400 18px var(--text); color: var(--ink); width: 100%; }
.field input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(43, 140, 203, .15); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 6px 0 14px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--deep); flex: none; }
.pay { display: flex; gap: 12px; align-items: flex-start; border-radius: 20px; padding: 16px; margin-bottom: 10px; background: var(--glass); border: 1px solid var(--glass-line); cursor: pointer; }
.pay input { width: 22px; height: 22px; accent-color: var(--deep); margin-top: 2px; }
.pay small { display: block; color: var(--soft); font-size: 15px; }
.mini-lines { list-style: none; padding: 0; margin: 0; }
.mini-lines li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 15px; }
.mini-lines img { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #fff; }
.mini-lines small { display: block; color: var(--soft); }
.code { font-family: ui-monospace, monospace; background: #fff; padding: 2px 8px; border-radius: 8px; }

/* why it works, advice */
.air { margin-top: 30px; padding: 30px 0; }
.air-in { display: grid; gap: 28px; }
.air-anim { position: relative; height: 230px; border-radius: var(--r); overflow: hidden; background: rgba(255, 255, 255, .5); }
.layer { position: absolute; left: 10%; right: 10%; height: 36px; border-radius: 12px; transform: skewX(-12deg); }
.l1 { top: 46px; background: repeating-linear-gradient(90deg, rgba(43, 140, 203, .35) 0 5px, #fff 5px 13px); }
.l2 { top: 100px; background: linear-gradient(120deg, #fffaf2, var(--sun)); }
.l3 { top: 154px; background: linear-gradient(120deg, #e9eef2, #cfd9e1); }
.puff { position: absolute; bottom: 18px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(43, 140, 203, .6)); opacity: 0; animation: rise 4s infinite ease-in; }
.p1 { left: 22%; } .p2 { left: 42%; animation-delay: 1s; } .p3 { left: 62%; animation-delay: 2s; } .p4 { left: 80%; animation-delay: 3s; }
.layers { padding-left: 24px; margin: 0; display: grid; gap: 18px; }
.layers li::marker { font: 400 22px var(--display); color: var(--sky); }
.layers b { display: block; font: 400 22px var(--display); }
.layers span { color: var(--soft); font-size: 16px; }
.cert-list { display: grid; gap: 12px; }
.cert-row { display: flex; gap: 16px; align-items: center; border-radius: 22px; padding: 16px; background: var(--glass); border: 1px solid var(--glass-line); }
.cert-row img { width: 60px; height: auto; }
.cert-row span { display: block; color: var(--soft); font-size: 15px; }
.posts { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
.posts::-webkit-scrollbar { display: none; }
.post { color: var(--ink); text-decoration: none; }
.post img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: 24px; background: #fff; }
.post h3 { font: 400 21px/1.2 var(--display); margin-top: 12px; }
.posts-all { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; gap: 26px; }
.help { padding-bottom: 40px; }

/* gift sheet, footer */
.sheet { border: 0; padding: 30px 24px calc(30px + env(safe-area-inset-bottom)); width: 100%; max-width: 520px; margin: auto auto 0; border-radius: 32px 32px 0 0; color: var(--ink);
  background: rgba(250, 247, 242, .92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sheet::backdrop { background: rgba(13, 31, 47, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet h2 { font: 400 32px var(--display); margin: 16px 0 10px; }
.sheet-x { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center; }
.gift-ok { background: #fff; border-radius: 18px; padding: 16px; }
.foot { width: calc(100% - 2 * var(--gutter)); max-width: var(--wide); margin: 70px auto 0; padding: 40px clamp(20px, 4vw, 56px) 30px; border-radius: 36px; background: rgba(255, 255, 255, .5); border: 1px solid var(--glass-line); font-size: 16px; }
.foot-in { display: grid; gap: 26px; }
.foot h3 { font: 800 14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
.foot a { text-decoration: none; }
.foot-brand img { height: 34px; width: auto; margin-bottom: 8px; }
.foot-brand p { font: italic 340 22px var(--display); }
.legal { margin: 26px 0 0; font-size: 13px; color: var(--soft); }

/* bigger screens */
@media (min-width: 700px) {
  .display, .h1 { font-size: 62px; }
  .welcome h1 { font-size: 78px; }
  .m-track { grid-auto-columns: 46%; }

  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fact { padding: 24px 24px 26px; }
  .fact-wide { grid-column: auto; display: flex; align-items: flex-start; }
  .fact-wide .fact-ico { margin-bottom: 14px; width: 44px; height: 44px; }
  .fact-num, .fact-wide .fact-num { font-size: 54px; }
  .cert-tile, .cert-tile-logo { width: 140px; }
  .seals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .posts { grid-auto-columns: 42%; }
  .posts-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .tiles-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step legend { font-size: 48px; }

}
@media (min-width: 1000px) {
  .top { padding-top: 14px; padding-bottom: 14px; }
  .top-links { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .top-links a { padding: 8px 16px; border-radius: 999px; text-decoration: none; font: 800 15px var(--text); white-space: nowrap; }
  .top-links a.on, .top-links a:hover { background: #fff; }
  .is-night .top-links { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }
  .is-night .top-links a.on, .is-night .top-links a:hover { background: rgba(255, 255, 255, .16); }
  .welcome h1 { font-size: 104px; }
  .breath { width: 260px; height: 260px; }
  .screen { padding-top: 110px; }
  .air-screen { grid-template-columns: 1.1fr 1fr; gap: 70px; }
  .air-visual { height: 380px; }
  .s1 { top: 60px; height: 90px; } .s2 { top: 160px; height: 90px; } .s3 { top: 260px; height: 90px; }
  .big-num { font-size: 180px; }
  .m-track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .m-track-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-card { height: 560px; }
  .m-card:nth-child(even) { transform: translateY(40px); }
  .m-card:nth-child(even):hover { transform: translateY(34px); }
  .moments-screen { padding-bottom: 70px; }


  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .posts { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .scene-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo txt" "photo cards"; grid-template-rows: auto 1fr;
    gap: 0 56px; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter) 0; }
  .scene { grid-area: photo; margin: 0; align-self: start; position: sticky; top: 90px; }
  .scene-txt { grid-area: txt; padding: 40px 0 0; align-self: end; }
  .spot-cards { grid-area: cards; margin: 24px 0 0; align-self: start; }
  .moments-s { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .gift-band-in { flex-direction: row; align-items: center; padding: 30px 36px; }
  .gift-band-in > div:nth-child(2) { flex: 1; }
  .air-in { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 60px; }
  .pdp { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 12px var(--gutter) 0; }
  .gallery { position: sticky; top: 90px; margin: 0; }
  .gallery-track img { width: 100%; }
  .buy h1 { font-size: 58px; }
  .buy-bar { position: static; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .buy-bar-price { display: none; }
  .cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; }
  .summary { position: sticky; top: 90px; }
  .sheet { margin: auto; border-radius: 32px; }
  .toast { left: auto; right: 24px; top: 84px; width: 420px; }
  .kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; max-width: calc(var(--wide) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .kit-group:has(> .slot:only-of-type) { align-self: start; }
  .kit-total { grid-column: 1 / -1; bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* ===== home, draft 3 ===== */
/* the top: real photo, breathing circle, air rising; scrolling, the photo opens and the air leads down */
.hero { position: relative; margin: 0 var(--gutter); min-height: calc(100svh - 70px); border-radius: 36px; overflow: hidden; display: flex; align-items: flex-start; isolation: isolate; box-shadow: 0 30px 60px rgba(22, 35, 45, .12); }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; transform: scale(calc(1.02 + var(--p, 0) * .14)); transform-origin: 60% 70%; will-change: transform; }
.hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(250, 247, 242, .94) 0%, rgba(250, 247, 242, .78) 38%, rgba(250, 247, 242, 0) 66%); }
.hero-content { width: 100%; padding: 26px clamp(20px, 5vw, 64px) 0; text-align: center; transform: translateY(calc(var(--p, 0) * -70px)); opacity: calc(1 - var(--p, 0) * 1.5); }
.hero .breath { width: 120px; height: 120px; margin-bottom: 34px; }
.hero .breath span:nth-child(2) { inset: -18px; } .hero .breath span:nth-child(3) { inset: -38px; }
.hero .breath em { font-size: 17px; }
.hero h1 { font: 360 46px/1 var(--display); letter-spacing: -.025em; margin-bottom: 14px; }
.hero h1 em { color: var(--sky); }
.hero .lead { margin: 0 auto 22px; font-size: 17px; color: #3f4c55; }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-air span { position: absolute; bottom: -20px; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(255, 255, 255, .35)); box-shadow: 0 0 12px rgba(255, 255, 255, .6); opacity: 0; animation: hrise var(--d, 9s) linear infinite; animation-delay: var(--w, 0s); }
@keyframes hrise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translate(var(--x, 20px), -95vh); opacity: 0; } }
.hero-air span:nth-child(1) { left: 8%; --s: 8px; --d: 11s; --w: -1s; } .hero-air span:nth-child(2) { left: 17%; --s: 14px; --d: 9s; --w: -4s; --x: -30px; }
.hero-air span:nth-child(3) { left: 26%; --s: 6px; --d: 12s; --w: -7s; } .hero-air span:nth-child(4) { left: 34%; --s: 11px; --d: 10s; --w: -2s; --x: 40px; }
.hero-air span:nth-child(5) { left: 43%; --s: 7px; --d: 13s; --w: -9s; } .hero-air span:nth-child(6) { left: 51%; --s: 16px; --d: 10s; --w: -5s; --x: -20px; }
.hero-air span:nth-child(7) { left: 58%; --s: 9px; --d: 8s; --w: -3s; } .hero-air span:nth-child(8) { left: 65%; --s: 12px; --d: 12s; --w: -8s; --x: 30px; }
.hero-air span:nth-child(9) { left: 72%; --s: 6px; --d: 9s; --w: -6s; } .hero-air span:nth-child(10) { left: 79%; --s: 13px; --d: 11s; --w: -10s; --x: -40px; }
.hero-air span:nth-child(11) { left: 86%; --s: 8px; --d: 10s; --w: -1.5s; } .hero-air span:nth-child(12) { left: 92%; --s: 10px; --d: 13s; --w: -6.5s; }
.hero-air span:nth-child(13) { left: 38%; --s: 5px; --d: 7s; --w: -2.5s; } .hero-air span:nth-child(14) { left: 70%; --s: 5px; --d: 8s; --w: -4.5s; }
.air-thread { position: absolute; left: 50%; bottom: 0; width: 2px; height: 90px; margin-left: -1px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); }
.air-thread span { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; animation: thread 2.4s ease-in infinite; }
@keyframes thread { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }
.btn-text-light { border-color: var(--sky); }
@media (prefers-reduced-motion: reduce) { .hero-air span, .air-thread span { animation: none; opacity: .5; } .hero-photo img { transform: none; } }

/* 90%: the layers come in and the number counts while it appears */
.air-screen .slab b { position: absolute; right: 16px; top: 50%; transform: translateY(-50%) skewX(0); font: 800 12px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--deep); opacity: .7; }
.js [data-reveal] .slab { opacity: 0; transform: rotateX(58deg) rotateZ(-8deg) translateX(-40px); transition: opacity .8s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.js [data-reveal] .s2 { transition-delay: .15s; } .js [data-reveal] .s3 { transition-delay: .3s; }
.js [data-reveal].in .slab { opacity: 1; transform: rotateX(58deg) rotateZ(-8deg); }

/* certifications: logos only, monochrome */
.cert-logos { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 22px 40px; margin: 30px 0 34px; }
.cert-logos img { height: 54px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .62; mix-blend-mode: multiply; transition: opacity .3s; }
.cert-logos img:hover { opacity: 1; }

/* horizontal rails (reviews, the most loved): never wrapped, scrolled sideways */
.h-scroll { position: relative; }
.h-track { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: -4px calc(-1 * var(--gutter)) -20px; padding: 30px var(--gutter) 46px; scrollbar-width: none; scroll-behavior: smooth; scroll-padding-left: var(--gutter); }
.h-track::-webkit-scrollbar { display: none; }
.h-track > * { scroll-snap-align: start; }
.best-track { grid-auto-columns: min(78vw, 310px); }
.reviews-track { grid-auto-columns: min(84vw, 360px); }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 40px; margin-bottom: 26px; }
.g-score { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 16px; border-radius: 22px; background: rgba(255, 255, 255, .75); border: 1px solid var(--glass-line); text-decoration: none; color: var(--ink); }
.g-score b { font: 380 44px/1 var(--display); color: var(--deep); }
.g-score > span { display: grid; gap: 2px; }
.g-score small { color: var(--soft); font-size: 14px; }
.rstars { color: #e2a524; letter-spacing: 2px; font-size: 17px; line-height: 1; }
.review { margin: 0; border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; }
.review blockquote { margin: 0; font: italic 360 19px/1.5 var(--display); color: var(--ink); flex: 1; }
.review figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.review figcaption > span:last-child { display: grid; font-size: 15px; }
.review figcaption small { color: var(--soft); font-size: 13px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--deep); font: 800 16px var(--text); flex: none; }
.h-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 4px; }
.h-nav { display: flex; gap: 10px; }
.h-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: background .2s; }
.h-nav button:hover { background: var(--deep); color: #fff; }
.h-nav[hidden] { display: none; }
.h-nav button:disabled { opacity: .3; cursor: default; pointer-events: none; }
/* the kit: a small preview of "il nido di Leo" */
.guide-screen { display: grid; gap: 40px; text-align: center; justify-items: center; }
.guide-copy { display: flex; flex-direction: column; align-items: center; }
.guide-copy .lead { margin-bottom: 0; }
.guide-actions { display: flex; flex-direction: column; align-items: center; margin-top: -14px; }
.kit-demo { position: relative; width: 100%; max-width: 420px; padding: 54px 0 40px; }
.kd-card { position: relative; z-index: 1; border-radius: 28px; padding: 18px; text-align: left; background: rgba(255, 255, 255, .8); }
.kd-title { font: 400 26px var(--display); margin: 0 0 12px; }
.kd-title em { color: var(--sky); }
.kd-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.kd-row img { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff; }
.kd-row span { flex: 1; display: grid; font-size: 15px; line-height: 1.25; }
.kd-row small { color: var(--soft); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.kd-on { width: 40px; height: 24px; border-radius: 12px; background: #2c8a5b; position: relative; flex: none; }
.kd-on::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.kd-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.kd-total b { font-size: 20px; }
.kd-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--deep); color: #fff; font: 800 14px var(--text); box-shadow: 0 12px 26px rgba(19, 59, 88, .28); animation: floaty 6s ease-in-out infinite; }
.kd-chip .i { width: 18px; height: 18px; }
.kd-chip.c1 { top: 8px; left: 6%; } .kd-chip.c2 { top: 22px; right: 0; animation-delay: -2s; background: #fff; color: var(--deep); }
.kd-chip.c3 { bottom: 0; left: 18%; animation-delay: -4s; background: var(--sky); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* faces */
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.face { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 26px; box-shadow: 0 14px 34px rgba(22, 35, 45, .1); }

/* an article: the container of the site, the text in a column that reads well, the guide beside it */
.article { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter) 0; }
.article-head { max-width: 980px; }
.article-head .display { font-size: clamp(34px, 5vw, 60px); line-height: 1.06; margin: 18px 0 10px; }
.article-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 32px; margin: 22px 0 34px; background: #fff; box-shadow: 0 30px 60px rgba(22, 35, 45, .1); }
.article-grid { display: grid; gap: 40px; }
.article-body { max-width: 720px; font-size: 19px; line-height: 1.7; color: #26333c; min-width: 0; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.05em; }
.article-body strong { color: var(--ink); font-weight: 800; }
.article-body h2, .article-body h3 { font: 400 28px/1.2 var(--display); color: var(--ink); margin: 1.6em 0 .5em; }
.article-body h3 { font-size: 24px; }
.article-body a:not(.btn) { color: var(--deep); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-body a:not(.btn):hover { color: var(--sky); }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.article-body li { position: relative; padding-left: 30px; margin: 0 0 .55em; }
.article-body ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px var(--blue); }
.article-body ol { counter-reset: n; }
.article-body ol li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: var(--deep); font: 800 13px/22px var(--text); text-align: center; }
.article-body hr { border: 0; height: 1px; margin: 2.2em 0; background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.article-body figure { margin: 1.6em 0; }
.article-body img { display: block; max-width: 100%; height: auto; border-radius: 22px; background: #fff; margin: 1.4em 0; }
.article-body figure img { margin: 0; }
.article-body figcaption { margin-top: 10px; color: var(--soft); font-size: 15px; text-align: center; }
.article-body p:has(> em:only-child) { color: var(--soft); }
.article-body .art-cta { margin: 1.6em 0; }
.article-body sup a { text-decoration: none; }
.article-aside { display: grid; gap: 16px; align-content: start; }
.aside-kit { border-radius: 28px; padding: 26px 24px; text-align: center; background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-line); box-shadow: 0 14px 40px rgba(22, 35, 45, .08); }
.aside-kit h2 { font: 400 26px/1.15 var(--display); margin: 0 0 10px; }
.aside-kit p:not(.eyebrow) { color: var(--soft); font-size: 16px; line-height: 1.5; margin: 0 0 18px; }
.aside-kit .eyebrow { margin-bottom: 8px; }
.aside-best { border-radius: 28px; padding: 20px; background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-line); }
.aside-best .eyebrow { margin-bottom: 10px; }
.aside-p { display: flex; gap: 14px; align-items: center; padding: 8px; border-radius: 18px; color: var(--ink); text-decoration: none; transition: background .2s; }
.aside-p:hover { background: #fff; }
.aside-p img { width: 64px; height: 64px; flex: none; border-radius: 14px; object-fit: contain; background: #fff; padding: 3px; }
.aside-p b { display: block; font: 400 18px/1.2 var(--display); }
.aside-p small { color: var(--soft); font-size: 14px; }
.advice-screen .display { margin-bottom: 30px; }
@media (min-width: 1000px) {
  .article-img { aspect-ratio: 21 / 8; }
  .article-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: start; }
  .article-body { max-width: 760px; }
  .article-aside { position: sticky; top: 100px; }
}

@media (min-width: 700px) {
  .faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero h1 { font-size: 64px; }
}
@media (min-width: 760px) {
  .hero { align-items: center; min-height: calc(100vh - 90px); }
  .hero-photo img { object-position: 70% center; }
  .hero-veil { background: linear-gradient(90deg, rgba(250, 247, 242, .95) 0%, rgba(250, 247, 242, .8) 34%, rgba(250, 247, 242, 0) 62%); }
  .hero-content { max-width: 600px; margin-left: 6vw; padding: 0; text-align: left; }
  .hero .breath { margin: 0 0 30px 40px; }
  .hero .lead { margin-left: 0; }
  .cta-row { flex-direction: row; gap: 26px; }
}
@media (min-width: 1000px) {
  .top-links { justify-self: center; }
  .hero h1 { font-size: 84px; }





  .h-track { margin: -4px -40px -20px; padding: 30px 40px 46px; scroll-padding-left: 40px; }
  .reviews-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .best-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .guide-screen { grid-template-columns: 1fr 1fr; grid-template-areas: "copy demo" "actions demo"; text-align: left; align-items: center; row-gap: 26px; }
  .guide-copy { grid-area: copy; align-self: end; justify-self: start; align-items: flex-start; }
  .kit-demo { grid-area: demo; }
  .guide-actions { grid-area: actions; align-self: start; justify-self: start; align-items: flex-start; margin-top: 0; }
  .guide-copy .lead { margin-left: 0; }
}

/* ===== the top as a story told by scrolling: the film fills the screen, the header floats over it ===== */
.story { position: relative; height: 480svh; }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.story-frame { position: absolute; inset: 0; isolation: isolate; background: #e9eef2; }
.story-still img, .story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-still img { object-position: 60% 75%; }
.story-canvas { z-index: 1; opacity: 0; transition: opacity .3s; }
.story.has-film .story-canvas { opacity: 1; }
.story-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 247, 242, .92) 0%, rgba(250, 247, 242, .75) 42%, rgba(250, 247, 242, 0) 70%); opacity: calc(1 - var(--p, 0) * 6); }
.story .hero-air { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(1 - var(--p, 0) * 3); }
.story-step { position: absolute; z-index: 4; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.story-step.on { opacity: 1; transform: none; pointer-events: auto; }
.step-hero { top: 0; left: 0; right: 0; padding: 96px var(--gutter) 0; text-align: center; }
.step-hero .breath { width: 84px; height: 84px; margin-bottom: 26px; }
.step-hero .breath span:nth-child(2) { inset: -14px; } .step-hero .breath span:nth-child(3) { inset: -30px; }
.step-hero .breath em { font-size: 15px; }
.step-hero h1 { font: 360 40px/1 var(--display); letter-spacing: -.025em; margin-bottom: 14px; }
.step-hero h1 em { color: var(--sky); }
.step-hero .lead { margin: 0 auto 22px; font-size: 17px; color: #3f4c55; }
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font: 800 14px var(--text); color: var(--deep); }
.scroll-hint span { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--deep); position: relative; }
.scroll-hint span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--deep); animation: cue 2s infinite; }
/* the words over the film: like the first one, no card, on the same light veil */
.step-air, .step-layer { top: 0; left: 0; right: 0; padding: 104px var(--gutter) 0; text-align: center; }
.story-step h2 { font: 360 40px/1.02 var(--display); letter-spacing: -.025em; margin: 0 0 14px; color: var(--ink); }
.story-step h2 em { color: var(--sky); }
.story-step p { color: #3f4c55; font-size: 17px; max-width: 30em; margin: 0 auto; }
.story-step .btn { margin-top: 22px; }
.step-air .big-num { font-size: 96px; line-height: .9; margin: 0 0 6px; color: var(--deep); }
.story-veil { opacity: 1; }
.story-progress { display: none; }
@media (min-width: 760px) { .story-dots { left: auto; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%); grid-auto-flow: row; } }
.story-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--deep); background: transparent; cursor: pointer; transition: transform .3s, background .3s; }
.story-dots button.on { background: var(--deep); transform: scale(1.3); }
.story-progress { display: none; }
@media (min-width: 760px) {
  .story-still img { object-position: 70% center; }
  .story-veil { background: linear-gradient(90deg, rgba(250, 247, 242, .92) 0%, rgba(250, 247, 242, .75) 32%, rgba(250, 247, 242, 0) 60%); }
  .step-hero { top: 50%; left: max(var(--gutter), calc((100% - var(--wide)) / 2)); right: auto; padding: 0; transform: translateY(calc(-50% + 24px)); max-width: 640px; text-align: left; }
  .step-hero.on { transform: translateY(-50%); }
  .step-hero .breath { margin: 0 0 30px 34px; }
  .step-hero .lead { margin-left: 0; }
  .step-hero .cta-row { flex-direction: row; gap: 26px; align-items: center; }
  .step-hero h1 { font-size: 64px; }
  .step-air, .step-layer { top: 50%; left: max(var(--gutter), calc((100% - var(--wide)) / 2)); right: auto; padding: 0; transform: translateY(calc(-50% + 24px)); max-width: 640px; text-align: left; }
  .step-air p, .step-layer p { margin: 0; }
  .step-air.on, .step-layer.on { transform: translateY(-50%); }
  .story-step h2 { font-size: 64px; }
  .step-air .big-num { font-size: 130px; }
}
@media (min-width: 1000px) { .step-hero h1, .story-step h2 { font-size: 84px; } }
@media (prefers-reduced-motion: reduce) { .story-step { transition: none; } }
/* phone: the words stay in the upper half, the face of the baby stays free */
@media (max-width: 759px) {
  .step-hero { padding-top: clamp(96px, 13svh, 130px); }
  .step-air, .step-layer { padding-top: clamp(112px, 17svh, 160px); }
  .step-hero .breath { width: 66px; height: 66px; margin-bottom: 26px; }
  .step-hero .breath span:nth-child(2) { inset: -11px; } .step-hero .breath span:nth-child(3) { inset: -23px; }
  .step-hero .breath em { display: none; }
  .step-hero .eyebrow { margin-bottom: 10px; font-size: 13px; }
  .step-hero h1, .story-step h2 { font-size: 39px; margin-bottom: 12px; }
  .step-hero .lead, .story-step p { font-size: 17px; line-height: 1.5; margin-bottom: 18px; }
  .step-hero .hero-start { display: none; } /* on the phone it would cover the baby: the button comes at the end of the story */
  .scroll-hint { display: none; }
  .step-air .big-num { font-size: 84px; }
  .story-veil { background: linear-gradient(180deg, rgba(250, 247, 242, .92) 0%, rgba(250, 247, 242, .8) 44%, rgba(250, 247, 242, 0) 64%); }
}
/* moment pages: what sets the moment apart and a real review, under the gift */
.m-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.m-points li { display: flex; gap: 14px; align-items: center; }
.mp-ico { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(43, 140, 203, .12); color: var(--sky); }
.mp-ico .i { width: 24px; height: 24px; }
.m-points b { display: block; font: 400 20px/1.15 var(--display); }
.m-points small { display: block; margin-top: 4px; color: var(--soft); font-size: 15px; line-height: 1.4; }
.m-quote { position: relative; margin: 26px 0 0; padding: 26px 26px 22px; border-radius: 26px; background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-line); }
.m-quote::before { content: "\201C"; position: absolute; top: -14px; right: 22px; font: 400 96px/1 var(--display); color: var(--sky); opacity: .35; }
.m-quote blockquote { margin: 10px 0 16px; font: italic 360 20px/1.45 var(--display); }
.m-quote figcaption { display: flex; align-items: center; gap: 12px; }
.m-quote figcaption > span:last-child { display: grid; font-size: 15px; }
.m-quote figcaption small { color: var(--soft); font-size: 13px; }
.is-night .mp-ico { background: rgba(159, 208, 240, .14); color: #9fd0f0; }
.is-night .m-points b { color: #fff; }
.is-night .m-points small, .is-night .m-quote figcaption small { color: #b9c8d5; }
.is-night .m-quote { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.is-night .m-quote::before { color: #9fd0f0; }
@media (min-width: 1000px) {
  .m-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .m-points li { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* The set to complete beside the certifications, when it has one or two products. */
.pair-screen .pair-col + .pair-col { margin-top: 56px; }
@media (min-width: 1000px) {
  .pair-screen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .pair-screen > .pair-col { grid-column: span var(--n); min-width: 0; }
  .pair-screen .pair-col + .pair-col { margin-top: 0; }
  .pair-screen .best-track { grid-auto-columns: calc((100% - (var(--n) - 1) * 16px) / var(--n)); }
  .pair-screen .certs-col { padding-left: 48px; }
}

/* The certifications of a product: one row, the logos shrink to fit rather than wrap. */
.certs-col .cert-logos { flex-wrap: nowrap; gap: 0 clamp(14px, 2.4vw, 32px); margin: 24px 0 12px; }
.certs-col .cert-logos img { flex: 0 1 auto; min-width: 0; width: auto; height: auto; max-height: 84px; max-width: 132px; }

/* The guide and the kit take the colour of the child: blue (the site's own) for a boy, pink for a girl, green if not said. Pastel. */
.theme-f { --sky: #c4607f; --deep: #8a3c56; --blue: #f7d3de; --mint: #f3dfe6; --breath-1: rgba(247, 214, 225, .75); --breath-2: rgba(196, 96, 127, .18); }
.theme-n { --sky: #3b8f70; --deep: #255a48; --blue: #cfe8dc; --peach: #eaf0d8; --breath-1: rgba(214, 236, 225, .75); --breath-2: rgba(59, 143, 112, .18); }
/* Buttons, chosen answers and switches in pastel, with dark text to stay readable: these are pages about babies. */
.theme-m { --btn-bg: #cfe5f5; --btn-ink: #143a57; --btn-shadow: rgba(43, 140, 203, .18); --on-bg: #dcedf9; --on-ink: #143a57; --on-line: #a9d0ec; --switch-on: #8cc1e6; --bar: #8cc1e6; }
.theme-f { --btn-bg: #f6d0dc; --btn-ink: #6b2a42; --btn-shadow: rgba(196, 96, 127, .2); --on-bg: #fbe2e9; --on-ink: #6b2a42; --on-line: #f0b9c9; --switch-on: #eaa3b9; --bar: #eaa3b9; }
.theme-n { --btn-bg: #cce9d9; --btn-ink: #1f4b3b; --btn-shadow: rgba(59, 143, 112, .2); --on-bg: #dff0e6; --on-ink: #1f4b3b; --on-line: #b3dcc5; --switch-on: #8fcfb0; --bar: #8fcfb0; }
.tiles-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-g .tile-wide { grid-column: 1 / -1; }
.tile-wide.tile-icon > span { flex-direction: row; min-height: 72px; }
.tile-g > span { flex-direction: column; min-height: 132px; }
.g-dot { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); }
.tile-wide .g-dot { width: 22px; height: 22px; box-shadow: none; }
.tile-g > span { border: 2px solid transparent; }
.tile-g:has(.g-m) > span { background: #eef6fc; } .g-m { background: #cfe5f5; }
.tile-g:has(.g-f) > span { background: #fdf1f4; } .g-f { background: #f8d5df; }
.tile-g:has(.g-n) > span { background: #eff7f2; } .g-n { background: #d2ebdd; }
.tile-g input:checked + span { color: var(--ink); }
.tile-g:has(.g-m) input:checked + span { background: #dcedf9; border-color: #a9d0ec; }
.tile-g:has(.g-f) input:checked + span { background: #fbe2e9; border-color: #f0b9c9; }
.tile-g:has(.g-n) input:checked + span { background: #dff0e6; border-color: #b3dcc5; }
.tile-wide.tile-g > span { flex-direction: row; min-height: 64px; }
/* The first question: each word in its own colour, the circle between blue and pink. */
.step-g legend { color: var(--ink); }
.step-g legend em { color: var(--soft); }
.step-g .w-m { color: #2b8ccb; }
.step-g .w-f { color: #c4607f; }
.step-g .breath span { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), transparent 48%), linear-gradient(135deg, rgba(196, 224, 243, .85), rgba(247, 210, 222, .85)); }

/* Why it works: the layers breathing, the three layers, what the child feels, the proofs in colour, the way on. */
.why-head { max-width: 760px; }
.why-head .lead { margin-top: 14px; }
.why-film { position: relative; margin: 34px 0 0; border-radius: 36px; overflow: hidden; aspect-ratio: 4 / 5; background: #e9f1f7; box-shadow: 0 30px 60px rgba(22, 35, 45, .12); }
.why-film video, .why-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-tags { position: absolute; inset: 0; pointer-events: none; }
.ft { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 800 14px var(--text); color: var(--ink); box-shadow: 0 8px 22px rgba(22, 35, 45, .1); white-space: nowrap; }
.ft i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #fff; font: 800 13px var(--text); font-style: normal; }
.ft-1 { left: 6%; top: 22%; } .ft-2 { left: 6%; top: 60%; } .ft-3 { right: 6%; bottom: 7%; }
.layer-cards { display: grid; gap: 18px; margin-top: 30px; }
.layer-card { border-radius: var(--r); overflow: hidden; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(22, 35, 45, .06); }
.layer-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.layer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layer-n { position: absolute; left: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .88); font: 400 24px var(--display); color: var(--deep); }
.layer-txt { padding: 20px 22px 24px; }
.layer-name { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 13px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.layer-name .i { width: 18px; height: 18px; }
.layer-txt h3 { font: 400 26px/1.15 var(--display); margin: 0 0 8px; }
.layer-txt p:last-child { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.5; }
.feel-screen { display: grid; gap: 30px; }
.feel-photo { border-radius: 36px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 30px 60px rgba(22, 35, 45, .12); }
.feel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feel-big { display: flex; gap: 18px; align-items: center; margin: 22px 0 24px; padding: 20px 22px; border-radius: 24px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-line); }
.feel-big b { font: 300 64px/.9 var(--display); letter-spacing: -.03em; color: var(--sky); flex: none; }
.feel-big span { color: var(--soft); font-size: 16px; line-height: 1.45; }
.feel-big strong { color: var(--ink); }
.feel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.feel-list li { display: flex; gap: 14px; align-items: flex-start; }
.fl-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--blue); color: var(--deep); }
.fl-ico .i { width: 22px; height: 22px; }
.feel-list b { display: block; font: 400 21px/1.2 var(--display); }
.feel-list small { display: block; margin-top: 3px; color: var(--soft); font-size: 15px; line-height: 1.45; }
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.cert-card { border-radius: 24px; padding: 14px 14px 18px; }
.cert-card.tone-sky { background: #e7f2fa; } .cert-card.tone-sage { background: #e6f2ec; } .cert-card.tone-sand { background: #f8f0e2; } .cert-card.tone-blush { background: #fbece9; }
.cert-card-logo { height: 92px; border-radius: 18px; background: #fff; display: grid; place-items: center; padding: 14px; margin-bottom: 14px; }
.cert-card-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.cert-card h3 { font: 400 19px/1.2 var(--display); margin: 0 0 6px; }
.cert-card p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.45; }
.ready-card { display: grid; border-radius: 36px; overflow: hidden; background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-line); box-shadow: 0 30px 60px rgba(22, 35, 45, .1); }
.ready-photo .ph { height: 100%; min-height: 340px; border-radius: 0; }
.ready-photo .ph-real img { object-position: center 35%; }
.ready-txt { padding: 30px 24px 34px; }
.ready-txt .lead { margin: 14px 0 0; }
.ready-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 28px; }
@media (min-width: 760px) {
  .why-film { aspect-ratio: 16 / 9; }
  .ft-1 { left: auto; right: 22%; top: 16%; } .ft-2 { left: 5%; top: auto; bottom: 30%; } .ft-3 { right: 8%; bottom: 8%; }
  .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .cert-card { padding: 16px 16px 22px; }
  .cert-card-logo { height: 120px; } .cert-card-logo img { max-height: 84px; }
  .ready-actions { flex-direction: row; align-items: center; gap: 32px; }
}
@media (min-width: 1000px) {
  .layer-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .feel-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .ready-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ready-photo .ph { min-height: 560px; }
  .ready-txt { padding: 64px 60px; align-self: center; }
}
@media (min-width: 1000px) {
  .why-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .why-film { margin: 0; aspect-ratio: 4 / 3; }
  .ft-1 { left: 56%; right: auto; top: 24%; } .ft-2 { left: 6%; top: auto; bottom: 22%; } .ft-3 { right: 6%; bottom: 6%; }
}

/* The cart: what goes with it, in a row that scrolls. */
.cart-with { margin-top: 34px; }
.cart-with .h3 { margin: 0 0 4px; }
.cart-track { grid-auto-columns: min(62vw, 240px); }

/* The checkout, as people know it: quick payment, then the boxes one under the other, the order beside. */
.is-checkout .dock { display: none; }
.is-checkout { padding-bottom: 0; }
.co { padding-top: 6px; padding-bottom: 56px; }
.co-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--soft); margin: 4px 0 14px; }
.co-steps a { color: var(--deep); font-weight: 700; }
.co-steps b { color: var(--ink); }
.co-steps .i { width: 14px; height: 14px; opacity: .5; }
.co .notice { margin: 0 0 20px; font-size: 15px; }
.co-grid { display: grid; gap: 28px; }
.co-form { display: grid; gap: 16px; min-width: 0; }
.co-box { border-radius: 24px; padding: 22px 20px; background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(22, 35, 45, .05); }
.co-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.co-head h2 { font: 400 24px var(--display); margin: 0; }
.co-safe { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #2f7a55; }
.co-safe .i { width: 15px; height: 15px; }
.co-label { margin: 0 0 10px; text-align: center; font-size: 14px; font-weight: 700; color: var(--soft); }
.paypal-btn { width: 100%; height: 54px; border: 0; border-radius: 12px; background: #ffc439; display: flex; align-items: center; justify-content: center; font: italic 900 24px Arial, sans-serif; cursor: pointer; }
.paypal-btn:disabled { cursor: default; }
.pp-pay { color: #003087; } .pp-pal { color: #009cde; }
.co-or { display: flex; align-items: center; gap: 14px; margin: 20px 0 4px; color: var(--soft); font-size: 14px; }
.co-or::before, .co-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* fields with the label inside, that moves up when there is something written */
.fl { position: relative; display: block; margin-bottom: 12px; }
.fl input, .fl select { width: 100%; height: 58px; border-radius: 14px; border: 1px solid #d5dbe0; background: #fff; padding: 22px 14px 6px; font: 400 17px var(--text); color: var(--ink); appearance: none; -webkit-appearance: none; }
.fl select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%); background-position: calc(100% - 18px) 27px, calc(100% - 13px) 27px; background-size: 5px 5px; background-repeat: no-repeat; }
.fl > span { position: absolute; left: 15px; right: 14px; top: 18px; font-size: 16px; color: var(--soft); pointer-events: none; transition: top .15s, font-size .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl input:focus + span, .fl input:not(:placeholder-shown) + span, .fl-select > span { top: 8px; font-size: 12px; }
.fl input:focus, .fl select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(43, 140, 203, .15); }
.fl-ico { position: absolute; right: 14px; top: 20px; width: 18px; height: 18px; color: var(--soft); }
.three { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.co .check { margin: 4px 0 0; }
.co .check a { color: var(--deep); }
.opt-row, .pay-row { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #d5dbe0; border-radius: 14px; background: #fff; cursor: pointer; }
.opt-row input, .pay-row input { width: 20px; height: 20px; accent-color: var(--deep); flex: none; margin: 0; }
.opt-main { flex: 1; min-width: 0; }
.opt-main b { display: block; font-size: 16px; }
.opt-main small { display: block; color: var(--soft); font-size: 14px; }
.opt-row:has(input:checked) { border-color: var(--deep); box-shadow: inset 0 0 0 1px var(--deep); }
.opt-price { font-size: 16px; }
.co-hint { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; color: var(--soft); font-size: 14px; line-height: 1.45; }
.co-hint .i { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.pays { border: 1px solid #d5dbe0; border-radius: 14px; overflow: hidden; background: #fff; }
.pays .pay-row { border: 0; border-radius: 0; border-top: 1px solid #e3e8ec; }
.pays .pay-row:first-child { border-top: 0; }
.pay-row:has(input:checked) { background: #f3f8fc; }
.pay-panel { display: none; padding: 14px 16px 16px; background: #f7fafc; border-top: 1px solid #e3e8ec; }
.pay-row:has(input:checked) + .pay-panel { display: block; }
.pay-panel .co-hint { margin: 0; }
.pay-panel .fl + .co-hint, .pay-panel .two + .co-hint { margin-top: 4px; }
.pay-marks { display: inline-flex; gap: 4px; flex: none; }
.pm { width: 38px; height: 24px; display: block; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-bottom: 14px; border-radius: 16px; background: #eef2f5; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px; font: 800 16px var(--text); color: var(--soft); transition: background .2s, color .2s, box-shadow .2s; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(22, 35, 45, .1); }
.seg input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 1px; }
.for-company { display: none; }
.co-who:has(.seg input[value="azienda"]:checked) .for-company { display: block; }
.co-who:has(.seg input[value="azienda"]:checked) .for-private { display: none; }
.co-same { margin-top: 4px; }
.ship-fields { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.co-who:has(.co-same input:not(:checked)) .ship-fields { display: block; }
.co-login { font-size: 14px; font-weight: 800; color: var(--deep); }
.acc-fields { display: none; margin-top: 12px; }
.co-box:has(.co-account input:checked) .acc-fields { display: block; }
.acc-fields .co-hint { margin-top: -2px; }
.fl-eye { position: absolute; right: 8px; top: 9px; width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; color: var(--soft); cursor: pointer; }
.fl:has(.fl-eye) input { padding-right: 52px; }

/* the switch used for every yes/no of the site (instead of the checkbox): the colour follows the theme */
.toggle { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.45; padding: 6px 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tg { flex: none; position: relative; width: 48px; height: 28px; margin-top: -2px; border-radius: 14px; background: rgba(22, 35, 45, .16); transition: background .25s; }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .25s; }
.toggle input:checked + .tg { background: var(--switch-on); }
.toggle input:checked + .tg::after { transform: translateX(20px); }
.toggle input:focus-visible + .tg { outline: 3px solid var(--sky); outline-offset: 2px; }
.tg-txt b { display: block; font-size: 16px; color: var(--ink); }
.tg-txt small { display: block; color: var(--soft); font-size: 14px; margin-top: 2px; }
.tg-txt a { color: var(--deep); }
.co-sub { margin: 0 0 12px; font-weight: 800; font-size: 16px; }
.co-final { display: grid; gap: 12px; padding: 4px 4px 0; }
.co-final .btn-buy { margin-top: 6px; }
.co-trust { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; color: var(--soft); font-size: 14px; }
.co-trust li { display: inline-flex; align-items: center; gap: 6px; }
.co-trust .i { width: 16px; height: 16px; }
/* the order */
.co-side { display: none; }
.co-side-title { font: 400 24px var(--display); margin: 0 0 16px; }
.co-fold { border-radius: 20px; background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-line); margin-bottom: 18px; }
.co-fold summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; color: var(--deep); }
.co-fold summary::-webkit-details-marker { display: none; }
.co-fold summary span { display: inline-flex; align-items: center; gap: 8px; }
.co-fold summary span::after { content: "Mostra"; font-weight: 400; font-size: 14px; color: var(--soft); margin-left: 4px; }
.co-fold[open] summary span::after { content: "Nascondi"; }
.co-fold summary b { color: var(--ink); font-size: 18px; }
.co-fold > :not(summary) { margin-left: 18px; margin-right: 18px; }
.co-fold .co-vat { padding-bottom: 16px; }
.co-lines { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
.co-lines li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.co-thumb { position: relative; width: 64px; height: 64px; border-radius: 14px; background: #fff; border: 1px solid #e3e8ec; }
.co-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; border-radius: 14px; }
.co-thumb i { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--soft); color: #fff; font: 800 12px/22px var(--text); font-style: normal; text-align: center; }
.co-name b { display: block; font-size: 15px; line-height: 1.3; }
.co-name small { display: block; color: var(--soft); font-size: 13px; }
.co-price { font-size: 15px; }
.co-empty { display: block !important; color: var(--soft); }
.co-code { display: flex; gap: 10px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.co-code .fl { flex: 1; margin: 0; }
.co-code .btn { height: 58px; padding: 0 20px; flex: none; }
.co-code-on { display: flex; align-items: center; gap: 8px; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); color: var(--gift); font-size: 15px; }
.co-code-on .i { width: 18px; height: 18px; }
.co-side .totals, .co-fold .totals { margin: 4px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; }
.co-fold .totals { margin: 4px 18px 6px; } /* inside the folded box on the phone: the same side margin as the lines above */
.co-vat { margin: 0; color: var(--soft); font-size: 13px; }
.co-vat a { color: var(--deep); }
@media (min-width: 640px) {
  .three { grid-template-columns: 1fr 1.4fr 1fr; }
  .co-box { padding: 26px 28px; }
}
@media (min-width: 1000px) {
  .cart-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .cart-track .card-txt h3 { font-size: 19px; }
  .co-fold { display: none; }
  .co-grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start; }
  .co-side { display: block; position: sticky; top: 96px; border-radius: 28px; padding: 26px; background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-line); box-shadow: 0 14px 40px rgba(22, 35, 45, .08); }
}

/* The footer: the social networks as round marks. */
.social { display: flex; gap: 10px; margin: 2px 0 0; }
.social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--deep); background: rgba(255, 255, 255, .75); border: 1px solid var(--glass-line); box-shadow: 0 6px 18px rgba(22, 35, 45, .06); transition: transform .2s, color .2s, background .2s; }
.social a:hover { transform: translateY(-2px); color: #fff; }
.social a[href*="instagram"]:hover { background: radial-gradient(circle at 30% 110%, #fdd56b 0, #f56040 35%, #c13584 65%, #5b51d8 100%); }
.social a[href*="facebook"]:hover { background: #1877f2; }
.social .i { width: 22px; height: 22px; }
.is-night .social a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); color: #fff; }

/* wide screens: all the logos fit, no fading at the edges */
@media (min-width: 1240px) { .cert-rail-track { -webkit-mask-image: none; mask-image: none; } }

/* ===== the customer area (presentation) ===== */
.top .top-actions { justify-self: end; grid-column: 3; display: flex; gap: 8px; }
.top-account.in::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: #2c8a5b; box-shadow: 0 0 0 2px #fff; }
.auth { display: flex; justify-content: center; padding-top: 18px; padding-bottom: 40px; }
.auth-card { width: 100%; max-width: 480px; text-align: center; }
.auth-card .display { margin-bottom: 10px; }
.auth-card .lead { margin: 0 auto 22px; }
.auth-form { text-align: left; display: grid; gap: 4px; }
.auth-form .btn-block { margin-top: 10px; }
.auth-form .toggle { margin-top: 2px; }
.auth-new { display: none; }
.auth-card:has(.auth-seg input[value="new"]:checked) .auth-new { display: grid; }
.auth-card:has(.auth-seg input[value="new"]:checked) .auth-in { display: none; }
.auth-links { margin: 10px 0 0; text-align: center; font-size: 15px; }
.auth-links a { color: var(--deep); font-weight: 700; }
.auth-form .co-hint.center { text-align: center; justify-content: center; }
.auth-note { margin-top: 26px; text-align: left; font-size: 14px; }

.acc { padding-top: 10px; padding-bottom: 30px; }
.acc-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.acc-avatar { width: 64px; height: 64px; font-size: 26px; font-family: var(--display); font-weight: 400; background: linear-gradient(135deg, var(--blue), #fff); box-shadow: 0 8px 22px rgba(22, 35, 45, .1); }
.acc-head .display { margin: 0; font-size: 40px; }
.acc-sub { margin: 4px 0 0; color: var(--soft); font-size: 15px; overflow-wrap: anywhere; }
.acc-tabs { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-line); width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.acc-tabs a, .acc-tabs button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 16px; border-radius: 999px; border: 0; background: none; font: 800 15px var(--text); color: var(--soft); text-decoration: none; cursor: pointer; }
.acc-tabs a.on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(22, 35, 45, .08); }
.acc-tabs form { margin: 0; }
.acc-tabs .i { width: 18px; height: 18px; }
.acc-note { font-size: 14px; margin: 0 0 18px; }
.acc-back { margin-bottom: 14px; }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.acc-card { border-radius: 28px; padding: 22px 20px; background: rgba(255, 255, 255, .8); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(22, 35, 45, .06); min-width: 0; }
.acc-card h2, .acc-h { font: 400 26px/1.15 var(--display); margin: 0 0 14px; }
.acc-card h2 em { color: var(--sky); }
.acc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.acc-card-head h2 { margin: 0; }
.acc-block { margin-top: 30px; }
.acc-block .h3 { margin: 0; }
.status { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font: 800 13px var(--text); white-space: nowrap; }
.st-spedito { background: #dcecf8; color: #1d5a85; }
.st-consegnato { background: #dff0e6; color: #22684a; }

/* the nest */
.nest-card { background: linear-gradient(160deg, var(--blue), #fff 70%); border-color: rgba(255, 255, 255, .9); }
.nest-card .eyebrow { margin-bottom: 6px; }
.nest-facts { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.nest-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); font: 800 14px var(--text); }
.nest-facts .i { width: 16px; height: 16px; color: var(--sky); }
.grow { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 8px 20px rgba(22, 35, 45, .07); }
.grow img { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #fff; flex: none; }
.grow span { flex: 1; min-width: 0; }
.grow small { display: block; font: 800 12px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.grow b { display: block; font-size: 15px; line-height: 1.35; font-weight: 700; }
.grow > .i { color: var(--soft); }
.nest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }

/* the order on its way */
.live-eta { margin: 0 0 14px; font-size: 17px; }
.steps-track { list-style: none; padding: 0; margin: 6px 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.steps-track::before, .steps-track::after { content: ""; position: absolute; top: 15px; left: 12.5%; height: 3px; border-radius: 2px; }
.steps-track::before { right: 12.5%; background: rgba(22, 35, 45, .1); }
.steps-track::after { width: calc((var(--done) - 1) * 25%); background: var(--switch-on); }
.steps-track li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.st-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid rgba(22, 35, 45, .12); color: #fff; }
.st-dot .i { width: 16px; height: 16px; stroke-width: 2.6; }
.steps-track .done .st-dot { background: var(--switch-on); border-color: var(--switch-on); }
.steps-track .now .st-dot { box-shadow: 0 0 0 6px rgba(44, 138, 91, .15); }
.steps-track b { font-size: 13px; }
.steps-track small { font-size: 12px; color: var(--soft); }
.live-thumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.live-thumbs img { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid #e3e8ec; }
.live-thumbs span { margin-left: 4px; font-size: 14px; color: var(--soft); }

/* buy again */
.again { display: grid; gap: 10px; margin-top: 14px; }
.again-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 20px; background: rgba(255, 255, 255, .8); border: 1px solid var(--glass-line); margin: 0; }
.again-item img { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff; flex: none; }
.again-item span { flex: 1; min-width: 0; }
.again-item b { display: block; font-size: 16px; }
.again-item small { display: block; color: var(--soft); font-size: 14px; }
.again-add { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; cursor: pointer; }

/* orders */
.orders { display: grid; gap: 10px; margin-top: 14px; }
.order-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .8); border: 1px solid var(--glass-line); color: var(--ink); text-decoration: none; }
.order-thumbs { display: flex; flex: none; }
.order-thumbs img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(22, 35, 45, .1); }
.order-thumbs img + img { margin-left: -18px; }
.order-txt { flex: 1; min-width: 0; }
.order-txt b { display: block; font-size: 16px; }
.order-txt small { display: block; color: var(--soft); font-size: 13px; }
.order-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.order-end b { font-size: 15px; }

/* shortcuts */
.acc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acc-links a { display: grid; gap: 2px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .8); border: 1px solid var(--glass-line); color: var(--ink); text-decoration: none; }
.acc-links .i { width: 26px; height: 26px; color: var(--sky); margin-bottom: 6px; }
.acc-links b { font-size: 16px; }
.acc-links small { color: var(--soft); font-size: 13px; }

/* order page */
.acc-again { margin-top: 14px; }
.acc-info { display: grid; gap: 12px; }
.acc-info p { display: flex; gap: 12px; margin: 0; font-size: 15px; color: var(--soft); }
.acc-info .i { color: var(--sky); margin-top: 2px; }
.acc-info b { display: block; color: var(--ink); font-size: 16px; }
.acc-actions { display: grid; margin-top: 16px; border-top: 1px solid var(--line); }
.acc-action { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
.acc-action .i { color: var(--sky); }
.acc-action small { flex-basis: 100%; padding-left: 34px; color: var(--soft); font-weight: 400; font-size: 13px; }

/* data page */
.acc-forms { display: grid; gap: 16px; }
.acc-more summary { cursor: pointer; font-weight: 800; color: var(--deep); padding: 6px 0; }
.acc-more[open] summary { margin-bottom: 12px; }
.addr-list { display: grid; gap: 10px; margin-top: 6px; }
.addr { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #e3e8ec; font-size: 15px; color: var(--soft); }
.addr.main { border-color: var(--on-line); box-shadow: inset 0 0 0 1px var(--on-line); }
.addr .i { color: var(--sky); flex: none; margin-top: 2px; }
.addr span { flex: 1; min-width: 0; }
.addr b { color: var(--ink); }
.addr em { font-style: normal; font: 800 11px var(--text); text-transform: uppercase; letter-spacing: .06em; color: var(--sky); margin-left: 8px; }
.addr .btn-text { font-size: 14px; padding: 2px 0; }
.acc-save { display: flex; flex-direction: column; align-items: flex-start; }
.acc-delete { padding: 0 4px; color: var(--soft); font-size: 15px; }
.acc-delete summary { color: #b42318; }

@media (min-width: 760px) {
  .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .acc-card { padding: 28px; }
  .acc-head .display { font-size: 52px; }
  .again { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acc-forms { max-width: 760px; }
}

/* ---- Selling for real (10/11/2026): errors, notices, gift form, order's page, legal pages ---- */
.fl.bad input, .fl.bad select, .fl.bad textarea { border-color: #d6453a; box-shadow: 0 0 0 1px #d6453a inset; }
.toggle.bad .tg { box-shadow: 0 0 0 2px #d6453a; }
.notice-warn { background: rgba(252, 228, 222, .9); color: #7a2a1d; }
.notice-warn a { color: inherit; font-weight: 800; }
.toast.toast-warn .i { color: #c4553b; }
p.ok { color: #2c8a5b; font-size: 15px; margin: 8px 0; }
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.gift-wrap altcha-widget { display: none; }
.gift-ok p:first-child { display: flex; gap: 8px; align-items: center; }
.btn.busy { opacity: .7; pointer-events: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.co-code-on { justify-content: space-between; }
.co-code-on span { display: inline-flex; gap: 8px; align-items: center; }
.opt.out { opacity: .5; }
.opt.out span:not(.sw) { text-decoration: line-through; }
.st-attesa { background: #fdf0d7; color: #8a5a12; }
.st-ricevuto, .st-preparato { background: #eef1f4; color: #3c4a55; }
.st-annullato { background: #f4e4e1; color: #8d3a2c; }
details.addr { display: block; }
details.addr > summary { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; list-style: none; }
details.addr > summary::-webkit-details-marker { display: none; }
details.addr > summary > .btn-text { flex: none; align-self: center; margin-left: auto; }
details.addr[open] > summary .btn-text { visibility: hidden; }
.addr-fields { margin-top: 14px; }
.addr-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.addr-new > summary b { color: var(--deep); }

.ord-head { text-align: center; max-width: 640px; margin: 8px auto 26px; }
.ord-head .lead { margin-top: 10px; }
.paypal-box { min-height: 120px; margin: 6px 0 10px; }
.bank-data { background: #f7fafc; border: 1px solid #e3e8ec; border-radius: 16px; padding: 14px 16px; font: 600 16px/1.6 var(--text); color: var(--ink); margin-bottom: 12px; word-break: break-word; }
.ord-paid { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: #22684a; }
.ord-paid .i { width: 28px; height: 28px; flex: none; }
.ord-paid span { display: grid; gap: 2px; color: var(--soft); }
.ord-paid b { color: #22684a; font-size: 18px; }
.ord-account { margin-top: 14px; }

.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 0 var(--gutter, 16px); margin: 10px 0 4px; font-size: 14px; }
.legal-links a { color: var(--soft); text-decoration: none; }
.legal-links a:hover { color: var(--deep); text-decoration: underline; }
.legal-page { display: grid; gap: 22px; padding-top: 18px; padding-bottom: 60px; }
.legal-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.legal-nav a { flex: none; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--deep); font: 700 14px var(--text); text-decoration: none; border: 1px solid var(--line); }
.legal-nav a.on { background: var(--deep); color: #fff; border-color: var(--deep); }
.legal-text { max-width: 760px; background: rgba(255, 255, 255, .78); border-radius: 26px; padding: 26px 22px; font-size: 17px; line-height: 1.65; color: var(--ink); }
.legal-text h2 { font: 600 24px/1.25 var(--display); margin: 28px 0 8px; color: var(--deep); }
.legal-text h3 { font: 800 17px var(--text); margin: 20px 0 6px; }
.legal-text ul { padding-left: 22px; }
.legal-text a { color: var(--deep); font-weight: 700; }
@media (min-width: 900px) {
  .legal-page { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .legal-nav { flex-direction: column; position: sticky; top: 96px; overflow: visible; }
  .legal-text { padding: 40px 48px; }
}