.elementor-35740 .elementor-element.elementor-element-25da14e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-35740 .elementor-element.elementor-element-642c3f2{--display:flex;}.elementor-35740 .elementor-element.elementor-element-2f742d9.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-35740 .elementor-element.elementor-element-2f742d9.elementor-wc-products ul.products li.product span.onsale{display:block;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-35740 .elementor-element.elementor-element-2f742d9.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-35740 .elementor-element.elementor-element-2f742d9.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS *//* =========================================================
   PRILLA.NU – LD SNUS
   Renskriven CSS
   ========================================================= */


/* =========================================================
   1. VARIABLER / GRUND
   ========================================================= */

.ld-page{
  --ld-ink: #111827;
  --ld-text: #4b5563;
  --ld-muted: #687281;

  --ld-black: #171816;
  --ld-charcoal: #252622;

  --ld-copper: #c47755;
  --ld-copper-dark: #985238;

  --ld-purple: #8242a8;
  --ld-red: #c8242f;

  --ld-green: #75c22c;
  --ld-green-dark: #63aa22;

  --ld-border: rgba(15, 23, 42, .10);
  --ld-shadow: 0 16px 38px rgba(15, 23, 42, .09);
  --ld-shadow-hover: 0 22px 50px rgba(15, 23, 42, .14);

  overflow: hidden;
}


/* =========================================================
   2. SIDHUVUD / INTRODUKTION
   ========================================================= */

.ld-page-intro{
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 34px;

  padding: 34px;
}


/* Logotypkort */

.ld-page-intro__brand{
  min-height: 150px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
  overflow: hidden;

  border: 1px solid var(--ld-border);
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(196, 119, 85, .08),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7f7f5
    );

  box-shadow:
    0 16px 34px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}


/* Riktig LD-logotyp */

.ld-page-intro__logo-image{
  display: block;

  width: 100%;
  max-width: 165px;
  height: auto;

  margin: 0;

  object-fit: contain;
  filter: contrast(1.03);
}


/* Introtext */

.ld-page-intro__content{
  max-width: 900px;
}


.ld-page-intro__eyebrow{
  margin: 0 0 7px;

  color: var(--ld-copper-dark);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}


