/* ==========================================================================
   TELESIN skin — layered last over the Kalles base to match the TELESIN store:
   blue accent/buttons, two-row header w/ tagline, transparent-over-hero nav.
   ========================================================================== */
:root {
  --tel-blue: 43 138 240;        /* #2b8af0 */
  --tel-blue-dark: 26 118 220;
  --color-accent: 43 138 240;    /* repoint Kalles accent -> TELESIN blue */
  --color-focus: 43 138 240;
}

/* ---------------- Header: two rows ---------------- */
.kalles-header--tel { background: #fff; border-bottom: 1px solid rgb(var(--color-line-border)); transition: background-color .25s ease, border-color .25s ease; }
/* Ink transitions so the transparent->white swap (and quick gap crossings between
   menu items) fade smoothly instead of flickering. */
.kalles-header--tel .kalles-nav__link,
.kalles-header--tel .kalles-tel-logo,
.kalles-header--tel .kalles-header__action,
.kalles-header--tel .kalles-switcher__toggle,
.kalles-header--tel .kalles-tel-tagline { transition: color .2s ease, border-color .2s ease; }
.kalles-header--tel .kalles-header__top { }
.kalles-header__top-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 6.4rem; }
.kalles-header--tel .kalles-header__logo { display: flex; align-items: center; gap: 1.2rem; }
.kalles-tel-logo { font-family: var(--font-heading-family); font-weight: var(--font-bold); font-size: 2.6rem; letter-spacing: .02em; color: rgb(var(--color-base-text)); }
.kalles-tel-logo__img { height: 3.4rem; width: auto; display: block; }
.kalles-tel-tagline { font-size: 1.25rem; color: rgb(var(--color-foreground2)); padding-inline-start: 1.2rem; border-inline-start: 1px solid rgb(var(--color-line-border)); line-height: 1.3; }
@media (max-width: 1024px) { .kalles-tel-tagline { display: none; } }
/* Compact the logo on phones so the overlay header row doesn't crowd the hero. */
@media (max-width: 600px) { .kalles-tel-logo { font-size: 2.1rem; } .kalles-tel-logo__img { height: 2.8rem; } }
.kalles-header--tel .kalles-header__actions { gap: 2rem; }
.kalles-header--tel .kalles-header__action { font-size: 1.9rem; }
.kalles-header__flag .kalles-switcher__toggle { font-size: 1.25rem; }

/* nav row */
.kalles-header__nav-row { border-top: 0; }
.kalles-header__nav-inner { display: flex; justify-content: flex-start; }
/* No flex `gap` between nav items: an empty gap is a hover dead-zone that drops
   :hover and closes the open dropdown when the cursor crosses it. Move the spacing
   into each item's trailing padding, so it belongs to (and keeps hovered) the item
   before it. Padding is part of the item's :hover box; dropdown position is
   unaffected (it's absolute against the item's left edge). */
.kalles-header--tel .kalles-nav__list { gap: 0; }
.kalles-header--tel .kalles-nav__item { padding-right: 2.6rem; }
.kalles-header--tel .kalles-nav__list > .kalles-nav__item:last-child { padding-right: 0; }
.kalles-header--tel .kalles-nav__link { padding: 1.5rem 0; font-size: 1.45rem; font-weight: var(--font-normal); }
.kalles-nav__item--all > .kalles-nav__link { font-weight: var(--font-medium); }
/* remove the old single-row grid layout */
.kalles-header--tel .kalles-header__inner { display: none; }

