/* Samudhra Fresh Catch: legacy storefront styles (Tailwind-era pages). Shared shell: samudhra.css */

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth scroll snap for hero/carousel rails */
.snap-x { scroll-snap-type: x mandatory; }
.snap-x > * { scroll-snap-align: start; }

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f5dddb 0%, #fbe3e1 50%, #f5dddb 100%);
  background-size: 936px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Range input thumb */
input[type="range"].accent-primary {
  accent-color: #ae2f34;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ---------------------------------------------------------------------------
   Recurring basket illustration
   Item photos sit in slots behind the basket front, so they look like they are
   inside it. Items drop in on load; the basket wobbles once when they land.
   --------------------------------------------------------------------------- */
.jf-basket { position: relative; width: 240px; height: 210px; flex-shrink: 0; }
.jf-basket--sm { width: 120px; height: 105px; }
.jf-basket__handle, .jf-basket__front { position: absolute; left: 0; width: 100%; pointer-events: none; }
.jf-basket__handle { top: 0; height: 60%; }
.jf-basket__front { bottom: 0; height: 58%; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.12)); }
.jf-basket__items { position: absolute; left: 11%; right: 11%; top: 27%; height: 46%; }
.jf-basket__item {
  position: absolute; width: 32%; aspect-ratio: 1; border-radius: 9999px; overflow: hidden;
  background: #fff; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  transform: rotate(var(--r, 0deg));
  animation: jf-basket-drop 0.7s cubic-bezier(.34, 1.4, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: transform .25s ease;
}
.jf-basket--sm .jf-basket__item { border-width: 2px; }
.jf-basket__item img { width: 100%; height: 100%; object-fit: cover; }
/* Slots: back row sits higher, front row lower and on top */
.jf-basket__item:nth-child(1) { left: 34%; top: -8%;  --r: -4deg; z-index: 1; }
.jf-basket__item:nth-child(2) { left: 4%;  top: 8%;   --r: -12deg; z-index: 2; }
.jf-basket__item:nth-child(3) { left: 64%; top: 6%;   --r: 10deg; z-index: 2; }
.jf-basket__item:nth-child(4) { left: 20%; top: 34%;  --r: 6deg; z-index: 3; }
.jf-basket__item:nth-child(5) { left: 50%; top: 32%;  --r: -8deg; z-index: 3; }
.jf-basket__item:nth-child(6) { left: -4%; top: 40%;  --r: -16deg; z-index: 2; }
.jf-basket__item:nth-child(7) { left: 72%; top: 38%;  --r: 14deg; z-index: 2; }
.jf-basket__item:nth-child(n+8) { display: none; }
.jf-basket__item:hover { transform: rotate(var(--r, 0deg)) translateY(-8px) scale(1.05); z-index: 5; }
.jf-basket__item.is-new {
  animation: jf-basket-drop-new 1s cubic-bezier(.34, 1.4, .64, 1) both;
  box-shadow: 0 0 0 3px #047857, 0 6px 14px rgba(4, 120, 87, .35);
}
.jf-basket__wobble { animation: jf-basket-wobble 0.6s ease-in-out both; animation-delay: var(--land, 0.5s); transform-origin: 50% 100%; }
.jf-basket__count {
  position: absolute; right: 6%; bottom: 8%; z-index: 6; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 9999px; background: #DC2626; color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(220, 38, 38, .35);
  animation: jf-pop 0.45s cubic-bezier(.34, 1.6, .64, 1) both; animation-delay: var(--land, 0.5s);
}
.jf-basket--sm .jf-basket__count { min-width: 24px; height: 24px; font-size: 11px; border-width: 2px; }
.jf-basket__empty { position: absolute; left: 0; right: 0; top: 30%; text-align: center; color: #047857; font-size: 12px; font-weight: 700; opacity: .8; }

/* Photo flying from the picker into the basket */
.jf-fly { position: fixed; z-index: 90; border-radius: 9999px; overflow: hidden; pointer-events: none;
          border: 3px solid #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .25); }
.jf-fly img { width: 100%; height: 100%; object-fit: cover; }

@keyframes jf-basket-drop {
  0%   { transform: translateY(-140%) rotate(calc(var(--r, 0deg) - 25deg)); opacity: 0; }
  60%  { transform: translateY(8%) rotate(var(--r, 0deg)); opacity: 1; }
  80%  { transform: translateY(-4%) rotate(var(--r, 0deg)); }
  100% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; }
}
@keyframes jf-basket-drop-new {
  0%   { transform: translateY(-220%) scale(1.3) rotate(calc(var(--r, 0deg) + 40deg)); opacity: 0; }
  55%  { transform: translateY(10%) scale(1) rotate(var(--r, 0deg)); opacity: 1; }
  75%  { transform: translateY(-6%) rotate(var(--r, 0deg)); }
  100% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; }
}
@keyframes jf-basket-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(2.5deg); }
  75% { transform: rotate(-1deg); }
}
@keyframes jf-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .jf-basket__item, .jf-basket__item.is-new, .jf-basket__wobble, .jf-basket__count { animation: none; }
  .jf-basket__item:hover { transform: rotate(var(--r, 0deg)); }
}

