/* Modern layer (Dev, 2026-10-08: "modern looks, deep effects, animation, 3D, easy to use, fast").
   Same theme colours (orange #f25900, dark #262626/#3d464d, light greys). Only transform/opacity animations
   (no layout shift), all switched off for people who ask their device to reduce motion. Works with js/modern.js. */

:root {
  --ss-orange: #f25900;
  --ss-orange-2: #ff7a1a;
  --ss-ink: #262626;
  --ss-ease: cubic-bezier(.2, .7, .2, 1);
  --ss-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
  --ss-shadow-2: 0 10px 30px -8px rgba(16, 24, 40, .22), 0 4px 12px -4px rgba(242, 89, 0, .18);
}

html { scroll-behavior: smooth; }
::selection { background: rgba(242, 89, 0, .18); }

/* ---------- 1. Header: raised, frosted look once you scroll ---------- */
.site__header, .mobile-header { transition: box-shadow .3s var(--ss-ease); }
body.ss-scrolled .mobile-header { box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35); }
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  body.ss-scrolled .mobile-header { -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); background: rgba(255, 255, 255, .88); }
}

/* ---------- 2. Banner: always shown whole (never cropped), soft blurred copy fills the rest of the box ---------- */
.block-slideshow__item { overflow: hidden; background: #1d1d1d; }
.block-slideshow__item .block-slideshow__item-image { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; z-index: 1 !important; }
.block-slideshow__item .ss-banner-fill { position: absolute; inset: -40px; z-index: 0; background-size: cover; background-position: center;
  filter: blur(28px) brightness(.62) saturate(1.15); transform: scale(1.1); animation: ss-kenburns 16s ease-in-out infinite alternate; }
/* same desktop/phone switch as the banner images themselves */
.block-slideshow__item .ss-banner-fill.block-slideshow__item-image--mobile { display: none; }
@media (max-width: 767px) {
  .block-slideshow__item .ss-banner-fill.block-slideshow__item-image--desktop { display: none; }
  .block-slideshow__item .ss-banner-fill.block-slideshow__item-image--mobile { display: block; }
}
@keyframes ss-kenburns { from { transform: scale(1.1); } to { transform: scale(1.18); } }

/* ---------- 3. Scroll reveal (classes added by modern.js; without JS nothing is hidden) ---------- */
.ss-rv { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s var(--ss-ease), transform .6s var(--ss-ease); transition-delay: var(--ss-d, 0s); }
.ss-rv.ss-in { opacity: 1; transform: none; }

/* ---------- 4. Cards: depth, 3D tilt (desktop), glare ---------- */
.product-card, .mf-card, .category-card__body, .categories-list-part .categories-list__item {
  transition: transform .35s var(--ss-ease), box-shadow .35s var(--ss-ease), border-color .35s;
  transform-style: preserve-3d;
}
.product-card:hover, .mf-card:hover, .category-card__body:hover, .categories-list-part .categories-list__item:hover { box-shadow: var(--ss-shadow-2); }
.ss-tilt { position: relative; }
.ss-tilt::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(420px circle at var(--ss-gx, 50%) var(--ss-gy, 50%), rgba(255, 255, 255, .45), transparent 42%);
  transition: opacity .3s;
}
.ss-tilt.ss-tilting::before { opacity: 1; }
/* the photo floats a little above the card while tilting */
.ss-tilt.ss-tilting .product-card__image, .ss-tilt.ss-tilting .mf-card__img { transform: translateZ(26px); transition: transform .35s var(--ss-ease); }
.product-card__image .image__tag, .mf-card__img img, .categories-list__item img { transition: transform .5s var(--ss-ease); }
.product-card:hover .image__tag, .mf-card:hover .mf-card__img img { transform: scale(1.04); }

/* stock badge: soft pill with a little glow */
.product-card .status-badge__body { box-shadow: 0 4px 12px -4px rgba(242, 89, 0, .55); }

/* ---------- 5. Buttons: gradient, lift, press, ripple ---------- */
.add-to-cart, .btn-primary, .mf-pick .btn, .product-buy-strip__btn-cart, .checkout .btn-primary, .cart .btn-primary {
  position: relative; overflow: hidden;
  background-image: linear-gradient(135deg, var(--ss-orange-2), var(--ss-orange) 55%, #e04f00) !important;
  border-color: transparent !important;
  transition: transform .15s var(--ss-ease), box-shadow .25s var(--ss-ease), filter .25s;
}
.add-to-cart:hover, .btn-primary:hover, .mf-pick .btn:hover { box-shadow: 0 10px 20px -8px rgba(242, 89, 0, .6); filter: saturate(1.1); }
.add-to-cart:active, .btn-primary:active, .mf-pick .btn:active, .product-buy-strip__btn-cart:active { transform: scale(.97); }
.ss-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .55); pointer-events: none; animation: ss-ripple .6s ease-out forwards; }
@keyframes ss-ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- 6. Section titles: animated accent bar ---------- */
.section-header__title, .block-categories__title, .mf-title, .block-header__title { position: relative; }
.mf-title::after, .block-categories__title::after {
  content: ''; display: block; width: 56px; height: 4px; margin: 10px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--ss-orange), var(--ss-orange-2)); transform: scaleX(0); transform-origin: center;
  transition: transform .7s var(--ss-ease) .15s;
}
.ss-in .mf-title::after, .mf-head.ss-in .mf-title::after, .ss-in.block-categories__title::after, .ss-in .block-categories__title::after { transform: scaleX(1); }

/* ---------- 7. Images: shimmer while loading ---------- */
.ss-loading { background: linear-gradient(100deg, #f1f1f1 30%, #fafafa 50%, #f1f1f1 70%) !important; background-size: 300% 100% !important; animation: ss-shimmer 1.3s linear infinite; }
@keyframes ss-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 8. Add to cart: flying photo + bouncing cart count ---------- */
.ss-fly { position: fixed; z-index: 100001; pointer-events: none; border-radius: 12px; object-fit: contain; background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transition: transform .75s cubic-bezier(.5, -0.3, .7, 1.2), opacity .75s ease-in; }
.ss-bump { animation: ss-bump .6s var(--ss-ease); }
@keyframes ss-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ---------- 9. Back to top ---------- */
.ss-top { position: fixed; left: 16px; bottom: 18px; z-index: 50; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--ss-orange-2), var(--ss-orange)); color: #fff; font-size: 20px; line-height: 44px; text-align: center;
  box-shadow: 0 8px 20px -6px rgba(242, 89, 0, .6); opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none;
  transition: opacity .3s, transform .3s var(--ss-ease); cursor: pointer; }
.ss-top.ss-show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 767px) { .ss-top { display: none; } } /* phones: the header is always there; the button covered card text */

/* ---------- 10. Small touches ---------- */
.mf-chip, .mf-card, .add-to-cart, .btn { -webkit-tap-highlight-color: transparent; }
.ss-toast { border-radius: 12px !important; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35) !important; }
.whatsapp-icon { transition: transform .25s var(--ss-ease); }
.whatsapp-icon:hover { transform: scale(1.08) rotate(-6deg); }
.site__footer, .footer { background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .12)); }

/* ---------- Motion off when the device asks for it ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ss-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ss-banner-fill, .ss-loading, .ss-bump, .ss-ripple { animation: none !important; }
  .product-card, .mf-card, .ss-tilt * { transition: none !important; }
}