/*
Theme Name: Köplust
Theme URI: https://example.com/koplust
Author: Köplust
Description: Vild, lekfull pastelldesign för Köplust - en fejk-shoppingupplevelse byggd på WooCommerce. Klisterdekaler, lutade kort och färgade skuggor i bubblegum, solgul, mint och lila.
Version: 1.1.3
Requires PHP: 7.4
Text Domain: koplust-theme
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --koplust-pink-bg: #FFF1F5;
  --koplust-plum: #2B1832;
  --koplust-bubble: #FF6F91;
  --koplust-bubble-dark: #E84F73;
  --koplust-sun: #FFD23F;
  --koplust-mint: #7FE7C4;
  --koplust-lilac: #B98EFF;
  --koplust-card: #ffffff;
  --koplust-line: #FFE0E9;
}

*{box-sizing:border-box;}

body.koplust-body{
  margin:0;
  background:var(--koplust-pink-bg);
  color:var(--koplust-plum);
  font-family:'Plus Jakarta Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  margin:0;
}

.mono{font-family:'JetBrains Mono',monospace;}

a{ color: inherit; }

img{ max-width:100%; display:block; }

/* =========================================================
   SITE HEADER
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--koplust-pink-bg);
  border-bottom:3px solid var(--koplust-plum);
}
.koplust-topbar{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 20px;
}
.koplust-logo{
  font-family:'Baloo 2';
  font-weight:800;
  font-size:26px;
  color:var(--koplust-plum);
  flex-shrink:0;
  text-decoration:none;
}
.koplust-logo span{color:var(--koplust-bubble);}
.koplust-nav-links{
  display:flex;
  gap:22px;
  flex:1;
  list-style:none;
  margin:0;
  padding:0;
}
.koplust-nav-links li{ display:flex; }
.koplust-nav-links a{
  color:var(--koplust-plum);
  text-decoration:none;
  font-weight:600;
  font-size:14.5px;
  position:relative;
  padding:4px 0;
}
.koplust-nav-links .current-menu-item a::after,
.koplust-nav-links a.is-current::after{
  content:"";
  position:absolute;
  left:0; bottom:-18px;
  width:100%;
  height:3px;
  background:var(--koplust-bubble);
  border-radius:3px;
}
.koplust-lang-switcher{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  font-size:13px;
}
.koplust-lang-link{
  color:var(--koplust-plum);
  text-decoration:none;
  opacity:.45;
  padding:4px 6px;
  border-radius:6px;
  transition:opacity .15s ease, background .15s ease;
}
.koplust-lang-link:hover{ opacity:.8; }
.koplust-lang-link.is-active{
  opacity:1;
  background:var(--koplust-sun);
}
.koplust-lang-divider{ color:var(--koplust-line); }
@media (max-width:880px){
  .koplust-lang-switcher{ order:-1; margin-left:auto; margin-right:8px; }
}
.koplust-dopamine-pill{
  background:var(--koplust-plum);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  padding:7px 16px;
  border-radius:999px;
  flex-shrink:0;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1);
  position:fixed;
  top:14px;
  right:14px;
  z-index:9000;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
}
.koplust-dopamine-pill.koplust-bump{transform:scale(1.18) rotate(-2deg);}

.koplust-mobile-toggle{
  display:none;
  background:transparent;
  border:2px solid var(--koplust-plum);
  border-radius:10px;
  padding:6px 10px;
  font-size:18px;
  cursor:pointer;
}

@media (max-width: 780px){
  .koplust-nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--koplust-pink-bg);
    border-bottom:3px solid var(--koplust-plum);
    flex-direction:column;
    gap:0;
    padding:10px 20px 16px;
  }
  .koplust-nav-links.koplust-open{display:flex;}
  .koplust-nav-links li{padding:10px 0; border-bottom:1px solid var(--koplust-line);}
  .koplust-nav-links a::after{display:none !important;}
  .koplust-mobile-toggle{display:inline-flex;}
}

/* =========================================================
   BUTTONS
   ========================================================= */
