/* GROW Product Float 2.0 — layout. Colours come from the site: --gf-ink, --gf-muted, --gf-accent, --gf-ground.
   No position:sticky: while the scene plays the stage drifts down at a share (--gf-k) of the scroll. */
.gf { --gf-ink: #2b2a30; --gf-muted: #64636a; --gf-accent: #f04c26; --gf-ground: #f1f2f4; --gf-h: clamp(460px, 78svh, 760px); --gf-d: 120svh; --gf-k: .84; position: relative; }
.gf-stage {
  position: relative; height: var(--gf-h); overflow: clip; isolation: isolate;
  background: radial-gradient(60% 55% at 50% 60%, #fff 0, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #fff 0, var(--gf-ground) 55%, #fff 100%);
}

/* without the script: a plain swipe row of the products */
.gf-items { display: flex; gap: 16px; overflow-x: auto; height: 100%; align-items: center; padding: 24px; scroll-snap-type: x mandatory; }
.gf-item { flex: 0 0 min(62vw, 300px); scroll-snap-align: center; }
.gf-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.gf-detail, .gf-panel[hidden] { display: none; }
.gf-name, .gf-count, .gf-bar, .gf-thumbs, .gf-close, .gf-nav { display: none; }

/* with the script: the scroll scene */
.gf--on { height: calc(var(--gf-h) + var(--gf-d) * var(--gf-k)); }
.gf--on .gf-stage { will-change: transform; touch-action: pan-y; }
@supports (animation-timeline: scroll()) {
  .gf--cssdrift .gf-stage { animation: gf-drift linear both; animation-timeline: scroll(root block); animation-range: var(--gf-s, 0px) var(--gf-e, 100svh); }
  @keyframes gf-drift { to { transform: translate3d(0, calc(var(--gf-d) * var(--gf-k)), 0); } }
}
.gf--on .gf-items { display: block; overflow: visible; padding: 0; position: absolute; inset: 0; }
.gf--on .gf-item {
  position: absolute; left: 0; top: 0; width: var(--gf-size, 300px); height: var(--gf-size, 300px);
  will-change: transform, opacity; transform-origin: 50% 50%; cursor: pointer;
}
.gf--on .gf-item a { display: block; width: 100%; height: 100%; animation: gf-float 6s ease-in-out var(--gf-delay, 0s) infinite; -webkit-tap-highlight-color: transparent; }
.gf--on .gf-item img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.gf--on .gf-item.is-front:hover img { transform: scale(1.05) rotate(-1.5deg); }
.gf--on .gf-item.is-card img { object-fit: cover; border-radius: 12%; height: 78%; margin-top: 11%; box-shadow: 0 30px 50px -26px rgba(30, 29, 34, .5), 0 0 0 1px rgba(30, 29, 34, .06); }
.gf--on .gf-item::after {   /* soft contact shadow under a floating product */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 29, 34, .3), rgba(30, 29, 34, 0)); animation: gf-shadow 6s ease-in-out var(--gf-delay, 0s) infinite; z-index: -1;
}
@keyframes gf-float { 50% { transform: translateY(-3.4%); } }
@keyframes gf-shadow { 50% { transform: scale(.84); opacity: .66; } }
.gf-stage.is-drag { cursor: grabbing; }
.gf-stage.is-drag .gf-item { cursor: grabbing; }

/* 3D layer (grow-float3d.js): the photos stay as invisible tap targets, the canvas draws the products */
.gf-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gf-3d canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.gf--3d .gf-3d canvas { opacity: 1; }
.gf--3d .gf-item a { opacity: 0; animation: none; }
.gf--3d .gf-item::after { display: none; }
.gf--3d.is-detail .gf-stage { cursor: grab; }
.gf--3d.is-detail .gf-stage.is-drag { cursor: grabbing; }

/* opening / switching a product: it travels and sharpens, the others blur away (only during these moments) */
.gf-anim .gf-item { transition: transform .72s cubic-bezier(.16, 1, .3, 1), opacity .42s ease, filter .42s ease; }
.is-detail .gf-item:not(.is-sel) { filter: blur(14px); }