/* Basket offer progress bar fills in on load */
.jf-progress { width: var(--w, 0%); animation: jf-progress 0.9s cubic-bezier(.3,.8,.3,1) both; animation-delay: .3s; }
@keyframes jf-progress { from { width: 0; } to { width: var(--w, 0%); } }
@media (prefers-reduced-motion: reduce) { .jf-progress { animation: none; } }

/* Floating shopping basket on the home page: basket only, items in a panel on tap */
.jf-basket--xs { width: 88px; height: 77px; }
.jf-basket--xs .jf-basket__count { min-width: 22px; height: 22px; font-size: 11px; border-width: 2px; right: 2%; bottom: 4%; }
.jf-float.is-in { animation: jf-float-in 0.7s cubic-bezier(.34, 1.4, .64, 1) both; }
.jf-float.is-out { animation: jf-float-out 0.35s ease-in both; }
.jf-float:not(.is-open) .jf-float__bubble { animation: jf-bob 3.2s ease-in-out 1.6s infinite; }
.jf-float__bubble { transition: transform .2s ease; }
.jf-float__bubble:active { transform: scale(.95); }
.jf-float.is-open .jf-float__bubble { transform: scale(.94); }
.jf-float__panel:not([hidden]) { animation: jf-panel-in .32s cubic-bezier(.34, 1.3, .64, 1) both; }
.jf-float__panel:not([hidden]) .jf-float__item { animation: jf-item-in .35s ease-out both; animation-delay: calc(80ms + var(--i, 0) * 50ms); }
@keyframes jf-float-in { 0% { transform: translateY(40px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes jf-float-out { to { transform: translateY(24px) scale(.8); opacity: 0; } }
@keyframes jf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jf-panel-in { from { transform: translateY(12px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jf-item-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .jf-float.is-in, .jf-float.is-out, .jf-float__bubble, .jf-float__panel:not([hidden]),
  .jf-float__panel:not([hidden]) .jf-float__item { animation: none !important; }
}

/* ===========================================================================
   Site-wide motion
   Everything below is progressive: elements are only hidden for reveal once
   JS has added `js` to <html>, and all motion is off for reduced-motion users.
   =========================================================================== */
:root { --jf-ease: cubic-bezier(.22, .9, .3, 1); --jf-spring: cubic-bezier(.34, 1.4, .64, 1); }


/* Scroll reveal now lives in samudhra.css (.rv); [data-reveal] is mapped to .rv by samudhra.js */

/* Images fade in once decoded instead of popping */
.js img.jf-img { opacity: 0; transition: opacity .5s ease; }
.js img.jf-img.is-loaded { opacity: 1; }


/* ADD button success state + cart badge pop */
.jf-added { background-color: #047857 !important; color: #fff !important; border-color: #047857 !important; }
.jf-added-icon { display: inline-block; animation: jf-pop .4s var(--jf-spring) both; }
.jf-bump { animation: jf-bump .5s var(--jf-spring); }
@keyframes jf-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.jf-cart-shake { animation: jf-cart-shake .5s ease-in-out; }
@keyframes jf-cart-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }

/* Buttons and tappable tiles: soft press */
a[class*="rounded"], button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active, a.inline-flex:active { transform: scale(.97); }

/* Hero banner: slow Ken Burns zoom on the active slide, text rises in on change */
[data-hero-slide] img { transform: scale(1.02); transition: transform 7s ease-out; will-change: transform; }
[data-hero-slide][aria-hidden="false"] img { transform: scale(1.1); }
[data-hero-slide][aria-hidden="false"] h2 { animation: jf-rise .8s var(--jf-ease) .15s both; }
[data-hero-slide][aria-hidden="false"] p  { animation: jf-rise .8s var(--jf-ease) .3s both; }
[data-hero-slide][aria-hidden="false"] span.rounded-full { animation: jf-rise .8s var(--jf-ease) .45s both; }
@keyframes jf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }


/* Picture flying into the cart */
.jf-fly-cart { position: fixed; z-index: 95; pointer-events: none; border-radius: 16px; overflow: hidden;
               box-shadow: 0 10px 24px rgba(15, 23, 42, .25); border: 3px solid #fff; }
.jf-fly-cart img { width: 100%; height: 100%; object-fit: cover; }

/* Bottom nav: active icon settles in */
nav[aria-label="Primary"] .icon-fill { animation: jf-pop .45s var(--jf-spring) both; }

@media (prefers-reduced-motion: reduce) {
  .js img.jf-img { opacity: 1; transition: none; }
  [data-hero-slide] img { transition: none; transform: none !important; }
  .jf-bump, .jf-cart-shake, .jf-added-icon, [data-hero-slide] h2,
  [data-hero-slide] p, [data-hero-slide] span.rounded-full, nav[aria-label="Primary"] .icon-fill { animation: none !important; }
  button:not(:disabled):active, a.inline-flex:active { transform: none; }
}

/* Star rating input: hovering or picking a star lights it and every star before it */
.jf-stars label { transition: color .15s ease, transform .15s ease; }
.jf-stars label:hover, .jf-stars label:hover ~ label,
.jf-stars input:checked ~ label { color: #F59E0B; }
.jf-stars label:hover { transform: scale(1.15); }
.jf-stars input:focus-visible + label { outline: 2px solid #047857; outline-offset: 2px; border-radius: 4px; }

/* Coupon ticket on the home page */
.jf-coupon__notch { position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 9999px; background: #F8FAFC; }
.jf-coupon::after {  /* soft shine sweeping across every few seconds */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-120%); animation: jf-shine 5s ease-in-out 1.5s infinite;
}
.jf-coupon__headline { animation: jf-rise .8s var(--jf-ease) .2s both; text-shadow: 0 4px 18px rgba(0,0,0,.18); }
@keyframes jf-shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.jf-copied { animation: jf-bump .45s var(--jf-spring); }
@media (prefers-reduced-motion: reduce) { .jf-coupon::after, .jf-coupon__headline { animation: none; } }

/* Cart: coupon error shake, applied ticket, celebration popup with confetti */
.jf-shake { animation: jf-shake .4s ease-in-out; }
@keyframes jf-shake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.jf-applied { animation: jf-rise .5s var(--jf-ease) both; }
.jf-celebrate { animation: jf-panel-in .45s var(--jf-spring) both; }
.jf-celebrate__badge { animation: jf-pop .6s var(--jf-spring) .15s both; }
.jf-confetti { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
               animation: jf-confetti 1.4s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes jf-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x, 0), 150px) rotate(var(--r, 360deg)); }
}
@media (prefers-reduced-motion: reduce) { .jf-shake, .jf-applied, .jf-celebrate, .jf-celebrate__badge { animation: none; } }

/* Promo popup */
[data-promo-popup].flex .jf-promo { animation: jf-promo-in .5s var(--jf-spring) both; }
[data-promo-popup].flex > .absolute { animation: jf-fade-in .3s ease both; }
[data-promo-popup].is-leaving .jf-promo { animation: jf-promo-out .25s ease-in both; }
.jf-promo__notch { position: absolute; top: -16px; width: 32px; height: 32px; border-radius: 9999px; background: rgba(15, 23, 42, .45); }
@keyframes jf-promo-in { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes jf-promo-out { to { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes jf-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-promo-popup] .jf-promo, [data-promo-popup] > .absolute { animation: none !important; } }