/* Extracted from bluberry.html. Keep this file after the shared styles. */
/* Original inline style 1 */
/* ساختار پایه Swiper باید مستقل از کلاس‌های Tailwind باقی بماند. */
.blueberry-page .fresh-pick-hero {
background-color: #141BA9 !important;
}
.product-swiper {
width: 100%;
height: 100%;
}
.product-swiper .product-quantity-value {
min-width: 24px;
color: #fff;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1;
text-align: center;
}
/* Keep the cart circle and quantity pill in exactly the same slot.
Both states must be taken out of the action row's flex flow;
otherwise the row re-centers while the pill is closing and the
circle appears to jump vertically. */
.product-swiper [data-product-card] .flex.items-center.justify-between.mt-2:last-child {
position: relative;
min-height: 56px;
}
.product-swiper .product-cart-trigger,
.product-swiper .product-quantity-control {
position: absolute;
top: 50%;
right: 0;
margin: 0;
transform: translateY(-50%);
}
.product-swiper .product-cart-trigger {
z-index: 2;
}
.product-swiper .product-quantity-control {
z-index: 1;
display: none;
width: 168px;
height: 56px;
flex: 0 0 168px;
align-items: center;
justify-content: space-between;
overflow: hidden;
border-radius: 999px;
padding: 0 20px;
background: var(--product-cart-control, #7c83ff);
color: #fff;
}
.product-swiper .product-quantity-control:not(.hidden) {
display: flex;
}
.product-swiper .product-quantity-button {
display: grid;
width: 56px;
height: 56px;
flex: 0 0 56px;
place-items: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: inherit;
}
@media (max-width: 767.98px) {
.product-swiper [data-product-card] .flex.items-center.justify-between.mt-2:last-child {
min-height: 48px;
}
.product-swiper .product-quantity-control {
width: 130px;
height: 48px;
flex-basis: 130px;
padding: 0 16px;
}
.product-swiper .product-quantity-button {
width: 48px;
height: 48px;
flex-basis: 48px;
}
}
.swiper-wrapper {
display: flex;
}
/* Original inline style 2 */
/* Mobile blueberry geometry calibrated from the supplied 390px Figma screenshot. */
@media (min-width: 1000px) {
/* Desktop Figma places the goddess slightly higher in the blue field. */
.goddess-figma-stage__art {
bottom: 28% !important;
}
/* Leaves sit lower, behind the goddess, as in the Figma composition. */
.goddess-figma-stage__leaves {
top: 360px !important;
}
}
@media (max-width: 767.98px) {
/* Figma mobile: title sits in its own layer immediately above Fortune. */
.goddess-figma-stage__heading {
position: absolute !important;
top: -4.8vw !important;
left: 0 !important;
z-index: 4 !important;
width: 100% !important;
margin: 0 !important;
overflow: visible !important;
pointer-events: none !important;
transform: none !important;
}
.goddess-figma-stage__heading svg {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
}
#berryJourneySource {
/* Source berry: centered on the branch exactly like the reference. */
left: 25% !important;
top: 68.04178706vw !important;
width: 50.29232319vw !important;
height: auto !important;
aspect-ratio: auto !important;
max-width: none !important;
transform: none !important;
translate: none !important;
--tw-translate-x: 0px !important;
--tw-translate-y: 0px !important;
object-fit: contain !important;
}
.berry-journey__anchor--middle-mobile {
/* Restore the Figma mobile stop beside Features. */
left: 71.551983% !important;
top: 48.559205% !important;
width: 21.025641vw !important;
aspect-ratio: 489 / 509 !important;
}
.goddess-figma-stage__art {
left: 0 !important;
top: 0 !important;
bottom: auto !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
}
.goddess-figma-stage__leaves {
left: -2.56410256% !important;
top: 82.70192026vw !important;
width: 100vw !important;
height: 56.26598465vw !important;
}
.goddess-figma-stage__leaves>picture,
.goddess-figma-stage__leaves>picture>img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
}
.goddess-figma-stage__leaves>picture>img {
object-fit: fill !important;
}
.goddess-figma-stage__character {
left: 27.47070313% !important;
top: 45vw !important;
bottom: auto !important;
width: 45.05840204vw !important;
height: 87.63531807vw !important;
transform: none !important;
}
.goddess-figma-stage__character>picture,
.goddess-figma-stage__character>picture>img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
}
.goddess-figma-stage__character>picture>img {
object-fit: fill !important;
}
/* Keep the lower body behind the yellow product wave, like Figma. */
.goddess-product-section {
position: relative !important;
z-index: 10 !important;
}
.goddess-figma-stage__orb--left[data-berry-anchor="end"] {
/* Keep the mobile endpoint identical to the supplied JS reference. */
left: 26.7% !important;
top: 21% !important;
width: 16.7% !important;
height: auto !important;
object-fit: fill !important;
}
.goddess-figma-stage__orb--right {
left: 75.12614495% !important;
top: 112.41973341vw !important;
width: 17.73069137vw !important;
height: 18.45587315vw !important;
object-fit: fill !important;
}
}
/* Original inline style 3 */
.goddess-figma-stage__fortune-card {
opacity: 0;
visibility: hidden;
filter: blur(8px);
transform: translate3d(0, 0, 0);
pointer-events: none;
will-change: opacity, filter, transform;
transition: opacity 860ms cubic-bezier(0.22, 1, 0.36, 1),
filter 860ms ease, transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 860ms;
}
.goddess-figma-stage__fortune-card.is-visible {
opacity: 1;
visibility: visible;
filter: blur(0);
transform: translate3d(0, 0, 0);
pointer-events: auto;
transition-delay: 0s;
}
.goddess-figma-stage__fortune-card.is-changing {
opacity: 0;
filter: blur(4px);
transform: translate3d(0, 0, 0);
pointer-events: none;
transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
filter 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goddess-figma-stage__fortune-card .fortune-text {
display: block;
font-family: "Helvetica Now Var", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 24px !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
padding-top: 0;
will-change: opacity, filter;
transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
filter 320ms ease;
}
.goddess-figma-stage__fortune-card .fortune-text-shell {
box-sizing: border-box;
width: 100%;
padding: 20px !important;
}
.goddess-figma-stage__fortune-card .fortune-text.is-changing {
opacity: 0;
transform: translate3d(0, 0, 0);
filter: blur(2px);
}
.goddess-product-boundary {
z-index: auto !important;
pointer-events: none !important;
}
.goddess-product-boundary__shape {
z-index: 0 !important;
pointer-events: none !important;
}
.daily-fortune-button {
left: 50% !important;
right: auto !important;
top: -5.34977vw !important;
margin-left: 0 !important;
translate: 0 0 !important;
transform: translateX(-50%) !important;
transform-origin: 50% 50% !important;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
cursor: pointer !important;
isolation: isolate;
overflow: visible !important;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
z-index: 45 !important;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms ease, filter 220ms ease;
}
.daily-fortune-button>* {
cursor: pointer;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
}
.daily-fortune-button::before {
pointer-events: none;
animation: daily-fortune-inner-pulse 1.35s ease-in-out infinite;
transform-origin: 50% 50%;
z-index: 0;
}
.daily-fortune-button::after {
content: '';
position: absolute;
inset: -8px;
z-index: -1;
border-radius: 999px;
border: 2px solid rgba(218, 252, 95, 0.48);
opacity: 0;
pointer-events: none;
transform: scale(0.88);
transform-origin: 50% 50%;
will-change: transform, opacity;
animation: daily-fortune-soft-pulse 1.05s ease-out infinite;
}
.daily-fortune-button.is-clicked,
.daily-fortune-button:active {
transform: translateX(-50%) scale(0.965) !important;
}
@media (min-width: 1920px) {
.daily-fortune-button {
top: -102.71542px !important;
left: 50% !important;
width: 136px !important;
height: 136px !important;
}
}
@media (max-width: 999.98px) {
.goddess-figma-stage__fortune-card {
filter: blur(4px);
transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
filter 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 520ms;
}
.goddess-figma-stage__fortune-card.is-changing {
filter: blur(2px);
transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
filter 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goddess-figma-stage__fortune-card .fortune-text {
font-size: 16px !important;
font-weight: 300 !important;
line-height: 1.4 !important;
}
.goddess-figma-stage__fortune-card .fortune-text-shell {
padding: 16px !important;
}
.daily-fortune-button {
top: -14.10306vw !important;
height: 21.53846vw !important;
width: 21.53846vw !important;
}
}
@keyframes daily-fortune-soft-pulse {
0%,
100% {
opacity: 0;
transform: scale(0.88);
}
34% {
opacity: 0.56;
transform: scale(1.08);
}
52% {
opacity: 0.2;
transform: scale(1.16);
}
70% {
opacity: 0.42;
transform: scale(1.24);
}
}
@keyframes daily-fortune-inner-pulse {
0%,
100% {
opacity: 0.92;
transform: scale(1);
filter: brightness(1);
}
50% {
opacity: 1;
transform: scale(1.045);
filter: brightness(1.08) saturate(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
.daily-fortune-button,
.daily-fortune-button::before,
.daily-fortune-button::after {
animation: none;
}
}
/* Original inline style 4 */
#cartInner {
background: #121cf0 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
#cartInner::before {
content: "";
position: absolute;
inset: 4px;
z-index: 0;
border-radius: inherit;
background: linear-gradient(90deg,
#080d61 0%,
#090e68 12%,
#0a1074 25%,
#0c138c 40%,
#0e16ad 58%,
#1019d3 78%,
#121cf0 100%);
filter: blur(7px);
pointer-events: none;
}
#addText {
position: absolute !important;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
pointer-events: none;
transition:
opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
filter 360ms ease;
}
#cartControls {
position: absolute !important;
inset: 0;
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 44px;
opacity: 0;
visibility: hidden;
filter: blur(5px);
transform: translate3d(0, 12px, 0) scale(0.985);
pointer-events: none;
transition:
opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
filter 460ms ease,
visibility 0s linear 460ms;
will-change: opacity, transform, filter;
}
#cartControls svg {
flex: 0 0 auto;
cursor: pointer;
transition: transform 180ms ease, opacity 180ms ease;
}
#cartControls svg:hover {
transform: scale(1.08);
}
#cartControls svg:active {
transform: scale(0.94);
}
#count {
color: #fff;
pointer-events: none;
transition:
opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
#count.is-updating {
opacity: 0.25;
transform: translate3d(0, -3px, 0) scale(0.96);
}
#cartInner.is-cart-active {
cursor: default;
}
#cartInner.is-cart-active #addText {
opacity: 0;
filter: blur(4px);
transform: translate3d(0, -12px, 0) scale(0.985);
}
#cartInner.is-cart-active #cartControls {
opacity: 1;
visibility: visible;
filter: blur(0);
transform: translate3d(0, 0, 0) scale(1);
pointer-events: auto;
transition-delay: 80ms, 80ms, 80ms, 0s;
}
[data-float-buy-now] {
cursor: pointer;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
[data-float-buy-now] [data-float-buy-start] {
transition:
opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
filter 360ms ease;
will-change: opacity, transform, filter;
}
[data-float-buy-controls] {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 34px;
opacity: 0;
visibility: hidden;
filter: blur(5px);
transform: translate3d(0, 10px, 0) scale(0.985);
pointer-events: none;
transition:
opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
filter 460ms ease,
visibility 0s linear 460ms;
will-change: opacity, transform, filter;
}
[data-float-buy-now].is-buy-active [data-float-buy-start] {
opacity: 0;
filter: blur(4px);
transform: translate3d(0, -10px, 0) scale(0.985);
pointer-events: none;
}
[data-float-buy-now].is-buy-active [data-float-buy-controls] {
opacity: 1;
visibility: visible;
filter: blur(0);
transform: translate3d(0, 0, 0) scale(1);
pointer-events: auto;
transition-delay: 80ms, 80ms, 80ms, 0s;
}
[data-float-buy-controls] svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
cursor: pointer;
transition: transform 180ms ease, opacity 180ms ease;
}
[data-float-buy-action="increase"] {
width: 26px;
height: 26px;
}
[data-float-buy-controls] svg:hover {
transform: scale(1.08);
}
[data-float-buy-controls] svg:active {
transform: scale(0.94);
}
[data-float-buy-count] {
color: #070A4D;
font-family: "Helvetica Now Var", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 900;
line-height: 1;
transition:
opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-float-buy-count].is-updating {
opacity: 0.25;
transform: translate3d(0, -3px, 0) scale(0.96);
}
@media (max-width: 767.98px) {
#cartControls {
padding: 0 28px;
}
[data-float-buy-controls] {
padding-left: 24px !important;
padding-right: 24px !important;
}
[data-float-buy-controls] svg {
width: 20px;
height: 20px;
}
[data-float-buy-action="increase"] {
width: 22px;
height: 22px;
}
[data-float-buy-count] {
font-size: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
#addText,
#cartControls,
#cartControls svg,
#count,
[data-float-buy-now] [data-float-buy-start],
[data-float-buy-controls],
[data-float-buy-controls] svg,
[data-float-buy-count] {
transition: none;
}
}
/* Original inline style 5 */
/* Mobile popup stays at the viewport bottom with the same visual gutter as its side gutters. */
@media (max-width: 767.98px) {
[data-product-float-card] {
/* 342px visible card width -> 24px on each side at the 390px reference frame. */
bottom: calc(136px + ((100vw - 342px) / 2)) !important;
}
[data-product-float-card]>.float-card {
transform-origin: 50% 100%;
}
[data-product-float-card].is-hidden-at-mobile-copy {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition:
opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 180ms;
}
[data-product-float-card].is-hidden-at-mobile-copy>.float-card {
transform: translate3d(0, 8px, 0);
}
}
@media (max-width: 359.98px) {
[data-product-float-card] {
/* 342px x .90 = 307.8px visual width. */
bottom: calc(143.2px + 5vw) !important;
}
[data-product-float-card]>.float-card {
scale: 0.90;
}
}
@media (min-width: 358px) and (max-width: 359.98px) {
[data-product-float-card] {
/* At this narrow range the 342px card still fits before the .90 visual scale. */
bottom: calc(136px + ((100vw - 307.8px) / 2)) !important;
}
}
@media (max-width: 329.98px) {
[data-product-float-card] {
/* 342px x .84 = 287.28px visual width. */
bottom: calc(142.72px + 8vw) !important;
}
[data-product-float-card]>.float-card {
scale: 0.84;
}
}
/* Original inline style 6 */
#cartControls svg,
[data-float-buy-controls] svg {
border: 0 !important;
outline: none !important;
}
#cartControls svg:focus,
#cartControls svg:focus-visible,
[data-float-buy-controls] svg:focus,
[data-float-buy-controls] svg:focus-visible {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card .fortune-text-shell {
box-sizing: border-box;
padding: 20px !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card {
opacity: 1;
visibility: visible;
filter: blur(0);
pointer-events: auto;
}
#berryJourneyScene .goddess-figma-stage__fortune-card.is-changing {
opacity: 0.08 !important;
filter: blur(6px) !important;
transform: translate3d(0, 0, 0) !important;
transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1200ms ease !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card .fortune-text {
display: -webkit-box;
overflow: hidden;
max-height: 48px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 100% !important;
letter-spacing: 0 !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card .fortune-text.is-changing {
opacity: 0 !important;
filter: blur(2px) !important;
transform: none !important;
}
#berryJourneyScene .berry-journey__copy {
transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1200ms ease !important;
}
#berryJourneyScene .berry-journey__copy.is-changing {
transform: none !important;
}
@media (min-width: 768px) {
#berryJourneyScene .berry-journey__desktop-copy {
height: 308px;
transform: translateX(clamp(24px, 3vw, 56px)) !important;
}
}
@media (max-width: 767.98px) {
.product-swiper .product-quantity-control {
width: 130px;
height: 48px;
flex-basis: 130px;
border-radius: 29.23px;
}
.product-swiper .product-quantity-button {
width: 48px;
height: 48px;
flex-basis: 48px;
}
}
/* Original inline style 7 */
.header-search-popover {
position: fixed;
top: 81px;
left: clamp(24px, calc(100vw - 1182.14px), 737.7px);
z-index: 10020;
width: min(823.8369140625px, calc(100vw - 48px));
height: 424px;
border-radius: 20px;
background: #8C8C8C80;
backdrop-filter: blur(70px);
-webkit-backdrop-filter: blur(70px);
border: 1px solid rgba(255, 255, 255, 0.26);
box-shadow: 0 28px 70px rgba(7, 10, 77, 0.22);
opacity: 0;
visibility: hidden;
transform: translate3d(0, -8px, 0) scale(0.985);
transform-origin: top right;
pointer-events: none;
transition:
opacity 260ms ease,
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 320ms;
}
/* The dialog is present in the DOM on every header page. Keep its
closed state authoritative even if a page stylesheet loads late. */
[data-header-search-popover][aria-hidden="true"] {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.header-search-popover__close {
display: none;
}
.berry-journey__moving {
z-index: 140 !important;
}
.header-search-popover.is-open {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
pointer-events: auto;
transition:
opacity 260ms ease,
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
.header-search-popover__inner {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 43px 41px 36px;
}
.header-search-popover__field {
display: flex;
align-items: center;
gap: 16px;
height: 58px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: 999px;
padding: 0 31px;
color: #fff;
}
.header-search-popover__field svg {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.header-search-popover__input {
min-width: 0;
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 300;
font-style: normal;
line-height: 132%;
letter-spacing: 0;
}
.header-search-popover__input::placeholder {
color: rgba(255, 255, 255, 0.72);
}
.header-search-popover__label {
margin: 23px 0 20px;
color: rgba(255, 255, 255, 0.86);
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 300;
font-style: normal;
line-height: 132%;
letter-spacing: 0;
}
.header-search-popover__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
row-gap: 14px;
}
.header-search-popover__item {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
column-gap: 16px;
align-items: center;
width: 100%;
min-width: 0;
height: 104px;
border-radius: 20px;
box-sizing: border-box;
padding-left: 40px;
color: #fff;
text-decoration: none;
transition: background 180ms ease, transform 180ms ease;
}
.header-search-popover__item:hover,
.header-search-popover__item:focus-visible {
background: rgba(255, 255, 255, 0.12);
transform: translate3d(0, -1px, 0);
outline: none;
}
.header-search-popover__item:first-child {
background: rgba(255, 255, 255, 0.12);
}
.header-search-popover__media {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 80px;
height: 75px;
padding: 0;
}
.header-search-popover__media img {
display: block;
width: 80px;
height: 75.2272720336914px;
object-fit: contain;
filter: drop-shadow(0 12px 16px rgba(7, 10, 77, 0.22));
}
.header-search-popover__category {
display: block;
margin-bottom: 6px;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 132%;
letter-spacing: 0;
color: #fff;
}
.header-search-popover__title {
display: block;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 300;
font-style: normal;
line-height: 132%;
letter-spacing: 0;
color: #fff;
}
@media (max-width: 1000px) {
.header-search-popover {
top: 68px;
left: 16px;
right: 16px;
width: auto;
height: auto;
min-height: 360px;
border-radius: 20px;
}
.header-search-popover__inner {
padding: 24px 20px 26px;
}
.header-search-popover__field {
height: 54px;
padding: 0 22px;
}
.header-search-popover__grid {
grid-template-columns: 1fr;
gap: 10px;
}
.header-search-popover__item {
width: 100%;
}
}
/* Tablet / laptop width: keep the search surface aligned with the full header. */
@media (min-width: 768px) and (max-width: 1200px) {
.header-search-popover {
top: 69px;
left: 0;
right: 0;
width: 100%;
height: calc(100vh - 69px);
min-height: calc(100vh - 69px);
max-height: calc(100vh - 69px);
height: calc(100dvh - 69px);
min-height: calc(100dvh - 69px);
max-height: calc(100dvh - 69px);
overflow-y: auto;
border-radius: 0 0 20px 20px;
background: #fff;
color: #4d4d4d;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12);
}
.header-search-popover__inner {
padding: 43px 40px 36px;
}
.header-search-popover__field {
border-color: #d8d8d8;
color: #9d9d9d;
}
.header-search-popover__input {
color: #666;
}
.header-search-popover__input::placeholder,
.header-search-popover__label {
color: #9e9e9e;
}
.header-search-popover__label {
margin-top: 23px;
margin-bottom: 20px;
}
.header-search-popover__item {
color: #3f3f3f;
}
.header-search-popover__category {
color: #777;
}
.header-search-popover__title {
color: #4d4d4d;
}
.tablet-site-header__dropdown {
top: 69px !important;
background: #fff !important;
color: #000 !important;
border-top-color: #e5e5e5 !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12) !important;
}
.tablet-site-header__dropdown>a {
color: #000 !important;
border-bottom-color: #e5e5e5 !important;
}
}
@media (min-width: 1001px) and (max-width: 1200px) {
.header-search-popover {
top: 72px;
}
}
@media (max-width: 767.98px) {
html.header-search-open,
body.header-search-open {
overflow: hidden !important;
overscroll-behavior: none !important;
}
.header-search-popover {
inset: 0 auto auto max(0px, calc((100vw - 426px) / 2));
width: min(426px, 100vw);
height: min(714px, 82dvh);
min-height: min(560px, 100dvh);
max-height: 100dvh;
border: 0;
border-radius: 0;
background: #fff;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12);
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transform: translate3d(0, -18px, 0) scale(0.985);
transform-origin: top center;
transition:
opacity 460ms ease,
transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 680ms;
will-change: opacity, transform;
}
.header-search-popover.is-open {
transform: translate3d(0, 0, 0) scale(1);
transition:
opacity 460ms ease,
transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
.header-search-popover__close {
position: absolute;
left: 40px;
top: 19px;
display: grid;
width: 22px;
height: 22px;
place-items: center;
border: 0;
padding: 0;
background: transparent;
color: #8f8f8f;
cursor: pointer;
}
.header-search-popover__close svg {
display: block;
width: 20px;
height: 20px;
}
.header-search-popover__inner {
padding: 82px 40px 40px;
}
.header-search-popover__field {
height: 47px;
gap: 10px;
border: 1px solid #d8d8d8;
padding: 0 13px;
color: #9d9d9d;
}
.header-search-popover__field svg {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.header-search-popover__input {
color: #666;
font-size: 18px;
font-weight: 300;
font-style: normal;
line-height: 132%;
}
.header-search-popover__input::placeholder {
color: #c7c7c7;
}
.header-search-popover__label {
margin: 21px 0 16px 0;
color: #9e9e9e;
font-size: 18px;
font-weight: 300;
font-style: normal;
line-height: 132%;
}
.header-search-popover__grid {
display: flex;
flex-direction: column;
gap: 15px;
}
.header-search-popover__item {
display: grid;
grid-template-columns: 73px 1fr !important;
box-sizing: border-box;
width: auto !important;
height: auto !important;
min-height: 80.78px;
border-radius: 18px;
padding: 14.39px 14.39px 14.39px 40px !important;
color: #3f3f3f;
}
.header-search-popover__item:first-child {
background: linear-gradient(90deg, #f4f4f4 0%, #fff 100%);
}
.header-search-popover__item:hover,
.header-search-popover__item:focus-visible {
background: #f6f6f6;
transform: none;
}
.header-search-popover__media {
display: flex !important;
width: 64px !important;
height: 52px !important;
padding: 0 !important;
justify-content: flex-start;
opacity: 1 !important;
visibility: visible !important;
}
.header-search-popover__media img {
display: block !important;
width: 56px !important;
max-width: none !important;
height: 52px !important;
filter: none;
opacity: 1 !important;
visibility: visible !important;
}
.header-search-popover__category {
margin-bottom: 5px;
color: #c6c6c6;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 132%;
}
.header-search-popover__title {
color: #4d4d4d;
font-size: 20px;
font-weight: 300;
font-style: normal;
line-height: 132%;
}
}
/* Original inline style 8 */
/* Match the reference search surface: 426px wide and 675px tall. */
@media (max-width: 767.98px) {
.header-search-popover {
width: min(426px, 100vw) !important;
height: min(675px, 100dvh) !important;
min-height: 0 !important;
max-height: 100dvh !important;
}
.header-search-popover__inner {
padding-top: 75px;
}
}
/* Original inline style 9 */
/* Tablet search should occupy the complete viewport, not the 426px mobile card. */
@media (min-width: 600px) and (max-width: 1200px) {
.header-search-popover {
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
min-height: 0 !important;
max-height: none !important;
border-radius: 0 !important;
}
}
/* Original inline style 10 */
@media (max-width: 599.98px) {
body.header-search-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 10010;
pointer-events: none;
background: rgba(7, 10, 77, 0.16);
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
}
.header-search-popover {
z-index: 10020 !important;
}
}
/* Let the mobile search surface use the full viewport width from 400px to 600px. */
@media (min-width: 400px) and (max-width: 599.98px) {
.header-search-popover {
inset: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
}
}
/* Original inline style 11 */
@media (min-width: 768px) and (max-width: 1200px) {
.header-search-popover__close {
position: absolute;
left: 40px;
top: 19px;
display: grid !important;
width: 22px;
height: 22px;
place-items: center;
border: 0;
padding: 0;
background: transparent;
color: #8f8f8f;
cursor: pointer;
z-index: 2;
}
.header-search-popover__close svg {
display: block;
width: 20px;
height: 20px;
}
}
/* Keep the mobile drawer out of the document until its controller opens it.
Some pages use the `hidden` class while others update aria state. */
#mobileMenu.hidden,
#mobileMenu[aria-hidden="true"] {
display: none !important;
}
/* Strawberry mobile composition uses the supplied Figma exports as a single
background layer plus a transparent character layer. */
@media (max-width: 767.98px) {
#berryJourneyScene.bg-back-to-red .goddess-figma-stage__background {
top: 0 !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: 100% !important;
transform: translateX(-50%) !important;
}
#berryJourneyScene.bg-back-to-red .goddess-figma-stage__background img {
width: 100% !important;
height: auto !important;
min-width: 100% !important;
max-width: none !important;
transform: none !important;
object-fit: contain !important;
object-position: top center !important;
}
#berryJourneyScene.bg-back-to-red .goddess-figma-stage__leaves {
display: none !important;
}
#berryJourneyScene.bg-back-to-red .goddess-figma-stage__character {
top: 35% !important;
right: auto !important;
bottom: auto !important;
left: 10% !important;
width: 62% !important;
height: auto !important;
transform: translateX(-50%) !important;
}
#berryJourneyScene.bg-back-to-red .goddess-figma-stage__character > picture,
#berryJourneyScene.bg-back-to-red .goddess-figma-stage__character > picture > img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
}
}
#mobileMenu.is-open,
#mobileMenu[aria-hidden="false"] {
display: block !important;
}
/* Original inline style 12 */
@media (max-width: 1200px) {
html.mobile-menu-open,
body.mobile-menu-open {
overflow: hidden !important;
overscroll-behavior: none !important;
}
.mobile-menu-drawer {
position: fixed;
inset: 0;
z-index: 2147483000 !important;
display: block;
opacity: 1;
pointer-events: none;
transition:
visibility 680ms ease;
visibility: hidden;
}
.mobile-menu-drawer.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.mobile-menu-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 20, 24, 0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
opacity: 0;
transition:
opacity 320ms ease,
background 320ms ease,
backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
-webkit-backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, backdrop-filter;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__backdrop {
background: rgba(20, 20, 24, 0.24);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 1;
}
.mobile-menu-drawer__panel {
position: absolute;
inset: 0 auto 0 0;
z-index: 2 !important;
width: min(74.8718vw, 426px);
min-width: 292px;
max-width: calc(100vw - 70px);
height: 100dvh;
overflow-y: auto;
background: #fff;
opacity: 0.98;
transform: translate3d(-104%, 0, 0) scaleX(0.985);
transform-origin: left center;
transition:
transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 520ms ease;
will-change: transform, opacity;
}
body.mobile-menu-open .berry-journey__moving,
html.mobile-menu-open .berry-journey__moving,
body.mobile-menu-open #berryJourneySource,
html.mobile-menu-open #berryJourneySource {
z-index: 1 !important;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__panel {
opacity: 1;
transform: translate3d(0, 0, 0) scaleX(1);
}
.mobile-menu-drawer__close {
position: absolute;
left: 26px;
top: 18px;
display: grid;
width: 24px;
height: 24px;
place-items: center;
border: 0;
padding: 0;
background: transparent;
color: #8b8b8b;
cursor: pointer;
}
.mobile-menu-drawer__close svg {
width: 20px;
height: 20px;
}
.mobile-menu-drawer__list {
display: flex;
flex-direction: column;
gap: 15px;
padding: 82px 0 40px;
}
.mobile-menu-drawer__link {
display: flex;
align-items: center;
gap: 20px;
box-sizing: border-box;
width: calc(100% - 40px);
margin: 0 20px;
min-height: 48px;
border-radius: 12px;
padding: 14px;
color: #000000;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
transform: translate3d(-10px, 0, 0);
opacity: 0;
transition:
background 180ms ease,
color 180ms ease,
transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 320ms ease;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link:nth-child(2) {
transition-delay: 30ms;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link:nth-child(3) {
transition-delay: 60ms;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link:nth-child(4) {
transition-delay: 90ms;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link:nth-child(5) {
transition-delay: 120ms;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link:nth-child(6) {
transition-delay: 150ms;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__link:nth-child(7) {
transition-delay: 180ms;
}
.mobile-menu-drawer__link.is-active {
color: #141BA9;
background: linear-gradient(90deg, rgba(20, 27, 169, 0.07) 0%, rgba(255, 255, 255, 0) 100%);
}
.mobile-menu-drawer__link svg {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: currentColor;
}
.mobile-menu-drawer__link svg path,
.mobile-menu-drawer__link svg rect {
fill: currentColor;
stroke: currentColor;
stroke-width: 0.2px;
}
.mobile-menu-drawer__login {
position: absolute;
left: 36px;
bottom: max(49px, env(safe-area-inset-bottom));
display: flex;
align-items: center;
gap: 20px;
color: #050505;
font-family: "Helvetica Now Var", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
text-decoration: none;
opacity: 0;
transform: translate3d(-10px, 0, 0);
transition:
opacity 340ms ease 220ms,
transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer__login {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.mobile-menu-drawer__login svg {
width: 24px;
height: 24px;
stroke: currentColor;
}
}
/* Original inline style 13 */
/* Figma tablet/laptop composition: keep the benefits decoration fully visible. */
@media (min-width: 768px) and (max-width: 1200px) {
.berry-journey__desktop-content>.relative.shrink-0 {
transform: translateX(90px) !important;
}
/* Tablet order from the Figma composition: title, copy, decoration. */
.figma-mobile-story-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: minmax(300px, 1fr) auto;
align-items: center;
column-gap: clamp(18px, 3vw, 42px) !important;
row-gap: clamp(38px, 5vw, 64px) !important;
min-height: clamp(700px, 78vw, 840px);
padding: clamp(54px, 7vw, 92px) clamp(28px, 5.2vw, 72px) clamp(68px, 8vw, 108px);
}
.figma-mobile-story-grid>.order-1 {
grid-column: 1;
grid-row: 2;
align-self: center;
margin-top: 0 !important;
justify-self: start;
white-space: normal;
}
.figma-mobile-story-grid>.order-1>div>div {
font-size: clamp(48px, 6.5vw, 78px) !important;
}
.figma-mobile-story-grid>.order-2 {
grid-column: 2;
grid-row: 2;
align-self: center;
justify-content: flex-start;
padding: 0 !important;
}
.figma-mobile-story-grid>.order-2 p {
max-width: clamp(190px, 23vw, 300px) !important;
margin: 0 !important;
font-size: clamp(17px, 2.05vw, 25px) !important;
line-height: 1.32;
}
.figma-mobile-story-grid>div.absolute {
grid-column: 2;
grid-row: 1;
position: relative !important;
inset: auto !important;
align-self: center;
justify-self: end;
display: flex;
justify-content: flex-end;
transform: none !important;
}
.figma-mobile-story-grid>div.absolute img {
width: clamp(210px, 34vw, 390px) !important;
max-width: none;
transform: none !important;
}
}
/* Slider arrows: desktop/tablet only, 100px group with a 20px gap. */
@media (min-width: 768px) and (max-width: 1200px) {
/* Keep the heading block visually separate from the card slider. */
.features-swiper-shell {
margin-top: clamp(84px, 10vw, 144px) !important;
}
.features-swiper-shell .nav-btn {
top: auto !important;
bottom: 12px !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0;
transform: none !important;
}
.features-swiper-shell .btn-prev {
left: calc(50% - 50px) !important;
right: auto !important;
}
.features-swiper-shell .btn-next {
left: calc(50% + 10px) !important;
right: auto !important;
}
.features-swiper-shell .nav-btn svg {
width: 11px;
height: 20px;
}
}
/* At tablet width use the mobile slider controls instead of desktop arrows. */
@media (min-width: 768px) and (max-width: 1000px) {
.features-swiper-shell .nav-btn {
display: none !important;
}
.features-swiper .swiper-pagination {
display: flex !important;
justify-content: center;
align-items: center;
pointer-events: auto;
}
}
/* 1700px composition: remove the pear and bring the berry artwork closer to the copy. */
@media (min-width: 1201px) and (max-width: 1700px) {
#berryJourneyScene .berry-journey__desktop-pear {
display: none !important;
}
#berryJourneyScene .berry-journey__desktop-content>.relative.shrink-0 {
transform: translateX(-180px) !important;
}
#berryJourneyScene .berry-journey__desktop-card {
transform: translateX(clamp(-96px, -5vw, -54px));
}
#berryJourneyScene .berry-journey__desktop-decor {
width: 434.19140625px !important;
height: 466.7557678222656px !important;
object-fit: contain;
}
#berryJourneyScene .berry-journey__desktop-tot {
width: 400.78729248046875px !important;
height: 482.48345947265625px !important;
object-fit: contain;
}
}
/* Original inline style 14 */
/* Use the calibrated 390px composition across tablet widths without
touching the blueberry journey geometry or motion code. */
@media (min-width: 600px) and (max-width: 767.98px) {
/* Use the same white mobile header/menu as the 390px layout. */
.desktop-site-header,
.tablet-site-header {
display: none !important;
}
.mobile-site-header {
display: block !important;
}
#berryJourneyScene>.container {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 390px !important;
}
#berryJourneyScene .berry-journey__mobile-layout {
display: block !important;
}
#berryJourneyScene .berry-journey__desktop-layout {
display: none !important;
}
#berryJourneyScene .berry-journey__mobile-layout .berry-journey__anchor--middle-mobile {
display: block !important;
}
#berryJourneyScene .berry-journey__mobile-layout .berry-journey__anchor--middle-desktop {
display: none !important;
}
/* Keep the mobile decoration size instead of md:w-[386px]. */
#berryJourneyScene .berry-journey__mobile-layout>img[src*="sib1"] {
width: 175px !important;
}
/* Tablet composition: keep Features and both decorations inside
the same visible frame as the 390px reference. */
#berryJourneyScene .berry-journey__mobile-layout>div.absolute.left-\[6\.153846\%\] {
top: 8% !important;
left: 16% !important;
width: 42% !important;
}
#berryJourneyScene .berry-journey__mobile-layout>img[src*="sib1"] {
top: 0 !important;
right: 5% !important;
width: 42% !important;
max-width: 386px;
}
#berryJourneyScene .berry-journey__mobile-layout>img[src*="tot1"] {
top: 56% !important;
left: 16% !important;
width: 45% !important;
}
/* Keep the fortune card above the goddess, matching the tablet
reference composition. */
.goddess-figma-stage__fortune-card {
left: 50% !important;
top: 5% !important;
width: min(500px, 62vw) !important;
transform: translateX(-50%) !important;
}
.goddess-figma-stage__fortune-card>div,
.goddess-figma-stage__fortune-card>div>div,
.goddess-figma-stage__fortune-card .fortune-text-shell {
width: 100% !important;
}
/* The salad card owns the first row; copy and decorations start
after it instead of being painted over the image. */
#berryJourneyScene .berry-journey__mobile-layout {
overflow: visible !important;
aspect-ratio: 443 / 899 !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#berryJourneyScene .berry-journey__desktop-layout {
display: none !important;
}
#berryJourneyScene .berry-journey__progress--desktop {
display: none !important;
}
#berryJourneyScene .berry-journey__progress--mobile {
left: 6.153846% !important;
right: auto !important;
top: 6.017239% !important;
height: 27.489316% !important;
z-index: 50 !important;
transform: none !important;
}
#berryJourneyScene .berry-journey__mobile-layout>.berry-journey__card-scene {
left: 6.3% !important;
top: 6.1% !important;
width: 87.6% !important;
}
#berryJourneyScene .berry-journey__mobile-layout>div.absolute.left-\[6\.153846\%\] {
top: 49% !important;
left: 15.35% !important;
width: 38.5% !important;
}
#berryJourneyScene .berry-journey__mobile-layout>img[src*="sib1"] {
top: 72.7% !important;
right: auto !important;
left: 16.5% !important;
width: 35.5% !important;
}
#berryJourneyScene .berry-journey__mobile-layout>img[src*="tot1"] {
top: 44.7% !important;
right: 7% !important;
left: auto !important;
width: 40% !important;
}
#berryJourneyScene .berry-journey__tablet-orb {
display: none !important;
}
}
/* Original inline style 15 */
@media (min-width: 400px) and (max-width: 767.98px) {
#berryJourneyScene .berry-journey__desktop-layout,
#berryJourneyScene .berry-journey__progress--desktop {
display: none !important;
}
#berryJourneyScene .berry-journey__mobile-layout {
display: block !important;
position: relative !important;
aspect-ratio: 443 / 899 !important;
}
#berryJourneyScene .berry-journey__mobile-layout>.berry-journey__card-scene {
left: 6.3% !important;
top: 6.1% !important;
width: 87.6% !important;
}
#berryJourneyScene .berry-journey__progress--mobile {
display: flex !important;
position: absolute !important;
left: calc(-1 * clamp(18px, 2.25vw, 31px)) !important;
right: auto !important;
top: 0 !important;
height: 100% !important;
transform: none !important;
z-index: 50 !important;
}
}
@media (max-width: 767.98px) {
#berryJourneyScene .berry-journey__mobile-layout {
aspect-ratio: 166 / 384 !important;
overflow: hidden !important;
}
#berryJourneyScene .berry-journey__mobile-layout>.berry-journey__card-scene {
left: 10% !important;
top: 3.634093% !important;
width: 83.51648% !important;
}
#berryJourneyScene .berry-journey__progress--mobile {
left: -4.607% !important;
top: 7.38% !important;
height: 85.1% !important;
}
}
@media (min-width: 1201px) and (max-width: 1400px) {
#berryJourneyScene .berry-journey__desktop-card {
align-self: center !important;
height: fit-content !important;
}
#berryJourneyScene .berry-journey__desktop-card .berry-journey__card-scene {
width: min(calc(100vw - 180px), 820px) !important;
height: auto !important;
aspect-ratio: 325.714264 / 291 !important;
}
#berryJourneyScene .berry-journey__desktop-card>.berry-journey__progress--desktop {
top: 0 !important;
left: -46px !important;
right: auto !important;
height: calc(min(calc(100vw - 180px), 820px) * 291 / 325.714264) !important;
transform: none !important;
}
}
@media (min-width: 1401px) {
#berryJourneyScene .berry-journey__desktop-card {
align-self: center !important;
height: fit-content !important;
}
#berryJourneyScene .berry-journey__desktop-card>.berry-journey__progress--desktop {
height: clamp(457px, 40.833333vw, 784px) !important;
}
}
/* Original inline style 16 */
/* Responsive background position requested for the goddess section. */
@media (min-width: 400px) and (max-width: 900px) {
#berryJourneyScene .goddess-figma-stage__background {
top: 480px !important;
}
}
@media (min-width: 1000px) and (max-width: 1500px) {
#berryJourneyScene .goddess-figma-stage__background {
top: -209px !important;
}
}
/* Original inline style 17 */
@media (min-width: 768px) and (max-width: 1200px) {
.goddess-figma-stage__heading {
top: -300px !important;
}
}
/* Original inline style 18 */
/* Tablet / small-laptop composition: keep the fortune card centered
above the goddess head instead of over the face and torso. */
@media (min-width: 1000px) and (max-width: 1500px) {
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
top: -15% !important;
width: min(650px, 62vw) !important;
transform: translateX(-50%) !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card>div,
#berryJourneyScene .goddess-figma-stage__fortune-card>div>div,
#berryJourneyScene .goddess-figma-stage__fortune-card .fortune-text-shell {
width: 100% !important;
}
}
@media (min-width: 1000px) and (max-width: 1500px) {
#berryJourneyScene .goddess-figma-stage__heading {
top: -30% !important;
}
#berryJourneyScene .goddess-figma-stage__art {
bottom: calc(23% - 70px) !important;
}
}
/* Original inline style 19 */
@media (min-width: 1000px) and (max-width: 1500px) {
#berryJourneyScene .goddess-figma-stage__heading {
top: 0 !important;
}
#berryJourneyScene .goddess-figma-stage__background {
top: 0 !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
top: 18% !important;
transform: translateX(-50%) !important;
}
#berryJourneyScene .goddess-figma-stage__art {
bottom: 5% !important;
}
}
/* Original inline style 20 */
@media (min-width: 500px) and (max-width: 700px) {
#berryJourneyScene .goddess-figma-stage__character {
top: 65vw !important;
}
#berryJourneyScene .goddess-figma-stage__leaves {
top: 108vw !important;
}
}
/* Original inline style 21 */
@media (min-width: 650px) and (max-width: 700px) {
#berryJourneyScene .goddess-figma-stage__character {
top: 85vw !important;
}
#berryJourneyScene .goddess-figma-stage__leaves {
top: 130vw !important;
}
}
/* Original inline style 22 */
@media (min-width: 1000px) and (max-width: 1700px) {
#berryJourneyScene .goddess-figma-stage {
aspect-ratio: 2200 / 1301 !important;
}
#berryJourneyScene .goddess-figma-stage__heading {
top: -11% !important;
}
#berryJourneyScene .goddess-figma-stage__background {
top: 0 !important;
}
#berryJourneyScene .goddess-figma-stage__art {
bottom: 28% !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
top: 8% !important;
width: auto !important;
transform: translateX(-50%) !important;
}
}
/* Original inline style 23 */
@media (min-width: 400px) and (max-width: 999.98px) {
#berryJourneyScene .goddess-figma-stage__background {
top: 0 !important;
height: 100% !important;
}
#berryJourneyScene .goddess-figma-stage__background img {
bottom: 0 !important;
height: 100% !important;
object-fit: contain !important;
object-position: top center !important;
transform: translateY(250px) !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
top: clamp(90px, 13vw, 140px) !important;
transform: translateX(-50%) !important;
}
}
/* Original inline style 24 */
@media (min-width: 1701px) {
#berryJourneyScene .berry-journey__desktop-card>.berry-journey__progress--desktop {
top: 50% !important;
height: 576px !important;
transform: translateY(-50%) !important;
}
}
/* Original inline style 25 */
@media (min-width: 768px) and (max-width: 1200px) {
.features-swiper-shell .nav-btn {
display: flex !important;
}
}
/* Original inline style 26 */
@media (min-width: 400px) and (max-width: 700px) {
#berryJourneySource {
top: 60vw !important;
}
}
/* Original inline style 27 */
@media (min-width: 550px) and (max-width: 700px) {
#berryJourneySource {
top: 45vw !important;
}
}
/* Original inline style 28 */
@media (min-width: 701px) and (max-width: 999.98px) {
#berryJourneyScene .goddess-figma-stage__background img {
transform: translateY(360px) !important;
}
#berryJourneyScene .goddess-figma-stage__character {
top: 26vw !important;
}
#berryJourneyScene .goddess-figma-stage__leaves {
top: 70vw !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
top: 6% !important;
z-index: 10 !important;
transform: translateX(-50%) !important;
}
}
/* Original inline style 29 */
@media (min-width: 800px) and (max-width: 999.98px) {
#berryJourneyScene .goddess-figma-stage__character {
top: 5vw !important;
}
}
/* Original inline style 30 */
@media (min-width: 1701px) {
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
top: 8% !important;
transform: translateX(-50%) !important;
}
}
/* Original inline style 31 */
[data-product-float-card].is-footer-hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Original inline style 32 */
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 50% !important;
right: auto !important;
margin-left: 0 !important;
translate: 0 0 !important;
transform: translate3d(-50%, 0, 0) !important;
}
/* Original inline style 33 */
/* Keep the original desktop stacking context; elevate overlays only
where the mobile/tablet menu can cover the animated scene. */
@media (max-width: 1200px) {
#nav {
z-index: 2147483000 !important;
}
#headerSearchPopover {
z-index: 2147483002 !important;
}
#mobileMenu {
z-index: 2147483001 !important;
}
#berryJourneyScene .goddess-figma-stage__fortune-card {
z-index: 3 !important;
}
}
/* Original inline style 34 */
/* 1920px reference: the fortune card sits to the left of the goddess,
beside the journey line, instead of being centered above the art. */
@media (min-width: 1701px) {
#berryJourneyScene .goddess-figma-stage__fortune-card {
left: 25% !important;
top: 28% !important;
width: auto !important;
transform: none !important;
}
}
/* Original inline style 35 */
/* Desktop reference: both controls sit below the card, centered inside
the gradient circle as a compact 40px + 16px + 40px group. */
@media (min-width: 1201px) {
.features-swiper-shell .nav-btn {
top: auto !important;
bottom: 28px !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 40px !important;
height: 40px !important;
padding: 0;
transform: none !important;
}
.features-swiper-shell .btn-prev {
left: calc(50% - 48px) !important;
right: auto !important;
}
.features-swiper-shell .btn-next {
left: calc(50% + 8px) !important;
right: auto !important;
}
.features-swiper-shell .nav-btn svg {
width: 20px;
height: 20px;
}
}
/* Original inline style 36 */
/* The reference cards have no drop shadow. */
.features-swiper .phone-mockup {
box-shadow: none !important;
filter: none !important;
}
.features-swiper .swiper-slide>div {
box-shadow: none !important;
filter: none !important;
}
.features-swiper-shell .swiper-slide,
.features-swiper-shell .swiper-slide>div,
.features-swiper-shell .swiper-slide>div>.phone-mockup {
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
}
/* Swiper's flip effect injects these shadow layers into each slide. */
.features-swiper .swiper-slide-shadow,
.features-swiper .swiper-slide-shadow-flip,
.features-swiper .swiper-slide-shadow-bottom,
.features-swiper .swiper-slide-shadow-top,
.features-swiper .swiper-slide-shadow-left,
.features-swiper .swiper-slide-shadow-right {
display: none !important;
opacity: 0 !important;
background: transparent !important;
}
/* Nudge the centered arrow group to the right while keeping the two
controls centered as one unit below the card. */
@media (min-width: 1201px) {
.features-swiper-shell .btn-prev {
left: calc(50% - 24px) !important;
}
.features-swiper-shell .btn-next {
left: calc(50% + 32px) !important;
}
}
/* Original inline style 37 */
@media (min-width: 800px) and (max-width: 1000px) {
.features-swiper-shell .nav-btn {
bottom: 96px !important;
}
}
/* Original inline style 38 */
@media (min-width: 1001px) and (max-width: 1100px) {
.features-swiper-shell .nav-btn {
display: none !important;
}
/* Remove the small white half-circles from the tablet pattern. */
.sharp-pattern-viewport svg path[fill="white"] {
display: none !important;
}
}
/* Original inline style 39 */
@media (min-width: 1001px) and (max-width: 1100px) {
.figma-mobile-story-grid {
column-gap: 32px !important;
}
.figma-mobile-story-grid>div:nth-child(2) {
transform: translateX(24px) !important;
}
}
/* Original inline style 40 */
@media (min-width: 1001px) and (max-width: 1100px) {
#berryJourneyScene .goddess-figma-stage__fortune-card {
top: -25% !important;
}
}
/* Original inline style 41 */
@media (min-width: 1001px) and (max-width: 1100px) {
.figma-mobile-story-grid {
column-gap: 72px !important;
}
.figma-mobile-story-grid>div:nth-child(2) {
transform: translateX(64px) !important;
}
}
/* Original inline style 42 */
/* Keep the Benefits composition at the compact 700px scale and
interpolate it smoothly through the 800px–1400px range. */
@media (min-width: 800px) and (max-width: 1400px) {
#berryJourneyScene .berry-journey__desktop-layout {
display: grid !important;
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important;
column-gap: clamp(24px, 4.5vw, 72px) !important;
padding-top: clamp(220px, 25vw, 350px) !important;
}
#berryJourneyScene .berry-journey__desktop-card {
grid-column: 1 !important;
grid-row: 2 !important;
justify-self: end !important;
}
#berryJourneyScene .berry-journey__desktop-content {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: center !important;
padding-left: 0 !important;
}
#berryJourneyScene .berry-journey__desktop-content>.relative.shrink-0 {
transform: none !important;
}
#berryJourneyScene .berry-journey__desktop-layout> :last-child {
grid-column: 2 !important;
grid-row: 3 !important;
justify-self: center !important;
}
#berryJourneyScene .berry-journey__desktop-card .berry-journey__card-scene {
width: clamp(348px, 40.7143vw, 570px) !important;
height: clamp(457px, 43.6429vw, 611px) !important;
aspect-ratio: auto !important;
}
#berryJourneyScene .berry-journey__desktop-content {
gap: clamp(24px, 3.2vw, 48px) !important;
}
}
@media (min-width: 800px) and (max-width: 999.98px) {
#berryJourneyScene .berry-journey__desktop-layout {
grid-template-columns: minmax(0, 44%) minmax(0, 1fr) !important;
column-gap: clamp(16px, 3vw, 28px) !important;
padding-top: clamp(220px, 25vw, 260px) !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
#berryJourneyScene .berry-journey__desktop-card .berry-journey__card-scene {
width: clamp(300px, 42vw, 348px) !important;
height: clamp(394px, 55vw, 457px) !important;
}
}
/* Original inline style 43 */
/* Keep the fortune card above the goddess instead of covering her
face/body at tablet and laptop widths. */
@media (min-width: 700px) and (max-width: 1400px) {
#berryJourneyScene .goddess-figma-stage__fortune-card {
top: 0 !important;
}
}
/* Original inline style 44 */
/* Keep the 700px reference as a vertical tablet composition. */
@media (min-width: 800px) and (max-width: 1400px) {
.desktop-site-header,
.tablet-site-header {
display: none !important;
}
.mobile-site-header {
display: block !important;
}
#berryJourneyScene .berry-journey__desktop-layout {
display: none !important;
}
#berryJourneyScene .berry-journey__mobile-layout .berry-journey__anchor--middle-mobile {
display: block !important;
}
#berryJourneyScene .berry-journey__mobile-layout .berry-journey__anchor--middle-desktop {
display: none !important;
}
#berryJourneyScene .berry-journey__mobile-layout {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: none !important;
aspect-ratio: 166 / 384 !important;
overflow: hidden !important;
}
#berryJourneyScene .berry-journey__mobile-layout>.berry-journey__card-scene {
left: 9.3% !important;
top: 3.6% !important;
width: 76.5% !important;
}
#berryJourneyScene .berry-journey__progress--desktop {
display: none !important;
}
#berryJourneyScene .berry-journey__progress--mobile {
display: flex !important;
left: clamp(-30px, -3.4vw, -24px) !important;
top: 0 !important;
height: 100% !important;
transform: none !important;
}
#berryJourneyScene .berry-journey__mobile-layout>div.absolute.left-\[6\.153846\%\] {
top: 38.1% !important;
left: 6.15% !important;
width: 38.97% !important;
}
#berryJourneyScene .berry-journey__mobile-layout>img[src*="sib1"] {
top: 38.1% !important;
right: -9.23% !important;
left: auto !important;
width: min(386px, 45%) !important;
}
#berryJourneyScene .berry-journey__mobile-layout>img[src*="tot1"] {
top: 70.16% !important;
left: 28.2% !important;
right: auto !important;
width: 43.45% !important;
}
}
/* Original inline style 45 */
@media (min-width: 1001px) and (max-width: 1100px) {
#berryJourneyScene .goddess-figma-stage__fortune-card {
top: -25% !important;
}
}
/* Styles extracted from inline style attributes in bluberry.html */
@media (max-width: 999.98px) {
.blueberry-page .blueberry-main-selectors {
grid-template-columns: repeat(2, 131px) !important;
justify-content: center;
column-gap: 12px !important;
}
.blueberry-page .blueberry-main-selectors > label > span.relative {
height: 40px !important;
}
.blueberry-page .blueberry-main-selectors > label > span.relative > select {
width: 131px !important;
height: 40px !important;
}
}
.blueberry-page .blueberry-inline-height-full { height: 100%; }
.blueberry-page .blueberry-inline-transform-reset { transform: translateY(0); }
.blueberry-page .blueberry-inline-goddess-art { bottom: 23%; width: 588px; height: 671px; transform: translateX(-50%); }
.blueberry-page .blueberry-inline-goddess-leaves { top: 332px; width: 588px; height: 220.81px; }
.blueberry-page .blueberry-inline-goddess-leaves-image { display: block; width: 588px; height: 220.81px; max-width: none; object-fit: fill; }
.blueberry-page .blueberry-inline-goddess-character { width: 345px; height: 671px; transform: translateX(-50%); }
.blueberry-inline-goddess-character-image {
display: block;
width: 345px;
height: 671px;
max-width: none;
object-fit: fill;
}
/* Make the daily fortune control's pulse clearly visible. */
.blueberry-page .daily-fortune-button {
animation: daily-fortune-visible-pulse 1.35s ease-in-out infinite;
}
.blueberry-page .daily-fortune-button::after {
border-width: 3px;
animation: daily-fortune-visible-ring 1.35s ease-out infinite;
}
@keyframes daily-fortune-visible-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(218, 252, 95, 0.7),
0 10px 25px rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0 0 0 12px rgba(218, 252, 95, 0),
0 10px 32px rgba(218, 252, 95, 0.48);
}
}
@keyframes daily-fortune-visible-ring {
0% {
opacity: 0.75;
transform: scale(0.92);
}
70%,
100% {
opacity: 0;
transform: scale(1.24);
}
}
@media (prefers-reduced-motion: reduce) {
.blueberry-page .daily-fortune-button,
.blueberry-page .daily-fortune-button::after {
animation: none;
}
}
/* Keep the mobile fortune card centered while it fades out. */
@media (max-width: 999.98px) {
.blueberry-page #berryJourneyScene .goddess-figma-stage__fortune-card,
.blueberry-page #berryJourneyScene .goddess-figma-stage__fortune-card.is-visible,
.blueberry-page .goddess-figma-stage__fortune-card.is-changing,
.blueberry-page #berryJourneyScene .goddess-figma-stage__fortune-card.is-changing,
#berryJourneyScene .goddess-figma-stage__fortune-card.is-changing {
transform: translate3d(-50%, 0, 0) !important;
transform-origin: 50% 50% !important;
}
.blueberry-page #berryJourneyScene .goddess-figma-stage__fortune-card.is-changing,
#berryJourneyScene .goddess-figma-stage__fortune-card.is-changing {
transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
filter 320ms ease !important;
}
}
/* Keep the desktop navigation active at laptop widths after legacy layout
rules have selected the 800-1400px content composition. */
@media (min-width: 1024px) {
.desktop-site-header {
display: block !important;
}
.tablet-site-header,
.mobile-site-header {
display: none !important;
}
}