.koplust-btn{
  display:inline-block;
  font-family:'Plus Jakarta Sans';
  font-weight:700;
  font-size:14.5px;
  border:none;
  border-radius:999px;
  padding:13px 28px;
  cursor:pointer;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
  text-decoration:none;
}
.koplust-btn-primary{
  background:var(--koplust-bubble);
  color:#fff;
  box-shadow:0 6px 0 var(--koplust-bubble-dark);
}
.koplust-btn-primary:hover{ transform:translateY(-2px) rotate(-1.5deg); color:#fff; }
.koplust-btn-primary:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--koplust-bubble-dark); }
.koplust-btn-ghost{
  background:transparent;
  color:var(--koplust-plum);
  border:2.5px solid var(--koplust-plum);
}
.koplust-btn-ghost:hover{ background:var(--koplust-plum); color:#fff; }
.koplust-btn-sm{ padding:9px 18px; font-size:13px; }

/* The Köplust plugin's own .koplust-buy-btn gets themed here too */
.koplust-buy-btn{
  background:var(--koplust-bubble) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:9px 18px !important;
  font-weight:700 !important;
  font-size:13px !important;
  box-shadow:0 5px 0 var(--koplust-bubble-dark) !important;
  cursor:pointer;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
}
.koplust-buy-btn:hover{ transform:translateY(-2px) rotate(-1.5deg); }
.koplust-buy-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--koplust-bubble-dark) !important; }
.koplust-buy-btn.koplust-bought,
.koplust-buy-btn--large.koplust-bought{
  background:var(--koplust-mint) !important;
  color:var(--koplust-plum) !important;
  box-shadow:0 5px 0 #4fc89e !important;
}
.koplust-buy-btn--large{
  padding:14px 30px !important;
  font-size:16px !important;
}

/* =========================================================
   HERO
   ========================================================= */
.koplust-hero{
  max-width:1180px;
  margin:0 auto;
  padding:64px 20px 40px;
  text-align:center;
  position:relative;
  overflow:visible;
}
.koplust-hero::before{
  content:"✦";
  position:absolute;
  top:10%; left:6%;
  font-size:32px;
  color:var(--koplust-lilac);
  transform:rotate(-15deg);
}
.koplust-hero::after{
  content:"✦";
  position:absolute;
  top:18%; right:8%;
  font-size:22px;
  color:var(--koplust-mint);
  transform:rotate(20deg);
}
.koplust-hero-eyebrow{
  display:inline-block;
  background:var(--koplust-sun);
  color:var(--koplust-plum);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:0.04em;
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:22px;
  transform:rotate(-2deg);
}
.koplust-hero h1{
  font-size:clamp(46px,9vw,108px);
  line-height:0.92;
  letter-spacing:-0.02em;
}
.koplust-hero h1 .accent{ color:var(--koplust-bubble); display:inline-block; transform:rotate(-3deg); }
.koplust-hero h1 .accent2{ color:var(--koplust-lilac); display:inline-block; transform:rotate(2deg); -webkit-text-stroke:2px var(--koplust-plum); }
.koplust-hero h1 .underline-sun{ position:relative; white-space:nowrap; }
.koplust-hero h1 .underline-sun::after{
  content:"";
  position:absolute;
  left:-2%; right:-2%; bottom:6px;
  height:0.32em;
  background:var(--koplust-sun);
  z-index:-1;
  transform:rotate(-1.5deg);
}
.koplust-hero p{
  max-width:500px;
  margin:26px auto 36px;
  font-size:18.5px;
  color:#5c4760;
  line-height:1.55;
  font-weight:600;
}
.koplust-hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.koplust-hero-orbit{
  position:relative;
  height:90px;
  margin-top:10px;
}
.koplust-orbit-chip{
  position:absolute;
  background:#fff;
  border:2.5px solid var(--koplust-plum);
  border-radius:18px;
  padding:10px 16px;
  font-weight:700;
  font-size:13px;
  box-shadow:4px 4px 0 var(--koplust-plum);
  animation: koplust-float 4.5s ease-in-out infinite;
}
.koplust-orbit-chip:nth-child(1){ left:6%; top:6px; animation-delay:0s; }
.koplust-orbit-chip:nth-child(2){ left:38%; top:30px; animation-delay:0.5s; background:var(--koplust-mint); }
.koplust-orbit-chip:nth-child(3){ right:30%; top:0; animation-delay:1s; background:var(--koplust-lilac); color:#fff; }
.koplust-orbit-chip:nth-child(4){ right:4%; top:34px; animation-delay:1.5s; background:var(--koplust-sun); }
@keyframes koplust-float{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-10px); }
}

/* =========================================================
   CATEGORY GRID
   ========================================================= */
