/* ==========================================================================
   Mjolka ACF Product Switcher — Consolidated Frontend CSS
   Merged from: mjolka-acf-ps.css, mjolka-elementor-sections.css,
                mjolka-acf-ps-shortcode-container-elementor-323.css,
                layout-kefir-bottle.css, layout-sour-cream.css,
                layout-kefir-carton.css, layout-cheese-jar.css
   ========================================================================== */


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  1. RESET & CONTAINMENT                                              ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.mjolka-acf-ps,
.mj_gr_dr,
.mjolka-acf-ps *,
.mjolka-acf-ps *::before,
.mjolka-acf-ps *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mj_gr_dr {
  contain: layout style paint;
  isolation: isolate;
}

.mjolka-acf-ps__top.mj_kefir_pr,
.mjolka-acf-ps__top.mj_sur_rj,
.mj_kefir,
.mj_kefir_poki,
.mj_sal_ost {
  contain: layout style paint;
  isolation: isolate;
  column-gap: 0;
  row-gap: 0;
  width: 100%;
  max-width: 1440px;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  2. MAIN CONTAINER                                                   ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.mjolka-acf-ps {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: "DINNextLTPro", sans-serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 30px;
  letter-spacing: 0.05em;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  3. DEFAULT LAYOUT — GRÍSK DRYKKJARJÓGÚRT                            ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) {
  background: #fff;
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__label {
  color: #000;
  font-size: 27px;
  line-height: 30px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__headline {
  color: #e6007e;
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 4px;
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__copy,
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__copy p {
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.05em;
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__copy p {
  margin-left: 55px;
  margin-right: 55px;
  width: 618px;
  height: 134px;
}
@media (min-width: 901px) {
  .mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__hero {
    margin-left: -35px;
  }
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__vorublad {
  background: transparent;
  border: none;
  padding-left: 51px;
  padding-right: 51px;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 8px;
  margin-left: 4px;
  width: 205px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__btn,
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__btn:active,
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__btn:focus {
  color: rgba(0, 0, 0, 0.25);
  background: transparent !important;
  box-shadow: none;
}
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__thumb.is-active,
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__thumb:hover,
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__thumb:focus,
.mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__thumb:active {
  background: #fff !important;
  transform: none;
  border: none;
  box-shadow: none;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  4. COMPONENT STYLES                                                 ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* --- TOP ROW — two columns: info (left) + product (right) --------------- */
.mjolka-acf-ps__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding: 48px 0 0;
  padding-bottom: 0;
  width: 100%;
}

/* --- Left column: hero, label, headline, copy, vorublad ----------------- */
.mjolka-acf-ps__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  font-family: inherit;
}

.mjolka-acf-ps__hero {
  display: block;
  flex-shrink: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  z-index: 0;
  align-self: center;
}
.mjolka-acf-ps__hero:not(.has-image) {
  display: none;
}

.mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero1 {
  width: 100%;
  max-width: 560px;
  height: 210px;
  min-height: 210px;
  aspect-ratio: 560 / 210;
  margin: 0 auto 8px auto;
}
div.mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero1.has-image {
  width: 490px;
  height: 258px;
  margin-right: 0px !important;
  margin-left: -66px;
}

.mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6 {
  width: 100%;
  max-width: 541px;
  height: 210px;
  min-height: 210px;
  aspect-ratio: 541 / 210;
  margin: 0 auto 8px auto;
}
@media (min-width: 901px) {
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6 {
    position: relative;
    left: -20px;
    top: 7px;
    margin: -33px 0 8px 0;
    margin-left: -93px;
  }
}

.mjolka-acf-ps__label {
  font-family: inherit;
  text-transform: uppercase;
  color: #000;
  font-size: 27px;
  line-height: 30px;
  letter-spacing: 0.05em;
}
.mjolka-acf-ps__label:empty {
  display: none;
}

.mjolka-acf-ps__headline {
  font-family: "DINNextLTPro", sans-serif;
  text-transform: uppercase;
  color: #000;
  font-size: 27px;
  line-height: 30px;
  letter-spacing: 0.05em;
  min-height: 1.2em;
  padding-top: 5px;
  margin-left: 65px;
  margin-right: 65px;
  width: 431px;
}
.mjolka-acf-ps__headline:empty {
  display: none;
}

.mjolka-acf-ps__copy,
.mjolka-acf-ps__copy p {
  font-family: inherit;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.05em;
  color: #000;
  max-width: 100%;
}
.mjolka-acf-ps__copy p {
  margin: 0 64px 0.5em 64px;
  width: 474px;
}
.mjolka-acf-ps__copy p:last-child {
  margin-bottom: 0;
}
.mjolka-acf-ps__copy:empty {
  display: none;
}

.mjolka-acf-ps__vorublad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 160px;
  font-family: inherit;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
  background: rgba(245, 245, 245, 0);
  border: 1px solid rgba(224, 224, 224, 0);
  border-radius: 6px;
  padding: 10px 11px;
  margin-top: 4px;
  margin-left: 41px;
  transition: none;
}
.mjolka-acf-ps__vorublad:hover,
.mjolka-acf-ps__vorublad:active,
.mjolka-acf-ps__vorublad:focus {
  color: rgba(0, 0, 0, 1) !important;
  background: rgba(245, 245, 245, 0) !important;
  border-color: rgba(224, 224, 224, 0) !important;
  text-decoration: none !important;
  transform: none !important;
}
.mjolka-acf-ps__vorublad span {
  font-size: inherit;
}
.mjolka-acf-ps__vorublad-icon {
  flex-shrink: 0;
}
.mjolka-acf-ps__vorublad[href="#"],
.mjolka-acf-ps__vorublad[data-empty="true"] {
  display: none;
}
.mjolka-acf-ps__vorublad.mjolka-acf-ps__vorublad--unavailable {
  display: inline-flex !important;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Right column: product image + nav ---------------------------------- */
.mjolka-acf-ps__product-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: 10px;
  margin-right: 10px;
}

.mjolka-acf-ps__product {
  display: block;
  width: auto;
  height: auto;
  max-width: 320px;
  max-height: 560px;
  object-fit: contain;
  transition: opacity 0.25s ease;
  flex-shrink: 0;
  margin-left: 0px;
  margin-right: 0px;
}
.mjolka-acf-ps__product[src=""],
.mjolka-acf-ps__product:not([src]) {
  display: none;
}

#mjolka-ps-1078 .mjolka-acf-ps__product-area .mjolka-acf-ps__product {
  max-width: 377px;
  width: 377px;
  max-height: 809px;
  margin-left: 35px;
}

#mjolka-ps-1071 .mjolka-acf-ps__product-area .mjolka-acf-ps__product,
#mjolka-ps-1076 .mjolka-acf-ps__product-area .mjolka-acf-ps__product {
  max-height: 560px;
  height: 560px;
  width: auto;
}

.mjolka-acf-ps__btn {
  width: 138px;
  height: 138px;
  min-width: 138px;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  color: #b8b8b8;
  transition: none;
}
.mjolka-acf-ps__btn .mjolka-acf-ps__chevron,
.mjolka-acf-ps__btn img.mjolka-acf-ps__chevron {
  width: 138px;
  height: 138px;
  object-fit: contain;
  pointer-events: none;
  filter: grayscale(1);
}
.mjolka-acf-ps__btn:hover,
.mjolka-acf-ps__btn:active,
.mjolka-acf-ps__btn:focus {
  color: #b8b8b8 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mjolka-acf-ps__btn:hover .mjolka-acf-ps__chevron,
.mjolka-acf-ps__btn:hover img.mjolka-acf-ps__chevron,
.mjolka-acf-ps__btn:active .mjolka-acf-ps__chevron,
.mjolka-acf-ps__btn:active img.mjolka-acf-ps__chevron {
  filter: grayscale(1);
}
.mjolka-acf-ps__btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* --- MIDDLE ROW — decor (left) + thumbnails (right) --------------------- */
/* BUG FIX: Restored display:grid (was changed to flex, breaking all
   grid-template-columns rules in layout variants and responsive blocks).
   justify-content:center and align-items:flex-end converted to grid equivalents. */
.mjolka-acf-ps__middle {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding-left: 0;
  padding-right: 40px;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  min-height: 200px;
}

.mjolka-acf-ps__decor-area {
  width: 280px;
  max-width: 407px;
  overflow: hidden;
  justify-self: start;
  flex-shrink: 0;
}
.mjolka-acf-ps__decor {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom left;
  transition: opacity 0.3s ease;
  margin-top: 138px;
  margin-bottom: 98px;
}
.mjolka-acf-ps__decor[src=""],
.mjolka-acf-ps__decor:not([src]) {
  display: none;
}

/* --- Thumbnails --------------------------------------------------------- */
.mjolka-acf-ps__thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  max-height: none;
  box-sizing: border-box;
  margin-right: 0;
  margin-left: 0;
  width: 100%;
  overflow: visible;
}
.mjolka-acf-ps__thumb {
  width: clamp(96px, 16vw, 220px);
  min-width: 0;
  max-width: 220px;
  height: auto;
  max-height: none;
  flex: 1 1 clamp(96px, 16vw, 220px);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 0 !important;
  cursor: pointer;
  transition: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  appearance: none !important;
}
.mjolka-acf-ps__thumb:hover,
.mjolka-acf-ps__thumb:focus,
.mjolka-acf-ps__thumb:active {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-color: transparent !important;
  transform: none !important;
}
.mjolka-acf-ps__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 4px !important;
}
.mjolka-acf-ps__thumb.is-active,
.mjolka-acf-ps__thumb.is-active:hover,
.mjolka-acf-ps__thumb.is-active:focus,
.mjolka-acf-ps__thumb.is-active:active {
  border: none !important;
  box-shadow: none !important;
  background: #fff !important;
}
.mjolka-acf-ps__thumb:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* --- Thumbnail slider (activated by JS when overflow detected) ---------- */

/* Wrapper injected by JS around the thumbs container */
.mjolka-acf-ps__thumbs-slider {
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  min-width: 0;       /* Allow flex item to shrink below content size */
  overflow: visible;
}

/* When overflow is detected, JS adds .is-slider to the thumbs container */
.mjolka-acf-ps__thumbs.is-slider {
  overflow: visible;
  scroll-snap-type: none;
  justify-content: center;
}
.mjolka-acf-ps__thumbs.is-slider::-webkit-scrollbar {
  display: none;
}

/* Each thumb snaps to the start of the visible area */
.mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* In slider mode, always show full product image inside each thumb. */
.mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb img {
  object-fit: contain !important;
  object-position: center center;
}

/* Thumbnail slider nav arrows */
.mjolka-acf-ps__thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  opacity: 0;
  pointer-events: none;
}
.mjolka-acf-ps__thumb-arrow:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.mjolka-acf-ps__thumb-arrow:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.mjolka-acf-ps__thumb-arrow--prev {
  left: -18px;
}
.mjolka-acf-ps__thumb-arrow--next {
  right: -18px;
}
.mjolka-acf-ps__thumb-arrow[hidden] {
  display: none;
}

/* SVG chevron inside the arrow buttons */
.mjolka-acf-ps__thumb-arrow svg {
  width: 18px;
  height: 18px;
  stroke: #333;
  stroke-width: 2.5;
  fill: none;
}

/* --- BOTTOM ROW — secondary image --------------------------------------- */
.mjolka-acf-ps__bottom {
  text-align: center;
  padding: 24px 0 0;
  width: 100%;
}
.mjolka-acf-ps__secondary {
  display: block;
  width: 1058px;
  max-width: 100%;
  height: auto;
  margin-left: 70px;
  margin-right: 70px;
  margin-top: 54px;
  margin-bottom: 0;
  transition: opacity 0.25s ease;
}
.mjolka-acf-ps__secondary[src=""],
.mjolka-acf-ps__secondary:not([src]) {
  display: none;
}

/* --- Animations & accessibility ----------------------------------------- */
@keyframes mjolkaFadeIn {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
.mjolka-fade-in {
  animation: mjolkaFadeIn 0.28s ease-out;
}

.mjolka-acf-ps__error {
  font-family: inherit;
  font-size: 27px;
  line-height: 30px;
}
.mjolka-acf-ps__sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  5. LAYOUT VARIANT — KEFIR BOTTLE                                    ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__info,
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__vorublad {
  font-family: "DINNextLTPro", sans-serif;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__headline {
  color: #000;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__label {
  color: #000;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__product {
  max-width: 295px;
  height: 662px;
  max-height: 662px;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb {
  width: 146px;
  height: 358px;
}
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb.is-active,
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb:hover,
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb:focus,
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb:active {
  border: none;
  box-shadow: none;
  background: #fff !important;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__copy {
  color: #333;
}

.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__btn,
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__btn:active,
.mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__btn:focus-visible {
  color: #b8b8b8;
  background: transparent;
  box-shadow: none;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  6. LAYOUT VARIANT — SOUR CREAM                                      ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* BUG FIX: font-family was DINNextLTPro (unquoted, wrong name) */
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__info,
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__vorublad {
  font-family: "DINNextLTPro", sans-serif;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__headline {
  color: rgba(0, 0, 0, 1);
  font-style: normal;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__label {
  color: #000;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__product {
  max-height: 456px;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb {
  width: 162px;
  height: 160px;
  border-radius: 14px;
}
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb.is-active,
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb:hover,
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb:focus,
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb:active {
  border: none;
  box-shadow: none;
  background: #fff !important;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__copy {
  color: #333;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__btn,
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__btn:active,
.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__btn:focus-visible {
  color: #b8b8b8;
  background: transparent;
  box-shadow: none;
}

.mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__middle {
  grid-template-columns: 1fr 1fr;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  7. LAYOUT VARIANT — KEFIR CARTON                                    ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* BUG FIX: font-family was DIN Next LT Pro (unquoted) */
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__info,
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__vorublad {
  font-family: "DINNextLTPro", sans-serif;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__headline {
  color: rgba(0, 0, 0, 1);
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__label {
  color: #000;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__product {
  max-height: 504px;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb {
  width: 162px;
  height: 234px;
}
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb.is-active,
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb:hover,
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb:focus,
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb:active {
  border: none;
  box-shadow: none;
  background: #fff !important;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__copy {
  color: #444;
  padding-left: 0px;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__btn,
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__btn:active,
.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__btn:focus-visible {
  color: #b8b8b8;
  background: transparent;
  box-shadow: none;
}

.mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__middle {
  grid-template-columns: 1fr 1fr;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  8. LAYOUT VARIANT — CHEESE JAR                                      ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__info,
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__vorublad {
  font-family: "DINNextLTPro", sans-serif;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__headline {
  color: rgba(0, 0, 0, 1);
  font-style: normal;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__label {
  color: #000;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__product {
  max-height: 528px;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb {
  width: 162px;
  height: 250px;
  border-radius: 14px;
}
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb.is-active,
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb:hover,
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb:focus,
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb:active {
  border: none;
  box-shadow: none;
  background: #fff !important;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__copy {
  color: #333;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__btn,
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__btn:active,
.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__btn:focus-visible {
  color: #b8b8b8;
  background: transparent;
  box-shadow: none;
}

.mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__middle {
  grid-template-columns: 1fr 1fr;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  9. ELEMENTOR POST-323 OVERRIDES                                     ║
   ║  Scoped to #post-323 so changes here never leak to other pages.      ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* Global thumb state reset for post-323 (override theme/Elementor) */
#post-323 .mjolka-acf-ps__thumb,
#post-323 .mjolka-acf-ps__thumb:hover,
#post-323 .mjolka-acf-ps__thumb:focus,
#post-323 .mjolka-acf-ps__thumb:active,
#post-323 .mjolka-acf-ps__thumb.is-active,
#post-323 .mjolka-acf-ps__thumb.is-active:hover,
#post-323 .mjolka-acf-ps__thumb.is-active:focus,
#post-323 .mjolka-acf-ps__thumb.is-active:active {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-color: transparent !important;
}
#post-323 .mjolka-acf-ps__thumb.is-active,
#post-323 .mjolka-acf-ps__thumb.is-active:hover,
#post-323 .mjolka-acf-ps__thumb.is-active:focus,
#post-323 .mjolka-acf-ps__thumb.is-active:active {
  border: none;
  box-shadow: none !important;
}

/* --- Hero row — container 8988372 --------------------------------------- */
#post-323 .elementor-element-8988372 .elementor-element-49965d9 .elementor-widget-container p {
  margin-bottom: 37px;
}
#post-323 .elementor-element-dc20a89,
#post-323 [data-id="dc20a89"] {
  margin-top: 63px;
  margin-right: -144px;
}

/* --- Section 1 — container 5b49c9e -------------------------------------- */
#post-323 .elementor-element-5b49c9e .mjolka-acf-ps__decor-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
#post-323 .elementor-element-5b49c9e .mjolka-acf-ps__decor {
  margin-left: auto;
  margin-right: auto;
}

/* --- Section 2 — container f378eb5 -------------------------------------- */
#post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb,
.elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb,
#post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb.is-active,
.elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb.is-active {
  height: 358px;
  min-height: 358px;
  max-height: 358px;
}
#post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb img,
.elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb img {
  height: 358px;
  min-height: 358px;
  max-height: 358px;
}

/* --- Section — container 3e92fba (intro row) ---------------------------- */
#post-323 .elementor-element-3e92fba,
#post-323 [data-id="3e92fba"] {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
}
#post-323 .elementor-element-3e92fba .elementor-element-ed7635c .elementor-widget-container {
  margin-right: 55px;
}
#post-323 .elementor-element-3e92fba .elementor-element-ed7635c .elementor-widget-container p {
  margin-left: 18px !important;
}
#post-323 img.attachment-full {
  padding-right: 0;
}

/* --- Section 4 — container ea8fa02 -------------------------------------- */
#post-323 .elementor-element-ea8fa02 .e-con-inner,
#post-323 [data-id="ea8fa02"] .e-con-inner {
  padding-top: 49px;
  padding-bottom: 49px;
  margin-left: 212px;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__info {
  gap: 0;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__product-area {
  max-width: 444px;
  margin-left: 36px;
  margin-right: 36px;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__copy p {
  margin-left: 48px;
  margin-right: 48px;
  width: 413px;
  padding-left: 0;
  gap: 0;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__vorublad {
  padding-left: 9px;
  margin-left: 34px;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb {
  width: 330px;
  min-width: 80px;
  max-width: 330px;
  height: 330px;
  max-height: 330px;
  aspect-ratio: 1 / 1;
  flex: 0 1 330px;
}
#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__middle {
  height: auto;
  min-height: 320px;
  padding-top: 0;
}

#post-323 .elementor-element-ea8fa02 .elementor-shortcode {
  margin-top: 345px;
  height: auto;
  min-height: 991px;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__top {
  padding-bottom: 25px;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__bottom {
  padding-top: 55px;
}

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__decor {
  margin-top: 56px;
  margin-bottom: 62px;
  margin-left: -39px;
  height: 560px;
  padding-top: 0;
  padding-bottom: 138px;
}

/* Arrow margins removed — unified 15px gap via .mjolka-acf-ps__product-area */

#post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__product-area .mjolka-acf-ps__product {
  width: calc(292px * 1.4 * 1.1) !important;
  height: calc(292px * 1.4 * 1.1) !important;
  max-width: calc(1176px * 1.4 * 1.1);
  max-height: calc(1176px * 1.4 * 1.1);
}

/* --- Section 5 — container 0ba9f10 -------------------------------------- */
#post-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  height: 350px;
  max-height: 350px;
  aspect-ratio: 300 / 350;
  flex: 0 1 300px;
}
#post-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Section 6 — container 73a3656 -------------------------------------- */
#post-323 .elementor-element-73a3656,
#post-323 [data-id="73a3656"] {
  height: auto;
  min-height: 849px;
  margin-top: 244px;
  margin-bottom: 107px;
}

#post-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb {
  width: 400px;
  min-width: 400px;
  max-width: 400px;
  height: 400px;
  max-height: 400px;
  aspect-ratio: 1 / 1;
  flex: 0 1 400px;
}
#post-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin-left: 0px;
}

/* --- Elementor widget 97e00d6 ------------------------------------------- */
#post-323 .elementor-element-97e00d6,
#post-323 [data-id="97e00d6"] {
  display: inline-block;
  height: auto;
  min-height: 646px;
  margin-bottom: 400px;
  margin-top: -250px;
}

/* BUG FIX: Fragile nth-of-type selectors — kept for now with warning.
   These target specific widget positions and will break if DOM order changes.
   Replace with Elementor data-id selectors when those widget IDs are known. */
#post-323 div:nth-of-type(7) > div:nth-of-type(1) > div > div > p {
  margin-left: 200px;
}
#post-323 div:nth-of-type(7) > div:nth-of-type(10) > div > div:nth-of-type(2) > div > div {
  margin-top: 292px;
}
#post-323 div:nth-of-type(7) > div:nth-of-type(5) > div > div:nth-of-type(1) > div:nth-of-type(2) > div > p:nth-of-type(2) {
  font-family: "DINNextLTPro", sans-serif;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  10. CONTAINER POSITIONING — Elementor 323                           ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.elementor.elementor-323 .elementor-element-97e00d6 > .elementor-widget-container {
  margin-top: -378px;
}

.elementor.elementor-323 .elementor-element-73a3656 .elementor-widget-container > .elementor-shortcode {
  box-sizing: border-box;
  width: 1423px;
  max-width: 100%;
  height: auto;
  min-height: 734px;
  margin-top: 292px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: 0;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  11. PER-SWITCHER INSTANCE OVERRIDES (Pro CSS Editor export)         ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* --- Switcher 1048 (Grísk drykkjarjógúrt) --- */
#mjolka-ps-1048 > div:nth-of-type(2) > div:nth-of-type(1) > img {
  display: block;
  width: 100%;
  height: 429px;
  margin-right: 0px;
  margin-top: 49px;
  margin-bottom: 49px;
  object-fit: contain;
  object-position: center;
  position: relative;
}

#mjolka-ps-1048 > div:nth-of-type(3) > img {
  margin-top: 80px;
}

#mjolka-ps-1048 .mjolka-acf-ps__thumb {
  height: 358px;
  width: auto;
  aspect-ratio: auto;
}
#mjolka-ps-1048 .mjolka-acf-ps__thumb img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

#mjolka-ps-1048 > div.mjolka-acf-ps__middle {
  margin-bottom: -150px;
}

#mjolka-ps-1048 > div.mjolka-acf-ps__middle > div.mjolka-acf-ps__decor-area {
  height: 355px;
}

/* --- Switcher 1071 (Kefír) --- */
#mjolka-ps-1071 > div:nth-of-type(1) > div:nth-of-type(1) {
  margin-left: 28px;
}

#mjolka-ps-1071 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
  margin-left: 49px;
  font-family: "DINNextLTPro", sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 30px;
}

/* --- Switcher 1076 (Kefír prófíl) --- */
#mjolka-ps-1076 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
  margin-left: 50px;
}

