/* =====================================
   PONNY POP – BOUNTIFUL (CLEAN MASTER)
   Rosa header + vit toppmeny + tydlig dropdown
   ===================================== */

:root{
  --pp-bg:#F6EEF1;
  --pp-card:#FFFFFF;
  --pp-border:#E7D4DB;

  --pp-accent:#C86C93;        /* rosa knappar */
  --pp-accent-hover:#B45A80;

  --pp-head:#262626;          /* rubriker */
  --pp-text:#4F4F4F;          /* brödtext */

  --pp-new:#F6AFC2;           /* NYHET */
  --pp-sale:#E84A5F;          /* EXTRA PRIS */

  --pp-menu-white:#FFFFFF;    /* toppmenytext */
  --pp-dd-text:#C86C93;       /* dropdowntext */
}

/* ---------- BAS ---------- */
body,
.page-canvas,
.site-canvas,
.tws-theme-foundation-content,
main{
  background: var(--pp-bg) !important;
  color: var(--pp-text) !important;
}

h1,h2,h3,h4,h5,h6{ color: var(--pp-head) !important; }
p,li,small,label{ color: var(--pp-text) !important; }

a, a:visited{ color: var(--pp-head) !important; text-decoration:none; }
a:hover{ color: var(--pp-accent) !important; }

/* ---------- KORT/SEKTIONER ---------- */
.section,.card,
aside,.sidebar,
main .container, .content-box{
  background: var(--pp-card) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 16px !important;
}

