/* ==========================================================================
   Kalles theme — homepage section modules (slideshow, products, collections,
   banners, icon-box, lookbook, blog). Uses kalles-tokens + base.css utilities.
   ========================================================================== */

.kalles-section { padding-block: 5rem; }
.kalles-section--tight { padding-block: 3rem; }
.kalles-section__head { text-align: center; margin-bottom: 3rem; }
.kalles-section__title { font-family: var(--font-heading-family); font-weight: var(--font-semibold); font-size: 2.2rem; letter-spacing: .06em; text-transform: uppercase; }
.kalles-section__sub { margin-top: .6rem; font-size: 1.4rem; color: rgb(var(--color-foreground2)); font-style: italic; }
.kalles-section__eyebrow { font-size: 1.3rem; font-weight: var(--font-bold, 700); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--color-base-text)); margin-bottom: 1.2rem; }

/* --- Section-header design variants (chosen in theme settings -> body.khead-*) --- */
/* Classic (default) uses the base rules above. */

/* Watermark: left-aligned title over a large faded echo of the heading text. */
.khead-watermark .kalles-section__head { text-align: left; position: relative; overflow: hidden; padding-block: 1.5rem; }
.khead-watermark .kalles-section__title { position: relative; z-index: 1; font-size: 3.4rem; font-weight: 800; letter-spacing: 0; }
.khead-watermark .kalles-section__title::before {
  content: attr(data-text); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: -1; font-size: clamp(6rem, 12vw, 12rem); font-weight: 800; letter-spacing: .02em; line-height: 1;
  color: rgb(var(--color-base-text)); opacity: .05; white-space: nowrap; pointer-events: none; text-transform: uppercase;
}
.khead-watermark .kalles-section__sub { font-style: normal; font-size: 1.5rem; }
.khead-watermark .kalles-section__eyebrow { text-align: left; }

/* Underline: optional eyebrow, centred bold title with a short accent bar, sub below. */
.khead-underline .kalles-section__title { text-transform: none; font-size: 3rem; font-weight: var(--font-bold, 700); letter-spacing: 0; display: inline-block; position: relative; padding-bottom: 1.4rem; }
.khead-underline .kalles-section__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 18rem; max-width: 55%; height: 3px; background: rgb(var(--color-base-text));
}
.khead-underline .kalles-section__sub { font-style: normal; font-size: 1.5rem; margin-top: 1.4rem; }