#mjolka-ps-1071 .mjolka-acf-ps__middle {
  margin-right: 0;
  margin-left: 0;
  gap: 0;
  padding-left: 0;
  padding-right: 40px;
}

#mjolka-ps-1071 .mjolka-acf-ps__thumbs {
  margin-left: 58px;
  margin-top: -30px;
}

#mjolka-ps-1076 .mjolka-acf-ps__thumbs {
  margin-left: 58px;
  margin-top: -38px;
}

/* --- Switcher 1078 (Kefír poki) --- */
#mjolka-ps-1078 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
  margin-left: 52px;
}

#mjolka-ps-1078 > div:nth-of-type(2) > div:nth-of-type(2) > button:nth-of-type(2) > img {
  display: block;
  height: 286px;
  margin-top: 0px;
}

#mjolka-ps-1078 > div:nth-of-type(1) > div:nth-of-type(1) {
  margin-left: 28px;
}

/* #1078 arrow margins removed — unified 15px gap via .mjolka-acf-ps__product-area */

#mjolka-ps-1078 > div:nth-of-type(2) > div:nth-of-type(2) {
  margin-top: 50px;
}

#mjolka-ps-1078 > div:nth-of-type(2) > div:nth-of-type(2) > button:nth-of-type(1) > img {
  height: 330px;
}

