@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --brand-terracotta:#D06A5A;--brand-terracotta-600:#BA5E50;--brand-terracotta-700:#A55347;
  --brand-sage:#6E8B74;--brand-sage-600:#5F7B65;--brand-sage-700:#506957;
  --brand-gold:#C4A052;--brand-wine:#8B2F39;--brand-dimblue:#7AA6C7;
  --brand-ink:#1E1E24;--brand-ink-700:#26262C;--brand-ink-600:#2F2F35;
  --brand-canvas:#FAF7F3;--brand-muted:#8A817C;
  --bs-primary:var(--brand-terracotta);--bs-primary-rgb:208,106,90;
  --bs-secondary:var(--brand-sage);--bs-secondary-rgb:110,139,116;
  --bs-success:var(--brand-sage);--bs-success-rgb:110,139,116;
  --bs-info:var(--brand-dimblue);--bs-info-rgb:122,166,199;
  --bs-warning:var(--brand-gold);--bs-warning-rgb:196,160,82;
  --bs-danger:var(--brand-wine);--bs-danger-rgb:139,47,57;
  --bs-dark:var(--brand-ink);--bs-dark-rgb:30,30,36;
  --bs-light:var(--brand-canvas);--bs-light-rgb:250,247,243;
  --bs-link-color:var(--brand-terracotta);--bs-link-hover-color:var(--brand-terracotta-700);
  --bs-body-bg:var(--brand-canvas);--bs-body-color:#2a2a31;--bs-border-color:rgba(0,0,0,.08);
  --focus-ring:0 0 0 .25rem rgba(208,106,90,.25);
  --jumbotron-padding-y:1.25rem;
  --ff-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --ff-serif:"Playfair Display",Georgia,"Times New Roman",Times,serif;
  --text-wght:550;--heading-wght:700;--small-wght:500;
  --site-alert-alpha:.13;--site-alert-border-alpha:.16
}
@media (min-width:768px){:root{--jumbotron-padding-y:1.75rem}}
:focus-visible{outline:0;box-shadow:var(--focus-ring);transition:box-shadow .15s ease}

body{font-family:var(--ff-sans);font-variation-settings:"wght" var(--text-wght);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bs-body-bg);color:var(--bs-body-color)}
h1,.h1,.display-1,.display-2,.display-3,h2,.h2{font-family:var(--ff-serif);font-variation-settings:"wght" var(--heading-wght);font-weight:var(--heading-wght);line-height:1.2;letter-spacing:.2px}
h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-family:var(--ff-sans);font-variation-settings:"wght" 600;font-weight:600}
.lead{font-variation-settings:"wght" var(--small-wght);font-weight:var(--small-wght)}
.btn{font-family:var(--ff-sans);font-variation-settings:"wght" 600;font-weight:600}
.navbar-brand{font-family:var(--ff-sans);font-variation-settings:"wght" 700;font-weight:700;letter-spacing:.3px}

.top-menu-link{text-decoration:none;color:var(--brand-muted)!important;font-weight:600}
.navbar{margin-bottom:0;border-bottom:1px solid var(--bs-border-color)}
.navbar .navbar-toggler{border-color:var(--brand-ink-600)}
.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(30,30,36,0.6)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important}
.navbar .brand-logo{display:block;height:34px;width:auto}
@media (min-width:768px){.navbar .brand-logo{height:44px}}

