/* ---------- IKONEN I HEADERN ---------- */
/* Ligger inne i .urskap-burger-wrap och ärver dess flex-radning och gap. */
.urskap-cart-toggle{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  color:var(--urskap-ink);
  text-decoration:none;
  flex-shrink:0;
  border-radius:50%;
  transition:color .3s ease;
}
.urskap-cart-toggle:hover,
.urskap-cart-toggle:focus-visible{
  color:var(--urskap-accent);
}
.urskap-cart-toggle:focus-visible{
  outline:2px solid var(--urskap-accent);
  outline-offset:2px;
}
.urskap-cart-icon{
  display:block;
  /* Väskan ser tyngre ut än burgarens streck vid samma storlek. */
  transform:translateY(1px);
}

/* Siffran. Elementet finns även när korgen är tom – då döljs bara bubblan,
   så WooCommerces fragment-uppdatering har kvar något att byta ut. */
.urskap-cart-count{
  position:absolute;
  top:-1px; right:-1px;
  min-width:17px;height:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border-radius:9px;
  background:var(--urskap-accent);
  color:var(--urskap-paper);
  font-family:var(--urskap-sans);
  font-size:.62rem;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  transition:transform .3s cubic-bezier(.65,0,.35,1), opacity .2s ease;
}
.urskap-cart-count.is-empty{
  transform:scale(0);
  opacity:0;
}
/* .screen-reader-text kommer från temat, inte från WordPress kärna. Utan den
   här regeln skulle hjälptexten för skärmläsare ritas ut i bubblan om temat
   byts mot ett som saknar klassen. */
.urskap-cart-count .screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- PANELEN ---------- */
.urskap-cart-backdrop{
  position:fixed;
  inset:0;
  background:rgba(var(--urskap-ink-rgb),.5);
  /* Under panelen, över headern (200) och menyoverlayn (150). */
  z-index:290;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.urskap-cart-backdrop.is-open{
  opacity:1;
  visibility:visible;
}

.urskap-cart-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(420px, 100vw);
  z-index:300;
  display:flex;
  flex-direction:column;
  background:var(--urskap-paper);
  color:var(--urskap-ink);
  box-shadow:-20px 0 60px rgba(var(--urskap-ink-rgb),.18);
  transform:translateX(100%);
  /* visibility utöver transform: en panel som bara skjutits ut i sidled kan
     annars ge vågrät scroll i vissa webbläsare. Fördröjningen låter
     utfällningen spela klart innan den göms. */
  visibility:hidden;
  transition:transform .45s cubic-bezier(.65,0,.35,1), visibility 0s linear .45s;
}
.urskap-cart-drawer.is-open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .45s cubic-bezier(.65,0,.35,1), visibility 0s linear 0s;
}

.urskap-cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:26px 28px 18px;
  border-bottom:1px solid var(--urskap-line);
  flex:none;
}
.urskap-cart-title{
  font-family:var(--urskap-display);
  font-size:.92rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  margin-right:-.2em;
}
.urskap-cart-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  margin:-8px -8px -8px 0;
  padding:0;
  background:none;
  border:none;
  border-radius:50%;
  color:var(--urskap-ink);
  cursor:pointer;
  transition:color .3s ease;
  flex:none;
}
.urskap-cart-close:hover{color:var(--urskap-accent);}
.urskap-cart-close:focus-visible{
  outline:2px solid var(--urskap-accent);
  outline-offset:2px;
}

/* Bara listan ska rulla – summa och knappar stannar synliga i botten. */
.urskap-cart-body{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px 28px 28px;
}

/* ---------- WOOCOMMERCES MINI-CART ---------- */
/* Markupen kommer från WooCommerces egen mall – klassnamnen nedan är dess,
   inte våra, och ska inte döpas om. */