#mjolka-ps-1078 > div:nth-of-type(2) > div:nth-of-type(2) > button:nth-of-type(2) > img {
  height: 330px;
}

#mjolka-ps-1078 .mjolka-acf-ps__thumb {
  width: 310px;
  min-width: 310px;
  height: 350px;
  min-height: 350px;
}

#mjolka-ps-1078 .mjolka-acf-ps__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* #1078 thumbs container only — move/position without affecting other switchers */
#mjolka-ps-1078 > .mjolka-acf-ps__middle > .mjolka-acf-ps__thumbs {
  margin-left: 218px;
}

#mjolka-ps-1078 > div.mjolka-acf-ps__top.mj_kefir_poki > div.mjolka-acf-ps__info > div.mjolka-acf-ps__copy.mjolka-acf-ps__copy--ps-1078 > p {
  margin: 0 64px 0.5em 50px;
  width: 450px;
}

/* --- Switcher 1082 (Salatostur) --- */
#mjolka-ps-1082 > div:nth-of-type(2) > div:nth-of-type(2) > button:nth-of-type(1) > img {
  height: 280px;
}

#mjolka-ps-1082 > div:nth-of-type(2) > div:nth-of-type(2) > button:nth-of-type(2) > img {
  height: 280px;
}

/* #1082 arrow margins removed — unified 15px gap via .mjolka-acf-ps__product-area */