.site-alert{margin:0}
.site-alert section{margin:0;padding:0}
.site-alert .alert{margin:0;padding:.45rem .9rem;border-radius:0;border:0;border-bottom:1px solid rgba(208,106,90,var(--site-alert-border-alpha));box-shadow:none}
.site-alert .alert-info{background-color:rgba(208,106,90,var(--site-alert-alpha))!important;color:#2f3137;font-size:.8em}
.site-alert .alert a{color:var(--bs-primary);font-weight:600;text-decoration:underline}
.site-alert .alert a:hover{opacity:.85}

.jumbotron{padding-top:var(--jumbotron-padding-y);padding-bottom:var(--jumbotron-padding-y);margin-bottom:0;background:linear-gradient(180deg,rgba(208,106,90,.06),rgba(208,106,90,0)),#fff;border-bottom:1px solid var(--bs-border-color)}
@media (min-width:768px){.jumbotron{padding-top:calc(var(--jumbotron-padding-y)*1.2);padding-bottom:calc(var(--jumbotron-padding-y)*1.2)}}
.jumbotron-heading{margin:0 0 .35rem;font-family:var(--ff-serif);font-variation-settings:"wght" var(--heading-wght);font-weight:var(--heading-wght);letter-spacing:.2px;font-size:clamp(1.6rem,2.1vw + .8rem,2.25rem);line-height:1.2}
.jumbotron .lead{margin:0 auto .25rem;max-width:860px;line-height:1.45}

/* === Bildkort – robust höjd med placeholder === */
.img-product,.img-product2{margin:0 auto}
.img-product2{
  position:relative;
  width:100%;
  background:#f4efe9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='none'><rect x='8' y='26' width='112' height='84' rx='8' fill='%23efe8df' stroke='%23d7cfc6'/><rect x='32' y='18' width='24' height='16' rx='4' fill='%23efe8df' stroke='%23d7cfc6'/><circle cx='46' cy='63' r='10' fill='%23d7cfc6'/><path d='M16 92l24-24 20 20 16-16 36 36H16z' fill='%23d7cfc6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:56px;
  overflow:hidden;border-radius:.5rem .5rem 0 0;
}
/* Padding-trick skapar höjd (4:5) även utan aspect-ratio-stöd */
.img-product2::before{content:"";display:block;padding-top:125%}
/* Om aspect-ratio stöds: använd det och neutralisera padding-tricket */
@supports (aspect-ratio: 4 / 5){
  .img-product2{aspect-ratio:4/5}
  .img-product2::before{padding-top:0}
}
/* Barnen fyller ytan */
.img-product2>a,.img-product2>img{position:absolute;inset:0}
.img-product2>a>img,.img-product2>img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}

.card{height:100%;display:flex;flex-direction:column}
.card .card-body{margin-top:auto}

.thumbnail{position:relative;height:400px;overflow:hidden}
.thumbnail img{object-fit:cover;height:100%}
.caption{position:absolute;inset:auto 0 0 0;padding:1rem 1.25rem;background:linear-gradient(180deg,rgba(30,30,36,0) 0%,rgba(30,30,36,.65) 60%,rgba(30,30,36,.85) 100%)}
.caption p{margin:0;color:#fff;font-size:1.25rem;font-weight:600}

.list-group li{margin-bottom:21px!important;font-size:1.1rem}
.text-product{font-size:1.25rem;min-height:60px}
.text-product-toplist{font-size:1rem;min-height:70px!important;padding:0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}

footer{background:#fff;border-top:1px solid var(--bs-border-color)}
footer p{margin-bottom:.25rem}

.bg-brand-dark{background-color:var(--brand-ink)!important;color:#fff}
.bg-brand-light{background-color:#F2ECE6!important}
.bg-list{background-color:#F1EAE3}
a{text-decoration:underline;color:var(--bs-link-color)}
a:hover{color:var(--bs-link-hover-color)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:var(--bs-primary);border-color:var(--bs-primary)}

.page-item.active .page-link{z-index:1;color:#fff;background-color:var(--bs-primary);border-color:var(--bs-primary)}
.page-link{color:var(--bs-primary)}
.page-link:hover{color:var(--bs-primary);opacity:.85}

.btn{font-weight:600;letter-spacing:.2px}
.btn-primary{color:#fff;background-color:var(--bs-primary);border-color:var(--bs-primary)}
.btn-primary:hover{background-color:var(--brand-terracotta-600);border-color:var(--brand-terracotta-600)}
.btn-secondary{color:#fff;background-color:var(--bs-secondary);border-color:var(--bs-secondary)}
.btn-secondary:hover{background-color:var(--brand-sage-600);border-color:var(--brand-sage-600)}
.btn-info{color:#fff;background-color:var(--bs-info);border-color:var(--bs-info);text-decoration:none!important}
.btn-info:hover{opacity:.9}
.btn-outline-info{text-decoration:none}
.btn-xs{padding:.25rem .5rem;font-size:.875rem;line-height:1.2;border-radius:.2rem;margin-top:-5px}

.table-operator{background:#fff}
.table-operator>tbody>tr>td:nth-child(1){font-weight:700;white-space:pre}
.table-operator>tbody>tr>td:nth-child(3){vertical-align:middle}
.thead-dark,.table thead.thead-dark{background-color:var(--brand-sage-700)!important;color:#fff}

.col-subscriptions{margin:auto}
.col-subscriptions h2{margin-top:21px;text-align:center}
@media (max-width:420px){.col-subscriptions h2{font-size:22px}}
.col-subscriptions table{margin:0 auto 30px}
.card.shadow-sm{box-shadow:0 .25rem .75rem rgba(30,30,36,.06)!important}
.col-md-4{margin-bottom:24px}

.product-card-footer .card-body,.card-body.product-meta{padding:.3rem .6rem .18rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.product-card-footer .card-body .text-price,.card-body.product-meta .text-price{margin:0;font-size:.95rem;line-height:1.15}
.product-card-footer .card-body .btn,.card-body.product-meta .btn{padding:.38rem .7rem;line-height:1;border-radius:.55rem;margin:0;font-size:.9rem}
.product-card-footer:last-child,.card-body.product-meta:last-child{margin-bottom:0;padding-bottom:0}
.card-body{padding:0 14px;margin-bottom:0}
.card-text{padding-top:8px}

/* === Rösta-bildyta: alltid lika hög, bilden centrerad === */
.vote_pic {
  position: relative;
  width: 100%;
  height: clamp(360px, 62vh, 780px);  /* trygg höjd på mobil/desktop */
  background: #f4efe9;
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='none'>\
      <rect x='8' y='26' width='112' height='84' rx='8' fill='%23efe8df' stroke='%23d7cfc6'/>\
      <rect x='32' y='18' width='24' height='16' rx='4' fill='%23efe8df' stroke='%23d7cfc6'/>\
      <circle cx='46' cy='63' r='10' fill='%23d7cfc6'/>\
      <path d='M16 92l24-24 20 20 16-16 36 36H16z' fill='%23d7cfc6'/>\
    </svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px;

  border-radius: .75rem;
  overflow: hidden;

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

  user-select: none;
  touch-action: pan-y;    
}

.vote_pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;       
  display: block;
}

.vote_pic_choice {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, background-color .12s ease;
}

.vote_pic_choice::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(22vw,140px);height:min(22vw,140px);background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));opacity:.95}
.vote_pic_choice.m--like::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'><circle cx='60' cy='60' r='56' fill='white'/><circle cx='42' cy='50' r='8' fill='%23000'/><circle cx='78' cy='50' r='8' fill='%23000'/><path d='M30 70c8 14 22 22 30 22s22-8 30-22' stroke='%23000' stroke-width='8' stroke-linecap='round' fill='none'/></svg>")}
.vote_pic_choice.m--reject::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'><circle cx='60' cy='60' r='56' fill='white'/><circle cx='42' cy='50' r='8' fill='%23000'/><circle cx='78' cy='50' r='8' fill='%23000'/><path d='M30 94c8-14 22-22 30-22s22 8 30 22' stroke='%23000' stroke-width='8' stroke-linecap='round' fill='none'/></svg>")}
.vote_pic_choice.m--skip::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'><circle cx='60' cy='60' r='56' fill='white'/><circle cx='42' cy='50' r='8' fill='%23000'/><circle cx='78' cy='50' r='8' fill='%23000'/><path d='M30 84h60' stroke='%23000' stroke-width='8' stroke-linecap='round' fill='none'/></svg>")}

@media (prefers-color-scheme:dark){
  :root{--bs-body-bg:#151518;--bs-body-color:#EAE7E3;--bs-border-color:rgba(255,255,255,.08)}
  header,footer,.card,.section-break,.jumbotron{background:#1A1B1F}
  .bg-list{background-color:#1E1F24}
  .thumbnail{background:#101114}
  .caption{background:linear-gradient(180deg,rgba(15,15,18,0) 0%,rgba(15,15,18,.7) 60%,rgba(15,15,18,.9) 100%)}
  .top-menu-link{color:#CFC7C1!important}
  .page-link{color:var(--bs-primary)}
  .site-alert .alert{border-bottom-color:rgba(255,255,255,.08)}
  .site-alert .alert-info{background-color:rgba(255,255,255,.05)!important;color:#ddd}
}

/* Gör .btn-group “isär” utan att bryta grid */
.btn-group.btn-unjoined {
  gap: .5rem;
}
.btn-group.btn-unjoined > .btn {
  border-radius: .55rem !important; /* ta bort gruppens hopkopplade hörn */
}
.btn-group.btn-unjoined > .btn + .btn {
  margin-left: 0 !important; /* neutralisera BS standardmarginal i grupper */
}

/* Funkar i 5.3+ */
.text-muted { color: #aaa !important; }

.top-menu-link { color: #000 !important; }