/* ---------------- Transparent-over-hero ---------------- */
body.kalles-has-hero main { margin-top: 0; }
body.kalles-has-hero .kalles-header-spacer { display: none !important; }
body.kalles-has-hero .kalles-header--tel {
  position: absolute; top: 0; inset-inline: 0; z-index: 1000;
  background: transparent; border-bottom-color: transparent;
}
body.kalles-has-hero .kalles-header--tel .kalles-header__nav-row { border-top-color: rgb(255 255 255 / .25); }
body.kalles-has-hero .kalles-header--tel:not(.is-solid) {
  --color-base-text: 255 255 255;
}
body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-tel-logo,
body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-nav__link,
body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-header__action,
body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-tel-tagline,
body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-switcher__toggle { color: #fff; }
body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-tel-tagline { border-inline-start-color: rgb(255 255 255 / .4); color: rgb(255 255 255 / .85); }
/* solid state (scrolled / sticky) */
.kalles-header--tel.is-sticky, body.kalles-has-hero .kalles-header--tel.is-solid {
  position: fixed; background: #fff; border-bottom-color: rgb(var(--color-line-border));
}

/* Mobile: don't overlay the hero. Make the hero-header a solid, in-flow (sticky)
   white bar with dark ink so the slideshow starts BELOW the header instead of
   scrolling under a transparent overlay. */
@media (max-width: 1024px) {
  body.kalles-has-hero .kalles-header--tel {
    position: sticky; top: 0;
    background: #fff; border-bottom-color: rgb(var(--color-line-border));
    --color-base-text: 20 22 26;
  }
  body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-tel-logo,
  body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-header__action,
  body.kalles-has-hero .kalles-header--tel:not(.is-solid) .kalles-switcher__toggle { color: #14161a; }
}

/* Menu open over the hero: the header goes solid white with dark ink so the
   attached mega/dropdown reads as one continuous white surface (telesin.com
   behaviour) instead of a white panel floating under a transparent header. */
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) {
  background: #fff; border-bottom-color: rgb(var(--color-line-border));
  --color-base-text: 20 22 26;
}
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) .kalles-tel-logo,
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) .kalles-nav__link,
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) .kalles-header__action,
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) .kalles-tel-tagline,
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) .kalles-switcher__toggle { color: #14161a; }
body.kalles-has-hero .kalles-header--tel:not(.is-solid):has(.kalles-nav__item--has-children.is-open) .kalles-tel-tagline {
  border-inline-start-color: rgb(0 0 0 / .18); color: rgb(20 22 26 / .7);
}

/* Dropdown & mega panels are always a light/white surface — force dark ink even
   when the transparent header sets --color-base-text to white over the hero.
   Setting the variable on the panel itself (closer ancestor than the header) wins
   for all links inside, so options never render white-on-white / look empty. */
.kalles-nav__dropdown, .kalles-megamenu { --color-base-text: 20 22 26; }

/* ---------------- Blue buttons everywhere ---------------- */
.kalles-btn, .kalles-btn-hero, .kalles-pdp__addcart, #content .btn-primary, .btn-primary,
#checkout-checkout .btn-primary, .kalles-checkout .btn-primary {
  background: rgb(var(--tel-blue)); border-color: rgb(var(--tel-blue)); color: #fff;
}
.kalles-btn:hover, .kalles-btn-hero:hover, .kalles-pdp__addcart:hover, #content .btn-primary:hover, .btn-primary:hover {
  background: rgb(var(--tel-blue-dark)); border-color: rgb(var(--tel-blue-dark)); color: #fff;
}
.kalles-btn--outline { background: transparent; color: rgb(var(--color-base-text)); border-color: rgb(var(--color-line-border)); }
.kalles-btn--outline:hover { background: rgb(var(--tel-blue)); border-color: rgb(var(--tel-blue)); color: #fff; }
.kalles-btn-hero { border-radius: 9999px; }
.kalles-count-badge { background: rgb(var(--tel-blue)); }

/* links / accents */
a.kalles-blog-card__title:hover, .kalles-pcard__title a:hover, .kalles-nav__dropdown a:hover,
.kalles-footer__col a:hover, .kalles-subcats a:hover { color: rgb(var(--tel-blue)); }
.kalles-pdp__rating a, .kalles-toolbar a { color: rgb(var(--tel-blue)); }

/* ---------------- Pre-footer newsletter band ---------------- */
.kalles-newsletter-band { background: linear-gradient(90deg, #eaf4ff, #d7ebff); padding: 5rem 0; }
.kalles-newsletter-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.kalles-newsletter-band h2 { font-family: var(--font-heading-family); font-size: 3rem; font-weight: var(--font-semibold); margin-bottom: 1rem; }
.kalles-newsletter-band p { font-size: 1.35rem; color: rgb(var(--color-foreground2)); }
.kalles-newsletter-band form { display: flex; background: #fff; border-radius: 9999px; overflow: hidden; padding: .5rem; box-shadow: 0 6px 24px rgb(0 0 0 / .06); }
.kalles-newsletter-band input { flex: 1; border: 0; padding: 1.1rem 1.8rem; font-size: 1.4rem; background: none; }
.kalles-newsletter-band input:focus { outline: none; }
.kalles-newsletter-band button { width: 4.4rem; height: 4.4rem; border-radius: 9999px; border: 0; background: rgb(var(--tel-blue)); color: #fff; font-size: 1.6rem; cursor: pointer; flex: 0 0 auto; }
.kalles-newsletter-band button:hover { background: rgb(var(--tel-blue-dark)); }
.kalles-newsletter-band .note { font-size: 1.15rem; margin-top: 1rem; }
.kalles-newsletter-band .note a { color: rgb(var(--tel-blue)); text-decoration: underline; }
@media (max-width: 768px) { .kalles-newsletter-band__inner { grid-template-columns: 1fr; } }

/* ---------------- Footer (TELESIN columns) ---------------- */
/* Neutralise OpenCart's default `footer{position:absolute;border;bottom;padding}`
   rule (from stylesheet.css) which pulls the footer out of flow and overlaps
   page content — this is what made the cart appear "cut off". */
.kalles-footer { position: static; bottom: auto; border: 0; padding-top: 0; }
.kalles-footer--tel { background: #fff; border-top: 0; }
.kalles-footer--tel .kalles-footer__top { grid-template-columns: repeat(4, 1fr) 1.2fr; padding: 5rem 0 4rem; }
.kalles-tel-foot-brand { text-align: end; }
.kalles-tel-foot-brand .kalles-tel-logo { font-size: 3rem; display: inline-block; margin-bottom: 1rem; }
.kalles-tel-foot-brand__email { font-size: 1.35rem; color: rgb(var(--color-foreground2)); margin-bottom: 1.5rem; }
.kalles-tel-foot-brand .kalles-footer__socials { justify-content: flex-end; }
@media (max-width: 992px) { .kalles-footer--tel .kalles-footer__top { grid-template-columns: repeat(2,1fr); } .kalles-tel-foot-brand { text-align: start; grid-column: 1 / -1; } .kalles-tel-foot-brand .kalles-footer__socials { justify-content: flex-start; } }

/* ---------------- Product page: sticky add-to-cart bar ---------------- */
.kalles-pdp__stickybar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 900; background: #fff;
  box-shadow: 0 -4px 20px rgb(0 0 0 / .08); transform: translateY(110%); transition: transform .3s;
  padding: 1.2rem 0;
}
.kalles-pdp__stickybar.is-visible { transform: translateY(0); }
.kalles-pdp__stickybar-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.kalles-pdp__stickybar-left { font-size: 1.35rem; color: rgb(var(--color-foreground2)); display: flex; align-items: center; gap: .8rem; }
.kalles-pdp__stickybar-right { display: flex; align-items: center; gap: 2rem; }
.kalles-pdp__stickybar-price { font-size: 2rem; font-weight: var(--font-semibold); }
.kalles-pdp__stickybar-price small { display: block; font-size: 1.1rem; font-weight: var(--font-normal); color: rgb(var(--color-foreground2)); }
.kalles-pdp__stickybar .kalles-btn { min-width: 22rem; }
@media (max-width: 640px) { .kalles-pdp__stickybar-left { display: none; } .kalles-pdp__stickybar .kalles-btn { min-width: 14rem; } }

/* HOT badge + feature box + coupon */
.kalles-pdp__flags { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.kalles-pdp__hot { display: inline-block; border: 1px solid rgb(var(--color-pr-sale-price)); color: rgb(var(--color-pr-sale-price)); font-size: 1.1rem; font-weight: var(--font-semibold); padding: .2rem .8rem; border-radius: var(--radius-2xs); text-transform: uppercase; }
.kalles-pdp__sku { font-size: 1.25rem; color: rgb(var(--color-foreground2)); }
.kalles-pdp__features { background: rgb(var(--color-background2)); border-radius: var(--radius); padding: 1.8rem 2rem; margin: 1.5rem 0; }
.kalles-pdp__features ol { margin: 0; padding-inline-start: 1.6rem; }
.kalles-pdp__features li { font-size: 1.3rem; line-height: 1.6; margin-bottom: .8rem; color: rgb(var(--color-base-text)); }
.kalles-pdp__features li:last-child { margin-bottom: 0; }
.kalles-pdp__coupon { display: flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0; }
.kalles-pdp__coupon-save { background: rgb(var(--tel-blue)); color: #fff; padding: 1.2rem 1.8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.kalles-pdp__coupon-save small { font-size: 1.1rem; text-transform: uppercase; }
.kalles-pdp__coupon-save b { font-size: 2.4rem; }
.kalles-pdp__coupon-body { background: #eaf4ff; flex: 1; padding: 1.2rem 1.8rem; display: flex; flex-direction: column; justify-content: center; }
.kalles-pdp__coupon-body strong { font-size: 1.45rem; }
.kalles-pdp__coupon-body a { color: rgb(var(--tel-blue)); font-size: 1.3rem; }
.kalles-coupon-copy { background: none; border: 0; padding: 0; cursor: pointer; color: rgb(var(--tel-blue)); font-size: 1.3rem; text-decoration: underline; font: inherit; }

/* product tab bar sticky */
.kalles-tabs__nav { justify-content: center; gap: 4rem; position: sticky; top: 0; background: #fff; z-index: 50; }

/* ---------------- Hero slideshow (homepage) — framed product spotlight ----------------
   Split hero: eyebrow+rule, big heading, feature row and pill CTA on the copy side; a
   circular product "spotlight" on a CSS podium on the visual side; soft blue gradient
   backdrop with a curved split + faint wave rings. Product images are cutouts, so they
   sit framed in the circle rather than full-bleed. */
#common-home .kalles-slideshow { --kalles-slide-h: 70rem; }
#common-home .kalles-slideshow__slide {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: var(--kalles-slide-h);
  background:
    radial-gradient(circle at 76% 38%, rgb(255 255 255 / .95) 0, rgb(255 255 255 / .45) 22%, transparent 45%),
    linear-gradient(112deg, #f7faff 0%, #eef5ff 42%, #e4efff 100%);
}
/* large curved split behind the product */
#common-home .kalles-slideshow__slide::before {
  content: ""; position: absolute; z-index: 0; top: -26%; right: -8%; width: 62%; height: 145%;
  border-radius: 50% 0 0 50%; transform: rotate(5deg);
  background: linear-gradient(145deg, rgb(211 226 249 / .75), rgb(242 247 255 / .25));
}
/* faint concentric wave rings, bottom-left */
#common-home .kalles-slideshow__slide::after {
  content: ""; position: absolute; z-index: 0; bottom: -15rem; left: -8rem; width: 85rem; height: 43rem;
  border-radius: 50%; opacity: .35; transform: rotate(-11deg); pointer-events: none;
  background: repeating-radial-gradient(ellipse at center, transparent 0 2rem, rgb(255 255 255 / .85) 2.1rem 2.2rem);
}
/* neutralise the base absolute-positioned content rules */
#common-home .kalles-slideshow__content { position: static; inset: auto; display: block; padding: 0; gap: 0; max-width: 69rem; }
#common-home .kalles-slideshow__inner {
  position: relative; z-index: 2; min-height: var(--kalles-slide-h);
  display: grid; grid-template-columns: minmax(42rem, .9fr) minmax(48rem, 1.1fr); align-items: center; gap: 4rem;
  max-width: var(--container-max-width); margin: 0 auto; padding: 7rem var(--spacing-x) 8rem;
}
/* text on the right variant: swap the columns */
#common-home .kalles-slideshow__inner.pos-right { grid-template-columns: minmax(48rem, 1.1fr) minmax(42rem, .9fr); }
#common-home .kalles-slideshow__inner.pos-right .kalles-slideshow__content { order: 2; }
#common-home .kalles-slideshow__inner.pos-right .kalles-slideshow__visual { order: 1; }
#common-home .kalles-slideshow__inner.pos-center { grid-template-columns: 1fr; justify-items: center; text-align: center; }

/* eyebrow (label + rule) */
#common-home .kalles-slideshow__eyebrow { display: flex; align-items: center; gap: 1.8rem; margin-bottom: 2.4rem; font-size: 1.5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--tel-blue)); }
#common-home .kalles-slideshow__eyebrow i { display: block; width: 5.4rem; height: 2px; border-radius: 999px; background: rgb(var(--tel-blue)); }
/* heading + subheading */
#common-home .kalles-slideshow__heading { margin: 0; font-family: var(--font-heading-family); font-weight: 800; font-size: clamp(4.6rem, 5vw, 8rem); line-height: .98; letter-spacing: -.04em; color: #07182f; }
#common-home .kalles-slideshow__subheading { margin: 2.4rem 0 0; font-size: 1.9rem; line-height: 1.5; color: #667085; max-width: 40ch; }

/* feature row */
#common-home .kalles-slideshow__features { display: flex; align-items: stretch; margin-top: 3.6rem; }
#common-home .kalles-slideshow__feature { position: relative; flex: 1; min-width: 12rem; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 2rem; }
#common-home .kalles-slideshow__feature:first-child { padding-inline-start: 0; }
#common-home .kalles-slideshow__feature:not(:last-child)::after { content: ""; position: absolute; top: .4rem; inset-inline-end: 0; width: 1px; height: 8.5rem; background: rgb(17 38 69 / .1); }
#common-home .kalles-slideshow__feature-icon { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; margin-bottom: 1.2rem; border: 1px solid rgb(var(--tel-blue) / .15); border-radius: 1.4rem; background: rgb(255 255 255 / .6); box-shadow: 0 8px 25px rgb(31 93 160 / .08), inset 0 1px 0 rgb(255 255 255 / .8); font-size: 2rem; color: rgb(var(--tel-blue)); }
#common-home .kalles-slideshow__feature strong { font-size: 1.5rem; color: #07182f; margin-bottom: .5rem; }
#common-home .kalles-slideshow__feature-sub { font-size: 1.35rem; color: #667085; }

/* CTA */
#common-home .kalles-slideshow__btn { margin-top: 4rem; }
#common-home .kalles-slideshow__btn .kalles-btn-hero { display: inline-flex; align-items: center; gap: 1.4rem; min-height: 6rem; padding: 1.6rem 3.2rem; border-radius: 999px; border: 0; color: #fff; font-size: 1.6rem; font-weight: 700; text-transform: none; letter-spacing: .01em;
  background: linear-gradient(135deg, #2697ff 0%, rgb(var(--tel-blue)) 55%, rgb(var(--tel-blue-dark)) 100%);
  box-shadow: 0 18px 35px rgb(var(--tel-blue) / .28), inset 0 1px 0 rgb(255 255 255 / .25); transition: transform .18s ease, box-shadow .18s ease; }
#common-home .kalles-slideshow__btn .kalles-btn-hero:hover { transform: translateY(-3px); box-shadow: 0 22px 42px rgb(var(--tel-blue) / .34), inset 0 1px 0 rgb(255 255 255 / .25); }
#common-home .kalles-slideshow__btn .kalles-btn-hero i { font-size: 1.6rem; transition: transform .18s ease; }
#common-home .kalles-slideshow__btn .kalles-btn-hero:hover i { transform: translateX(4px); }

/* visual: circular spotlight + CSS podium */
#common-home .kalles-slideshow__visual { position: relative; display: grid; place-items: center; min-height: 52rem; }
#common-home .kalles-slideshow__circle { position: relative; z-index: 3; display: grid; place-items: center; width: min(52rem, 40vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / .8);
  background: radial-gradient(circle at 50% 38%, rgb(255 255 255 / .98) 0%, rgb(249 252 255 / .96) 46%, rgb(229 239 254 / .9) 100%);
  box-shadow: 0 35px 90px rgb(74 116 171 / .12), inset 0 0 80px rgb(255 255 255 / .8); }
#common-home .kalles-slideshow__circle::before { content: ""; position: absolute; inset: -4rem; z-index: -1; border-radius: inherit; background: radial-gradient(circle, rgb(255 255 255 / .45) 0 61%, rgb(255 255 255 / .28) 61% 72%, transparent 72%); }
#common-home .kalles-slideshow__circle::after { content: ""; position: absolute; inset: 14%; z-index: -1; border-radius: 50%; background: rgb(var(--tel-blue) / .16); filter: blur(45px); }
#common-home .kalles-slideshow__img { position: relative; z-index: 4; width: 84%; height: auto; max-height: 78%; object-fit: contain; filter: drop-shadow(0 26px 20px rgb(12 33 59 / .2)) drop-shadow(0 8px 8px rgb(12 33 59 / .13)); animation: kalles-hero-float 5s ease-in-out infinite; }
#common-home .kalles-slideshow__product-shadow { position: absolute; z-index: 2; bottom: 12%; left: 50%; width: 55%; height: 3.4rem; border-radius: 50%; background: rgb(18 45 74 / .24); filter: blur(18px); transform: translateX(-50%); animation: kalles-hero-shadow 5s ease-in-out infinite; }
/* podium */
#common-home .kalles-slideshow__platform { position: absolute; z-index: 2; bottom: 1.8rem; left: 50%; width: min(58rem, 42vw); height: 12.5rem; transform: translateX(-50%); }
#common-home .kalles-slideshow__platform-top, #common-home .kalles-slideshow__platform-bottom { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
#common-home .kalles-slideshow__platform-top { z-index: 2; top: 0; width: 86%; height: 8.8rem; background: linear-gradient(180deg, #fff 0%, #f7faff 46%, #dfe8f5 100%); box-shadow: 0 20px 35px rgb(37 70 109 / .17), inset 0 3px 4px rgb(255 255 255 / .95); }
#common-home .kalles-slideshow__platform-bottom { bottom: 0; width: 100%; height: 7.6rem; background: linear-gradient(180deg, #f6f9fd, #dce6f3); box-shadow: 0 25px 50px rgb(35 72 118 / .18), inset 0 2px 3px rgb(255 255 255 / .9); }

/* The spotlight backdrop is always light, so hero copy is always dark ink —
   regardless of a slide's saved text_theme (older slides may still be 'light'). */

/* nav arrows — circular */
#common-home .kalles-slideshow__nav { opacity: 1; width: 5.4rem; height: 5.4rem; background: rgb(255 255 255 / .92); color: #07182f; border: 1px solid rgb(13 37 66 / .06); box-shadow: 0 12px 30px rgb(24 55 92 / .12); }
#common-home .kalles-slideshow__nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }

@keyframes kalles-hero-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes kalles-hero-shadow { 0%, 100% { opacity: .25; transform: translateX(-50%) scaleX(1); } 50% { opacity: .16; transform: translateX(-50%) scaleX(.82); } }
@media (prefers-reduced-motion: reduce) { #common-home .kalles-slideshow__img, #common-home .kalles-slideshow__product-shadow { animation: none; } }

/* tablet */
@media (max-width: 1100px) {
  #common-home .kalles-slideshow__inner, #common-home .kalles-slideshow__inner.pos-right { grid-template-columns: 1fr 1fr; gap: 2rem; }
  #common-home .kalles-slideshow__heading { font-size: clamp(4rem, 6vw, 6rem); }
  #common-home .kalles-slideshow__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 0; }
  #common-home .kalles-slideshow__feature:not(:last-child)::after { display: none; }
  #common-home .kalles-slideshow__circle { width: min(42rem, 46vw); }
}
/* mobile */
@media (max-width: 768px) {
  #common-home .kalles-slideshow { --kalles-slide-h: auto; }
  #common-home .kalles-slideshow__inner, #common-home .kalles-slideshow__inner.pos-right { grid-template-columns: 1fr; text-align: center; padding: 5rem var(--spacing-x) 8rem; gap: 1rem; }
  #common-home .kalles-slideshow__content { max-width: none; order: 1; }
  #common-home .kalles-slideshow__inner.pos-right .kalles-slideshow__visual { order: 2; }
  #common-home .kalles-slideshow__eyebrow { justify-content: center; }
  #common-home .kalles-slideshow__subheading { margin-inline: auto; }
  #common-home .kalles-slideshow__features { max-width: 50rem; margin-inline: auto; }
  #common-home .kalles-slideshow__visual { min-height: 40rem; margin-top: 2rem; }
  #common-home .kalles-slideshow__circle { width: min(38rem, 86vw); }
}

/* ---------------- Breadcrumb fix (kill leftover OC bar) ---------------- */
.breadcrumb { background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 2rem; list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; font-size: 1.25rem; }
.breadcrumb-item + .breadcrumb-item { padding-inline-start: 0; }

/* ---------------- Menu badges ---------------- */
.kalles-nav__item { overflow: visible; }
.kalles-nav__badge {
  position: absolute; top: .4rem; inset-inline-end: -1.4rem; z-index: 3;
  font-size: 1rem; font-weight: var(--font-semibold); line-height: 1;
  color: #fff; padding: .35rem .6rem; border-radius: 9999px; text-transform: capitalize; white-space: nowrap;
}
.kalles-nav__badge::after { content: ""; position: absolute; bottom: -.3rem; inset-inline-start: .6rem; border: .3rem solid transparent; border-top-color: inherit; }
.kalles-nav__link { position: relative; }
/* Blue underline under the hovered / active top-level item (telesin.com). */
.kalles-header--tel .kalles-nav__item > .kalles-nav__link::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: rgb(var(--tel-blue)); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.kalles-header--tel .kalles-nav__item:hover > .kalles-nav__link::before { transform: scaleX(1); }

/* ---------------- Mega-menu (full-width product preview dropdown) ----------------
   The panel spans the entire nav-row width (edge to edge); its inner content is
   centred on the store container via responsive inline padding. */
.kalles-header--tel .kalles-header__nav-row { position: relative; }
.kalles-nav__item--mega { position: static; }
.kalles-megamenu {
  display: flex; gap: 4rem; min-width: 0; overflow: hidden;
  /* Attached panel: full-bleed white surface flush under the (now white) header,
     inner content centred on the store container via responsive inline padding.
     The header's own border-bottom is the divider line between nav and panel. */
  position: absolute; top: 100%; inset-inline: 0; width: auto; transform: translateY(10px);
  padding-block: 3rem;
  padding-inline: max(var(--spacing-x), calc((100vw - var(--container-max-width)) / 2));
  border: 0; border-radius: 0;
  box-shadow: 0 22px 30px -12px rgb(0 0 0 / .14);
  background: #fff;
}
.kalles-nav__item--mega:hover > .kalles-megamenu,
.kalles-nav__item--mega.is-open > .kalles-megamenu { transform: translateY(0); }
/* left rail */
.kalles-megamenu__side { flex: 0 0 26rem; padding-inline-end: 4rem; background: transparent; display: flex; flex-direction: column; }
.kalles-megamenu__side-title { font-size: 1.6rem; font-weight: var(--font-semibold); padding-inline-start: 1rem; border-inline-start: 3px solid rgb(var(--tel-blue)); margin-bottom: 2rem; }
.kalles-megamenu__links { list-style: none; margin: 0 0 2.4rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.kalles-megamenu__links li { margin: 0; }
.kalles-megamenu__links a {
  position: relative; display: block; padding: 1rem 1.4rem; font-size: 1.4rem; font-weight: var(--font-medium);
  color: rgb(var(--color-foreground2)); border-radius: var(--radius-2xs);
  border-inline-start: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, padding-inline-start .2s ease;
}
.kalles-megamenu__links a:hover,
.kalles-megamenu__links a:focus-visible {
  background: rgb(var(--color-background2));
  border-inline-start-color: rgb(var(--tel-blue));
  color: rgb(var(--color-base-text));
  font-weight: var(--font-semibold);
  padding-inline-start: 1.8rem;
}
/* Two-class selector so it beats `.kalles-nav__dropdown a` (which otherwise
   forces dark link ink on the button when the mega opens over the hero). */
.kalles-megamenu .kalles-megamenu__shop {
  align-self: stretch; text-align: center; border-radius: 9999px;
  padding: 1.3rem 3.4rem; font-size: 1.4rem; font-weight: var(--font-bold); letter-spacing: .02em;
  background: rgb(var(--tel-blue)); border-color: rgb(var(--tel-blue)); color: #fff;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.kalles-megamenu .kalles-megamenu__shop:hover {
  background: rgb(var(--tel-blue-dark)); border-color: rgb(var(--tel-blue-dark)); color: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 18px rgb(43 138 240 / .35);
}

/* Entrance animation — staggered fade/slide of the sidebar when the panel opens */
@keyframes kalles-mega-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kalles-nav__item--mega:hover .kalles-megamenu__side-title,
.kalles-nav__item--mega:hover .kalles-megamenu__links li,
.kalles-nav__item--mega:hover .kalles-megamenu__shop { animation: kalles-mega-in .35s ease both; }
.kalles-nav__item--mega:hover .kalles-megamenu__side-title { animation-delay: .02s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(1) { animation-delay: .06s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(2) { animation-delay: .10s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(3) { animation-delay: .14s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(4) { animation-delay: .18s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(5) { animation-delay: .22s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(6) { animation-delay: .26s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(7) { animation-delay: .30s; }
.kalles-nav__item--mega:hover .kalles-megamenu__links li:nth-child(8) { animation-delay: .34s; }
.kalles-nav__item--mega:hover .kalles-megamenu__shop { animation-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  .kalles-nav__item--mega:hover .kalles-megamenu__side-title,
  .kalles-nav__item--mega:hover .kalles-megamenu__links li,
  .kalles-nav__item--mega:hover .kalles-megamenu__shop { animation: none; }
}
/* right grid */
.kalles-megamenu__main { flex: 1; min-width: 0; }
.kalles-megamenu__viewall { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.4rem; font-weight: var(--font-medium); color: rgb(var(--color-base-text)); margin-bottom: 1.6rem; }
.kalles-megamenu__viewall:hover { color: rgb(var(--tel-blue)); }
.kalles-megamenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-height: 46rem; overflow-y: auto; padding-inline-end: .6rem; }
.kalles-megamenu__card { display: flex; align-items: center; gap: 1.6rem; padding: 1.2rem 1.4rem; border-radius: .8rem; background: #fbfbfc; border: 1px solid transparent; transition: box-shadow .2s, border-color .2s; min-width: 0; }
.kalles-megamenu__card:hover { border-color: rgb(var(--color-line-border)); box-shadow: 0 10px 24px rgb(0 0 0 / .08); }
.kalles-megamenu__card-media { flex: 0 0 9rem; width: 9rem; height: 9rem; border-radius: .6rem; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kalles-megamenu__card-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kalles-megamenu__card-body { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.kalles-megamenu__card-tag { align-self: flex-start; font-size: 1.05rem; font-weight: var(--font-semibold); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.kalles-megamenu__card-tag--hot { color: #ec0101; }
.kalles-megamenu__card-tag--new { color: rgb(var(--tel-blue)); }
.kalles-megamenu__card-name { font-size: 1.3rem; line-height: 1.45; color: rgb(var(--color-base-text)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kalles-megamenu__card:hover .kalles-megamenu__card-name { color: rgb(var(--tel-blue)); }
@media (max-width: 992px) { .kalles-megamenu__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Hero: segmented progress-bar pagination ---------------- */
#common-home .kalles-slideshow__dots { bottom: 3rem; gap: 1rem; }
#common-home .kalles-slideshow__dot {
  width: 5rem; height: .4rem; border-radius: 9999px; padding: 0; overflow: hidden;
  background: rgb(20 22 26 / .18); position: relative;
}
#common-home .kalles-slideshow__dot-fill { display: block; height: 100%; width: 0%; background: rgb(var(--tel-blue)); border-radius: 9999px; }
#common-home .kalles-slideshow__dot.is-active { background: rgb(20 22 26 / .18); }
@media (max-width: 768px) { #common-home .kalles-slideshow__dot { width: 3.4rem; } }

/* ---------------- Light hero: header must render in dark ink ---------------- */
body.kalles-hero-light .kalles-header--tel:not(.is-solid) { --color-base-text: 20 22 26; }
body.kalles-hero-light .kalles-header--tel:not(.is-solid) .kalles-tel-logo,
body.kalles-hero-light .kalles-header--tel:not(.is-solid) .kalles-nav__link,
body.kalles-hero-light .kalles-header--tel:not(.is-solid) .kalles-header__action,
body.kalles-hero-light .kalles-header--tel:not(.is-solid) .kalles-tel-tagline,
body.kalles-hero-light .kalles-header--tel:not(.is-solid) .kalles-switcher__toggle { color: #14161a; }
body.kalles-hero-light .kalles-header--tel:not(.is-solid) .kalles-tel-tagline { border-inline-start-color: rgb(0 0 0 / .18); color: rgb(20 22 26 / .7); }
body.kalles-hero-light .kalles-header--tel .kalles-header__nav-row { border-top-color: rgb(0 0 0 / .08); }

/* ---------------- You Might Also Like ---------------- */
.kalles-also { margin-top: 6rem; }
.kalles-also__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.kalles-also__card { background: #fff; border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s; }
.kalles-also__card:hover { box-shadow: 0 12px 30px rgb(0 0 0 / .08); }
.kalles-also__media { display: block; padding: 2rem; background: rgb(var(--color-background2)); }
.kalles-also__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.kalles-also__body { padding: 1.5rem 1.8rem 2rem; display: flex; flex-direction: column; flex: 1; }
.kalles-also__tag { align-self: flex-start; font-size: 1.05rem; color: #e08600; border: 1px solid #f0c07a; background: #fff7ec; padding: .2rem .7rem; border-radius: var(--radius-2xs); margin-bottom: 1rem; }
.kalles-also__name { font-size: 1.5rem; font-weight: var(--font-medium); line-height: 1.35; margin-bottom: .5rem; }
.kalles-also__name a:hover { color: rgb(var(--tel-blue)); }
.kalles-also__sub { font-size: 1.25rem; color: rgb(var(--color-foreground2)); margin-bottom: 1rem; }
.kalles-also__price { font-size: 1.8rem; font-weight: var(--font-semibold); margin-bottom: 1.5rem; margin-top: auto; }
.kalles-also__price .old { font-size: 1.4rem; text-decoration: line-through; color: rgb(var(--color-foreground2)); font-weight: var(--font-normal); }
.kalles-also__price .new { color: rgb(var(--color-pr-sale-price)); }
.kalles-also__actions { display: flex; gap: 1rem; }
.kalles-also__buy { flex: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgb(var(--tel-blue)); color: #fff; border: 0; border-radius: 9999px; padding: 1rem 1.6rem; font-size: 1.25rem; font-weight: var(--font-semibold); cursor: pointer; }
.kalles-also__buy i { background: rgb(var(--tel-blue-dark)); border-radius: 9999px; padding: .5rem; }
.kalles-also__buy:hover { background: rgb(var(--tel-blue-dark)); }
.kalles-also__more { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.6rem; border: 1px solid rgb(var(--color-line-border)); border-radius: 9999px; font-size: 1.25rem; font-weight: var(--font-semibold); color: rgb(var(--color-base-text)); }
.kalles-also__more:hover { border-color: rgb(var(--color-base-text)); }
@media (max-width: 992px) { .kalles-also__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .kalles-also__grid { grid-template-columns: 1fr; } }

/* coupon timer spacing */
.kalles-pdp__coupon-body > * { margin-bottom: .2rem; }

/* ---------------- Support float button ---------------- */
.kalles-support-fab { position: fixed; bottom: 3rem; inset-inline-end: 3rem; z-index: 800; width: 5rem; height: 5rem; border-radius: 9999px; background: rgb(var(--tel-blue)); color: #fff; border: 0; font-size: 2rem; cursor: pointer; box-shadow: 0 6px 20px rgb(43 138 240 / .4); display: flex; align-items: center; justify-content: center; }
.kalles-support-fab:hover { background: rgb(var(--tel-blue-dark)); }

/* ---------- Hero: full-bleed per-slide background image ----------
   Retires the split product-tile / forced-gradient hero: each slide's own image
   is now its full-bleed background (set inline in the template) with the text
   overlaid on a legibility scrim (defined in the slide rules above). */
@media (max-width: 992px) {
  #common-home .kalles-slideshow__inner,
  #common-home .kalles-slideshow__inner.pos-right { flex-direction: column; justify-content: center; text-align: center; gap: 1.6rem; padding-block: 5rem; }
  #common-home .kalles-slideshow__content { max-width: none; }
}

/* payment-badges */
.kalles-footer__payments { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kalles-footer__payments i.fa-brands, .kalles-footer__payments i.fa-cc-amex { font-size: inherit; }
.kalles-pay {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .62rem; border-radius: .45rem;
  background: #fff; color: #14161a; font-size: .78rem; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18); white-space: nowrap;
}
.kalles-pay i { font-size: 1.05rem; }
.kalles-pay--cod i   { color: #16a34a; }
.kalles-pay--voda    { color: #e60000; }
.kalles-pay--insta   { color: #b3127f; }
.kalles-pay--visa i  { color: #1434cb; font-size: 1.5rem; }