#mjolka-ps-1082 > div.mjolka-acf-ps__middle > div.mjolka-acf-ps__thumbs {
  transform: scale(1.3);
  transform-origin: center top;
}

#mjolka-ps-1082 .mjolka-acf-ps__middle {
  padding-left: 190px;
  padding-right: 0;
}

/* --- Switcher 1083 (Sýrður rjómi) --- */
.mjolka-acf-ps__top.mj_sur_rj {
  padding-top: 145px;
}

#mjolka-ps-1083 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) {
  margin-left: 65px;
  margin-top: 0px;
}

#mjolka-ps-1083 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
  margin-left: 67px;
}

/* #1083 arrow margins removed — unified 15px gap via .mjolka-acf-ps__product-area */

#mjolka-ps-1083 .mjolka-acf-ps__middle {
  height: auto;
  min-height: 180px;
  padding-top: 0;
  padding-left: 219px;
  padding-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: visible;
}

#mjolka-ps-1083 .mjolka-acf-ps__thumb {
  width: 285px !important;
  min-width: 285px !important;
  max-width: 285px !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  aspect-ratio: auto !important;
  flex: 0 1 285px !important;
}

#mjolka-ps-1083 .mjolka-acf-ps__thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
}

/* --- Hero6 override (Sýrður rjómi hero image) — desktop only --- */
@media (min-width: 901px) {
  div.mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6.has-image {
    height: 300px;
    margin-left: -13px;
    width: 500px;
  }
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  12. RESPONSIVE                                                      ║
   ║  All breakpoints consolidated here in descending order.              ║
   ║  Modernised: fluid typography (clamp), aspect-ratio thumbnails,     ║
   ║  scaled nav arrows, container padding, per-switcher resets.          ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* ── 12 a.  ≤ 1200 px — decor hidden, middle row normalised ─────────── */
@media (max-width: 1200px) {
  .mjolka-acf-ps__decor-area {
    display: none !important;
  }

  /* Once decor is gone the 232 px gap is meaningless — centre thumbs */
  .mjolka-acf-ps__middle {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
  }
}

/* ── 12 b.  ≥ 901 px — desktop-only Elementor section overrides ─────── */
@media (min-width: 901px) {
  /* Section 1 (5b49c9e) — desktop bottle thumbs */
  #post-323 .elementor-element-5b49c9e .mjolka-acf-ps__middle,
  #post-323 [data-id="5b49c9e"] .mjolka-acf-ps__middle,
  .elementor-323 .elementor-element-5b49c9e .mjolka-acf-ps__middle {
    justify-items: end;
    height: auto;
    min-height: 537px;
    margin-top: -242px;
    margin-bottom: -24px;
    padding-top: 51px;
    padding-bottom: 51px;
  }

  #post-323 .elementor-element-5b49c9e .mjolka-acf-ps__decor,
  #post-323 [data-id="5b49c9e"] .mjolka-acf-ps__decor,
  .elementor-323 .elementor-element-5b49c9e .mjolka-acf-ps__decor {
    width: 144px;
    height: 199px;
    margin-left: 3px;
    margin-top: 0;
    margin-bottom: 0;
  }

  #post-323 .elementor-element-5b49c9e .mjolka-acf-ps__thumbs,
  #post-323 [data-id="5b49c9e"] .mjolka-acf-ps__thumbs,
  .elementor-323 .elementor-element-5b49c9e .mjolka-acf-ps__thumbs {
    justify-content: flex-end;
    gap: 16px;
    width: 1162px;
    margin-left: 0;
    margin-right: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 0px;
    padding-right: 183px;
    max-height: none;
    overflow: visible;
  }

  #post-323 .elementor-element-5b49c9e .mjolka-acf-ps__thumb,
  #post-323 [data-id="5b49c9e"] .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-5b49c9e .mjolka-acf-ps__thumb {
    width: 215px;
    min-width: 0;
    max-width: 215px;
    height: 401px;
    max-height: 401px;
    flex: 0 1 215px;
    aspect-ratio: auto;
    padding: 0;
    align-items: flex-start;
  }

  #post-323 .elementor-element-5b49c9e .mjolka-acf-ps__thumb img,
  #post-323 [data-id="5b49c9e"] .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-5b49c9e .mjolka-acf-ps__thumb img {
    width: 100%;
    max-width: 100%;
    height: 401px;
    padding-top: 0;
    padding-bottom: 0;
    object-fit: contain;
  }
}