.koplust-cat-grid{
  max-width:1180px;
  margin:50px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
}
.koplust-cat-card{
  background:#fff;
  border:2.5px solid var(--koplust-plum);
  border-radius:20px;
  padding:24px 18px;
  text-align:center;
  box-shadow:5px 5px 0 var(--koplust-plum);
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s;
  cursor:pointer;
  text-decoration:none;
  display:block;
  color:var(--koplust-plum);
}
.koplust-cat-card:nth-child(odd){ transform:rotate(-2deg); }
.koplust-cat-card:nth-child(even){ transform:rotate(1.8deg); }
.koplust-cat-card:hover{ transform:rotate(0deg) translate(-3px,-3px) scale(1.04); box-shadow:8px 8px 0 var(--koplust-bubble); }
.koplust-cat-card .emoji{ font-size:34px; display:block; margin-bottom:10px; }
.koplust-cat-card .name{ font-weight:700; font-size:14.5px; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.koplust-how{ max-width:1180px; margin:60px auto; padding:0 20px; }
.koplust-how h2{ text-align:center; font-size:30px; margin-bottom:38px; }
.koplust-how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.koplust-how-step{ background:#fff; border-radius:20px; padding:28px 22px; border:2.5px solid var(--koplust-line); }
.koplust-how-step .icon{
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  margin-bottom:14px;
}
.koplust-how-step:nth-child(1) .icon{ background:var(--koplust-bubble); color:#fff; }
.koplust-how-step:nth-child(2) .icon{ background:var(--koplust-sun); color:var(--koplust-plum); }
.koplust-how-step:nth-child(3) .icon{ background:var(--koplust-mint); color:var(--koplust-plum); }
.koplust-how-step h3{ font-size:17px; margin-bottom:8px; }
.koplust-how-step p{ font-size:14px; color:#5c4760; line-height:1.5; margin:0; }

@media (max-width:700px){
  .koplust-how-steps{ grid-template-columns:1fr; }
}

/* =========================================================
   ABOUT PAGE / GENERIC PAGE
   ========================================================= */
.koplust-page-hero{
  max-width:780px;
  margin:0 auto;
  padding:60px 20px 20px;
  text-align:center;
}
.koplust-page-hero h1{ font-size:clamp(30px,5vw,46px); }
.koplust-page-content{
  max-width:680px;
  margin:0 auto;
  padding:20px 20px 70px;
  font-size:16.5px;
  line-height:1.7;
  color:#46324a;
}
.koplust-page-content p{ margin-bottom:1.3em; }

.koplust-timeline{
  max-width:680px;
  margin:50px auto;
  padding:0 20px 60px;
  display:flex;
  flex-direction:column;
}
.koplust-timeline-item{ display:flex; gap:20px; padding-bottom:34px; position:relative; }
.koplust-timeline-item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:23px; top:50px;
  width:3px;
  bottom:0;
  background:var(--koplust-line);
}
.koplust-timeline-dot{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--koplust-bubble);
  color:#fff;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  border:3px solid var(--koplust-plum);
}
.koplust-timeline-item:nth-child(2) .koplust-timeline-dot{ background:var(--koplust-sun); color:var(--koplust-plum); }
.koplust-timeline-item:nth-child(3) .koplust-timeline-dot{ background:var(--koplust-lilac); }
.koplust-timeline-item:nth-child(4) .koplust-timeline-dot{ background:var(--koplust-mint); color:var(--koplust-plum); }
.koplust-timeline-text h3{ font-size:17px; margin-bottom:6px; }
.koplust-timeline-text p{ font-size:14.5px; color:#5c4760; margin:0; line-height:1.5; }

/* =========================================================
   SHOP / WOOCOMMERCE ARCHIVE
   ========================================================= */
.koplust-shop-header{ max-width:1180px; margin:0 auto; padding:36px 20px 0; }
.koplust-shop-header h1{ font-size:32px; }

.koplust-shop-filters{
  max-width:1180px;
  margin:0 auto;
  padding:20px 20px;
  display:flex;
  gap:8px;
  overflow-x:auto;
}
.koplust-filter-pill{
  flex-shrink:0;
  background:#fff;
  border:2px solid var(--koplust-plum);
  color:var(--koplust-plum);
  font-weight:600;
  font-size:13px;
  padding:8px 18px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
}
.koplust-filter-pill.is-active,
.koplust-filter-pill:hover{ background:var(--koplust-plum); color:#fff; }

ul.products{
  max-width:1180px;
  margin:0 auto !important;
  padding:0 20px 60px !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;
  list-style:none !important;
}
ul.products li.product{
  background:#fff;
  border:2.5px solid var(--koplust-plum);
  border-radius:20px;
  overflow:hidden;
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s;
  display:flex;
  flex-direction:column;
  position:relative;
  padding:0 !important;
  margin:0 !important;
}
ul.products li.product:nth-child(4n+1){ transform:rotate(-1.4deg); box-shadow:6px 6px 0 var(--koplust-bubble); }
ul.products li.product:nth-child(4n+2){ transform:rotate(1.1deg); box-shadow:6px 6px 0 var(--koplust-sun); }
ul.products li.product:nth-child(4n+3){ transform:rotate(-0.8deg); box-shadow:6px 6px 0 var(--koplust-mint); }
ul.products li.product:nth-child(4n+4){ transform:rotate(1.6deg); box-shadow:6px 6px 0 var(--koplust-lilac); }
ul.products li.product:hover{ transform:rotate(0deg) translate(-4px,-4px) scale(1.02); box-shadow:10px 10px 0 var(--koplust-plum); z-index:5; }

ul.products li.product a.woocommerce-loop-product__link{
  text-decoration:none;
  color:inherit;
  display:block;
}
ul.products li.product img{
  height:160px;
  width:100%;
  object-fit:cover;
}
ul.products li.product .woocommerce-loop-product__title{
  font-weight:700;
  font-size:14.5px;
  line-height:1.3;
  padding:14px 16px 0;
  margin:0;
}
ul.products li.product .price{
  font-family:'Baloo 2';
  font-weight:700;
  font-size:18px;
  padding:8px 16px 14px;
  display:block;
}
ul.products li.product .price del{
  font-family:'Plus Jakarta Sans';
  font-size:11px;
  color:#c2acc4;
  font-weight:600;
  margin-right:6px;
}
ul.products li.product .price ins{
  text-decoration:none;
}
ul.products li.product .koplust-buy-btn{
  margin:0 16px 16px;
  align-self:flex-start;
}
ul.products li.product .onsale{
  position:absolute;
  top:10px; left:10px;
  background:var(--koplust-sun) !important;
  color:var(--koplust-plum) !important;
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  min-height:auto !important;
  min-width:auto !important;
  line-height:1.4 !important;
  text-transform:none !important;
}

.koplust-sticker{
  position:absolute;
  top:-10px; right:-10px;
  width:54px; height:54px;
  background:var(--koplust-bubble);
  color:#fff;
  border:2.5px solid var(--koplust-plum);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-weight:800; font-size:10.5px;
  text-align:center;
  transform:rotate(12deg);
  z-index:6;
  line-height:1.1;
}

/* =========================================================
   SINGLE PRODUCT
   ========================================================= */
.koplust-single-product{
  max-width:980px;
  margin:0 auto;
  padding:40px 20px 70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.koplust-single-product .product-image-wrap{
  border:3px solid var(--koplust-plum);
  border-radius:24px;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--koplust-sun);
  transform:rotate(-1deg);
}
.koplust-single-product .product-image-wrap img{ width:100%; height:auto; display:block; }
.koplust-single-summary h1{ font-size:30px; margin-bottom:10px; }
.koplust-single-summary .price{
  font-family:'Baloo 2';
  font-weight:700;
  font-size:26px;
  display:block;
  margin-bottom:16px;
}
.koplust-single-summary .price del{ font-size:15px; color:#c2acc4; margin-right:8px; font-family:'Plus Jakarta Sans'; }
.koplust-single-summary .woocommerce-product-details__short-description{
  font-size:15.5px;
  line-height:1.6;
  color:#46324a;
  margin-bottom:24px;
}

@media (max-width:760px){
  .koplust-single-product{ grid-template-columns:1fr; }
}

/* =========================================================
   MINA KÖP (order history shortcode override)
   ========================================================= */
.koplust-orders-header{ max-width:780px; margin:0 auto; padding:40px 20px 0; text-align:center; }
.koplust-orders-header h1{ font-size:30px; }
.koplust-orders-header p{ color:#5c4760; margin-top:10px; }

.koplust-history{ max-width:680px; margin:32px auto 70px; padding:0 20px; }
.koplust-history__list{ display:flex; flex-direction:column; gap:14px; }
.koplust-history__row{
  background:#fff;
  border:2.5px dashed var(--koplust-plum);
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:16px;
}
.koplust-history__thumb{ width:60px; height:60px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.koplust-history__thumb img{ width:100%; height:100%; object-fit:cover; }
.koplust-history__info{ flex:1; min-width:0; }
.koplust-history__name{ font-weight:700; font-size:14.5px; }
.koplust-history__meta{ font-size:12px; color:#9c849f; margin-top:3px; }
.koplust-history__price{ text-align:right; flex-shrink:0; font-family:'Baloo 2'; font-weight:700; font-size:16px; }
.koplust-history__paid{ display:block; font-size:10.5px; font-weight:700; color:var(--koplust-mint); margin-top:2px; font-family:'Plus Jakarta Sans'; }
.koplust-history__empty{
  text-align:center;
  padding:50px 20px;
  background:#fff;
  border:2.5px dashed var(--koplust-plum);
  border-radius:18px;
}
.koplust-history__empty p{ margin-bottom:18px; color:#5c4760; }

/* =========================================================
   FOOTER
   ========================================================= */
.koplust-footer{
  text-align:center;
  padding:30px 20px 50px;
  font-size:12.5px;
  color:#b39ab6;
}

/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--koplust-lilac);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}