.dpp-container {
    display: flex;           /* Gör div:en till flex-container */
    width: 100%;             /* 100% bredd */
    column-gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .dpp-container#dpp-accordions {
    align-items: flex-start;
}
  .column {
    flex: 1;                 /* Varje kolumn tar upp lika mycket utrymme */
    box-sizing: border-box;  /* Gör att padding inte påverkar bredden */
   
  }

.dpp-article h2 {
    font-size: 2rem;
}

.dpp-article h3 {
    
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #000;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 25px; /* plats för ikonen */
}

.dpp-article h3 .accordion-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 18px;
}


.dpp-container:not(:last-of-type)
{
    margin-bottom: 48px;
}
.dpp-image img {
    width: 100%;
    height: auto;
    box-shadow: none;
    display: block;
}

h1.dpp-title
{
    font-size: 2rem;
}

h2.dpp-title
{
    font-size: 1.8rem;
}

.text-right {
    text-align: right;
}

.accordion-content {
    padding: 0px 5px;
    max-height: 0;
    overflow: hidden;
    /* transition: max-height 0.4s ease, opacity 0.4s ease; */
    transition: max-height 0.5s ease, opacity 0.3s ease;
    opacity: 0;
}

.accordion-content.open {
  max-height: 100%; /* tillräckligt stort för att rymma allt innehåll */
  opacity: 1;
}


.digital-pass-fields {
    display: flex;
    justify-content: space-between;
    /* padding: 0px 5px; */
    
}

.digital-pass-fields, .digital-pass-fields-textarea
{
  font-size: 0.875rem;
}

.digital-pass-fields div:first-of-type {
    white-space: nowrap;
    margin-right: 10px;
}

.single-product_pass img {
    box-shadow:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.loop
{
  margin-top: 50px;
}
.spare-parts
{
  margin-top: 30px;
}
.loop, 
.spare-parts{
  display: flex;
  }

  .loop img,
  .spare-parts img
  {
    margin-right: 20px;
    height: 54px;
  }

  .loop p,
  .spare-parts p
  {
    margin-bottom: 0.4rem;
    line-height: 1.4rem;
  }

  .loop .content,
  .spare-parts .content
  {
    justify-content: center;
    display: flex;
    flex-direction: column;
  }


.digital-pass-fields.phase-2 > *,
.digital-pass-fields-fullwidth.phase-2 > * {
    color: #999999;
}

.digital-pass-fields.non-public > * ,
.digital-pass-fields-fullwidth.non-public > * {
    font-style: italic;
}

/* Standard: padding + margin på containern */
.digital-pass-fields-fullwidth {
  margin: 5px 0;
  /* padding: 0px 5px; */
  font-size: 0.875rem;
}

.mt-10 { margin-top: 10px;  }
.mt-15 { margin-top: 15px;  }

.headline {
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 5px;
}

/* Bas: ingen top-marginal på headlines */
.accordion-content .digital-pass-fields-fullwidth .headline {
  margin-top: 0;
}

/* Lägg top-marginal på alla efterföljande fullwidth-block */
.accordion-content .digital-pass-fields-fullwidth ~ .digital-pass-fields-fullwidth .headline {
  margin-top: 15px;
}


.digital-pass-fields-fullwidth span {
    text-transform: uppercase;
    font-size: 14px;
}

.digital-pass-fields p,
.digital-pass-fields-fullwidth p
{
    margin-bottom: 10px;
}

.ast-mobile-popup-drawer.active .menu-toggle-close:focus
{
  border-style: none !important;
}

.dpp-slider{position:relative;overflow:hidden}
.dpp-slider-track{display:flex;gap:1rem;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
.dpp-slide{flex:0 0 100%;scroll-snap-align:center;position:relative}
.dpp-slide img{width:100%;height:auto;display:block;border-radius:.5rem}
.dpp-slide-caption{position:absolute;left:.75rem;bottom:.75rem;background:rgba(0,0,0,.55);color:#fff;padding:.35rem .6rem;border-radius:.35rem;font-size:.85rem}
.dpp-arrow{position:absolute;top:50%;transform:translateY(-50%);background: rgba(255,255,255,.5);border:1px solid #ddd;padding:.5rem 1rem;border-radius:.4rem;cursor:pointer}
button.dpp-arrow:focus,
button.dpp-arrow:focus-within { background: rgba(255,255,255,.5); border: 1px solid #ddd; outline: none !important;}
.dpp-prev{left:.5rem}.dpp-next{right:.5rem}
.dpp-dots{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem}
.dpp-dot{width:.5rem;height:.5rem;border-radius:50%;background:#ccc;display:inline-block}
.dpp-dot.active{background:#333}
/* Göm horisontell scrollbar i sliden, men behåll scroll/JS-funktionalitet */
.dpp-slider-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
.dpp-slider-track::-webkit-scrollbar{
  display: none;              /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

.sub-fields {
    margin-left: 10px;
}

/* 3-kolumners galleri med titel under */
.dpp-gallery{display:grid;gap:1rem}
.dpp-gallery--3{
  grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .dpp-gallery--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .dpp-gallery--3{ grid-template-columns: repeat(3, 1fr); }
}

.dpp-gallery__item{margin:0; text-align:center}
.dpp-gallery__item img{
  width:100%; height:auto; display:block; border-radius:.5rem;
}
.dpp-gallery__caption{
  margin-top:.5rem; 
}



/* =========================
   Responsiv layout
   ========================= */

/* När skärmen är smalare än en iPad (~768px) */
@media (max-width: 768px) {
  .dpp-container {
    flex-direction: column;   /* Kolumner staplas på höjden */
    column-gap: 0;            /* Ingen kolumngap */
    margin-bottom: 0px;
  }

  .dpp-container:not(:last-of-type)
    {
        margin-bottom: 0px;
    }

  .column {
    width: 100%;
    margin-bottom: 24px;      /* Lite spacing mellan blocken */
  }

  .dpp-article h3 {
    font-size: 1.2rem;        /* Lite mindre rubrik på mobil */
    padding-right: 35px;      /* extra utrymme för ikonen */
  }

  .dpp-article h2 {
    font-size: 1.5rem;
  }

  .accordion-content {
    font-size: 0.9rem;
  }
}

/* Riktigt små mobiler (t.ex. iPhone SE) */
@media (max-width: 480px) {
  .digital-pass-fields {
    align-items: flex-start;
  }

  .digital-pass-fields div {
    text-align: left !important;
    margin-bottom: 5px;
  }

  .text-right {
    text-align: left; /* override för mobil */
  }
}