.column-left{ float: left; width: 33%;  background: #fafafa; min-height: 140px;}
.column-right{ float: right; width: 33%; background: #fafafa; min-height: 140px;}
.column-center{ display: inline-block; width: 33%; background: #fafafa; min-height: 140px;}


#fb-share  {
	clear:both;
	margin: 10px 0 0 0;
}


.datum_stort {
font-size: 6em;font-weight:bold; text-align:center
}


h1 {margin-top:10px;}


.toggle, [id^=drop] {display:none;}

/* Giving a background-color to the nav container. */
nav { 
	margin:0 0 25px 0;
	padding: 0;
	background-color: #333;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: left;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	z-index:2000;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #333;
	}

/* Styling the links */
nav a {
	display:block;
	padding:4px 12px;	
	color:#FFF;
	font-size:14px;
	text-decoration:none;
}

nav a:hover {color: #fff}

nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #cc3333; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 29px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:220px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' »'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 600px) {

	.datum_stort {font-size: 4em;}


	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #373737;
		padding:4px 12px;		
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav a, nav ul ul a,
  nav ul ul ul a{
		padding:4px 12px;		
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}
	
	.container {width: 100%;}
	
	.container {
/*		padding: 0 10px !important; */
	}
	
	.row {margin:0 10px !important;}

}


.info, .success, .warning, .error {
	clear:both;
padding: 30px;
    margin: 30px 0;	
}
 
.error {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #4CAF50;
}

.info {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
}

.warning {
  background-color: #fbdbdc;
  border-left: 6px solid #d9bbbd;
}







/* Stil för prisintervall */
.price-range {
    border: 1px solid black;
    height: 5px;
    background-color: #e0e0e0;
    position: relative;
    margin-top: 10px;
    margin-bottom: 5px;
}

.price-range .indicator {
    position: absolute;
    top: -5px;
    width: 2px;
    height: 15px;
    background-color: black;
}

.price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
}





.previous-price {
    font-size: 0.8em;
}



@media (max-width: 768px) {

	.column_julafton {
    	width: 100%;
  	}
	
}




.column_julafton {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row_julafton:after {
  content: "";
  display: table;
  clear: both;
}

.row_julafton {
  display: flex;
}

.column_julafton {
  flex: 50%;
}



h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 3.0rem; line-height: 1.2;  letter-spacing: -.1rem; font-weight: bold; text-align:center; margin-top:10px;}
h2 { font-size: 2.5rem; line-height: 1.25; letter-spacing: -.1rem; font-weight: bold;}
h3 { font-size: 2rem; line-height: 1.3;  letter-spacing: -.1rem;  font-weight: bold;}
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 4.6rem; text-align:center; font-weight: bold;}
  h2 { font-size: 2.8rem; }
  h3 { font-size: 2rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }



html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  font-weight: 400;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
  background: #24d6d3;
   }
   
   


#footer {
text-align:center;
border-top: 5px solid #000;
padding-top:25px;
margin-top: 35px;
padding-bottom:25px;
background: #24d6d3;
}

.timer, .new-year {
  color: darken(hotpink, 10%);
  text-align: center;
  padding: .5em;
  font-size: 1.6em;
}


.menu_simple {
    width: 100%;
    background-color: #222;
}

.menu_simple ul {
    margin: 0; padding: 0;
    float: left;
}

.menu_simple ul li {
    display: inline;
}

.menu_simple ul li a {
    float: left; text-decoration: none;
    color: white; 
    padding: 5px 15px;
    background-color:  #222;
}


.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  background: #fff;
   }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 0; }
}



/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; margin-left:0;}
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; margin-left:0;}

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
  
  
  
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: #fff;
    background-color: #cc3333;
}

}


th,
td {
  padding: 4px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }
  

@media (max-width: 600px) { 
  /* För mindre skärmar än 600px */
  td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Centrera innehållet i den första <td> */
  td:first-child {
  	margin-top:10px;
    border-bottom: none;
    text-align: center;
    margin: 0 auto;
  }

  /* Lägg till lite extra utrymme mellan cellerna när de staplas */
  td:not(:last-child) {
    margin-bottom: 10px;
  }
}



  
  
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }
  
  
  
  
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