/* ── 12 c.  ≤ 900 px — TABLET ──────────────────────────────────────── */
@media (max-width: 900px) {

  /* — Container: horizontal padding + fluid base font — */
  .mjolka-acf-ps {
    padding-left: 20px;
    padding-right: 20px;
    font-size: clamp(18px, 2.4vw + 4px, 27px);
    line-height: 1.25;
  }

  /* — Top row: single column, centred — */
  .mjolka-acf-ps__top {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    justify-items: center;
  }

  /* — Info column: dissolve into parent grid so hero can reorder — */
  .mjolka-acf-ps__info {
    display: contents;
  }

  /* — Hero images: order 1 (above product), centred & fluid — */
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero1,
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6 {
    order: 1;
    margin: 0 auto 12px auto !important;
    left: 0 !important;
    top: 0 !important;
    position: relative;
    width: 80%;
    max-width: 80%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 560 / 210;
    justify-self: center;
    align-self: center;
  }

  /* — Product area: order 2 (below hero) — */
  .mjolka-acf-ps__product-area {
    order: 2;
    margin-bottom: 12px;
  }

  /* — Remaining info children: order 3+ (below product) — */
  .mjolka-acf-ps__label {
    order: 3;
    text-align: center;
    width: 100%;
  }
  .mjolka-acf-ps__headline {
    order: 4;
    text-align: center;
    width: 100%;
  }
  .mjolka-acf-ps__copy {
    order: 5;
    text-align: center;
    width: 100%;
  }
  .mjolka-acf-ps__vorublad {
    order: 6;
    justify-self: center;
  }

  /* — Headline: remove fixed width/margins, fluid font — */
  .mjolka-acf-ps__headline {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
  }
  .mjolka-acf-ps__label {
    justify-content: center;
  }
  .mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__headline {
    font-size: clamp(32px, 4.5vw + 4px, 56px);
  }

  /* — Copy paragraph: remove fixed width/height/margins — */
  .mjolka-acf-ps__copy p {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__copy p {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* — Vorublad link: responsive — */
  .mjolka-acf-ps__vorublad {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    padding-left: 11px;
    padding-right: 11px;
  }
  .mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__vorublad {
    width: auto;
    padding-left: 11px;
    padding-right: 11px;
    margin-left: 0;
  }

  /* — Product area: scale buttons with image — */
  .mjolka-acf-ps__product-area {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .mjolka-acf-ps__product {
    max-height: 480px;
    max-width: 80%;
    flex-shrink: 1;
  }

  /* — Nav arrows: scale from 138 → 80 px — */
  .mjolka-acf-ps__btn {
    width: 80px;
    min-width: 80px;
    height: 80px;
  }
  .mjolka-acf-ps__btn .mjolka-acf-ps__chevron,
  .mjolka-acf-ps__btn img.mjolka-acf-ps__chevron {
    width: 80px;
    height: 80px;
  }

  /* — Middle row: spacing from content above — */
  .mjolka-acf-ps__middle {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: auto;
    height: auto;
    margin-top: 32px;
  }

  /* — Thumbnails: all 4 in one row — */
  .mjolka-acf-ps__thumbs {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    max-height: none;
    overflow: visible;
    align-items: flex-start;
  }
  .mjolka-acf-ps__thumb {
    width: calc(32.5% - 6px);
    min-width: 0;
    max-width: none;
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: 0 1 calc(32.5% - 6px);
    overflow: hidden;
  }
  .mjolka-acf-ps__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* — Thumbnail slider: tablet arrow sizing — */
  .mjolka-acf-ps__thumb-arrow {
    width: 30px;
    height: 30px;
  }
  .mjolka-acf-ps__thumb-arrow--prev { left: -14px; }
  .mjolka-acf-ps__thumb-arrow--next { right: -14px; }
  .mjolka-acf-ps__thumb-arrow svg {
    width: 14px;
    height: 14px;
  }
  /* In slider mode, keep thumbs a usable fixed size instead of shrinking */
  .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb {
    flex: 0 0 auto;
  }
  .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--small {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    aspect-ratio: 255 / 180 !important;
  }
  .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--large {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 216px !important;
    min-height: 216px !important;
    max-height: 216px !important;
    aspect-ratio: 349 / 629 !important;
  }

  /* — Secondary image: reset margins — */
  .mjolka-acf-ps__secondary {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* — Hero6 override reset — */
  div.mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6.has-image {
    width: 100%;
    max-width: 80%;
    margin: 0 auto 12px auto !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* — Per-switcher instance resets (zero desktop-only margins) — */
  #mjolka-ps-1048 > div.mjolka-acf-ps__middle {
    margin-bottom: 0;
  }
  #mjolka-ps-1048 > div.mjolka-acf-ps__bottom {
    margin-top: 32px;
  }
  #mjolka-ps-1048 > div.mjolka-acf-ps__bottom > img.mjolka-acf-ps__secondary {
    width: 90%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
  #mjolka-ps-1048 > div.mjolka-acf-ps__middle > div.mjolka-acf-ps__thumbs {
    gap: 10px;
  }
  #mjolka-ps-1048 .mjolka-acf-ps__thumb {
    width: calc(30% - 8px);
    min-width: 0;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    flex: 1 1 calc(30% - 8px);
  }
  #mjolka-ps-1048 .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  #mjolka-ps-1071 > div:nth-of-type(1) > div:nth-of-type(1) {
    margin-left: 0;
  }
  #mjolka-ps-1071 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
    margin-left: 0;
  }
  #mjolka-ps-1076 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
    margin-left: 0;
  }
  #mjolka-ps-1078 > div:nth-of-type(1) > div:nth-of-type(1) {
    margin-left: 0;
  }
  #mjolka-ps-1078 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
    margin-left: 0;
  }
  #mjolka-ps-1078 .mjolka-acf-ps__product-area .mjolka-acf-ps__product {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 55vw;
    margin-left: 0;
  }
  /* — #1078 middle row: reset desktop margins/padding so thumbs centre — */
  #mjolka-ps-1078 .mjolka-acf-ps__middle {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  #mjolka-ps-1078 > .mjolka-acf-ps__middle > .mjolka-acf-ps__thumbs {
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    justify-content: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #mjolka-ps-1078 .mjolka-acf-ps__thumb {
    width: calc(50% - 8px);
    min-width: 0 !important;
    max-width: none;
    max-height: none;
    height: 230px;
    min-height: 230px !important;
    aspect-ratio: auto;
    flex: 0 0 calc(50% - 8px);
    overflow: hidden;
  }
  /* #1082 btn--prev tablet reset removed — no longer needed */
  .mjolka-acf-ps__top.mj_sur_rj {
    padding-top: 40px;
  }
  #mjolka-ps-1083 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) {
    margin-left: 0;
  }
  #mjolka-ps-1083 > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(4) > p {
    margin-left: 0;
  }
  #mjolka-ps-1083 .mjolka-acf-ps__middle {
    height: auto;
    margin-top: 32px;
    margin-bottom: 0;
  }
  #mjolka-ps-1083 .mjolka-acf-ps__thumb {
    width: calc(50% - 16px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    flex: 0 0 calc(50% - 16px) !important;
    overflow: hidden;
  }
  #mjolka-ps-1083 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
  }

  /* — #1082 middle: reset desktop padding, centre thumbs — */
  #mjolka-ps-1082 > div.mjolka-acf-ps__middle > div.mjolka-acf-ps__thumbs {
    transform: none;
    justify-content: center;
  }
  #mjolka-ps-1082 .mjolka-acf-ps__middle {
    padding-left: 0;
    padding-right: 0;
    justify-items: center;
  }

  /* — #1083 middle: reset desktop padding, centre — */
  #mjolka-ps-1083 > div.mjolka-acf-ps__middle {
    padding-left: 0;
    padding-right: 0;
    justify-items: center;
  }

  /* — Elementor section thumb resets (override desktop fixed sizes) — */
  #post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb {
    width: calc(25% - 6px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 1 calc(25% - 6px) !important;
  }
  #post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain;
  }
  #post-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb {
    width: calc(25% - 6px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 300 / 350 !important;
    flex: 0 1 calc(25% - 6px) !important;
  }
  #post-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  #post-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb {
    width: calc(25% - 6px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 1 calc(25% - 6px) !important;
  }
  #post-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain;
  }
  #post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb,
  #post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb.is-active,
  .elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb.is-active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* — Layout: kefir-bottle — */
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__product {
    max-height: 500px;
  }
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb {
    width: calc(25% - 6px);
    min-width: 0;
    height: auto;
    aspect-ratio: 146 / 358;
    flex: 0 1 calc(25% - 6px);
  }
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* — Layout: sour-cream — */
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__product {
    max-height: 360px;
  }
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb {
    width: calc(25% - 6px);
    min-width: 0;
    height: auto;
    aspect-ratio: 162 / 160;
    flex: 0 1 calc(25% - 6px);
  }
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* — Layout: kefir-carton — */
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__product {
    max-height: 408px;
  }
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb {
    width: calc(25% - 6px);
    min-width: 0;
    height: auto;
    aspect-ratio: 162 / 234;
    flex: 0 1 calc(25% - 6px);
  }
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* — Layout: cheese-jar — */
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__product {
    max-height: 432px;
  }
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb {
    width: calc(25% - 6px);
    min-width: 0;
    height: auto;
    aspect-ratio: 162 / 250;
    flex: 0 1 calc(25% - 6px);
  }
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ── 12 d.  ≤ 680 px — MOBILE ──────────────────────────────────────── */
@media (max-width: 680px) {

  /* — Container: tighter padding, smaller fluid font — */
  .mjolka-acf-ps {
    padding-left: 16px;
    padding-right: 16px;
    font-size: clamp(16px, 3.5vw + 2px, 22px);
    line-height: 1.3;
  }

  /* — Top row — */
  .mjolka-acf-ps__top {
    padding: 24px 0 24px;
    gap: 16px;
  }

  /* — Info text: ensure all text content flows and wraps — */
  .mjolka-acf-ps__headline {
    width: auto !important;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .mjolka-acf-ps__label {
    width: auto !important;
    max-width: 100%;
  }
  .mjolka-acf-ps__copy,
  .mjolka-acf-ps__copy p {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    overflow: visible;
  }

  /* — Product area: tighter on mobile — */

  /* — Product image: smaller — */
  .mjolka-acf-ps__product {
    max-width: 60%;
    max-height: 380px;
    flex-shrink: 1;
  }

  /* — Nav arrows: 48 px (meets WCAG 44 px tap target) — */
  .mjolka-acf-ps__btn {
    width: 48px;
    min-width: 44px;
    height: 48px;
  }
  .mjolka-acf-ps__btn .mjolka-acf-ps__chevron,
  .mjolka-acf-ps__btn img.mjolka-acf-ps__chevron {
    width: 48px;
    height: 48px;
  }

  /* — Hero images: scale down further on mobile — */
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero1,
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6 {
    width: 90%;
    max-width: 90%;
  }

  /* — Default layout headline: fluid — */
  .mjolka-acf-ps.mj_gr_dr:not([class*="mjolka-acf-ps--layout-"]) .mjolka-acf-ps__headline {
    font-size: clamp(24px, 5vw + 4px, 36px);
  }

  /* — Copy / vorublad: fluid font — */
  .mjolka-acf-ps__copy,
  .mjolka-acf-ps__copy p {
    font-size: clamp(14px, 2.5vw + 4px, 20px);
    line-height: 1.5;
  }
  .mjolka-acf-ps__vorublad {
    font-size: clamp(14px, 2.5vw + 4px, 20px);
  }

  /* — Thumbnails: all 4 in one row on mobile — */
  .mjolka-acf-ps__thumbs {
    flex-wrap: nowrap;
    gap: 6px;
    max-height: none;
    overflow: visible;
  }
  .mjolka-acf-ps__thumb {
    width: calc(32.5% - 4.5px);
    min-width: 0;
    max-width: none;
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: 0 1 calc(32.5% - 4.5px);
    overflow: hidden;
  }
  .mjolka-acf-ps__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* — Thumbnail slider: hide arrows on mobile, rely on touch swipe — */
  .mjolka-acf-ps__thumb-arrow {
    display: none;
  }
  /* In slider mode, keep thumbs a usable touch-target size */
  .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb {
    flex: 0 0 auto;
  }
  .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--small {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 71px !important;
    min-height: 71px !important;
    max-height: 71px !important;
    aspect-ratio: 255 / 180 !important;
  }
  .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--large {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    aspect-ratio: 349 / 629 !important;
  }

  /* — Secondary image: remove excess margins — */
  .mjolka-acf-ps__secondary {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* — Per-switcher 1048 thumb reset — */
  #mjolka-ps-1048 > div.mjolka-acf-ps__middle {
    margin-bottom: 0;
  }
  #mjolka-ps-1048 > div.mjolka-acf-ps__bottom {
    margin-top: 24px;
  }
  #mjolka-ps-1048 > div.mjolka-acf-ps__bottom > img.mjolka-acf-ps__secondary {
    width: 95%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
  #mjolka-ps-1048 > div.mjolka-acf-ps__middle > div.mjolka-acf-ps__thumbs {
    gap: 8px;
  }
  #mjolka-ps-1048 .mjolka-acf-ps__thumb {
    width: calc(30% - 6px);
    min-width: 0;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    flex: 1 1 calc(30% - 6px);
  }
  #mjolka-ps-1048 .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* — Per-switcher 1078: product + thumbs mobile reset — */
  #mjolka-ps-1078 .mjolka-acf-ps__product-area .mjolka-acf-ps__product {
    max-height: 50vw;
    max-width: 70%;
  }
  #mjolka-ps-1078 .mjolka-acf-ps__middle {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  #mjolka-ps-1078 > .mjolka-acf-ps__middle > .mjolka-acf-ps__thumbs {
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    justify-content: center;
    width: 100%;
    gap: 6px;
  }
  #mjolka-ps-1078 .mjolka-acf-ps__thumb {
    width: calc(50% - 6px);
    flex: 0 0 calc(50% - 6px);
    height: 230px;
    min-height: 230px;
  }

  /* — Elementor section thumb resets (override desktop fixed sizes) — */
  #post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 1 calc(25% - 4.5px) !important;
  }
  #post-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-ea8fa02 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain;
  }
  #post-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 300 / 350 !important;
    flex: 0 1 calc(25% - 4.5px) !important;
  }
  #post-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-0ba9f10 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  #post-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 1 calc(25% - 4.5px) !important;
  }
  #post-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-73a3656 .mjolka-acf-ps__thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain;
  }
  #post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb,
  .elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb,
  #post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb.is-active,
  .elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb.is-active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #post-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb img,
  .elementor-323 .elementor-element-f378eb5 .mjolka-acf-ps__thumb img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* — Layout: kefir-bottle — */
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__product {
    max-height: 400px;
  }
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px);
    min-width: 0;
    height: auto;
    aspect-ratio: 146 / 358;
    flex: 0 1 calc(25% - 4.5px);
  }
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* — Layout: sour-cream — */
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__product {
    max-height: 288px;
  }
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px);
    min-width: 0;
    height: auto;
    aspect-ratio: 162 / 160;
    flex: 0 1 calc(25% - 4.5px);
  }
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .mjolka-acf-ps--layout-sour-cream .mjolka-acf-ps__middle {
    grid-template-columns: 1fr;
  }

  /* — Layout: kefir-carton — */
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__product {
    max-height: 312px;
  }
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px);
    min-width: 0;
    height: auto;
    aspect-ratio: 162 / 234;
    flex: 0 1 calc(25% - 4.5px);
  }
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .mjolka-acf-ps--layout-kefir-carton .mjolka-acf-ps__middle {
    grid-template-columns: 1fr;
  }

  /* — Layout: cheese-jar — */
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__product {
    max-height: 336px;
  }
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb {
    width: calc(25% - 4.5px);
    min-width: 0;
    height: auto;
    aspect-ratio: 162 / 250;
    flex: 0 1 calc(25% - 4.5px);
  }
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .mjolka-acf-ps--layout-cheese-jar .mjolka-acf-ps__middle {
    grid-template-columns: 1fr;
  }
}