.urskap-cart-drawer .woocommerce-mini-cart{
  list-style:none;
  margin:0;
  padding:0;
}
.urskap-cart-drawer .woocommerce-mini-cart-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  /* Plats åt kryss-länken, som ligger absolut placerad till höger. */
  padding:18px 28px 18px 0;
  border-bottom:1px solid var(--urskap-line);
}
.urskap-cart-drawer .woocommerce-mini-cart-item a:not(.remove){
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1 1 auto;
  font-family:var(--urskap-sans);
  font-size:.85rem;
  line-height:1.45;
  color:var(--urskap-ink);
  text-decoration:none;
}
.urskap-cart-drawer .woocommerce-mini-cart-item a:not(.remove):hover{
  color:var(--urskap-accent);
}
.urskap-cart-drawer .woocommerce-mini-cart-item img{
  width:64px;
  height:auto;
  flex:none;
  /* WooCommerce sätter float på bilden i sin egen CSS. */
  float:none;
  margin:0;
}
.urskap-cart-drawer .woocommerce-mini-cart-item .quantity{
  display:block;
  width:100%;
  margin-top:4px;
  font-family:var(--urskap-sans);
  font-size:.8rem;
  color:rgba(var(--urskap-ink-rgb),.6);
}
.urskap-cart-drawer .woocommerce-mini-cart-item .remove{
  position:absolute;
  top:18px; right:0;
  width:24px;height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  line-height:1;
  text-decoration:none;
  color:rgba(var(--urskap-ink-rgb),.4);
  transition:color .3s ease;
}
.urskap-cart-drawer .woocommerce-mini-cart-item .remove:hover{
  color:var(--urskap-accent);
  background:none;
}

.urskap-cart-drawer .woocommerce-mini-cart__empty-message{
  margin:32px 0;
  font-family:var(--urskap-sans);
  font-size:.9rem;
  color:rgba(var(--urskap-ink-rgb),.6);
  text-align:center;
}

.urskap-cart-drawer .woocommerce-mini-cart__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:20px 0;
  border-bottom:1px solid var(--urskap-line);
  font-family:var(--urskap-sans);
  font-size:.95rem;
}
.urskap-cart-drawer .woocommerce-mini-cart__total strong{
  font-family:var(--urskap-display);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.urskap-cart-drawer .woocommerce-mini-cart__buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:20px 0 0;
}
.urskap-cart-drawer .woocommerce-mini-cart__buttons .button{
  display:block;
  width:100%;
  padding:15px 20px;
  border:1px solid var(--urskap-ink);
  border-radius:0;
  background:none;
  color:var(--urskap-ink);
  font-family:var(--urskap-display);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  text-align:center;
  text-decoration:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.urskap-cart-drawer .woocommerce-mini-cart__buttons .button:hover{
  background:var(--urskap-ink);
  color:var(--urskap-paper);
}
/* Kassan är det man oftast vill – den får den fyllda knappen. */
.urskap-cart-drawer .woocommerce-mini-cart__buttons .checkout{
  background:var(--urskap-ink);
  color:var(--urskap-paper);
}
.urskap-cart-drawer .woocommerce-mini-cart__buttons .checkout:hover{
  background:var(--urskap-accent);
  border-color:var(--urskap-accent);
}

/* ---------- MOBIL ---------- */
@media (max-width: 640px){
  .urskap-cart-toggle{
    width:36px;height:36px;
  }
  .urskap-cart-head{padding:20px 22px 16px;}
  .urskap-cart-body{padding:8px 22px 22px;}
}

/* ---------- TILLGÄNGLIGHET ---------- */
@media (prefers-reduced-motion: reduce){
  .urskap-cart-drawer,
  .urskap-cart-backdrop,
  .urskap-cart-count{
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
}

/* ---------- KATEGORITEXTER ---------- */
/* Texten som Urskap_Category_Texts lägger sist i produktbeskrivningen. Ligger
   i den här filen och inte i en egen: den gäller bara produktsidor, och
   cart.css är ändå den fil som laddas när WooCommerce är igång. Fyra rader
   räcker – innehållet är vanlig brödtext som temat redan formar.

   Strecket skiljer texten från redaktörens egen beskrivning. Varje ytterligare
   kategoritext får sitt eget streck, så det syns att de är olika stycken. */
.urskap-category-text{
  margin-top:1.8em;
  padding-top:1.6em;
  border-top:1px solid var(--urskap-line);
}
/* Sista stycket i varje text ska inte lägga på extra luft före nästa streck. */
.urskap-category-text > :last-child{
  margin-bottom:0;
}

/* Ett avslutande streck under den sista texten, vilken den än råkar bli.

   Det ligger på omslaget och inte på sista texten, och det är hela poängen:
   omslaget skrivs bara ut när det finns minst en text att visa, så strecket
   kan aldrig dyka upp på en produkt vars kategorier saknar text. Ett
   :last-child på texten hade gett samma streck men krävt att man höll reda på
   vilken av dem som är sist – och luften under hade fattats.

   Paddingen matchar den ovanför varje text, så avståndet mellan text och
   streck är detsamma i båda ändar. */
.urskap-category-texts{
  padding-bottom:1.6em;
  border-bottom:1px solid var(--urskap-line);
}