.statistik {
    border: 3px dashed #ccc;
    padding: 20px;
    margin: 40px 0;
    background-color: #f9f9f9;
    border-radius: 5px;
}





.statistik-lista {
    list-style-type: none;
    padding-left: 0;
}

.statistik-lista li {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.statistik-lista li i {
    flex-shrink: 0;
    margin-right: 10px;
}

.statistik-lista li .list-text {
    flex-basis: calc(100% - 40px); /* Subtrahera ikonens bredd och marginal */
}

/* Styling för ikonerna */

.statistik-lista li i {font-size:1.3em;}

.statistik-lista li i.fa-trophy { color: #ffc107; }
.statistik-lista li i.fa-fire { color: #E25822; }
.statistik-lista li i.fa-thumbs-down { color: #de6764; }
.statistik-lista li i.fa-bell { color: blue; }







.tips-box { background:#a7fffe; padding:20px; border-radius:10px; }



/* === Bas / tema (håll lätt!) === */
:root{
  --bg-page:#fff;
  --text:#222;
  --muted:#6b7280;
  --link:#2563eb;
  --accent:#1d4ed8;         /* grön knapp */
  --accent-dark:#16a34a;
  --danger:#ef4444;         /* REA/röd */
  --note:#059669;           /* prissänkt-text */
  --line:#eee;
}

/* Rubriker / copy nära din befintliga stil */
.section-lead { margin: 0 0 10px; }
.p-muted { color: var(--muted); }

/* Filterknappar (ersätter inline style i .sort-container) */
.sort-container { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 20px; }
.sortbutton {
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:#f8fafc; border:1px solid #e5e7eb; color:inherit; text-decoration:none;
}
.sortbutton.active { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }

/* === Lista/tabell === */
.table-list { width:100%; margin:30px 0; font-size:1.1em; border-collapse: collapse; }
.table-list thead th { text-align:left; padding:12px 0; border-bottom:1px solid var(--line); }
.table-list tbody tr { border-bottom:1px solid var(--line); }
.table-list td { vertical-align: top; padding:18px 10px; }
.center-content { width: 260px; text-align:right; } /* högra cellen med actions */

/* Vänsterkolumn: media + text */
.prod-media-wrap { position: relative; display:inline-block; }
.prod-media { width:220px; height:220px; object-fit:contain; display:block; background:#f0f2f7; border-radius:10px; }
.badges { position:absolute; inset:auto auto auto 0; top:0; left:0; display:flex; gap:6px; flex-wrap: wrap; }
.badge { font-weight:800; font-size:11px; padding:5px 6px; border-radius:8px; color:#fff; }
.badge.sale { background: var(--danger); }
.badge.new  { background: #2563eb; }

.badge.popular { background: #f59e0b; }   /* gul/orange */
.badge.glutenfri { background: #16a34a; } /* grön */
.badge.laktosfri { background: #0ea5e9; } /* blå */
.badge.vegansk { background: #10b981; }   /* mörkgrön */
.badge.value { background: #fff8cc; color:#000000;}   

.prod-title { margin: 10px 0 6px; font-weight:700; font-size:18px; line-height:1.3; }
.prod-title a { color: var(--link); text-decoration: none; }
.prod-title a:hover { text-decoration: underline; }
.tag { color: var(--muted); font-size:14px; margin-top:6px; }

/* Prisrad */
.price-row { display:flex; align-items:center; gap:10px; margin:10px 0 0; }
.price-now { font-weight:800; color: var(--accent-dark); }
.price-old { color:#9ca3af; text-decoration: line-through; }
.discount { background:#fee2e2; color:var(--danger); font-weight:700; font-size:12px; padding:2px 6px; border-radius:6px; }

.voting_wrapper.standalone {
  display: flex;
  justify-content: center;  /* centrera innehållet */
  margin: 10px auto;
}


.voting_wrapper .up_button:hover,
.voting_wrapper .down_button:hover {
  transform: scale(1.15);
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}


.voting_wrapper .voting_btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f9fafb; /* ljus bakgrund */
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.voting_wrapper .voting_btn:hover {
  background: #f1f5f9; /* lite mörkare vid hover */
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}




/* Actions (högerkolumn) – röster i fokus */
.votesBox { display:flex; gap:12px; justify-content:flex-end; align-items:center; margin-bottom:6px; }
.voting_wrapper.smaller { display:flex; gap:12px; }
.voting_wrapper .voting_btn { display:flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; }
.up_votes { color: var(--accent-dark); font-weight:800; }
.down_votes { color: var(--danger); font-weight:800; }

/* Köpknapp – använder din .button-klass men stylar den */
a.button {
  display:inline-block; font-weight:900; padding:12px 16px; border-radius:10px;
  background: var(--accent); color:#fff !important; text-decoration:none;
  box-shadow:0 8px 22px rgba(34,197,94,.25);
}
a.button:hover { filter: brightness(1.05); }

.price-change { margin-top:8px; font-size:13px; }
.price-change .previous-price { color: var(--note); }
.vald { margin-top:6px; font-size:13px; color:#555; }

/* Små förbättringar */
@media (max-width: 800px){
  .center-content { width:auto; text-align:left; }
  .votesBox, .voting_wrapper.smaller { justify-content:flex-start; }
}




/* === PATCH: produktlistan === */

/* Gör första <td> (bild + text) till ett litet grid */
.table-list tbody td:first-child {
  display: grid;
  grid-template-columns: 220px 1fr;  /* Bild = 220px, text = resten */
  column-gap: 16px;
  align-items: start;
}

/* Bildblocket får spänna över hela höjden */
.prod-media-wrap{
  grid-column:1;
  grid-row:1 / span 4;
  
}

/* Titel i mitten – egen rad, vertikalt centrerad mot bild */
.prod-title{
  grid-column:2;
  grid-row:1;
  align-self:start;
  margin:0 0 6px;
}
.tag{ grid-column:2; grid-row:2; }    /* USP under titeln */
.price-row{ grid-column:2; grid-row:3; } /* prisrad under USP */

/* Mobil: din befintliga regel gör td:block; stäng av vårt grid där */
@media (max-width: 600px){
  .table-list tbody td:first-child{ display:block; }
}

/* === PATCH: röster – använd PNG, inte ::before-emoji === */
/* Ta bort eventuell tidigare emoji-injektion */
.voting_wrapper .up_button::before,
.voting_wrapper .down_button::before{ content:none !important; }

/* Lägg flex på wrappern så siffror + ikoner radställs snyggt */
.votesBox{ display:flex; gap:12px; align-items:center; justify-content:flex-end; }
.voting_wrapper{ display:flex; gap:12px; margin-left:0; }

/* Behåll dina PNG:er, men låt dem centreras och inte flyta */
.voting_wrapper .voting_btn{
  float:none;                         
  display:flex; align-items:center; gap:6px;
  border:1px solid #e5e7eb; border-radius:10px; padding:6px 8px;
}

/* Ikonstorlek – använd dina redan satta bakgrundsbilder */
.voting_wrapper .voting_btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px 8px;
}

.voting_wrapper .up_button {
  background: url('images/tumme-upp.png') no-repeat center/contain;
  width: 24px;
  height: 24px;
}
.voting_wrapper .down_button {
  background: url('images/tumme-ned.png') no-repeat center/contain;
  width: 24px;
  height: 24px;
}



.up_votes {
  color: #16a34a;
  font-weight: 800;
}
.down_votes {
  color: #ef4444;
  font-weight: 800;
}

/* Actions-kolumnen till höger ska vara högerställd även om tidigare CSS sa center */

td.center-content {
  width: 200px;       /* eller 260px om du vill ha mer plats för knapparna */
  text-align: right;
  vertical-align: top;
}


@media (max-width: 800px){
  td.center-content{ text-align:left; }
}







.cta-row {
  margin: 35px 0 55px 0;
  display: flex;
  gap: 20px;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.3em;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

.cta-link i {
  font-size: 1.4em;
}

/* Ja-knapp */
.cta-link.yes {
  background: #f0fdf4;
  border: 2px solid #22c55e;
  color: #22c55e;
}
.cta-link.yes:hover {
  background: #22c55e;
  color: #fff;
}

/* Nej-knapp */
.cta-link.no {
  background: #fff7ed;
  border: 2px solid #f97316;
  color: #f97316;
}
.cta-link.no:hover {
  background: #f97316;
  color: #fff;
}

@media (max-width: 720px){
  .cta-row{
    flex-direction: column;   /* stapla knapparna */
    gap: 12px;
    margin: 24px 0 40px 0;
  }
  /* Skeletons .one-half.column: se till att de blir fullbredd */
  .cta-row .one-half.column{
    width: 100%;
    margin-left: 0;
  }
  .cta-link{
    font-size: 1.1em;
    padding: 12px 16px;
    border-radius: 8px;
    gap: 10px;
  }
  .cta-link i{ font-size: 1.2em; }
}




/* ---- Anti-overflow baseline ---- */
* { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Sista skyddsnätet om något ändå sticker ut */
html, body { overflow-x: hidden; }

/* ---- Container & rader på mobil ---- */
@media (max-width: 600px){
  .container {
    max-width: 100%;
    width: 100%;
    padding: 0 22px;          /* lite mindre sidopadding på mobil */
    margin: 0 auto;
  }

  /* Skeleton .row har ibland externa marginaler – nollställ på mobil */
  .row { 
    margin: 0 !important; 
  }

  /* Kolumner ska bli fullbredd på mobil */
  .one-half.column,
  .column,
  .columns {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Tabell-listan: stapla cellerna fullt ut och låt actions gå 100% */
  .table-list, 
  .table-list tbody, 
  .table-list tr, 
  .table-list td { 
    display: block; 
    width: 100%;
  }
  .table-list tbody td:first-child { 
    display: block;          /* stänger av vårt grid på mobil */
  }
  td.center-content { 
    width: auto; 
    text-align: left; 
  }
}

/* ---- “Mitten”-texten ska få plats mellan bild & actions på större skärmar ---- */
.table-list tbody td:first-child{
  display: grid;
  grid-template-columns: 220px 1fr;  /* Bild | Text */
  column-gap: 16px;
  align-items: start;
}
td.center-content{
  width: 240px;                       /* kompakt actionskolumn */
  text-align: right;
  vertical-align: top;
}



/* ===== Mobil: gör varje produktrad i tbody till ett "kort" ===== */
@media (max-width: 600px){

  /* Kortkänsla för varje produktrad */
  .table-list tbody tr{
    display:block;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
    padding:12px 12px 14px;
    margin:14px 0;
  }

  /* Ta bort tabellutseendet inuti kortet */
  .table-list tbody td{
    display:block;
    width:100%;
    border:0;
    padding:10px 0;
  }

  /* Första cellen (bild+text) ska inte använda desktop-grid */
  .table-list tbody td:first-child{
    display:block !important;
  }

  /* Bilden mindre och centrerad */
  .prod-media{
    width:180px; height:180px;
    margin:0 auto 10px;
  }
  .prod-media-wrap{ margin:0 auto 6px; }

  /* Textblock staplas */
  .prod-title{ 
    margin:6px 0 6px;
    text-align:center; /* ta bort om du vill ha vänster */
  }
  .tag{ 
    margin-top:6px; 
    text-align:center;
  }
  .price-row{
    justify-content:center;
    margin-top:8px;
  }

  /* Andra cellen (röster + köp) */
  td.center-content{
    text-align:center;
    width:auto;
    padding-top:12px;
    border-top:1px dashed #e5e7eb;
    margin-top:6px;
  }

  .votesBox{
    justify-content:center;
    gap:16px;
    margin:6px 0 10px;
  }
  .voting_wrapper .voting_btn{
    padding:8px 12px;
  }

  /* Köpknappen: block + fullbredd */
  .table-list td .button{
    display:block;
    width:100%;
    padding:14px 18px;
    border-radius:12px;
  }
}