@charset "UTF-8";
/* Future Citrus: a complete product page demo (gallery, offer, value stack, add-ons, guarantee). */
.shop.shop--citrus { padding-block: clamp(80px,7vw,104px); overflow-x: clip; }
.citrus-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 32px; }
.citrus-head .eyebrow { margin-bottom: 16px; }
.citrus-head .display { font-size: clamp(36px,4.3vw,64px); line-height: .98; margin: 0; }
.citrus-head .btn { flex: none; font-size: 13px; min-height: 52px; }

.pdp {
  --ink: #20291e; --muted: #5f6458; --line: #dcd8c6; --paper: #f6f3e9; --card: #fffdf6;
  --green: #244d34; --pink: #bf0065; --lemon: #f7d93b; --orange: #ff9537; --star: #a85f00; --pick: #fff6c4; --pad: clamp(16px,2vw,28px);
  position: relative; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); gap: 0 clamp(28px,3.6vw,60px);
  padding: var(--pad); border-radius: 28px; background: var(--paper); color: var(--ink); color-scheme: light;
}
.pdp[data-fruit="orange"] { --pick: #ffe8cc; }
.pdp :focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.pdp button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- ticker */
.pdp-ticker { grid-column: 1 / -1; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--pad); overflow: hidden; border-radius: 28px 28px 0 0; background: var(--ink); color: #e9ff74; font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.pdp-ticker > div { display: flex; width: max-content; animation: pdp-ticker 38s linear infinite; }
.pdp-ticker span { display: flex; align-items: center; gap: 18px; padding: 12px 0 12px 18px; white-space: nowrap; }
.pdp-ticker span::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 2px #e9ff7444; }
.pdp-ticker span:nth-child(even)::after { background: var(--orange); }
.pdp-ticker:hover > div { animation-play-state: paused; }

/* ---------- gallery */
.pdp-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pdp-rail { flex: 1 0 auto; }
.pdp-gallery { position: sticky; top: max(20px, calc((100svh - var(--gal-h, 0px)) / 2)); min-width: 0; }

.pdp-stage { container-type: inline-size; position: relative; aspect-ratio: 1 / 1; max-height: max(420px, calc(100svh - 170px)); width: 100%; border-radius: 22px; overflow: clip; isolation: isolate;
  background: radial-gradient(circle at 72% 22%,#9cc65a 0,#3f7a3c 30%,#1d4a2e 62%,#11301f 100%); }
[data-fruit="orange"] .pdp-stage { background: radial-gradient(circle at 72% 22%,#7cc6c0 0,#2f7a74 30%,#1b4d4c 62%,#0f2f31 100%); }
[data-fruit="lemon"] .pdp-stage { background: radial-gradient(circle at 72% 22%,#c5d85a 0,#5f8a33 30%,#2b5427 62%,#16341a 100%); }
.pdp-stage { transition: background .5s; }
.pdp-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; overflow: clip; }
.pdp-slide figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 11px; border-radius: 99px; background: var(--card); color: var(--ink); font: 700 11px/1.2 var(--f-mono); letter-spacing: .02em; }

.pdp-sun { position: absolute; right: -8%; top: -10%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#fff6b8 0,#ffe76a55 38%,transparent 68%); animation: pdp-sun 6s ease-in-out infinite; }
.pdp-word { position: absolute; top: 7%; left: 6%; font: 900 9.4cqw/.9 var(--f-display); letter-spacing: -.05em; white-space: nowrap; color: #f3efa9; transform: rotate(-4deg); text-transform: uppercase; text-shadow: 0 3px 0 #123b23, 0 6px 0 #0d301c, 0 14px 22px #0008; }
[data-fruit="orange"] .pdp-word { text-shadow: 0 3px 0 #12403f, 0 6px 0 #0c3131, 0 14px 22px #0008; }
.pdp-sun, .pdp-word, .pdp-fruits, .pdp-bokeh { transition: translate .5s cubic-bezier(.2,.8,.2,1); }
.pdp-fruits, .pdp-word { transition: translate .5s cubic-bezier(.2,.8,.2,1), opacity .9s ease, transform 1.1s cubic-bezier(.2,.9,.25,1.15); }
.pdp.is-arming:not(.is-live) .pdp-fruits { opacity: 0; transform: translateY(14%) scale(.92); }
.pdp.is-arming:not(.is-live) .pdp-word { opacity: 0; transform: translateY(20px) rotate(-4deg); }
.pdp-sun { translate: calc(var(--px,0) * -8px) calc(var(--py,0) * -8px); }
.pdp-word { translate: calc(var(--px,0) * 14px) calc(var(--py,0) * 10px); }
.pdp-fruits { translate: calc(var(--px,0) * -16px) calc(var(--py,0) * -10px); }
.pdp-word i { font-style: normal; color: #e9ff74; }
[data-fruit="orange"] .pdp-word { color: #ffe0b8; }
[data-fruit="orange"] .pdp-word i { color: #ffb15c; }
.pdp-fruits { position: absolute; inset: 22% -2% 0; }
.fruit { position: absolute; padding: 0; border: 0; background: none; width: 74%; aspect-ratio: 1; transition: transform .6s cubic-bezier(.2,.8,.2,1.15), opacity .35s; }
.fruit img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 20px #061e2366); pointer-events: none; }
.fruit--lemon { left: -3%; top: -9%; z-index: 2; transform: rotate(-10deg); }
.fruit--orange { right: -3%; top: -1%; z-index: 1; transform: rotate(12deg); }
.fruit:hover { transform: rotate(-6deg) scale(1.03); }
.fruit--orange:hover { transform: rotate(8deg) scale(1.03); }
[data-fruit="lemon"] .fruit--lemon { transform: translateX(14%) rotate(-5deg) scale(1.12); }
[data-fruit="lemon"] .fruit--orange { transform: translate(55%,22%) rotate(40deg) scale(.8); opacity: 0; pointer-events: none; }
[data-fruit="orange"] .fruit--orange { transform: translateX(-16%) rotate(5deg) scale(1.12); }
[data-fruit="orange"] .fruit--lemon { transform: translate(-55%,-18%) rotate(-40deg) scale(.8); opacity: 0; pointer-events: none; }
.fruit.is-squish { animation: pdp-squeeze .7s cubic-bezier(.2,.9,.3,1); }


.pdp-burst { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; place-items: center; align-content: center; width: 86px; height: 86px; color: #fff; transform: rotate(8deg); }
.pdp-burst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #d61f6e; clip-path: polygon(50% 0,61% 13%,77% 6%,80% 23%,96% 26%,90% 42%,100% 55%,86% 64%,89% 81%,72% 82%,64% 97%,50% 87%,36% 97%,28% 82%,11% 81%,14% 64%,0 55%,10% 42%,4% 26%,20% 23%,23% 6%,39% 13%); animation: pdp-spin 14s linear infinite; }
.pdp-burst b { font: 900 21px/1 var(--f-display); letter-spacing: -.04em; }
.pdp-burst small { font: 800 10px/1.2 var(--f-mono); text-transform: uppercase; }
.pdp-burst[hidden] { display: none; }
.pdp-weight { position: absolute; z-index: 3; left: 18px; bottom: calc(12px + 68px + 12px); padding: 8px 13px; border-radius: 99px; background: #f3efa9; color: var(--ink); font: 900 18px/1 var(--f-display); letter-spacing: -.03em; transform: rotate(-4deg); }
.pdp-gift { position: absolute; z-index: 3; right: 18px; bottom: calc(12px + 68px + 12px); display: grid; justify-items: center; gap: 2px; width: 96px; padding: 8px 8px 9px; border-radius: 16px; background: #fffdf6; box-shadow: 0 0 0 2.5px var(--ink), 4px 5px 0 var(--ink); color: var(--ink); opacity: 0; transform: translateY(24px) rotate(10deg) scale(.7); transition: opacity .3s, transform .45s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
.pdp-gift svg { width: 62px; height: 62px; }
.pdp-gift b { font-size: 11px; }
.has-gift .pdp-gift { opacity: 1; transform: rotate(7deg); }
/* appetite: studio light, bokeh, a floor shadow, glinting rind and liquid juice */
.pdp-rays { position: absolute; inset: -30%; background: conic-gradient(from 200deg at 78% 22%,#fff0 0deg,#fff5c022 12deg,#fff0 24deg,#fff5c018 40deg,#fff0 52deg,#fff5c022 70deg,#fff0 84deg); mix-blend-mode: screen; animation: pdp-rays 24s ease-in-out infinite alternate; pointer-events: none; }
.pdp-bokeh { position: absolute; inset: 0; pointer-events: none; translate: calc(var(--px,0) * 22px) calc(var(--py,0) * 16px); }
.pdp-bokeh i { position: absolute; border-radius: 50%; background: radial-gradient(circle,#fff6c9b0 0,#fff6c940 45%,#fff0 70%); filter: blur(2px); animation: pdp-bokeh 11s ease-in-out infinite; }
.pdp-bokeh i:nth-child(1) { width: 15%; aspect-ratio: 1; left: 56%; top: 8%; }
.pdp-bokeh i:nth-child(2) { width: 7%; aspect-ratio: 1; left: 80%; top: 34%; animation-delay: -3s; filter: blur(1px); }
.pdp-bokeh i:nth-child(3) { width: 22%; aspect-ratio: 1; left: -6%; top: 52%; animation-delay: -6s; filter: blur(6px); opacity: .6; }
.pdp-bokeh i:nth-child(4) { width: 5%; aspect-ratio: 1; left: 40%; top: 30%; animation-delay: -2s; }
.pdp-bokeh i:nth-child(5) { width: 11%; aspect-ratio: 1; left: 88%; top: 6%; animation-delay: -8s; filter: blur(4px); }
.pdp-bokeh i:nth-child(6) { width: 9%; aspect-ratio: 1; left: 22%; top: 4%; animation-delay: -5s; filter: blur(3px); opacity: .7; }
[data-fruit="orange"] .pdp-bokeh i { background: radial-gradient(circle,#ffd9a8b0 0,#ffd9a840 45%,#fff0 70%); }
.pdp-floor { position: absolute; left: 12%; right: 8%; bottom: 7%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side,#000a,#0000); filter: blur(10px); opacity: .75; pointer-events: none; }
.fruit .shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../assets/art/citrus-lemon.webp) center / contain no-repeat; mask: url(../assets/art/citrus-lemon.webp) center / contain no-repeat;
  background: linear-gradient(112deg,#fff0 40%,#fffbe899 49%,#fffbe8dd 50%,#fffbe899 51%,#fff0 60%) no-repeat; background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: overlay; animation: pdp-glint 6.5s ease-in-out infinite; }
.pdp-stage.is-hover .fruit .shine { animation: none; background-position: calc(50% - var(--px,0) * 70%) 0; transition: background-position .35s ease-out; }
.fruit--orange .shine { -webkit-mask-image: url(../assets/art/citrus-orange.webp); mask-image: url(../assets/art/citrus-orange.webp); animation-delay: -3.2s; }
.fx { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.fruit--lemon .fx-core { left: 30%; top: 61%; } .fruit--lemon .fx-drip { left: 26%; top: 80%; } .fruit--lemon .fx-rind { left: 70%; top: 32%; }
.fruit--orange .fx-core { left: 73%; top: 57%; } .fruit--orange .fx-drip { left: 76%; top: 82%; } .fruit--orange .fx-rind { left: 33%; top: 32%; }
.pdp-juice, .pdp-mist { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; transition: opacity .3s; }
.pdp-juice { filter: url(#pdp-liquid) drop-shadow(0 4px 5px #0004); opacity: .86; }
.pdp:not([data-slide="0"]) .pdp-juice, .pdp:not([data-slide="0"]) .pdp-mist { opacity: 0; }

/* trust dock: frosted glass along the bottom of the photo */
.pdp-dock { --dock: 68px; position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); height: var(--dock); margin: 0; padding: 0 4px; list-style: none; border-radius: 18px; background: #0d241680; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px #ffffff2e, inset 0 1px 0 #ffffff40, 0 12px 30px #0003; color: #fffdf3; }
.pdp-dock li { position: relative; display: grid; grid-template-columns: auto minmax(0,auto); grid-template-rows: auto auto; justify-content: center; align-content: center; column-gap: 9px; padding: 0 6px; }
.pdp-dock li + li::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; border-left: 1px solid #ffffff26; }
.d-ico { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e9ff74; color: var(--ink); box-shadow: 0 0 0 3px #e9ff7433; }
.d-ico svg { width: 17px; height: 17px; }
.d-ico--star { background: #ffd23f; box-shadow: 0 0 0 3px #ffd23f33; }
.pdp-dock b { grid-row: 1 / 3; align-self: center; font: 800 12.5px/1.15 var(--f-display); letter-spacing: -.01em; }
.pdp-dock li:first-child b { grid-row: 1; align-self: end; }
.pdp-dock small { grid-column: 2; align-self: start; font-size: 10px; letter-spacing: .08em; color: #ffd23f; }
.pdp.is-seen .pdp-dock li { animation: pdp-rise .6s cubic-bezier(.2,.8,.2,1.2) both; }
.pdp.is-seen .pdp-dock li:nth-child(2) { animation-delay: .08s; } .pdp.is-seen .pdp-dock li:nth-child(3) { animation-delay: .16s; } .pdp.is-seen .pdp-dock li:nth-child(4) { animation-delay: .24s; }
.pdp-slide--photo figcaption { top: 16px; z-index: 1; }

.pdp-slide--photo { background: #f3e6c4; }
.pdp-slide--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.pdp[data-slide="1"] .pdp-slide--photo:nth-child(2) img, .pdp[data-slide="2"] .pdp-slide--photo:nth-child(3) img, .pdp[data-slide="3"] .pdp-slide--photo:nth-child(4) img { transform: scale(1.04); }

.pdp-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.pdp-thumbs button { position: relative; aspect-ratio: 1.25; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #2a5a37; box-shadow: inset 0 0 0 1px var(--line); opacity: .72; transition: opacity .2s, box-shadow .2s; }
.pdp-thumbs button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2.5px var(--ink); }
.pdp-thumbs button:hover { opacity: 1; }
.pdp-thumbs img { position: absolute; width: 70%; height: 90%; object-fit: contain; left: 2%; top: 4%; }
.pdp-thumbs img + img { left: 34%; top: 14%; }
.pdp-thumbs button:not(:first-child) img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.pdp-thumbs svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- buy box */
.pdp-buy { position: relative; min-width: 0; padding: 10px 0 6px; }
.pdp .citrus-cart { position: absolute; top: 4px; right: 0; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #20291e26; border-radius: 50%; background: var(--card); color: var(--ink); }
.citrus-cart svg { width: 21px; height: 21px; }
.citrus-cart b { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 12px; background: var(--pink); color: #fff; font-size: 10px; padding-inline: 4px; }
.pdp-eyebrow { margin: 0 0 10px; padding-right: 56px; font: 10px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pdp-buy h3 { margin: 0 0 10px; font: 900 clamp(30px,3.1vw,46px)/.95 var(--f-display); letter-spacing: -.045em; text-transform: uppercase; }
.pdp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; font-size: 12px; }
.pdp-rating a { color: var(--ink); font-weight: 800; text-decoration: none; }
.pdp-rating a span:last-child { font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.stars { color: var(--star); letter-spacing: .06em; }
.pdp-live { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.pdp-live i { width: 8px; height: 8px; border-radius: 50%; background: #2fae4f; box-shadow: 0 0 0 0 #2fae4f88; animation: pdp-ping 1.8s infinite; }
.pdp-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pdp-desc b { color: var(--ink); }

.pdp-opt { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.pdp-opt legend { margin-bottom: 9px; padding: 0; font-size: 12px; font-weight: 800; }
.pdp-opt legend span { margin-left: 6px; font-weight: 500; color: var(--muted); }
.pdp-variants, .pdp-plans { display: flex; gap: 8px; }
.pdp-variants button, .pdp-plans button, .pdp-bundles button, .pdp-schedule button { border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; transition: box-shadow .2s, background .2s, transform .15s; }
.pdp-variants button:hover, .pdp-plans button:hover, .pdp-bundles button:hover { box-shadow: inset 0 0 0 1.5px #20291e88; }
.pdp-variants button:active, .pdp-plans button:active, .pdp-bundles button:active { transform: scale(.98); }
.pdp-variants button[aria-pressed="true"], .pdp-plans button[aria-pressed="true"], .pdp-bundles button[aria-pressed="true"] { background: var(--pick); box-shadow: inset 0 0 0 2.5px var(--ink), 3px 4px 0 var(--ink); }
.pdp-variants button { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 8px; font-size: 13px; font-weight: 700; }
.vthumb { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2a5a37; overflow: hidden; }
.vthumb img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.vthumb--mix img { width: 70%; height: 70%; inset: auto; left: 0; top: 4%; }
.vthumb--mix img + img { left: 32%; top: 28%; }

.pdp-bundles { display: grid; gap: 9px; }
.pdp-bundles button { position: relative; display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 84px; padding: 10px 14px 10px 10px; text-align: left; }
.b-art { display: grid; place-items: center; width: 70px; height: 58px; }
.b-art svg { width: 100%; height: 100%; }
.b-photo img { width: 112%; height: 112%; object-fit: contain; filter: drop-shadow(0 6px 6px #0002); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pdp-bundles button:hover .b-photo img, .pdp-bundles button[aria-pressed="true"] .b-photo img { transform: scale(1.08) rotate(-3deg); }
.b-name { display: grid; gap: 2px; min-width: 0; }
.b-name > b { font: 900 21px/1 var(--f-display); letter-spacing: -.03em; }
.b-name > span { font-size: 12px; font-weight: 800; }
.b-name em { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--muted); }
.b-name .b-bonus { color: var(--green); font-weight: 700; }
.b-price { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.b-price b { font: 900 19px/1.1 var(--f-display); letter-spacing: -.03em; }
.b-price s { font-size: 11px; color: var(--muted); }
.b-price small { font-size: 10.5px; color: var(--muted); }
.b-tag { position: absolute; top: -9px; right: 12px; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #e9ff74; font: 700 9px/1.2 var(--f-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.b-tag--best { background: var(--pink); color: #fff; }
.b-tag--pink { background: var(--pink); color: #fff; }

.pdp-plans button { position: relative; flex: 1; min-width: 0; display: grid; gap: 3px; justify-items: start; min-height: 58px; padding: 10px 14px; text-align: left; }
.pdp-plans b { font-size: 13px; }
.pdp-plans small { font-size: 11px; color: var(--muted); }
.pdp-plans button[data-citrus-plan="subscription"] small { color: var(--green); font-weight: 700; }
.pdp-schedule { margin-top: 9px; }
.pdp-schedule[hidden] { display: none; }
.pdp-schedule > div { display: flex; gap: 8px; }
.pdp-schedule button { flex: 1; min-height: 42px; font-size: 12px; font-weight: 700; border-radius: 99px; }
.pdp-schedule button[aria-pressed="true"] { background: var(--ink); color: #fffdf6; box-shadow: none; }
.pdp-schedule p { margin: 8px 0 0; font-size: 11px; color: var(--muted); }

.pdp-stack { margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1.5px dashed #c8c2a8; }
.pdp-stack__title { margin: 0 0 8px; font: 700 10px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pdp-stack ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pdp-stack li { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 9px; font-size: 13px; }
.pdp-stack li svg { width: 16px; height: 16px; color: var(--green); }
.pdp-stack li.is-bonus svg { color: var(--pink); }
.pdp-stack li b { font-size: 12px; white-space: nowrap; }
.pdp-stack li.is-bonus b { color: var(--pink); }
.pdp-stack li s { color: var(--muted); font-weight: 500; margin-right: 3px; }
.pdp-stack__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pdp-stack__sum s { color: var(--ink); font-weight: 700; }
.pdp-stack__sum b { color: var(--ink); font: 900 18px/1 var(--f-display); letter-spacing: -.03em; }

.pdp-addons label { position: relative; display: grid; grid-template-columns: 22px 46px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 60px; margin-bottom: 7px; padding: 7px 14px 7px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s, background .2s; }
.pdp-addons label:has(input:checked) { background: #fff8d2; box-shadow: inset 0 0 0 2px var(--ink); }
.pdp-addons input { appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 2px solid #20291e66; background: #fff; display: grid; place-items: center; cursor: pointer; }
.pdp-addons input:checked { border-color: var(--ink); background: var(--ink); }
.pdp-addons input:checked::after { content: ""; width: 10px; height: 6px; border: solid #e9ff74; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.a-art { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: #f1ecd9; }
.a-art svg { width: 38px; height: 38px; }
.a-name { display: grid; gap: 2px; min-width: 0; }
.a-name b { font-size: 13px; }
.a-name small { font-size: 11px; color: var(--muted); }
.a-price { font-size: 13px; white-space: nowrap; }

.pdp-price { margin-top: 6px; }
.pdp-price__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pdp-price__main > b { font: 900 clamp(40px,3.8vw,54px)/1 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pdp-price__main > b.is-tick { animation: pdp-tick .45s cubic-bezier(.3,1.6,.5,1); }
.pdp-price__main s { font-size: 16px; color: var(--muted); }
.pdp-save { padding: 5px 9px; border-radius: 7px; background: #ffe0ee; color: var(--pink); font-size: 12px; font-weight: 800; align-self: center; }
.pdp-price__main [hidden] { display: none; }
.pdp-addon-sum { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--green); }
.pdp-addon-sum[hidden] { display: none; }
.pdp-price p { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.pdp-ship { margin: 12px 0 14px; }
.pdp-ship__bar { position: relative; height: 9px; margin-right: 11px; border-radius: 9px; background: #e6e1cc; }
.pdp-ship__bar > i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--ship,0)); background: linear-gradient(90deg,var(--lemon),var(--orange)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pdp-ship__lemon { position: absolute; top: 50%; left: calc(var(--ship,0) * 100%); width: 22px; height: 18px; margin: -9px 0 0 -11px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 2px var(--ink); transition: left .6s cubic-bezier(.2,.8,.2,1); }
.pdp-ship__lemon::after { content: ""; position: absolute; top: -5px; left: 9px; width: 8px; height: 5px; border-radius: 0 6px 0 6px; background: #4f8a3a; }
.pdp-ship p { margin: 9px 0 0; font-size: 12px; font-weight: 700; }
.pdp-ship.is-free .pdp-ship__bar > i { background: linear-gradient(90deg,#8fc24a,#4f8a3a); }

.pdp-cta { display: flex; gap: 8px; }
.pdp-qty { display: flex; align-items: center; flex: none; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pdp-qty button { width: 42px; height: 62px; border: 0; background: none; font-size: 20px; }
.pdp-qty button:disabled { opacity: .3; cursor: default; }
.pdp-qty output { min-width: 18px; text-align: center; font-weight: 800; }
.pdp .citrus-add { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 62px; padding: 14px 22px; border: 0; border-radius: 16px; background: linear-gradient(180deg,#2f6844,#1f4630); color: #fffdf3; font-size: 16px; font-weight: 800; box-shadow: inset 0 1px 0 #ffffff30, 0 6px 0 #10291a, 0 16px 26px -8px #10291a80; transition: filter .2s, transform .15s, box-shadow .15s; }
.citrus-add:hover { filter: brightness(1.12); }
.citrus-add [data-add-label] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.citrus-add:active { transform: translateY(4px); box-shadow: 0 2px 0 #10291a; }
.citrus-add svg { width: 22px; height: 22px; flex: none; transition: transform .2s; }
.citrus-add:hover svg { transform: translateX(4px); }
.pdp .citrus-add { position: relative; overflow: hidden; }
.pdp .citrus-add::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg,#fff0,#fff3,#fff0); transform: skewX(-18deg); animation: pdp-shine 4.5s ease-in-out 1.5s infinite; pointer-events: none; }
.is-added .citrus-add { background: #3f8a3d; }
.pdp-delivery { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; font-size: 13px; }
.pdp-delivery svg { width: 20px; height: 20px; flex: none; color: var(--green); }
.pdp-stock { display: grid; gap: 6px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.pdp-stock b { color: var(--pink); }
.pdp-stock > i { display: block; height: 5px; border-radius: 5px; background: #e6e1cc; overflow: hidden; }
.pdp-stock > i > i { display: block; width: 19%; height: 100%; background: var(--pink); border-radius: inherit; }

.pdp-guarantee { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #e9f0d8; }
.g-seal { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #fffdf6; }
.g-seal svg { width: 100%; height: 100%; animation: pdp-spin 22s linear infinite; }
.pdp-guarantee b { font: 900 15px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.pdp-guarantee p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: #3d4936; }
.pdp-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 16px; padding: 0; list-style: none; }
.pdp-pay li { padding: 5px 9px; border-radius: 7px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 800 11px/1.2 var(--f-display); letter-spacing: -.01em; }
.pdp-pay li:first-child { font-style: italic; color: #1a1f71; letter-spacing: .02em; }
.pdp-faq details { border-top: 1px solid var(--line); }
.pdp-faq details:last-child { border-bottom: 1px solid var(--line); }
.pdp-faq summary { position: relative; display: block; min-height: 44px; padding: 13px 30px 13px 0; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.pdp-faq summary::-webkit-details-marker { display: none; }
.pdp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-size: 20px; font-weight: 400; transition: transform .2s; }
.pdp-faq details[open] summary::after { transform: rotate(45deg); }
.pdp-faq p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- sourness meter */
.pdp-sour { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 4px 10px; margin-top: 12px; font: 700 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pdp-sour__bar { position: relative; height: 8px; margin-inline: 12px; border-radius: 8px; background: linear-gradient(90deg,#ff9537,#ffc23a 50%,#e6ef3a); }
.pdp-sour__face { position: absolute; top: 50%; left: calc(var(--sour,.5) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fffdf6 url(../assets/art/citrus-lemon.webp) center / 120% no-repeat; box-shadow: 0 0 0 2px var(--ink), 0 4px 10px #0003; transition: left .7s cubic-bezier(.3,1.6,.5,1); }
[data-fruit="orange"] .pdp-sour__face { background-image: url(../assets/art/citrus-orange.webp); }
.pdp-sour__face > i { display: none; }
.pdp-sour p { grid-column: 1 / -1; margin: 12px 0 0; font-family: var(--f-display); font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---------- bundle upgrade nudge */
.pdp-upsell { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 8px 12px 8px 8px; border: 1.5px dashed var(--pink); border-radius: 12px; background: #fff0f6; color: var(--ink); text-align: left; font-size: 12px; line-height: 1.4; animation: pdp-pop .45s cubic-bezier(.3,1.6,.5,1); }
.pdp-upsell[hidden] { display: none; }
.pdp-upsell b { color: var(--pink); }
.u-art { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: #fffdf6; }
.u-art svg { width: 40px; height: 40px; }
.u-go { padding: 8px 11px; border-radius: 9px; background: var(--pink); color: #fff; font-weight: 800; white-space: nowrap; transition: transform .15s; }
.pdp-upsell:hover .u-go { transform: translateX(2px) rotate(-2deg); }

/* ---------- price per glass */
.pdp .pdp-glass { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink); }
.pdp-glass svg { width: 18px; height: 18px; flex: none; color: var(--green); }
.pdp-glass b { font-weight: 800; }

/* ---------- us versus them, how it works */
.pdp-versus { padding: 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pdp-versus h4 { margin: 0 0 14px; font: 900 22px/1 var(--f-display); letter-spacing: -.035em; text-transform: uppercase; }
.pdp-versus h4 i { font-style: normal; color: var(--pink); }
.pdp-versus table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12.5px; }
.pdp-versus thead th { padding: 0 8px 10px; font: 800 12px/1.2 var(--f-display); text-align: center; vertical-align: bottom; }
.pdp-versus thead td { width: 32%; }
.pdp-versus tbody th { padding: 9px 8px 9px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 600; color: var(--muted); }
.pdp-versus tbody td { padding: 9px 8px; text-align: center; border-top: 1px solid var(--line); }
.pdp-versus tbody td:nth-child(2) { background: #fff8d2; font-weight: 800; }
.pdp-versus tbody tr:last-child td:nth-child(2) { border-radius: 0 0 12px 12px; }
.pdp-versus thead .vs-us { padding-top: 10px; border-radius: 12px 12px 0 0; background: #fff8d2; }
.pdp-versus tbody td:nth-child(2)::before { content: "\2713  "; color: #2f8a3c; }
.pdp-versus tbody td:nth-child(3) { color: var(--muted); }
.pdp-versus tbody td:nth-child(3)::before { content: "\2715  "; color: #c2473a; font-weight: 800; }
.vs-pic { position: relative; display: block; width: 58px; height: 58px; margin: 0 auto 6px; }
.vs-pic img { width: 100%; height: 100%; object-fit: contain; }
.vs-us .vs-pic { animation: pdp-hop 2.4s ease-in-out infinite; }
.vs-them .vs-pic img { filter: grayscale(1) brightness(.92) contrast(.9); transform: rotate(78deg) scale(.86); opacity: .8; }
.vs-zzz { position: absolute; right: -6px; top: -4px; font: 900 14px/1 var(--f-display); font-style: normal; color: var(--muted); animation: pdp-zzz 2.8s ease-in-out infinite; }
.vs-zzz i { margin-left: 1px; font-style: normal; font-size: 10px; vertical-align: super; }
.pdp-steps__title { margin: 22px 0 10px; font: 700 10px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pdp-steps { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pdp-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 17px; border-top: 2px dashed #c8c2a8; }
.pdp-steps li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; counter-increment: step; font-size: 11.5px; color: var(--muted); }
.pdp-steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%; background: var(--lemon); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); font: 900 16px/1 var(--f-display); }
.pdp-steps li:nth-child(2)::before { background: var(--orange); }
.pdp-steps li:nth-child(3)::before { background: #9fd36b; }
.pdp-steps b { font: 900 14px/1.1 var(--f-display); color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- reviews */
.pdp-reviews { grid-column: 1 / -1; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.pdp-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.pdp-reviews h4 { margin: 0; font: 900 22px/1 var(--f-display); letter-spacing: -.03em; }
.pdp-reviews__head > p { margin: 0; font-size: 12px; color: var(--muted); }
.pdp-dist { display: grid; gap: 3px; min-width: 210px; margin-left: auto; }
.pdp-dist p { display: grid; grid-template-columns: 26px minmax(0,1fr) 32px; align-items: center; gap: 8px; margin: 0; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.pdp-dist p span:last-child { text-align: right; }
.pdp-dist i { height: 6px; border-radius: 6px; background: linear-gradient(90deg,var(--star) calc(var(--w) * 100%),#e6e1cc 0); }
.pdp-reviews__list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.pdp-reviews blockquote { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin: 0; padding: 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pdp-reviews blockquote:nth-child(2) { transform: rotate(.6deg); } .pdp-reviews blockquote:nth-child(3) { transform: rotate(-.5deg); }
.pdp-reviews blockquote p { margin: 0; font-size: 13px; line-height: 1.55; }
.pdp-reviews footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.r-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.r-who > span { display: grid; gap: 1px; min-width: 0; }
.r-who b { color: var(--ink); }
.r-who small { font-size: 10px; font-weight: 600; color: #2f7a3a; }
.r-ava { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); font: 900 13px/1 var(--f-display); font-style: normal; }

/* ---------- sticky phone bar, flying fruit */
.pdp-sticky { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: 10px; display: none; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 18px; background: #14150f; color: #fffdf6; box-shadow: 0 10px 30px #0007; transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pdp-sticky.is-on { transform: none; }
.pdp-sticky__img { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #2a5a37; display: grid; place-items: center; }
.pdp-sticky__img img { width: 88%; height: 88%; object-fit: contain; }
.pdp-sticky__info { display: grid; min-width: 0; font-size: 12px; }
.pdp-sticky__info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky__info span { color: #e9ff74; font-weight: 800; }
.pdp-sticky button { margin-left: auto; flex: none; min-height: 46px; padding: 0 18px; border: 0; border-radius: 13px; background: #e9ff74; color: #14150f; font-weight: 800; font-size: 13px; }
html.demo-cart-open .pdp-sticky { transform: translateY(140%); }
.pdp-fly { position: fixed; z-index: 9999; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 10px #0005); }

.citrus-meta { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); grid-template-rows: auto auto; gap: 24px clamp(28px,4vw,64px); margin-top: 22px; padding: clamp(24px,3vw,40px); border-radius: 28px; background: radial-gradient(120% 140% at 0% 0%,#e9ff7414,#0000 55%), #121310; box-shadow: inset 0 0 0 1px #ffffff1a; color: var(--white); }
.citrus-meta__copy { display: grid; align-content: start; gap: 16px; }
.citrus-meta__demo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0; padding: 7px 12px 7px 9px; border-radius: 99px; background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff1f; color: #d9dccd; font-size: 13px; font-weight: 600; }
.citrus-meta__demo svg { width: 16px; height: 16px; color: var(--lime); }
.citrus-meta h3 { margin: 0; font: 900 clamp(28px,3vw,44px)/.98 var(--f-display); letter-spacing: -.04em; text-transform: uppercase; }
.citrus-meta h3 em { display: block; font-style: italic; color: var(--lime); }
.citrus-meta h3 .nw { white-space: nowrap; }
.citrus-meta__platforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.citrus-meta__platforms li { padding: 8px 13px; border-radius: 10px; background: #fffdf6; color: #14150f; font: 800 13px/1 var(--f-display); letter-spacing: -.01em; }
.citrus-meta__platforms li:last-child { background: var(--lime); }
.citrus-meta__features { grid-row: 1 / 3; grid-column: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: feat; }
.citrus-meta__features li { position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 52px; border-radius: 16px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff14; counter-increment: feat; transition: background .2s, transform .2s; }
.citrus-meta__features li:hover { background: #ffffff10; transform: translateY(-2px); }
.citrus-meta__features li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%2314150f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.citrus-meta__features b { font-size: 15px; letter-spacing: -.01em; }
.citrus-meta__features span { font-size: 13px; line-height: 1.45; color: #a9ac9e; }
.citrus-meta__cta { align-self: end; justify-self: start; }
.citrus-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes pdp-squeeze { 0% { scale: 1; } 22% { scale: 1.035 .955; } 60% { scale: .99 1.01; } 100% { scale: 1; } }
@keyframes pdp-spin { to { rotate: 360deg; } }
@keyframes pdp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(18deg); } }
@keyframes pdp-rays { to { rotate: 8deg; scale: 1.06; } }
@keyframes pdp-bokeh { 50% { transform: translate(10px,-14px) scale(1.12); opacity: .55; } }
@keyframes pdp-glint { 0%, 52% { background-position: 140% 0; } 82%, 100% { background-position: -40% 0; } }
@keyframes pdp-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pdp-ticker { to { transform: translateX(-50%); } }
@keyframes pdp-tick { 0% { transform: translateY(6px) scale(.94); opacity: .5; } 100% { transform: none; opacity: 1; } }
@keyframes pdp-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes pdp-hop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-6px) rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes pdp-zzz { 50% { transform: translate(3px,-4px); opacity: .5; } }
@keyframes pdp-shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@keyframes pdp-sun { 50% { scale: 1.12; opacity: .8; } }
@keyframes pdp-ping { 70% { box-shadow: 0 0 0 8px #2fae4f00; } 100% { box-shadow: 0 0 0 0 #2fae4f00; } }

@media (max-width: 1180px) {
  .pdp-reviews__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .pdp { grid-template-columns: minmax(0,1fr); }
  .pdp-side, .pdp-rail { display: contents; }
  .pdp-gallery { position: relative; top: 0; }
  .pdp-versus { order: 1; margin-top: 26px; }
  .pdp-reviews { order: 2; }
  .pdp-buy { padding-top: 22px; }
}
@media (max-width: 760px) {
  .citrus-head { align-items: start; flex-direction: column; gap: 20px; margin-bottom: 24px; }
  .citrus-head .display { font-size: clamp(36px,6vw,52px); }
  .citrus-head .btn { font-size: 12px; min-height: 48px; }
  .pdp { --pad: 12px; border-radius: 20px; }
  .pdp-ticker { border-radius: 20px 20px 0 0; font-size: 10px; }
  .pdp-stage { aspect-ratio: 1 / 1.02; border-radius: 16px; }
  .pdp-fruits { inset: 26% -3% 0; }
  .fruit { width: 68%; }
  .pdp-burst { width: 68px; height: 68px; top: 12px; right: 12px; }
  .pdp-word { font-size: 7.8cqw; top: 9%; }
  .pdp-burst b { font-size: 17px; }
  .pdp-gift { width: 76px; padding: 6px; right: 12px; bottom: calc(8px + 58px + 10px); }
  .pdp-gift svg { width: 46px; height: 46px; }
  .pdp-gift b { font-size: 9.5px; }
  .pdp-weight { left: 12px; bottom: calc(8px + 58px + 10px); font-size: 15px; }
  .pdp-dock { left: 8px; right: 8px; bottom: 8px; height: 58px; padding: 0; border-radius: 14px; }
  .pdp-dock li { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; justify-items: center; row-gap: 4px; column-gap: 0; padding: 0 3px; text-align: center; }
  .d-ico { grid-row: 1; width: 24px; height: 24px; } .d-ico svg { width: 13px; height: 13px; }
  .pdp-dock b, .pdp-dock li:first-child b { grid-row: 2; font-size: 10px; line-height: 1.1; }
  .pdp-dock small { display: none; }
  .pdp-thumbs { gap: 6px; }
  .pdp-buy { padding: 26px 4px 6px; }
  .pdp .citrus-cart { top: 18px; width: 42px; height: 42px; }
  .pdp .citrus-add { padding-inline: 16px; font-size: 14.5px; }
  .pdp-variants button { flex-direction: column; gap: 4px; min-height: 66px; font-size: 12px; }
  .pdp-bundles button { grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; padding-right: 12px; }
  .b-art { width: 54px; height: 46px; }
  .b-name em.b-line { display: none; }
  .pdp-plans button { padding: 10px 11px; }
  .pdp-addons label { grid-template-columns: 22px 40px minmax(0,1fr) auto; gap: 9px; padding-inline: 10px; }
  .a-art { width: 40px; height: 40px; } .a-art svg { width: 32px; height: 32px; }
  .pdp-guarantee { grid-template-columns: 58px minmax(0,1fr); gap: 12px; padding: 12px; }
  .pdp-versus { padding: 16px 12px; }
  .pdp-versus h4 { font-size: 19px; }
  .pdp-versus table { font-size: 11.5px; }
  .pdp-versus tbody td { padding-inline: 4px; }
  .pdp-versus thead td { width: 30%; }
  .pdp-dist { width: 100%; margin-left: 0; }
  .pdp-upsell { grid-template-columns: 40px minmax(0,1fr); }
  .u-art { width: 40px; height: 40px; } .u-art svg { width: 34px; height: 34px; }
  .u-go { grid-column: 1 / -1; text-align: center; }
  .g-seal { width: 58px; height: 58px; }
  .pdp-reviews__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -12px; padding: 4px 12px 8px; }
  .pdp-reviews__list::-webkit-scrollbar { display: none; }
  .pdp-reviews blockquote { flex: 0 0 82%; scroll-snap-align: center; }
  .pdp-sticky { display: flex; }
  .citrus-meta { grid-template-columns: minmax(0,1fr); padding: 22px 18px; border-radius: 22px; }
  .citrus-meta__features { grid-row: auto; grid-column: auto; grid-template-columns: minmax(0,1fr); }
  .citrus-meta__features { gap: 8px; }
  .citrus-meta__features li { gap: 2px; padding: 12px 12px 12px 46px; border-radius: 14px; }
  .citrus-meta__features li::before { left: 12px; top: 13px; }
  .citrus-meta__features b { font-size: 14px; }
  .citrus-meta__features span { font-size: 12.5px; }
  .citrus-meta h3 { font-size: 30px; }
  .citrus-meta__cta { justify-self: stretch; justify-content: center; }
}
@media (max-width: 380px) {
  .pdp-variants button { font-size: 11px; }
  .pdp-bundles button { grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px; padding-left: 8px; }
  .b-art { width: 44px; height: 38px; }
  .b-name > b { font-size: 18px; } .b-price b { font-size: 16px; }
  .pdp-qty button { width: 34px; }
  .pdp .citrus-add { padding-inline: 14px; font-size: 13px; }
  .pdp .citrus-add { justify-content: center; }
  .pdp .citrus-add svg { display: none; }
  .citrus-meta h3 { font-size: 26px; }
  .pdp-steps b { font-size: 11px; }
  .pdp-steps li { font-size: 10.5px; }
  .pdp-versus tbody td:nth-child(n+2)::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp *, .pdp-sticky { transition: none !important; animation: none !important; }
}
.pdp-slide figcaption { top: 16px; bottom: auto; }
.pdp-weight, .pdp-gift { transition-property: opacity, transform; }
.pdp:not([data-slide="0"]) .pdp-weight, .pdp:not([data-slide="0"]) .pdp-gift { opacity: 0; }
.pdp-sticky__img { position: relative; overflow: hidden; }
.pdp-sticky__img img[hidden] { display: none; }
.pdp-sticky__img.is-mix img { position: absolute; width: 70%; height: 70%; left: 2%; top: 4%; }
.pdp-sticky__img.is-mix img + img { left: 30%; top: 28%; }
.b-price s[hidden] { display: none; }

/* ---------- before and after: a template page covers the shop until Futík smashes it */
.rv { position: absolute; z-index: 40; left: 0; right: 0; top: 0; perspective: 1300px; pointer-events: none; }
.rv-whole { position: absolute; inset: 0; }
.rv-glare { position: absolute; inset: 0; border-radius: 28px 28px 0 0; background: linear-gradient(115deg,#fff0 30%,#ffffff2e 42%,#fff0 50%,#fff0 64%,#ffffff1c 70%,#fff0 76%); pointer-events: none; }
.rv-shard { position: absolute; will-change: transform, opacity; filter: drop-shadow(0 14px 16px #0006); }
.rv-shard__in { position: absolute; inset: 0; overflow: hidden; }
.rv-sheen { position: absolute; inset: -20%; background: linear-gradient(115deg,#fff0 35%,#ffffffcc 49%,#fff 50%,#ffffffcc 51%,#fff0 65%) no-repeat; background-size: 300% 100%; mix-blend-mode: screen; opacity: 0; }
.rv-edge { position: absolute; inset: 0; overflow: visible; }
.rv-edge polygon { fill: none; stroke: #ffffffe6; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 2px #bfe8ff); }
.rv-page { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 28px 28px 0 0; background: #fff; color: #333; font: 13px/1.45 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; }
.rv-page p { margin: 0; }
.rv-top { display: flex; justify-content: space-between; gap: 16px; padding: 7px 26px; background: #f1f1f1; border-bottom: 1px solid #ddd; font-size: 11px; color: #777; }
.rv-head { display: flex; align-items: center; gap: 22px; padding: 18px 26px; border-bottom: 1px solid #e6e6e6; }
.rv-logo { font: bold 24px Arial, sans-serif; color: #1d5fbf; }
.rv-logo small { font-size: 14px; color: #888; }
.rv-search { flex: 1; max-width: 360px; padding: 7px 10px; border: 1px solid #bbb; background: #fafafa; color: #999; font-size: 12px; }
.rv-cart { margin-left: auto; padding: 8px 12px; border: 1px solid #ccc; background: #f6f6f6; font-size: 12px; }
.rv-menu { display: flex; background: linear-gradient(#2d6fd2,#1d5fbf); }
.rv-menu span { padding: 10px 18px; border-right: 1px solid #ffffff33; color: #fff; font-size: 13px; }
.rv-crumbs { padding: 12px 26px; font-size: 11px; color: #888; }
.rv-body { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 28px; padding: 4px 26px 24px; }
.rv-photo { display: grid; place-items: center; aspect-ratio: 1.2; border: 1px solid #ddd; background: #fff; }
.rv-photo img { width: 58%; filter: saturate(.5) contrast(.9) brightness(1.05); }
.rv-info h4 { margin: 0 0 6px; font: 24px/1.2 Arial, sans-serif; color: #222; }
.rv-code { margin-bottom: 8px !important; font-size: 11px; color: #888; }
.rv-stock { margin-bottom: 14px !important; color: #2a8a2a; font-size: 12px; font-weight: bold; }
.rv-price { margin-bottom: 14px !important; color: #c00; font: bold 24px Arial, sans-serif; }
.rv-price small { font: 11px Arial, sans-serif; color: #777; }
.rv-buy { display: flex; gap: 8px; margin-bottom: 22px !important; }
.rv-qty { width: 44px; padding: 6px; border: 1px solid #bbb; text-align: center; }
.rv-btn { padding: 7px 18px; border: 1px solid #9a9a9a; border-radius: 3px; background: linear-gradient(#fdfdfd,#dcdcdc); font-size: 13px; }
.rv-tabs { display: flex; border-bottom: 1px solid #ccc; }
.rv-tabs span { margin-right: -1px; padding: 6px 14px; border: 1px solid #ccc; border-bottom: 0; background: #f4f4f4; font-size: 12px; }
.rv-tabs span:first-child { background: #fff; }
.rv-desc { margin-top: 12px !important; font-size: 12px; color: #555; }
.rv-note { position: absolute; right: 4%; top: 46%; padding: 14px 20px; border-radius: 14px; background: #e9ff74; color: #14150f; font: 27px/1.05 var(--f-hand); transform: rotate(-5deg); box-shadow: 0 0 0 2.5px #14150f, 5px 6px 0 #14150f; }
.rv-cracks { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.rv-crack { fill: none; stroke: #262626; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(1px 1px 0 #fff) drop-shadow(0 0 3px #9fdcff); }
.rv-crack--ring { stroke-width: 1.3; }
.rv-speed { fill: none; stroke: #14150f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .35 1.35; }
.rv-wave { fill: none; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px #bfe8ff); }
.rv-futik { position: absolute; left: 0; top: 0; z-index: 4; }
.rv-futik .futik { cursor: default; filter: drop-shadow(0 18px 18px #0005); }
.rv-splat { position: absolute; z-index: 3; }
.rv-splat svg { width: 100%; height: 100%; overflow: visible; fill: #ffd84a; }
.rv-word { position: absolute; z-index: 5; padding: 6px 18px 10px; color: #e9ff74; font: 900 clamp(46px,6vw,92px)/1 var(--f-display); letter-spacing: -.04em; -webkit-text-stroke: 3px #14150f; paint-order: stroke fill; text-shadow: 5px 6px 0 #14150f; transform-origin: 30% 70%; }
.rv-word::before { content: ""; position: absolute; inset: -30% -18%; z-index: -1; background: #ff3d8b; clip-path: polygon(50% 0,58% 22%,78% 6%,74% 30%,100% 26%,82% 46%,98% 64%,74% 64%,80% 92%,58% 74%,48% 100%,40% 74%,16% 94%,22% 66%,0 60%,20% 44%,4% 20%,28% 28%,26% 4%,42% 22%); }
.rv-flash { position: absolute; inset: 0; z-index: 6; background: radial-gradient(circle at 31% 42%,#fff,#fffbe6cc 40%,#fff0 75%); }
.rv-dust { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .rv-page, .rv-glare { border-radius: 20px 20px 0 0; }
  .rv-shard { filter: none; }
  .rv-flash { background: radial-gradient(circle at 46% 36%,#fff,#fffbe6cc 40%,#fff0 75%); }
  .rv-word { -webkit-text-stroke-width: 2px; text-shadow: 3px 4px 0 #14150f; }
  .rv-top span:last-child, .rv-search { display: none; }
  .rv-top, .rv-head, .rv-crumbs { padding-inline: 14px; }
  .rv-head { gap: 10px; padding-block: 14px; }
  .rv-logo { font-size: 19px; }
  .rv-menu { overflow: hidden; }
  .rv-menu span { padding: 9px 12px; font-size: 12px; }
  .rv-body { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 0 14px 18px; }
  .rv-photo { aspect-ratio: 1.5; }
  .rv-photo img { width: 46%; }
  .rv-note { left: 50%; right: auto; top: auto; bottom: 25%; font-size: 21px; white-space: nowrap; transform: translateX(-50%) rotate(-4deg); }
}