/* ---------- Slideshow ---------- */
.kalles-slideshow { position: relative; overflow: hidden; }
.kalles-slideshow__track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.kalles-slideshow__slide { position: relative; flex: 0 0 100%; }
.kalles-slideshow__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kalles-slideshow__img-wrap { position: relative; width: 100%; height: var(--kalles-slide-h, 700px); }
.kalles-slideshow__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 0 8%; }
.kalles-slideshow__content.pos-left { align-items: flex-start; text-align: left; }
.kalles-slideshow__content.pos-right { align-items: flex-end; text-align: right; }
.kalles-slideshow__content.pos-center { align-items: center; text-align: center; }
.kalles-slideshow__subtitle { font-size: 1.6rem; font-weight: var(--font-medium); letter-spacing: .1em; text-transform: uppercase; }
.kalles-slideshow__heading { font-family: var(--font-heading-family); font-weight: var(--font-normal); font-size: 5rem; line-height: 1.1; }
.kalles-slideshow__btn { margin-top: 1.5rem; }
.kalles-slideshow__dots { position: absolute; inset-inline: 0; bottom: 2rem; display: flex; justify-content: center; gap: 1rem; z-index: 3; }
.kalles-slideshow__dot { width: 1rem; height: 1rem; border-radius: 9999px; border: 0; background: rgb(255 255 255 / .5); cursor: pointer; padding: 0; }
.kalles-slideshow__dot.is-active { background: #fff; }
.kalles-slideshow__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 4.4rem; height: 4.4rem; border-radius: 9999px; border: 0; background: rgb(255 255 255 / .85); color: #222; font-size: 1.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.kalles-slideshow:hover .kalles-slideshow__nav { opacity: 1; }
.kalles-slideshow__nav--prev { inset-inline-start: 2rem; }
.kalles-slideshow__nav--next { inset-inline-end: 2rem; }
@media (max-width: 768px) {
  .kalles-slideshow__img-wrap { height: var(--kalles-slide-h-mb, 400px); }
  .kalles-slideshow__heading { font-size: 2.8rem; }
  .kalles-slideshow__subtitle { font-size: 1.3rem; }
}

/* ---------- Buttons (aligns with hdt) ---------- */
.kalles-btn-hero { display: inline-flex; align-items: center; gap: .8rem; padding: 1.4rem 3.4rem; font-size: 1.4rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: .04em; background: rgb(var(--color-base-text)); color: rgb(var(--color-base-background)); border: 2px solid rgb(var(--color-base-text)); border-radius: var(--radius-button); transition: .25s; }
.kalles-btn-hero:hover { background: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); color: #fff; }

/* ---------- Product grid (featured-collection) ---------- */
.kalles-products__grid { display: grid; grid-template-columns: repeat(var(--kalles-cols, 4), 1fr); gap: calc(var(--spacing-x) * 2) var(--spacing-x); }
.kalles-pcard { position: relative; }
.kalles-pcard__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-product-media); background: rgb(var(--color-background2)); }
.kalles-pcard__media img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; transition: transform .6s, opacity .4s; }
.kalles-pcard__media:hover img { transform: scale(1.05); }
.kalles-pcard__badges { position: absolute; top: 1rem; inset-inline-start: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 2; }
.kalles-badge { font-size: 1.1rem; font-weight: var(--font-semibold); padding: .3rem .8rem; border-radius: var(--radius-2xs); color: #fff; text-transform: uppercase; }
.kalles-badge--sale { background: rgb(var(--color-pr-sale-price)); }
.kalles-badge--new { background: rgb(var(--color-new-badge-background)); }
.kalles-pcard__actions { position: absolute; bottom: 1rem; inset-inline: 1rem; display: flex; justify-content: center; gap: .8rem; opacity: 0; transform: translateY(1rem); transition: .3s; z-index: 2; }
.kalles-pcard__media:hover .kalles-pcard__actions { opacity: 1; transform: translateY(0); }
.kalles-pcard__act { width: 4rem; height: 4rem; border-radius: 9999px; background: #fff; color: #222; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 12px rgb(0 0 0 / .12); }
.kalles-pcard__act:hover { background: rgb(var(--color-accent)); color: #fff; }
.kalles-pcard__info { padding-top: 1.2rem; text-align: center; }
.kalles-pcard__title { font-size: 1.4rem; font-weight: var(--font-medium); margin-bottom: .5rem; }
.kalles-pcard__title a { color: rgb(var(--color-pr-text)); }
.kalles-pcard__title a:hover { color: rgb(var(--color-accent)); }
.kalles-pcard__price { font-size: 1.4rem; color: rgb(var(--color-pr-price)); }
.kalles-pcard__price .old { text-decoration: line-through; color: rgb(var(--color-foreground2)); margin-inline-end: .6rem; }
.kalles-pcard__price .new { color: rgb(var(--color-pr-sale-price)); }
/* Set columns directly (not via --kalles-cols) so these override the inline
   `style="--kalles-cols:N"` the template writes — an inline custom property beats a
   stylesheet rule, so resetting the var here did nothing and mobile kept the desktop
   column count, overflowing the row. */
@media (max-width: 1024px) { .kalles-products__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kalles-products__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================ Modern product card (config: product_card_style = modern) ============================ */
.kalles-products__grid--modern { gap: 2.4rem; }
.kalles-pcard--modern {
  background: #fff;
  border: 1px solid rgb(var(--color-line-border) / .6);
  border-radius: 1.6rem;
  padding: 1.2rem 1.2rem 1.6rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / .04);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.kalles-pcard--modern:hover { box-shadow: 0 12px 28px rgb(16 24 40 / .10); transform: translateY(-3px); border-color: rgb(var(--color-accent) / .35); }
.kalles-pcard--modern .kalles-pcard__media {
  border-radius: 1.1rem; background: #f6f8fb; overflow: hidden;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 1.6rem;
}
.kalles-pcard--modern .kalles-pcard__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; mix-blend-mode: multiply; }
.kalles-pcard--modern:hover .kalles-pcard__media img { transform: scale(1.04); }

/* Badge (top-left pill) */
.kalles-mbadge {
  position: absolute; top: 1.1rem; inset-inline-start: 1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.15rem; font-weight: var(--font-semibold, 600); line-height: 1;
  padding: .55rem .9rem; border-radius: 9999px;
  background: rgb(var(--color-accent) / .12); color: rgb(var(--color-accent));
}
.kalles-mbadge i { font-size: 1rem; }
.kalles-mbadge--pop  { background: rgb(var(--color-accent) / .12); color: rgb(var(--color-accent)); }
.kalles-mbadge--best { background: rgb(var(--color-accent) / .12); color: rgb(var(--color-accent)); }
.kalles-mbadge--sale { background: rgb(var(--color-pr-sale-price) / .12); color: rgb(var(--color-pr-sale-price)); }

/* Wishlist (top-right circle) */
.kalles-mwish {
  position: absolute; top: 1.1rem; inset-inline-end: 1.1rem; z-index: 3;
  width: 3.6rem; height: 3.6rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: #fff; color: #6b7280; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgb(16 24 40 / .12); transition: .2s;
}
.kalles-mwish:hover { color: rgb(var(--color-pr-sale-price)); transform: scale(1.08); }

.kalles-pcard--modern .kalles-pcard__info { padding-top: 1.6rem; text-align: center; display: flex; flex-direction: column; flex: 1; }
.kalles-pcard--modern .kalles-pcard__title { font-size: 1.45rem; font-weight: var(--font-medium, 500); line-height: 1.4; min-height: 4rem; margin-bottom: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kalles-pcard--modern .kalles-pcard__title a { color: rgb(var(--color-pr-text)); }
.kalles-pcard--modern .kalles-pcard__title a:hover { color: rgb(var(--color-accent)); }
.kalles-pcard--modern .kalles-pcard__price { font-size: 1.7rem; font-weight: var(--font-semibold, 600); color: rgb(var(--color-accent)); margin-bottom: 1.4rem; }
.kalles-pcard--modern .kalles-pcard__price .old { font-size: 1.35rem; font-weight: var(--font-normal, 400); text-decoration: line-through; color: rgb(var(--color-foreground2)); }
.kalles-pcard--modern .kalles-pcard__price .new { color: rgb(var(--color-pr-sale-price)); }

/* Action row (cart / view / compare) */
.kalles-mactions { margin-top: auto; display: flex; justify-content: center; gap: 1rem; }
.kalles-mact {
  width: 4.4rem; height: 4.4rem; border-radius: 1.1rem; border: 1px solid rgb(var(--color-line-border) / .7);
  background: #f6f8fb; color: rgb(var(--color-accent)); font-size: 1.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .2s; text-decoration: none;
}
.kalles-mact:hover { background: rgb(var(--color-accent)); color: #fff; border-color: rgb(var(--color-accent)); }
.kalles-mact--cart { color: rgb(var(--color-accent)); }
@media (max-width: 640px) {
  .kalles-pcard--modern { padding: .8rem .8rem 1.2rem; border-radius: 1.2rem; }
  .kalles-mact { width: 3.8rem; height: 3.8rem; font-size: 1.4rem; }
  .kalles-mbadge { font-size: 1rem; padding: .45rem .7rem; }
}

/* ---------- Collections list (manual grid) ---------- */
.kalles-collections { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--spacing-x); }
.kalles-collection-card { position: relative; overflow: hidden; border-radius: var(--radius-collection-card); display: block; min-height: 30rem; }
.kalles-collection-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .6s; }
.kalles-collection-card:hover img { transform: scale(1.06); }
.kalles-collection-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: 2rem; text-align: center; z-index: 2; }
.kalles-collection-card__title { display: inline-block; background: rgb(var(--color-base-background)); color: rgb(var(--color-base-text)); font-weight: var(--font-semibold); font-size: 1.6rem; padding: 1rem 2.4rem; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 768px) { .kalles-collection-card { min-height: 22rem; } }

/* ---------- Banners ---------- */
.kalles-banners { display: grid; gap: var(--spacing-x); grid-template-columns: repeat(var(--kalles-bcols, 2), 1fr); }
.kalles-banner { position: relative; overflow: hidden; display: block; min-height: 34rem; background: rgb(var(--color-background2)); }
.kalles-banner img { width: 100%; height: 100%; min-height: 34rem; object-fit: cover; position: absolute; inset: 0; display: block; transition: transform .8s; }
.kalles-banner__body { text-shadow: 0 1px 6px rgb(0 0 0 / .35); z-index: 2; }
.kalles-banner:hover img { transform: scale(1.05); }
.kalles-banner__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6rem; color: #fff; }
.kalles-banner__sub { font-size: 1.4rem; font-weight: var(--font-medium); letter-spacing: .08em; text-transform: uppercase; }
.kalles-banner__title { font-family: var(--font-heading-family); font-size: 3.6rem; font-weight: var(--font-semibold); }
/* Direct columns (inline style="--kalles-bcols:N" on the element beats a var reset). */
@media (max-width: 768px) { .kalles-banners { grid-template-columns: 1fr; } }

/* ---------- Icon box (shipping / trust) ---------- */
.kalles-iconbox { display: grid; grid-template-columns: repeat(var(--kalles-icols, 4), 1fr); gap: var(--spacing-x); }
.kalles-iconbox__item { display: flex; align-items: center; gap: 1.4rem; }
.kalles-iconbox__icon { font-size: 3.2rem; color: rgb(var(--color-foreground)); flex: 0 0 auto; }
.kalles-iconbox__title { font-size: 1.5rem; font-weight: var(--font-medium); text-transform: uppercase; }
.kalles-iconbox__text { font-size: 1.3rem; color: rgb(var(--color-foreground2)); margin-top: .3rem; }
/* Direct columns (inline style="--kalles-icols:N" beats a var reset). */
@media (max-width: 1024px) { .kalles-iconbox { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kalles-iconbox { grid-template-columns: 1fr; } }

/* ---------- Lookbook / instagram grid ---------- */
.kalles-lookbook { display: grid; grid-template-columns: repeat(var(--kalles-lcols, 6), 1fr); gap: 0; }
.kalles-lookbook__item { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.kalles-lookbook__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kalles-lookbook__item:hover img { transform: scale(1.08); }
.kalles-lookbook__item::after { content: "\f16d"; font-family: "Font Awesome 6 Brands"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: #fff; background: rgb(0 0 0 / .3); opacity: 0; transition: .3s; }
.kalles-lookbook__item:hover::after { opacity: 1; }
@media (max-width: 1024px) { .kalles-lookbook { --kalles-lcols: 4; } }
@media (max-width: 640px)  { .kalles-lookbook { --kalles-lcols: 2; } }

/* ---------- Blog carousel ---------- */
.kalles-blog__grid { display: grid; grid-template-columns: repeat(var(--kalles-blcols, 3), 1fr); gap: calc(var(--spacing-x) * 2); }
.kalles-blog-card__media { overflow: hidden; border-radius: var(--radius-blog-card); }
.kalles-blog-card__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s; }
.kalles-blog-card__media:hover img { transform: scale(1.05); }
.kalles-blog-card__body { padding-top: 1.4rem; }
.kalles-blog-card__date { font-size: 1.2rem; color: rgb(var(--color-foreground2)); text-transform: uppercase; letter-spacing: .05em; }
.kalles-blog-card__title { font-size: 1.7rem; font-weight: var(--font-medium); margin: .6rem 0; }
.kalles-blog-card__title a:hover { color: rgb(var(--color-accent)); }
.kalles-blog-card__excerpt { font-size: 1.35rem; color: rgb(var(--color-foreground2)); line-height: 1.7; }
@media (max-width: 1024px) { .kalles-blog__grid { --kalles-blcols: 2; } }
@media (max-width: 640px)  { .kalles-blog__grid { --kalles-blcols: 1; } }

/* ============================ What's New (promo-card carousel) ============================ */
.kalles-whatsnew__viewport { position: relative; }
.kalles-whatsnew__track {
  display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-block: .5rem; margin: 0 -.5rem; padding-inline: .5rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kalles-whatsnew__track::-webkit-scrollbar { display: none; }
.kalles-whatsnew__card {
  position: relative; flex: 0 0 calc((100% - 6rem) / 4); scroll-snap-align: start;
  aspect-ratio: 47 / 62; border-radius: var(--radius-product-card, 8px); overflow: hidden;
  display: block; background: rgb(var(--color-background2)); isolation: isolate;
}
.kalles-whatsnew__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.kalles-whatsnew__card:hover .kalles-whatsnew__img { transform: scale(1.05); }
.kalles-whatsnew__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .18) 32%, transparent 60%);
}
.kalles-whatsnew__content {
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .6rem; padding: 2.4rem 2.4rem 0; color: #fff;
}
.kalles-whatsnew__title { font-family: var(--font-heading-family); font-weight: var(--font-bold, 700); font-size: 2.2rem; line-height: 1.15; color: #fff; }
.kalles-whatsnew__sub { font-size: 1.4rem; color: rgb(255 255 255 / .82); }
.kalles-whatsnew__price { display: flex; align-items: baseline; gap: .8rem; margin-top: .4rem; font-size: 2rem; font-weight: var(--font-semibold); color: #fff; }
.kalles-whatsnew__price-old { font-size: 1.5rem; font-weight: var(--font-normal); color: rgb(255 255 255 / .7); text-decoration: line-through; }

/* nav arrows */
.kalles-whatsnew__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 4.4rem; height: 4.4rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: rgb(255 255 255 / .8); color: #14161a; font-size: 1.6rem; box-shadow: 0 4px 16px rgb(0 0 0 / .12);
  display: flex; align-items: center; justify-content: center; transition: background-color .2s, opacity .2s;
}
.kalles-whatsnew__nav:hover { background: #fff; }
.kalles-whatsnew__nav[disabled] { opacity: .35; cursor: default; }
.kalles-whatsnew__nav--prev { inset-inline-start: -2.2rem; }
.kalles-whatsnew__nav--next { inset-inline-end: -2.2rem; }

@media (max-width: 1200px) { .kalles-whatsnew__card { flex-basis: calc((100% - 4rem) / 3); } }
@media (max-width: 900px)  { .kalles-whatsnew__card { flex-basis: calc((100% - 2rem) / 2); } .kalles-whatsnew__nav { display: none; } }
@media (max-width: 560px)  { .kalles-whatsnew__card { flex-basis: 82%; } .kalles-whatsnew__title { font-size: 1.9rem; } }

/* ---------- Shop by Category — card design (v2) ---------- */
.kalles-catcards { --kalles-cat-accent: #41c8dc; }
.kalles-catcards .kalles-section__head { text-align: center; margin-bottom: 4rem; }
.kalles-catcards__topline { display: inline-block; width: 4rem; height: 2px; background: var(--kalles-cat-accent); border-radius: 2px; margin-bottom: 1.6rem; position: relative; }
.kalles-catcards__topline::after { content: ""; position: absolute; inset-inline-end: -5px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--kalles-cat-accent); }
.kalles-catcards .kalles-section__title { font-size: 3.2rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.kalles-catcards .kalles-section__sub { font-style: normal; font-size: 1.5rem; margin-top: .8rem; color: rgb(var(--color-foreground2)); }
.kalles-catcards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.kalles-catcard { position: relative; display: flex; min-height: 23rem; padding: 3rem; border-radius: 2rem; overflow: hidden; box-shadow: 0 10px 30px rgb(17 24 39 / .05); transition: transform .3s, box-shadow .3s; background: #eef4fb; }
.kalles-catcard:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgb(17 24 39 / .1); }
.kalles-catcard__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 58%; }
.kalles-catcard__title { font-size: 2.2rem; font-weight: 700; color: #12172a; margin: 0 0 1rem; line-height: 1.2; }
.kalles-catcard__bar { width: 3rem; height: 3px; background: var(--kalles-cat-accent); border-radius: 3px; margin-bottom: 1.4rem; }
.kalles-catcard__desc { font-size: 1.35rem; line-height: 1.65; color: #5b6472; margin: 0 0 auto; }
.kalles-catcard__arrow { margin-top: 2.2rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #fff; color: var(--kalles-cat-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 6px 18px rgb(17 24 39 / .1); transition: .25s; }
.kalles-catcard:hover .kalles-catcard__arrow { background: var(--kalles-cat-accent); color: #fff; }
.kalles-catcard__media { position: absolute; inset-inline-end: 1.5rem; top: 50%; transform: translateY(-50%); width: 46%; max-width: 21rem; height: 80%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.kalles-catcard__media::before { content: ""; position: absolute; width: 17rem; height: 17rem; border-radius: 50%; background: rgb(255 255 255 / .55); z-index: -1; }
.kalles-catcard__media img { max-width: 100%; max-height: 15rem; object-fit: contain; filter: drop-shadow(0 12px 24px rgb(17 24 39 / .12)); }
.kalles-catcard:nth-child(6n+1) { background: #e9f6f8; } .kalles-catcard:nth-child(6n+1) .kalles-catcard__media::before { background: #d7eef2; }
.kalles-catcard:nth-child(6n+2) { background: #eaf1fb; } .kalles-catcard:nth-child(6n+2) .kalles-catcard__media::before { background: #d8e6f8; }
.kalles-catcard:nth-child(6n+3) { background: #eaf7ef; } .kalles-catcard:nth-child(6n+3) .kalles-catcard__media::before { background: #d6efe0; }
.kalles-catcard:nth-child(6n+4) { background: #f0edfb; } .kalles-catcard:nth-child(6n+4) .kalles-catcard__media::before { background: #e2daf6; }
.kalles-catcard:nth-child(6n+5) { background: #fdf2ea; } .kalles-catcard:nth-child(6n+5) .kalles-catcard__media::before { background: #f8e2d0; }
.kalles-catcard:nth-child(6n+6) { background: #f3edfb; } .kalles-catcard:nth-child(6n+6) .kalles-catcard__media::before { background: #e6dbf6; }
@media (max-width: 992px) { .kalles-catcards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kalles-catcards__grid { grid-template-columns: 1fr; } .kalles-catcard__text { width: 60%; } .kalles-catcards .kalles-section__title { font-size: 2.4rem; } }