/* ---------- HEADER (bakgrund) ---------- */
header,
.site-header,
.header,
.header-wrapper,
.tws-header,
.tws-header-wrapper{
  background: linear-gradient(135deg,#EFB6C9,#E39FB6) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Ikoner i header */
header .fa,
header svg,
.tws-header .fa,
.tws-header svg{
  color:#fff !important;
  fill:#fff !important;
}

/* =========================================================
   TOPPMENY (HÄST & PONNY, RYTTARE osv)
   Viktigt: vi siktar på TOPPNIVÅN – INTE dropdown.
   ========================================================= */

/* 1) Träffa topplänkar/knappar i Bountiful (flera varianter) */
header .tws-mega-menu > ul > li > a,
header .tws-mega-menu > ul > li > button,
header .tws-mega-menu .tws-mega-menu--menu > li > a,
header .tws-mega-menu .tws-mega-menu--menu > li > button,
header .tws-mega-menu .tws-mega-menu--item > a,
header .tws-mega-menu .tws-mega-menu--item > button,
header .tws-mega-menu .tws-mega-menu--item-link,
header .tws-mega-menu .tws-mega-menu--link{
  color: var(--pp-menu-white) !important;
  -webkit-text-fill-color: var(--pp-menu-white) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

/* 2) Om texten ligger i ett span inuti topplänken */
header .tws-mega-menu > ul > li > a > span,
header .tws-mega-menu > ul > li > button > span,
header .tws-mega-menu .tws-mega-menu--menu > li > a > span,
header .tws-mega-menu .tws-mega-menu--menu > li > button > span{
  color: var(--pp-menu-white) !important;
  -webkit-text-fill-color: var(--pp-menu-white) !important;
}

/* 3) Aktiv/öppen toppmeny: se till att den INTE får ljus bakgrund som “äter upp” texten */
header .tws-mega-menu > ul > li.active > a,
header .tws-mega-menu > ul > li.open > a,
header .tws-mega-menu > ul > li.show > a,
header .tws-mega-menu > ul > li.active > button,
header .tws-mega-menu > ul > li.open > button,
header .tws-mega-menu > ul > li.show > button{
  background: rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
}

/* Hover toppmeny */
header .tws-mega-menu > ul > li > a:hover,
header .tws-mega-menu > ul > li > button:hover{
  color:#FFF0F5 !important;
  -webkit-text-fill-color:#FFF0F5 !important;
}

/* =========================================================
   DROPDOWN – Vit bakgrund + rosa text (tydlig)
   ========================================================= */
header .tws-mega-menu .dropdown-menu,
header .tws-mega-menu .tws-mega-menu--dropdown,
header .tws-mega-menu .tws-mega-menu--dropdown-wrapper,
header .tws-mega-menu .tws-mega-menu--dropdown-container{
  background:#FFFFFF !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18) !important;
  z-index: 99999 !important;
}

/* Dropdown text */
header .tws-mega-menu .dropdown-menu a,
header .tws-mega-menu .tws-mega-menu--dropdown a{
  color: var(--pp-dd-text) !important;
  -webkit-text-fill-color: var(--pp-dd-text) !important;
  font-weight: 700 !important;
  text-shadow:none !important;
}

/* Hover dropdown */
header .tws-mega-menu .dropdown-menu a:hover,
header .tws-mega-menu .tws-mega-menu--dropdown a:hover{
  background:#F6EEF1 !important;
  color: var(--pp-accent-hover) !important;
  -webkit-text-fill-color: var(--pp-accent-hover) !important;
}

/* =========================================================
   SÖKFÄLT – ska vara mörk text (inte vit)
   ========================================================= */
header .tws-mega-menu--search-bar input,
header .tws-mega-menu input[type="search"],
header input[type="search"],
header .form-control{
  color: var(--pp-head) !important;
  -webkit-text-fill-color: var(--pp-head) !important;
}
header .tws-mega-menu--search-bar input::placeholder,
header .tws-mega-menu input[type="search"]::placeholder,
header input[type="search"]::placeholder{
  color: rgba(38,38,38,0.55) !important;
}

/* ---------- KNAPPAR ---------- */
button, .btn, .btn-primary,
input[type="submit"], input[type="button"]{
  background: var(--pp-accent) !important;
  color:#fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  transition: background .2s ease;
}
button:hover, .btn:hover, .btn-primary:hover,
input[type="submit"]:hover, input[type="button"]:hover{
  background: var(--pp-accent-hover) !important;
}

/* ---------- FORM ---------- */
input, textarea, select{
  background:#fff !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 12px !important;
  color: var(--pp-head) !important;
}

/* ---------- SIDOMENY ---------- */
aside a, aside a span,
.sidebar a, .sidebar a span{
  color: var(--pp-head) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
aside a:hover, .sidebar a:hover{
  color: var(--pp-accent) !important;
}

/* ---------- BADGES ---------- */
/* NYHET */
.tws-article-labels--new,
.tws-article-labels--new *{
  background: var(--pp-new) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* EXTRA PRIS */
.tws-article-labels--discount,
.tws-article-labels--sale,
.tws-article-labels--campaign{
  background: var(--pp-sale) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: .3px !important;
  box-shadow: 0 6px 14px rgba(232,74,95,0.28) !important;
}
.tws-article-labels--discount,
.tws-article-labels--discount *,
.tws-article-labels--sale,
.tws-article-labels--sale *,
.tws-article-labels--campaign,
.tws-article-labels--campaign *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}

/* ---------- FILTER / SORTERING ---------- */
.tws-list-controls,
.tws-list-controls *{
  color: #fff !important;
  -webkit-text-fill-color:#fff !important;
}
.tws-list-controls .btn,
.tws-list-controls .btn-default{
  background: #C97A9C !important;
  border: 0 !important;
  color:#fff !important;
  border-radius: 999px !important;
}
.tws-list-controls .btn:hover{
  background:#B96A8A !important;
}

/* Säkerhet: dropdown ska aldrig få text-shadow */
header .tws-mega-menu .dropdown-menu *{
  text-shadow:none !important;
}
/* =====================================
   FIX: TOPPMENY (Bootstrap navbar) – vit text
   + Dropdown tydlig
   Klistra in LÄNGST NED
   ===================================== */

/* 1) TOPPMENY-TEXT (Häst & Ponny, Ryttare, osv) */
header .navbar-nav > li > a,
header .navbar-nav > li > a:visited,
header .navbar-nav > li > a > span,
header .navbar-nav > li > a > strong,
header .navbar-nav > li > a > em{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* Hover toppmeny */
header .navbar-nav > li > a:hover{
  color:#FFF0F5 !important;
  -webkit-text-fill-color:#FFF0F5 !important;
}

/* 2) AKTIV MENY (om den får ljus bakgrund) */
header .navbar-nav > li.active > a,
header .navbar-nav > li.open > a,
header .navbar-nav > li.active > a:hover,
header .navbar-nav > li.open > a:hover{
  background: rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff!important;
}

/* 3) DROPDOWN-YTA (Bootstrap dropdown-menu) */
header .navbar-nav .dropdown-menu{
  background: #F6EEF1 !important;          /* rosa bakgrund */
  border: 1px solid #000000 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18) !important;
  z-index: 99999 !important;
}

/* Dropdown-länkar (vit text) */
header .navbar-nav .dropdown-menu > li > a,
header .navbar-nav .dropdown-menu a{
  color:#ffffff !important;
  -webkit-text-fill-color:#000000 !important;
}

}

/* Hover dropdown */
header .navbar-nav .dropdown-menu > li > a:hover,
header .navbar-nav .dropdown-menu a:hover{
  background: rgba(200,108,147,0.22) !important; /* mjuk rosa hover */
  color:#B45A80 !important;
  -webkit-text-fill-color:#B45A80 !important;
}

/* 4) HAMBURGER (navbar-toggle) – gör “strecken” vita */
header .navbar-toggle .icon-bar{
  background-color:#fff !important;
}
header .navbar-toggle{
  border-color: rgba(255,255,255,0.55) !important;
}
/* =====================================
   STICKY/FIX HEADER – PONNY POP (Bountiful)
   (Robust: fungerar även om sticky blockas)
   Klistra in LÄNGST NED
   ===================================== */

/* A) Försök med sticky först */
.tws-header-wrapper,
.tws-header,
.site-header,
.header-wrapper,
header{
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* B) Om sticky blockas i temat: använd fixed som fallback */
@supports not (position: sticky){
  .tws-header-wrapper,
  .tws-header,
  .site-header,
  .header-wrapper,
  header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
  }
}

/* C) Behåll din rosa header (inte vit!) */
.tws-header-wrapper,
.tws-header,
.site-header,
.header-wrapper,
header{
  background: linear-gradient(135deg,#EFB6C9,#E39FB6) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}

/* D) Ge sidan plats under headern (justera om behövs) */
:root{
  --pp-header-h: 84px;
}
body{
  padding-top: var(--pp-header-h) !important;
}
@media (max-width: 768px){
  :root{ --pp-header-h: 72px; }
}
/* =====================================
   TA BORT TOM YTA OVANFÖR TOPPBAR
   (behåller Fri frakt / Leverans-raden)
   ===================================== */

/* Extra wrapper ovanför topbar */
body > .page-canvas > .site-canvas::before,
body::before {
  display: none !important;
  content: none !important;
}

/* Säkerställ att ingen extra margin/padding läggs */
.bountiful--topbar,
.tws-top-bar,
.site-topbar {
  margin-top: 0 !important;
}

/* Nollställ ev. body-padding ovanför header */
body {
  padding-top: 0 !important;
}
/* ================================
   SLICK SLIDER – RUNDADE KANTER
   ================================ */

.slick-list{
  border-radius: 22px !important;
  overflow: hidden !important;
}

.slick-slide img{
  display: block !important;
  width: 100%;
  border-radius: 22px !important;

}
/* =====================================
   POPUP / MODAL – LÄGG ÖVER HEADER
   ===================================== */

/* Sänk headerns z-index lite (så den inte “äter” modaler) */
header,
.site-header,
.header,
.header-wrapper,
.tws-header,
.tws-header-wrapper{
  z-index: 1000 !important;
  position: relative; /* viktigt för z-index */
}

/* Lägg ALLA modaler/popup-lager över headern */
.modal,
.tws-modal,
.tws-modal-wrapper,
.tws-modal-container,
.fabrikk--modal,
.fabrikk--modal-container,
.fabrikk--modal-wrapper,
.swal2-container,
.ui-dialog{
  position: fixed !important;
  z-index: 999999 !important;
}

/* Backdrop/overlay över allt också */
.modal-backdrop,
.tws-modal-backdrop,
.fabrikk--modal-backdrop,
.swal2-backdrop,
.ui-widget-overlay{
  z-index: 999998 !important;
}
/* =====================================
   BANNER-TEXT / CONTENT BOX – VIT TEXT
   (ex: Mulleshörna)
   ===================================== */

.tws-content-box--first-line,
.tws-content-box--first-line * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Extra läsbarhet på bild (valfri men rekommenderad) */
.tws-content-box--first-line {
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
/* =====================================
   CONTENT BOX / BANNER-TEXT
   Rea + Smaskiga erbjudanden
   ===================================== */

.wrappContent .tws-content-box--first-line,
.wrappContent .tws-content-box--third-line,
.wrappContent .tws-content-box--first-line *,
.wrappContent .tws-content-box--third-line * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Lätt skugga för läsbarhet på bild */
.wrappContent .tws-content-box--first-line,
.wrappContent .tws-content-box--third-line {
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
/* =====================================
   FILTER / DROPDOWN – MÖRK TEXT PÅ VIT BAKGRUND
   ===================================== */

/* Själva öppnade dropdown-rutan */
.tws-dropdown-menu,
.tws-select-menu,
.tws-filter-dropdown,
.tws-list-controls .dropdown-menu,
.tws-list-controls .open .dropdown-menu,
.bootstrap-select .dropdown-menu,
.dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E7D4DB !important;
  color: #262626 !important;
  -webkit-text-fill-color: #262626 !important;
}

/* Text/länkar/alternativ i rutorna */
.tws-dropdown-menu *,
.tws-select-menu *,
.tws-filter-dropdown *,
.tws-list-controls .dropdown-menu *,
.bootstrap-select .dropdown-menu *,
.dropdown-menu * {
  color: #262626 !important;
  -webkit-text-fill-color: #262626 !important;
  text-shadow: none !important;
}

/* Hover i alternativen */
.tws-dropdown-menu li:hover,
.tws-dropdown-menu a:hover,
.tws-select-menu li:hover,
.tws-select-menu a:hover,
.tws-filter-dropdown li:hover,
.tws-filter-dropdown a:hover,
.tws-list-controls .dropdown-menu li:hover,
.tws-list-controls .dropdown-menu a:hover,
.bootstrap-select .dropdown-menu li:hover,
.bootstrap-select .dropdown-menu a:hover,
.dropdown-menu li:hover,
.dropdown-menu a:hover {
  background: #F6EEF1 !important;
  color: #C86C93 !important;
  -webkit-text-fill-color: #C86C93 !important;
}

/* Valda alternativ */
.tws-dropdown-menu .active,
.tws-dropdown-menu .selected,
.tws-select-menu .active,
.tws-filter-dropdown .active,
.dropdown-menu .active {
  background: #F6EEF1 !important;
}

.tws-dropdown-menu .active *,
.tws-dropdown-menu .selected *,
.tws-select-menu .active *,
.tws-filter-dropdown .active *,
.dropdown-menu .active * {
  color: #262626 !important;
  -webkit-text-fill-color: #262626 !important;
}/* Gör att hela bilden alltid visas */
.tws-article-list--article-image img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* Se till att alla bildrutor är lika stora */
.tws-article-list--article-image-wrapper {
  aspect-ratio: 1 / 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 10px;
}/* Fixar produktbilden (stora bilden) */
.tws-product-image img,
.tws-product-gallery img {
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
}

/* Ger bilden rätt utrymme */
.tws-product-image,
.tws-product-gallery {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}.tws-product-image img,
.tws-product-gallery img {
  max-height: 600px !important;
}/* Standard header */
.site-header {
  transition: all 0.3s ease;
  padding-top: 20px;
  padding-bottom: 20px;
}/.tws-logo img
img[src*="logo"]
max-height
{.tws-logo img,
.tws-header-logo img,
img[src*="logo"] {
  max-height: none !important;
  height: auto !important;
  transform: none !important;
}

/* Gör bara headern mindre när sidan scrollas */
@media (min-width: 1024px) {

  body:not(.tws-page-start) .tws-header,
  body:not(.tws-page-start) .tws-header-wrapper,
  body:not(.tws-page-start) .tws-header__wrapper,
  body:not(.tws-page-start) .header,
  body:not(.tws-page-start) .header__main {
    max-height: 95px !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}