/* ── 12 e.  ≤ 420 px — EXTRA-SMALL MOBILE ──────────────────────────── */
@media (max-width: 420px) {

  /* — Product image — */
  .mjolka-acf-ps__product {
    max-height: 300px;
    max-width: 55%;
  }

  /* — Thumbnails: keep 4 in a row, allow shrinking — */
  .mjolka-acf-ps__thumb {
    min-width: 0;
    max-width: none;
    flex: 0 1 calc(32.5% - 4.5px);
    width: calc(32.5% - 4.5px);
    aspect-ratio: 1 / 1;
  }

  /* — Kefir-bottle: 2-col (tall bottles too narrow at 33 %) — */
  .mjolka-acf-ps--layout-kefir-bottle .mjolka-acf-ps__thumb {
    width: calc(50% - 12px);
    flex: 0 0 calc(50% - 12px);
    min-width: 0;
  }

  /* — Hero: scale to full width on smallest screens — */
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero1,
  .mjolka-acf-ps__hero.mjolka-acf-ps__hero--hero6 {
    width: 100%;
    max-width: 100%;
  }

  /* — Per-switcher 1078 thumb reset — */
  #mjolka-ps-1078 .mjolka-acf-ps__thumb {
    width: calc(50% - 4px);
    flex: 0 0 calc(50% - 4px);
    aspect-ratio: auto;
    height: 230px;
    min-height: 230px;
  }
  #mjolka-ps-1078 .mjolka-acf-ps__product-area .mjolka-acf-ps__product {
    max-height: 55vw;
    max-width: 75%;
  }
}