.ld-page-intro h1{
  margin: 0 0 13px;

  color: var(--ld-ink);

  font-size: clamp(36px, 4vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}


.ld-page-intro p{
  margin: 0 0 8px;

  color: var(--ld-text);

  font-size: 15px;
  line-height: 1.7;
}


.ld-page-intro p:last-child{
  margin-bottom: 0;
}


/* =========================================================
   3. RESPONSIV HERO
   ========================================================= */

.ld-hero-section{
  margin: 4px 34px 34px;
}


.ld-hero-link{
  display: block;

  overflow: hidden;

  border: 1px solid var(--ld-border);
  border-radius: 22px;

  background: #111;

  box-shadow: var(--ld-shadow);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.ld-hero-link:hover{
  transform: translateY(-2px);
  box-shadow: var(--ld-shadow-hover);
}


.ld-hero-link:focus-visible{
  outline: 3px solid var(--ld-green);
  outline-offset: 4px;
}


.ld-hero-link picture{
  display: block;
}


.ld-hero-image{
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
}


/* =========================================================
   4. INFORMATIONSKORT
   ========================================================= */

.ld-info{
  margin: 0 34px 36px;
  padding: 32px;

  border: 1px solid rgba(117, 194, 44, .20);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(196, 119, 85, .10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f7faef,
      #f1f6e8
    );
}


.ld-info__eyebrow{
  display: inline-flex;
  align-items: center;

  margin: 0 0 12px;
  padding: 7px 12px;

  border-radius: 999px;

  background: var(--ld-charcoal);
  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}


.ld-info h2{
  margin: 0 0 12px;

  color: var(--ld-ink);

  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
}


.ld-info__lead{
  max-width: 980px;

  margin: 0 0 9px !important;

  color: #27313f !important;

  font-size: 16px !important;
  line-height: 1.7 !important;
}


.ld-info > p{
  max-width: 1040px;

  margin: 0 0 8px;

  color: #56606c;

  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   5. FAKTAKORT
   ========================================================= */

.ld-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;

  margin: 24px 0;
}


.ld-info-box{
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 14px;

  padding: 22px;

  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;

  background: rgba(255, 255, 255, .94);

  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}


.ld-info-box__icon{
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(196, 119, 85, .13);
  color: var(--ld-copper);

  font-size: 18px;
  line-height: 1;
}


.ld-info-box__icon--purple{
  background: rgba(130, 66, 168, .12);
  color: var(--ld-purple);
}


.ld-info-box h3{
  margin: 0 0 7px;

  color: var(--ld-ink);

  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}


.ld-info-box p{
  margin: 0;

  color: #596270;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   6. SORTIMENTSKORT
   ========================================================= */

.ld-range{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;

  margin: 22px 0 26px;
}


.ld-range-item{
  position: relative;

  overflow: hidden;

  padding: 20px;

  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 17px;

  background: #ffffff;

  box-shadow: 0 6px 16px rgba(15, 23, 42, .035);
}


.ld-range-item::before{
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 4px;

  background: var(--ld-copper);
}


.ld-range-item:nth-child(2)::before{
  background: #a9adb1;
}


.ld-range-item:nth-child(3)::before{
  background: var(--ld-purple);
}


.ld-range-item:nth-child(4)::before{
  background: var(--ld-red);
}


.ld-range-item h3{
  margin: 0 0 7px;

  color: var(--ld-ink);

  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}


.ld-range-item p{
  margin: 0;

  color: #606977;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   7. KÖPSEKTION
   ========================================================= */

.ld-buy{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  margin-top: 22px;
  padding-top: 24px;

  border-top: 1px solid rgba(15, 23, 42, .10);
}


.ld-buy__content{
  max-width: 620px;
}


.ld-buy h3{
  margin: 0 0 6px;

  color: var(--ld-ink);

  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}


.ld-buy p{
  margin: 0;

  color: #606977;

  font-size: 13px;
  line-height: 1.6;
}


.ld-buy__buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}


/* =========================================================
   8. KNAPPAR
   ========================================================= */

.ld-button{
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 18px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.ld-button:hover{
  transform: translateY(-2px);
}


.ld-button:focus-visible{
  outline: 3px solid rgba(117, 194, 44, .45);
  outline-offset: 3px;
}


.ld-button--primary{
  border: 1px solid var(--ld-green);

  background: var(--ld-green);
  color: #ffffff !important;

  box-shadow: 0 8px 18px rgba(117, 194, 44, .20);
}


.ld-button--primary:hover{
  border-color: var(--ld-green-dark);
  background: var(--ld-green-dark);
}


.ld-button--secondary{
  border: 1px solid rgba(15, 23, 42, .12);

  background: #ffffff;
  color: #172033 !important;
}


.ld-button--secondary:hover{
  border-color: rgba(15, 23, 42, .18);

  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}


/* =========================================================
   9. PRODUKTANKARE
   ========================================================= */

.ld-product-anchor{
  position: relative;
  top: -24px;

  width: 100%;
  height: 1px;

  pointer-events: none;
}


/* =========================================================
   10. PADDA
   ========================================================= */

@media (max-width: 1024px){

  .ld-page-intro{
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 24px;

    padding: 28px;
  }


  .ld-page-intro__brand{
    min-height: 130px;
    padding: 20px;
  }


  .ld-page-intro__logo-image{
    max-width: 135px;
  }


  .ld-hero-section,
  .ld-info{
    margin-left: 28px;
    margin-right: 28px;
  }


  .ld-range{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .ld-buy{
    align-items: flex-start;
    flex-direction: column;
  }


  .ld-buy__buttons{
    justify-content: flex-start;
  }
}


/* =========================================================
   11. MOBIL
   ========================================================= */

@media (max-width: 767px){

  .ld-page-intro{
    grid-template-columns: 1fr;
    gap: 18px;

    padding: 20px;
  }


  .ld-page-intro__brand{
    min-height: 105px;

    padding: 16px;

    border-radius: 18px;
  }


  .ld-page-intro__logo-image{
    max-width: 120px;
  }


  .ld-page-intro__eyebrow{
    font-size: 10px;
  }


  .ld-page-intro h1{
    font-size: 34px;
  }


  .ld-page-intro p{
    font-size: 14px;
    line-height: 1.6;
  }


  .ld-hero-section{
    margin: 0 12px 24px;
  }


  .ld-hero-link{
    border-radius: 16px;
  }


  .ld-info{
    margin: 0 12px 24px;
    padding: 22px 18px;

    border-radius: 18px;
  }


  .ld-info__eyebrow{
    font-size: 10px;
  }


  .ld-info h2{
    font-size: 27px;
  }


  .ld-info__lead{
    font-size: 14px !important;
    line-height: 1.65 !important;
  }


  .ld-info > p{
    font-size: 13px;
    line-height: 1.65;
  }


  .ld-info-grid{
    grid-template-columns: 1fr;
    gap: 12px;

    margin: 20px 0;
  }


  .ld-info-box{
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;

    padding: 17px;
  }


  .ld-info-box__icon{
    width: 30px;
    height: 30px;

    font-size: 15px;
  }


  .ld-info-box h3{
    font-size: 16px;
  }


  .ld-info-box p{
    font-size: 12px;
  }


  .ld-range{
    grid-template-columns: 1fr;
    gap: 10px;

    margin-bottom: 22px;
  }


  .ld-range-item{
    padding: 17px;
  }


  .ld-buy{
    gap: 17px;
  }


  .ld-buy__buttons{
    width: 100%;
  }


  .ld-button{
    width: 100%;
  }
}

/* =========================================================
   LD-SIDA – SMÅ JUSTERINGAR
   Lägg längst ned i befintlig LD-CSS
   ========================================================= */


/* Mer luft mellan introduktionskortet och produktgridden */
.ld-product-anchor{
  top: -18px;
  margin-bottom: 26px;
}


/* Lite tydligare avslutning på informationssektionen */
.ld-buy{
  margin-top: 26px;
  padding-top: 26px;
}


/* Primärknappen får mer visuell tyngd */
.ld-buy__buttons .ld-button--primary{
  min-width: 180px;
  padding-left: 24px;
  padding-right: 24px;
}


/* Sekundärknappen något lugnare */
.ld-buy__buttons .ld-button--secondary{
  min-width: 135px;
}


/* Lite mer luft runt hela produktsektionen i Elementor */
.ld-products-widget{
  margin-top: 28px;
}


/* Om Elementor-containern direkt efter LD-kortet används */
.ld-page + .ld-products-widget,
.ld-page ~ .ld-products-widget{
  margin-top: 28px;
}


/* Produktgridden får jämnare luft uppåt */
.ld-products-widget .woocommerce{
  padding-top: 4px;
}


/* =========================================================
   PADDA
   ========================================================= */

@media (max-width: 1024px){

  .ld-products-widget{
    margin-top: 22px;
  }

  .ld-buy__buttons .ld-button--primary{
    min-width: 170px;
  }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px){

  .ld-product-anchor{
    margin-bottom: 18px;
  }

  .ld-products-widget{
    margin-top: 18px;
  }

  .ld-buy{
    margin-top: 22px;
    padding-top: 22px;
  }

  .ld-buy__buttons .ld-button--primary,
  .ld-buy__buttons .ld-button--secondary{
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   LD-SIDA – SEO- OCH FAQ-SEKTION
   ========================================================= */

.ld-seo-section{
  margin: 42px auto 54px;
  padding: 34px;

  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(196, 119, 85, .07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfa 100%
    );

  box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}


/* =========================================================
   RUBRIK / INTRO
   ========================================================= */

.ld-seo-section__header{
  max-width: 900px;
  margin-bottom: 28px;
}


.ld-seo-section__eyebrow{
  display: inline-flex;
  align-items: center;

  margin-bottom: 10px;
  padding: 7px 12px;

  border-radius: 999px;

  background: #252622;
  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}


.ld-seo-section h2{
  margin: 0 0 12px;

  color: #111827;

  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}


.ld-seo-section__lead{
  margin: 0;

  color: #485261;

  font-size: 16px;
  line-height: 1.75;
}


/* =========================================================
   FYRA INFORMATIONSKORT
   ========================================================= */

.ld-seo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;

  margin-bottom: 28px;
}


.ld-seo-card{
  position: relative;

  overflow: hidden;

  padding: 24px;

  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;

  background: #ffffff;

  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
}


.ld-seo-card__marker{
  position: absolute;
  inset: 0 auto 0 0;

  width: 4px;
}


.ld-seo-card__marker--copper{
  background: #c47755;
}


.ld-seo-card__marker--purple{
  background: #8242a8;
}


.ld-seo-card__marker--red{
  background: #c8242f;
}


.ld-seo-card__marker--green{
  background: #75c22c;
}


.ld-seo-card h3{
  margin: 0 0 10px;

  color: #111827;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}


.ld-seo-card p{
  margin: 0 0 9px;

  color: #596270;

  font-size: 13px;
  line-height: 1.7;
}


.ld-seo-card p:last-child{
  margin-bottom: 0;
}


/* =========================================================
   LÄNGRE TEXTBLOCK
   ========================================================= */

.ld-seo-content{
  margin: 0 0 30px;
  padding: 26px;

  border: 1px solid rgba(117, 194, 44, .18);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #f7faef,
      #f1f6e8
    );
}


.ld-seo-content h3{
  margin: 0 0 12px;

  color: #111827;

  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
}


.ld-seo-content p{
  margin: 0 0 11px;

  color: #535d69;

  font-size: 14px;
  line-height: 1.75;
}


.ld-seo-content p:last-child{
  margin-bottom: 0;
}


/* =========================================================
   FAQ
   ========================================================= */

.ld-faq{
  margin-top: 30px;
}


.ld-faq__header{
  margin-bottom: 16px;
}


.ld-faq__eyebrow{
  display: block;

  margin-bottom: 5px;

  color: #985238;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}


.ld-faq__header h3{
  margin: 0;

  color: #111827;

  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}


.ld-faq__list{
  display: grid;
  gap: 10px;
}


.ld-faq-item{
  overflow: hidden;

  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 15px;

  background: #ffffff;

  box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}


.ld-faq-item summary{
  position: relative;

  display: flex;
  align-items: center;

  min-height: 58px;
  padding: 16px 54px 16px 18px;

  color: #111827;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;

  cursor: pointer;
  list-style: none;
}


.ld-faq-item summary::-webkit-details-marker{
  display: none;
}


.ld-faq-item summary::after{
  content: "+";

  position: absolute;
  top: 50%;
  right: 18px;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #f2f6e9;
  color: #63aa22;

  font-size: 21px;
  font-weight: 500;
  line-height: 1;

  transform: translateY(-50%);
  transition:
    transform .2s ease,
    background .2s ease;
}


.ld-faq-item[open] summary::after{
  content: "–";

  background: #75c22c;
  color: #ffffff;
}


.ld-faq-item summary:hover{
  background: #fbfdf9;
}


.ld-faq-item summary:focus-visible{
  outline: 3px solid rgba(117, 194, 44, .35);
  outline-offset: -3px;
}


.ld-faq-item__content{
  padding: 0 18px 18px;
}


.ld-faq-item__content p{
  margin: 0;

  color: #5b6572;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   AVSLUTNING / KNAPP
   ========================================================= */

.ld-seo-section__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  margin-top: 30px;
  padding-top: 26px;

  border-top: 1px solid rgba(15, 23, 42, .09);
}


.ld-seo-section__footer h3{
  margin: 0 0 5px;

  color: #111827;

  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}


.ld-seo-section__footer p{
  margin: 0;

  color: #66707d;

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   PADDA
   ========================================================= */

@media (max-width: 1024px){

  .ld-seo-section{
    margin-top: 34px;
    margin-bottom: 44px;
    padding: 28px;
  }

  .ld-seo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px){

  .ld-seo-section{
    margin: 26px 12px 34px;
    padding: 22px 18px;

    border-radius: 19px;
  }


  .ld-seo-section h2{
    font-size: 30px;
  }


  .ld-seo-section__lead{
    font-size: 14px;
    line-height: 1.65;
  }


  .ld-seo-grid{
    grid-template-columns: 1fr;
    gap: 11px;

    margin-bottom: 22px;
  }


  .ld-seo-card{
    padding: 19px;
  }


  .ld-seo-card h3{
    font-size: 17px;
  }


  .ld-seo-card p{
    font-size: 12px;
    line-height: 1.65;
  }


  .ld-seo-content{
    padding: 20px 18px;
    border-radius: 17px;
  }


  .ld-seo-content h3{
    font-size: 21px;
  }


  .ld-seo-content p{
    font-size: 13px;
    line-height: 1.7;
  }


  .ld-faq__header h3{
    font-size: 22px;
  }


  .ld-faq-item summary{
    min-height: 56px;
    padding: 15px 50px 15px 15px;

    font-size: 13px;
  }


  .ld-faq-item__content{
    padding: 0 15px 16px;
  }


  .ld-faq-item__content p{
    font-size: 12px;
  }


  .ld-seo-section__footer{
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;

    margin-top: 24px;
    padding-top: 22px;
  }


  .ld-seo-section__footer .ld-button{
    width: 100%;
  }
}
/* =========================================================
   LD – NEDERSTA BANNERJUSTERING
   Lägg längst ned i CSS
   ========================================================= */

.ld-bottom-banner{
  margin-top: 1px;
}

.ld-bottom-banner img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  overflow: hidden;
}

/* Om bannern ligger i Elementor image widget / wrapper */
.ld-bottom-banner .elementor-image,
.ld-bottom-banner .elementor-widget-container,
.ld-bottom-banner a{
  display: block;
  border-radius: 18px;
  overflow: hidden;
}


/* =========================
   PADDA
   ========================= */

@media (max-width: 1024px){

  .ld-bottom-banner{
    margin-top: 1px;
  }

  .ld-bottom-banner img,
  .ld-bottom-banner .elementor-image,
  .ld-bottom-banner .elementor-widget-container,
  .ld-bottom-banner a{
    border-radius: 16px;
  }
}


/* =========================
   MOBIL
   ========================= */

@media (max-width: 767px){

  .ld-bottom-banner{
    margin-top: 1px;
  }

  .ld-bottom-banner img,
  .ld-bottom-banner .elementor-image,
  .ld-bottom-banner .elementor-widget-container,
  .ld-bottom-banner a{
    border-radius: 14px;
  }
}/* End custom CSS */