.gf--on .gf-name { display: block; position: absolute; z-index: 61; inset-inline-start: clamp(18px, 5vw, 72px); top: clamp(18px, 4.5vw, 56px); max-width: min(64%, 520px); pointer-events: none; color: var(--gf-ink); opacity: 0; transform: translateY(10px); filter: blur(8px); transition: opacity .16s ease, filter .16s ease; }
.gf-name.is-in { opacity: 1; transform: none; filter: none; transition: opacity .4s ease, filter .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.gf-name b { display: block; font-size: clamp(1.35rem, 1rem + 2.2vw, 2.9rem); line-height: 1.16; font-weight: 800; letter-spacing: -.01em; }
[lang="ar"] .gf-name b { letter-spacing: 0; line-height: 1.3; }
.gf-name > span { display: block; margin-top: 6px; color: var(--gf-muted); font-size: clamp(.95rem, .88rem + .35vw, 1.15rem); }
.gf-name .price, .gf-name bdi { color: var(--gf-ink); font-weight: 700; }
.gf--on .gf-count { display: block; position: absolute; z-index: 61; left: 0; right: 0; bottom: calc(clamp(20px, 5svh, 44px) + 14px); text-align: center; color: var(--gf-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; pointer-events: none; }
.gf--on .gf-bar { display: block; position: absolute; z-index: 61; left: 50%; bottom: clamp(20px, 5svh, 44px); width: min(46%, 240px); height: 5px; margin-left: calc(min(46%, 240px) / -2); border-radius: 5px; background: rgba(30, 29, 34, .1); overflow: hidden; direction: ltr; pointer-events: none; }
.gf-bar i { display: block; height: 100%; background: var(--gf-ink); border-radius: 5px; transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .gf-bar i { transform-origin: right; }
.gf--on .gf-nav { display: flex; position: absolute; z-index: 62; bottom: clamp(10px, 4svh, 34px); inset-inline-end: clamp(14px, 5vw, 72px); gap: 8px; }
.is-detail .gf-name, .is-detail .gf-count, .is-detail .gf-bar { opacity: 0; transition: opacity .25s; }

/* one product forward: details + order */
.gf--on .gf-panel { position: absolute; z-index: 63; inset-inline-end: clamp(18px, 8vw, 140px); top: 50%; width: min(40%, 440px); transform: translateY(-50%); color: var(--gf-ink); opacity: 0; filter: blur(8px); transition: opacity .16s ease, filter .16s ease; }
.gf-panel.is-in { opacity: 1; filter: none; transition: opacity .45s ease .1s, filter .45s ease .1s; }
.gf-panel > * { transform: translateY(14px); }
.gf-panel.is-in > * { transform: none; transition: transform .7s cubic-bezier(.16, 1, .3, 1) .08s; }
.gf-panel.is-in > :nth-child(2) { transition-delay: .12s; }
.gf-panel.is-in > :nth-child(3) { transition-delay: .16s; }
.gf-panel.is-in > :nth-child(n+4) { transition-delay: .2s; }
.gf--on.is-detail .gf-close { display: grid; place-items: center; position: absolute; z-index: 64; top: clamp(14px, 3vw, 28px); inset-inline-end: clamp(14px, 5vw, 72px); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--gf-ink); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.gf--on.is-detail .gf-thumbs { display: flex; position: absolute; z-index: 63; bottom: clamp(10px, 4svh, 34px); inset-inline-start: clamp(14px, 5vw, 72px); gap: 6px; max-width: calc(100% - 190px); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.gf-thumb { flex: 0 0 auto; width: 48px; height: 48px; padding: 4px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .7); cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s, transform .2s; }
.gf-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gf-thumb.is-on, .gf-thumb:hover { opacity: 1; border-color: var(--gf-ink); }
.gf-thumb:active { transform: scale(.94); }

@media (max-width: 699px) {
  .gf { --gf-h: clamp(460px, 72svh, 600px); }
  .gf--on.is-detail { --gf-h: clamp(600px, 86svh, 700px); }
  .gf--on .gf-panel { inset-inline: 18px; top: auto; bottom: 74px; width: auto; transform: none; }
  .gf--on .gf-nav { display: none; }
  .gf--on.is-detail .gf-nav { display: flex; bottom: 14px; inset-inline-end: 14px; }
  .gf--on.is-detail .gf-thumbs { max-width: calc(100% - 140px); bottom: 14px; }
  .gf--on .gf-bar { bottom: 22px; }
  .gf--on .gf-count { bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf--on .gf-item a, .gf--on .gf-item::after { animation: none; }
  .gf-anim .gf-item { transition-duration: .01s; }
  .is-detail .gf-item:not(.is-sel), .gf--on .gf-name, .gf--on .gf-panel { filter: none; }
}