/* ── Scale mode: fit all thumbnails without scrolling (desktop only) ─── */
@media (min-width: 901px) {
  .mjolka-acf-ps.mjolka-acf-ps--thumb-overflow-scale .mjolka-acf-ps__thumbs,
  .mjolka-acf-ps.mjolka-acf-ps--thumb-overflow-scale .mjolka-acf-ps__thumbs.is-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  .mjolka-acf-ps.mjolka-acf-ps--thumb-overflow-scale .mjolka-acf-ps__thumb,
  .mjolka-acf-ps.mjolka-acf-ps--thumb-overflow-scale .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 1 1 0 !important;
  }

  .mjolka-acf-ps.mjolka-acf-ps--thumb-overflow-scale .mjolka-acf-ps__thumb-arrow {
    display: none !important;
  }
}

/* ── Product preview size presets per item (desktop) ─────────────────── */
@media (min-width: 901px) {
  .mjolka-acf-ps .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--small,
  .mjolka-acf-ps .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--small {
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    flex: 0 0 255px !important;
    aspect-ratio: 255 / 180 !important;
  }

  .mjolka-acf-ps .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--large,
  .mjolka-acf-ps .mjolka-acf-ps__thumbs.is-slider > .mjolka-acf-ps__thumb.mjolka-acf-ps__thumb--large {
    width: 349px !important;
    min-width: 349px !important;
    max-width: 349px !important;
    height: 629px !important;
    min-height: 629px !important;
    max-height: 629px !important;
    flex: 0 0 349px !important;
    aspect-ratio: 349 / 629 !important;
  }
}